/* ============================================
   blog.css
   Extracted from blog.html
   Paste into Flatsome > Theme Options > Custom CSS
   (or into the per-page Custom CSS panel)
   ============================================ */

:root { --promo-h: 48px; }
  @media (max-width: 480px) { :root { --promo-h: 44px; } }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    background: #fcfaf4; color: #1a1a1a; line-height: 1.5;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  .promo-bar {
    background: #1a1a1a;
    color: #ff6b35;
    padding: 12px 0;
    font-size: 14px; font-weight: 600;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 9999;
  }
  .promo-track {
    display: flex; gap: 48px;
    animation: scroll 24s linear infinite;
    white-space: nowrap; width: max-content;
  }
  .promo-track span { display: inline-flex; align-items: center; gap: 12px; }
  /* Wholesale link inside the scrolling marquee — match span layout */
  .promo-track a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
  }
  .promo-track a > .promo-highlight {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  /* Canonical wholesale link in promo bar — styled as orange pill */
  .promo-track .promo-wholesale {
    background: #ff6b35;
    color: #1a1a1a;
  }


  .promo-track .promo-highlight {
    background: #ff6b35; color: #1a1a1a;
    padding: 4px 14px; border-radius: 980px;
    font-weight: 800; letter-spacing: 0.02em;
  }
  .promo-track .promo-highlight iconify-icon { color: #1a1a1a; }
  .promo-track iconify-icon { color: #1f5d3f; }
  @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

  header {
    position: sticky;
    top: var(--promo-h, 48px);
    z-index: 9998;
    background: #fcfaf4;
    border-bottom: 3px solid #1a1a1a;
  }
  .nav-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 16px 32px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .logo {
    display: inline-flex; align-items: center;
    background: #1f5d3f; color: #fcfaf4;
    padding: 8px 22px;
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    line-height: 1; transition: background 0.2s;
  }
  .logo:hover { background: #ff6b35; }
  .logo-stack { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; }
  .logo-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; opacity: 0.85; margin: 1px 0; }
  .logo-name { font-size: 19px; font-weight: 900; font-style: italic; letter-spacing: -0.01em; margin: 1px 0; }
  .nav-links {
    display: flex; gap: 14px; list-style: none;
  }
  .nav-links a {
    font-size: 14px; font-weight: 700;
    color: #1a1a1a;
    padding: 6px 10px;
    border-radius: 980px;
    transition: background 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px;
    min-width: 100px;
    text-align: center;
    box-sizing: border-box;
  }
  /* Narrower laptops: drop min-width so 6 items fit comfortably with sidebar icons */
  @media (max-width: 1200px) {
    .nav-links { gap: 8px; }
    .nav-links a { min-width: 0; padding: 6px 10px; }
  }
  .nav-links a:hover, .nav-links a.active { background: #ff6b35; }
  .nav-icons { display: flex; gap: 14px; align-items: center; }
  .nav-icons iconify-icon { font-size: 22px; color: #1a1a1a; cursor: pointer; }
  .cart-btn {
    background: #1a1a1a; color: #fcfaf4;
    padding: 10px 16px; border-radius: 980px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
  }
  .cart-btn:hover { background: #ff6b35; }
  .cart-btn iconify-icon { color: #fcfaf4; font-size: 18px; }
  .cart-count {
    background: #ff6b35; color: #1a1a1a;
    font-size: 11px; font-weight: 700;
    min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ============================================
     BLOG INDEX
     ============================================ */

  /* Hero (compact) */
  .blog-hero {
    padding: 56px 32px 40px;
    border-bottom: 3px solid #1a1a1a;
    position: relative;
    overflow: hidden;
    background: #ede4d3;
  }
  .blog-hero::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: repeating-linear-gradient(
      90deg,
      #1a1a1a 0, #1a1a1a 12px,
      #ff6b35 12px, #ff6b35 24px
    );
  }
  .blog-hero-inner {
    max-width: 1400px; margin: 0 auto;
  }
  .breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
    color: #6b6b6b;
    margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .breadcrumb a:hover { color: #ff6b35; }
  .breadcrumb iconify-icon { font-size: 10px; }
  .hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: #1a1a1a; color: #ff6b35;
    border-radius: 980px;
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    transform: rotate(-1deg);
  }
  .blog-hero h1 {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    margin-bottom: 16px;
  }
  .blog-hero h1 .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .blog-hero p {
    font-size: 17px;
    color: #555;
    max-width: 600px;
    line-height: 1.55;
  }

  /* Category pills */
  .blog-cats {
    max-width: 1200px; margin: 0 auto;
    padding: 32px 32px 0;
    display: flex; gap: 10px; flex-wrap: wrap;
  }
  .blog-cat {
    padding: 10px 20px;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 980px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .blog-cat:hover { background: #ff6b35; }
  .blog-cat.active {
    background: #1a1a1a; color: #ff6b35;
  }
  .blog-cat .count { font-size: 11px; opacity: 0.65; font-weight: 600; }

  /* Featured post (giant card at top) */
  .featured-post-section {
    max-width: 1400px; margin: 0 auto;
    padding: 40px 32px 0;
  }
  .featured-post {
    background: #1a1a1a;
    color: #fcfaf4;
    border: 3px solid #1a1a1a;
    border-radius: 32px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
  }
  .featured-post:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 #ff6b35;
  }
  .featured-post-img {
    background-size: cover; background-position: center;
    min-height: 380px;
    position: relative;
  }
  .featured-post-img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 60%, rgba(0,0,0,0.5) 100%);
  }
  .featured-pin {
    position: absolute;
    top: 24px; left: 24px;
    z-index: 2;
    padding: 8px 16px;
    background: #ff6b35;
    color: #1a1a1a;
    border-radius: 980px;
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.08em;
    transform: rotate(-2deg);
  }
  .featured-content {
    padding: 40px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .featured-cat {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(255, 107, 53, 0.15);
    color: #ff6b35;
    border-radius: 980px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    text-transform: uppercase;
    align-self: flex-start;
  }
  .featured-post h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .featured-post p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 248, 240, 0.7);
    margin-bottom: 14px;
  }
  .featured-meta {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: rgba(255, 248, 240, 0.6);
    font-weight: 600;
  }
  .featured-meta .dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255, 248, 240, 0.4);
  }
  .featured-read {
    display: inline-flex; align-items: center; gap: 8px;
    color: #ff6b35;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Posts grid */
  .posts-section {
    max-width: 1400px; margin: 0 auto;
    padding: 56px 32px 80px;
  }
  .posts-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap; gap: 16px;
  }
  .posts-header h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .posts-header h2 .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .sort-select {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 980px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
  }
  .sort-select:hover { background: #ff6b35; color: #1a1a1a; }

  .posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .post-card {
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
    cursor: pointer;
  }
  .post-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 #1a1a1a;
  }
  .post-img {
    height: 220px;
    border-bottom: 3px solid #1a1a1a;
    background-size: cover; background-position: center;
    position: relative;
  }
  .post-img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
  }
  .post-cat {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 2;
    padding: 5px 12px;
    background: #ff6b35;
    color: #1a1a1a;
    border-radius: 980px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    transform: rotate(-2deg);
  }
  .post-body { padding: 24px; }
  .post-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px;
    color: #6b6b6b;
    margin-bottom: 12px;
    font-weight: 600;
  }
  .post-meta .dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #6b6b6b;
  }
  .post-card h3 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .post-card p {
    font-size: 14px;
    line-height: 1.55;
    color: #555;
    margin-bottom: 16px;
  }
  .post-read {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #ff6b35;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Load more */
  .load-more {
    margin: 56px auto 0;
    display: flex; justify-content: center;
  }
  .load-more button {
    padding: 16px 32px;
    background: #1a1a1a;
    color: #ff6b35;
    border-radius: 980px;
    font-size: 14px; font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 4px 4px 0 #ff6b35;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .load-more button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #ff6b35;
  }

  /* Newsletter strip */
  .newsletter-strip {
    background: #1a1a1a;
    color: #fcfaf4;
    padding: 12px 32px;
    border-top: 3px solid #1a1a1a;
    text-align: center;
  }
  .newsletter-inner {
    max-width: 700px; margin: 0 auto;
  }
  .newsletter-strip h2 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 16px;
  }
  .newsletter-strip h2 .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .newsletter-strip p {
    font-size: 16px;
    color: rgba(255, 248, 240, 0.7);
    margin-bottom: 28px;
    line-height: 1.55;
  }
  .newsletter-form {
    display: flex; gap: 10px;
    max-width: 480px; margin: 0 auto;
  }
  .newsletter-form input {
    flex: 1;
    height: 52px;
    padding: 0 22px;
    background: #fcfaf4;
    border: 2px solid #fcfaf4;
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    color: #1a1a1a;
    outline: none;
  }
  .newsletter-form input:focus { border-color: #ff6b35; }
  .newsletter-form button {
    padding: 0 28px;
    height: 52px;
    background: #ff6b35;
    color: #1a1a1a;
    border-radius: 14px;
    font-size: 14px; font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .newsletter-form button:hover { background: #fcfaf4; }

  /* Footer */
  footer {
    background: #1a1a1a;
    color: rgba(255, 248, 240, 0.7);
    padding: 14px 32px 8px;
    font-size: 14px;
  }
  .footer-grid {
    max-width: 1400px; margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 64px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 248, 240, 0.1);
  }
  .footer-brand .logo { margin-bottom: 20px; }
  .footer-brand p { margin: 20px 0 24px; line-height: 1.6; max-width: 320px; }
  .footer-socials { display: flex; gap: 10px; }
  .footer-socials a {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 248, 240, 0.1);
    display: flex; align-items: center; justify-content: center;
    color: #ff6b35; font-size: 18px;
  }
  .footer-socials a:hover { background: #ff6b35; color: #1a1a1a; }
  .footer-col h5 {
    font-size: 13px; font-weight: 800;
    color: #ff6b35; margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 10px; }
  .footer-col a:hover { color: #fcfaf4; }
  .footer-bottom {
    max-width: 1400px; margin: 18px auto 0;
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    font-size: 13px;
  }
  .footer-bottom-links { display: flex; gap: 24px; }

  /* Responsive */
  
  @media (max-width: 820px) { .nav-links { display: none; } }
@media (max-width: 1024px) {
    
    .featured-post { grid-template-columns: 1fr; }
    .featured-post-img { min-height: 280px; }
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  }
  @media (max-width: 640px) {
    .nav-icons iconify-icon:not(.cart-btn iconify-icon) { display: none; }
    .blog-hero { padding: 28px 16px 20px; }
    .featured-post-section, .posts-section { padding-left: 16px; padding-right: 16px; padding-top: 20px; }
    .featured-content { padding: 18px 16px; }
    .featured-content h2 { font-size: 18px; line-height: 1.2; margin-bottom: 8px; }
    .featured-content p { font-size: 13px; margin-bottom: 10px; }

    /* Category filters: horizontal scroll on one row */
    .blog-cats {
      padding: 20px 16px 0;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scroll-snap-type: x mandatory;
      gap: 6px;
    }
    .blog-cats::-webkit-scrollbar { height: 4px; }
    .blog-cats::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.2); border-radius: 4px; }
    .blog-cat {
      flex: 0 0 auto;
      scroll-snap-align: start;
      white-space: nowrap;
      font-size: 11px;
      padding: 7px 12px;
      gap: 5px;
    }
    .blog-cat iconify-icon { font-size: 13px; }

    /* Posts grid: 2 columns of small cards — title + meta only */
    .posts-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .post-card { border-radius: 14px; border-width: 2px; }
    .post-img { display: none; }
    .post-body { padding: 12px 10px; }
    .post-meta { font-size: 10px; gap: 4px; margin-bottom: 6px; }
    .post-meta .dot { width: 2px; height: 2px; }
    .post-card h3 {
      font-size: 13px;
      line-height: 1.2;
      margin-bottom: 6px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .post-card p { display: none; }
    .post-read { display: none; }

    .newsletter-form { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  /* ============== UNIFIED DROPDOWN NAV ============== */
  .nav-item { position: relative; }
  .nav-trigger { display: inline-flex; align-items: center; gap: 4px; }
  .nav-trigger .nav-caret {
    font-size: 11px;
    transition: transform 0.2s;
  }
  .nav-item.has-dropdown:hover .nav-trigger .nav-caret { transform: rotate(180deg); }
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 320px;
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 20px;
    box-shadow: 6px 6px 0 #1a1a1a;
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
  }
  .nav-dropdown::before {
    content: "";
    position: absolute;
    top: -17px; left: 0; right: 0;
    height: 17px;
  }
  .nav-dropdown::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 14px; height: 14px;
    background: #fff;
    border-top: 3px solid #1a1a1a;
    border-left: 3px solid #1a1a1a;
  }
  .nav-dropdown-narrow { width: 300px; }
  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .dd-item {
    display: flex !important; align-items: center; gap: 12px;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    transition: background 0.15s !important;
    text-decoration: none;
  }
  .dd-item:hover { background: rgba(255, 107, 53, 0.08) !important; }
  .dd-item > iconify-icon {
    font-size: 22px;
    color: #1a1a1a;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
  }
  .dd-item.dd-item-all > iconify-icon,
  .dd-item.dd-item-highlight > iconify-icon { color: #ff6b35; }
  .dd-item > div { flex: 1; min-width: 0; }
  .dd-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 2px;
    display: flex; align-items: center; gap: 8px;
  }
  .dd-sub {
    font-size: 12px;
    font-weight: 500;
    color: #6b6b6b;
    line-height: 1.3;
  }
  /* Hide subtitles inside dropdown items (cleaner, title-only look) */
  .nav-dropdown .dd-sub { display: none; }
  .nav-dropdown .dd-title { margin-bottom: 0; }
  .dd-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #ff6b35;
    color: #1a1a1a;
    border-radius: 980px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.05em;
  }
  .dd-divider {
    height: 1px;
    background: #f0e8d8;
    margin: 6px 8px;
  }
  .dd-item-highlight { background: rgba(255, 107, 53, 0.06) !important; }
  .dd-item-highlight:hover { background: rgba(255, 107, 53, 0.12) !important; }

  /* =========== MOBILE HAMBURGER + DRAWER =========== */
  .mobile-nav-toggle {
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .mobile-nav-toggle:hover { background: #1a1a1a; }
  .mobile-nav-toggle:hover .hamburger-line { background: #fcfaf4; }
  .hamburger-lines {
    width: 20px; height: 14px;
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .hamburger-line {
    width: 100%; height: 2.5px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
  }
  .mobile-nav-toggle.is-open .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .mobile-nav-toggle.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav-toggle.is-open .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .mobile-drawer-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(26, 26, 26, 0.55);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.25s;
  }
  .mobile-drawer-backdrop.is-open {
    display: block;
    opacity: 1;
  }
  .mobile-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 88%; max-width: 380px;
    background: #fcfaf4;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex; flex-direction: column;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  }
  .mobile-drawer.is-open { transform: translateX(0); }
  .mobile-drawer-head {
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #1a1a1a;
    background: #1a1a1a; color: #fcfaf4;
  }
  .mobile-drawer-head .drawer-logo {
    display: inline-flex; align-items: center;
    background: #1f5d3f; color: #fcfaf4;
    padding: 6px 18px;
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    line-height: 1;
  }
  .mobile-drawer-head .drawer-logo-name {
    font-size: 16px; font-weight: 900; font-style: italic;
  }
  .mobile-drawer-close {
    width: 40px; height: 40px;
    background: transparent;
    border: 2px solid rgba(255, 248, 240, 0.4);
    border-radius: 10px;
    color: #fcfaf4;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .mobile-drawer-close iconify-icon { font-size: 18px; }
  .mobile-drawer-section {
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    padding: 8px 0;
  }
  .md-section-label {
    padding: 14px 22px 6px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b6b6b;
  }
  .md-link {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    min-height: 48px;
    color: #1a1a1a;
    font-size: 16px; font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
  }
  .md-link:active, .md-link:hover { background: #ede4d3; }
  .md-link iconify-icon {
    font-size: 22px; color: #1f5d3f;
    flex-shrink: 0;
  }
  .md-link.featured {
    background: #1f5d3f; color: #fcfaf4;
    margin: 6px 14px;
    border-radius: 14px;
    min-height: 56px;
  }
  .md-link.featured iconify-icon { color: #ff6b35; }
  .md-link.tg {
    background: linear-gradient(135deg, #229ED9 0%, #1a1a1a 100%);
    color: #fcfaf4;
    margin: 6px 14px;
    border-radius: 14px;
    min-height: 56px;
  }
  .md-link.tg iconify-icon { color: #fcfaf4; }
  .md-sub { font-size: 12px; color: rgba(255, 248, 240, 0.7); font-weight: 500; margin-top: 2px; display: block; }
  .md-link .md-link-text { line-height: 1.2; }
  .md-link .md-link-text small { font-size: 11px; color: #6b6b6b; font-weight: 500; display: block; margin-top: 2px; }
  .md-link.featured .md-link-text small,
  .md-link.tg .md-link-text small { color: rgba(255, 248, 240, 0.75); }
  .mobile-drawer-foot {
    margin-top: auto;
    padding: 22px;
    border-top: 1px solid rgba(26, 26, 26, 0.1);
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .md-foot-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px;
    min-height: 50px;
    background: #1a1a1a; color: #fcfaf4;
    border-radius: 12px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
  }
  .md-foot-btn.primary { background: #ff6b35; color: #1a1a1a; }
  .md-foot-btn iconify-icon { font-size: 18px; }
  body.drawer-open { overflow: hidden; }
  @media (max-width: 820px) { .mobile-nav-toggle { display: inline-flex; } }

  
  /* =========== MOBILE TAP TARGETS (Apple/Google min 44x44) =========== */
  @media (max-width: 768px) {
    button:not(.hamburger-line):not(.mbb-qty button),
    .btn-primary, .btn-secondary,
    .quick-add, .bundle-cta, .vault-cta,
    .apply-submit, .add-btn,
    .nav-icons a, .md-foot-btn,
    .help-cta-btn {
      min-height: 44px;
    }
    /* Larger touch target on small icons */
    .nav-icons iconify-icon { padding: 8px; }
    /* Avoid iOS zoom on form-field focus by ensuring 16px font-size */
    input, select, textarea { font-size: 16px !important; }
  }

  
  /* === Responsive nav — keep horizontal links visible at half-screen widths === */
  /* Universal: prevent nav items from wrapping or shrinking weirdly */
  .nav-links a { white-space: nowrap; }
  .logo, .nav-icons { flex-shrink: 0; }
  .nav-links { flex-wrap: nowrap; min-width: 0; }

  /* Tier 1: medium screens (981-1200px) — slight compression */
  @media (max-width: 1200px) {
    .nav-links { gap: 16px; }
    .nav-links a { padding: 6px 11px; font-size: 13.5px; }
    .nav-inner { padding: 14px 24px; }
    .logo-name { font-size: 18px; }
    .nav-icons { gap: 12px; }
    .cart-btn { padding: 9px 14px; font-size: 13px; }
  }

  /* Tier 2: narrow desktops & half-screens (821-980px) — aggressive compression */
  @media (max-width: 980px) {
    .nav-inner { padding: 12px 18px; gap: 8px; }
    .nav-links { gap: 4px; }
    .nav-links a { padding: 5px 8px; font-size: 12.5px; }
    .nav-trigger .nav-caret { font-size: 10px; margin-left: 2px; }
    .logo { padding: 6px 14px; }
    .logo-name { font-size: 16px; }
    .logo-tag { font-size: 7.5px; letter-spacing: 0.14em; }
    .nav-icons { gap: 6px; }
    /* Cart button: icon + count only (hide "Bag" label) */
    .cart-btn { padding: 8px 12px; font-size: 0; gap: 6px; }
    .cart-btn iconify-icon { font-size: 18px; }
    .cart-count { font-size: 11px; min-width: 18px; height: 18px; padding: 0 4px; }
    /* Hide the search icon — rarely used, makes room */
    .nav-icons > iconify-icon:first-child { display: none; }
    /* Dropdown: align to right edge so it doesn't overflow on narrow screens */
    .nav-item.has-dropdown:last-of-type .nav-dropdown,
    .nav-item.has-dropdown:nth-last-of-type(2) .nav-dropdown {
      left: auto; right: 0; transform: translateY(-10px);
    }
    .nav-item.has-dropdown:last-of-type:hover .nav-dropdown,
    .nav-item.has-dropdown:nth-last-of-type(2):hover .nav-dropdown {
      transform: translateY(0);
    }
    .nav-item.has-dropdown:last-of-type .nav-dropdown::after,
    .nav-item.has-dropdown:nth-last-of-type(2) .nav-dropdown::after {
      left: auto; right: 26px; transform: rotate(45deg);
    }
  }

/* ============== SHOP DROPDOWN: 3-COLUMN MEGA-MENU (Category + Feel + More) ============== */
.nav-dropdown.nav-dropdown-mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  min-width: 480px;
  padding: 18px;
  align-items: start;
  /* Override base .nav-dropdown centering — anchor to left of trigger so wide panel stays on-screen */
  left: 0;
  transform: translateX(0) translateY(-10px);
}
.nav-item.has-dropdown:hover .nav-dropdown.nav-dropdown-mega,
.nav-item.has-dropdown:focus-within .nav-dropdown.nav-dropdown-mega {
  transform: translateX(0) translateY(0);
}
.nav-dropdown.nav-dropdown-mega::after {
  /* Arrow tip aligned with Shop trigger center instead of dropdown center */
  left: 32px;
  transform: rotate(45deg);
}
.nav-dropdown.nav-dropdown-mega .dd-col {
  display: flex;
  flex-direction: column;
}
.nav-dropdown.nav-dropdown-mega .dd-col-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #6b6b6b;
  padding: 0 12px 8px;
  text-transform: uppercase;
  border-bottom: 1px dashed #d8d2c4;
  margin-bottom: 6px;
}
.nav-dropdown.nav-dropdown-mega .dd-item { padding: 8px 12px; }
.nav-dropdown.nav-dropdown-mega .dd-item .dd-title { font-size: 13px; }
.nav-dropdown.nav-dropdown-mega .dd-item .dd-sub { font-size: 11px; }

  /* ====================================================================
     Accessibility: respect prefers-reduced-motion (WCAG 2.3.3)
     ==================================================================== */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .promo-track {
      animation: none !important;
      transform: translateX(0) !important;
    }
    .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  }


  /* === Logo image override (replaces .logo-stack text mark) === */
  .logo {
    background: transparent !important;
    padding: 0 !important;
    clip-path: none !important;
    color: inherit !important;
    transition: transform 0.2s;
  }
  .logo:hover { background: transparent !important; transform: translateY(-1px); }
  .logo-img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 200px;
  }
  /* Footer logo: invert to light variant on dark background */
  .footer-brand .logo-img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  @media (max-width: 768px) {
    .logo-img { height: 44px; max-width: 170px; }
  }
  @media (max-width: 480px) {
    .logo-img { height: 38px; max-width: 140px; }
  }


  /* ====================================================================
     MOBILE E-COMMERCE NORMALIZATION (standard phone patterns)
     ==================================================================== */

  /* ≤640px (phone) — 2-col product grids, tighter cards, compact hero */
  @media (max-width: 640px) {
    /* Product grids — 2 columns (standard e-comm on phone, NOT single col) */
    .products-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px !important;
    }
    /* Product cards — compact, tighter */
    .product-card {
      border-radius: 14px !important;
      border-width: 2px !important;
    }
    .product-image {
      height: 130px !important;
    }
    .product-body {
      padding: 10px !important;
    }
    .product-category {
      font-size: 10px !important;
      margin-bottom: 2px !important;
    }
    .product-name {
      font-size: 13px !important;
      margin-bottom: 2px !important;
      line-height: 1.15 !important;
    }
    .product-meta {
      font-size: 10px !important;
      margin-bottom: 4px !important;
    }
    .product-meta > span {
      font-size: 10px !important;
    }
    .product-rating {
      font-size: 10px !important;
    }
    .product-price {
      font-size: 14px !important;
    }
    .quick-add,
    .related-card-add {
      font-size: 11px !important;
      padding: 5px 8px !important;
    }
    .product-footer {
      gap: 4px !important;
    }
    .product-badge {
      font-size: 9px !important;
      padding: 3px 7px !important;
      top: 6px !important;
      left: 6px !important;
    }
    .product-fav {
      top: 6px !important;
      right: 6px !important;
    }
    /* Section padding — tighter */
    section {
      padding: 32px 14px !important;
    }
    /* Page-hero — tighter */
    .page-hero,
    .contact-hero,
    .about-hero,
    .bundles-hero,
    .faq-hero,
    .reviews-hero,
    .rewards-hero,
    .category-hero,
    .post-hero,
    .blog-hero {
      padding: 28px 16px 16px !important;
    }
    /* Headlines slightly tighter on mobile but readable */
    .page-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .bundles-hero h1,
    .faq-hero h1,
    .reviews-hero h1,
    .rewards-hero h1,
    .category-hero h1,
    .post-hero h1,
    .blog-hero h1 {
      font-size: clamp(28px, 9vw, 42px) !important;
    }
    /* Buttons — bigger tap targets, full-ish width */
    .btn-primary,
    .btn-secondary,
    .vault-cta,
    .hero-cta-primary,
    .welcome-cta {
      padding: 12px 18px !important;
      font-size: 14px !important;
    }
    /* Container padding */
    .container {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
  }

  /* ≤480px (small phone) — even tighter */
  @media (max-width: 480px) {
    .product-image { height: 110px !important; }
    .product-name { font-size: 12px !important; }
    .product-price { font-size: 13px !important; }
    section { padding: 28px 12px !important; }
  }

  /* ≤380px (iPhone SE) — minimum sane */
  @media (max-width: 380px) {
    .products-grid {
      gap: 8px !important;
    }
    .product-image { height: 95px !important; }
    .product-body { padding: 8px !important; }
    .product-name { font-size: 11px !important; }
    .product-price { font-size: 12px !important; }
  }

/* ==========================================================================
   Shopify-style mobile normalization (appended for site-wide consistency)
   - 2-col product grids on phone (not 1-col)
   - 44px+ tap targets
   - Horizontal-scroll rails for related products / category chips / trust badges
   - Single-col forms on small screens
   - No emoji-only headings; readable type at small sizes
   ========================================================================== */
@media (max-width: 768px) {
  .products-grid,
  .product-grid,
  .related-grid,
  .related-products,
  .you-may-also-like { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .collections-grid,
  .categories-grid,
  .feel-grid,
  .effects-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .bundle-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
  /* Horizontal scroll rails — trust badges, category chips, related products on PDP */
  .badge-rail,
  .chip-rail,
  .pill-rail,
  .filter-chips,
  .trust-marquee,
  .category-chips {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    padding: 4px 22px 8px !important;
    margin: 0 -22px !important;
    scroll-snap-type: x mandatory !important;
  }
  .badge-rail::-webkit-scrollbar,
  .chip-rail::-webkit-scrollbar,
  .pill-rail::-webkit-scrollbar,
  .filter-chips::-webkit-scrollbar,
  .trust-marquee::-webkit-scrollbar,
  .category-chips::-webkit-scrollbar { display: none !important; }
}
@media (max-width: 640px) {
  section { padding: 40px 22px !important; }
  .nav-inner { padding: 14px 20px !important; }
  /* Tap targets — Shopify minimum is 44px */
  .btn-primary,
  .btn-secondary,
  .btn,
  button[type="submit"],
  .add-to-cart,
  .cta { min-height: 44px !important; padding: 12px 18px !important; }
  /* Product cards on phone — Shopify style */
  .product-card { border-radius: 14px !important; border-width: 2px !important; }
  .product-image,
  .product-thumb { height: 130px !important; }
  .product-body { padding: 10px !important; }
  .product-name,
  .product-title { font-size: 13px !important; line-height: 1.3 !important; }
  .product-price { font-size: 14px !important; }
  /* Single-col forms on phone */
  .form-grid,
  .form-row,
  .checkout-grid,
  .cart-grid,
  .account-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* Headings — keep readable on phone */
  h1, .h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.05 !important; }
  h2, .h2 { font-size: clamp(22px, 6.5vw, 32px) !important; line-height: 1.1 !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Hero CTAs stack full-width on phone */
  .hero-ctas,
  .cta-group { flex-direction: column !important; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary,
  .cta-group .btn { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   PROMO BAR — ONE horizontal line on every viewport (no marquee, no wrap)
   Overrides the old auto-scroll animation. Long copy on desktop, short on phone.
   ==================================================================== */
.promo-bar {
  padding: 10px 12px !important;
  overflow: hidden !important;
}
.promo-track {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: 1400px;
  margin: 0 auto !important;
  animation: none !important;
}
.promo-track > span,
.promo-track > a { flex-shrink: 0 !important; }
.promo-track .short { display: none; }
.promo-track .long { display: inline; }
@media (max-width: 820px) {
  .promo-bar { padding: 8px 10px !important; font-size: 11px !important; }
  .promo-track { gap: 14px !important; }
  .promo-track .promo-highlight { padding: 2px 8px !important; font-size: 11px !important; }
  .promo-track .short { display: inline; }
  .promo-track .long { display: none; }
}
@media (max-width: 480px) {
  .promo-bar { padding: 7px 6px !important; font-size: 10px !important; }
  /* Tightened: gap 10→7 + highlight pad 7→5 to fit all 3 items in 390px viewport */
  .promo-track { gap: 7px !important; overflow: hidden !important; max-width: 100% !important; }
  .promo-track .promo-highlight { padding: 2px 6px !important; font-size: 10px !important; }
  .promo-track iconify-icon { font-size: 11px !important; }
}
@media (max-width: 380px) {
  .promo-bar { padding: 6px 6px !important; font-size: 9px !important; }
  .promo-track { gap: 7px !important; }
  .promo-track .promo-highlight { padding: 2px 6px !important; font-size: 9px !important; }
}

/* ============== BLOG SHOP RECS ("You might also like") ============== */
.blog-shop-recs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 32px 16px;
}
.blog-shop-recs-inner { max-width: 1200px; margin: 0 auto; }
.blog-shop-recs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.blog-shop-recs-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.blog-shop-recs-head h2 .accent {
  background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blog-shop-recs-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800;
  color: #ff6b35;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.blog-shop-recs-link:hover { color: #1a1a1a; }
.blog-shop-recs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.blog-shop-card {
  background: #fff;
  border: 3px solid #1a1a1a;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #1a1a1a;
  display: block;
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-shop-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 #1a1a1a;
}
.blog-shop-img {
  height: 160px;
  border-bottom: 3px solid #1a1a1a;
  position: relative;
}
.blog-shop-tag {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: #1a1a1a;
  color: #ff6b35;
  border-radius: 980px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.blog-shop-body { padding: 16px; }
.blog-shop-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.blog-shop-meta {
  font-size: 12px;
  color: #6b6b6b;
  margin-bottom: 12px;
}
.blog-shop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.blog-shop-price { font-size: 18px; font-weight: 900; font-style: italic; }
.blog-shop-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  background: #1a1a1a;
  color: #ff6b35;
  border: none;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.blog-shop-add:hover { background: #ff6b35; color: #1a1a1a; }
@media (max-width: 1024px) {
  .blog-shop-recs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Horizontal scroll rail on mobile — customers swipe for more */
  .blog-shop-recs { padding: 32px 16px 8px; }
  .blog-shop-recs-head { margin-bottom: 14px; }
  .blog-shop-recs-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 8px;
  }
  .blog-shop-recs-grid::-webkit-scrollbar { height: 4px; }
  .blog-shop-recs-grid::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.2); border-radius: 4px; }
  .blog-shop-card {
    flex: 0 0 60%;
    scroll-snap-align: start;
    border-radius: 14px;
    border-width: 2px;
  }
  .blog-shop-img { height: 110px; }
  .blog-shop-tag { font-size: 9px; padding: 2px 7px; }
  .blog-shop-body { padding: 10px; }
  .blog-shop-name { font-size: 13px; }
  .blog-shop-meta { font-size: 10px; margin-bottom: 8px; }
  .blog-shop-price { font-size: 14px; }
  .blog-shop-add { font-size: 10px; padding: 5px 9px; }
}

/* MOBILE-OVERFLOW-GUARD */
@media (max-width: 820px) {
  html, body { overflow-x: hidden !important; }
}


/* Dark variant of .dd-tag — dark bg, orange text. Used on the Bulk dropdown
   item so it visually distinguishes from the Bundles tag (orange bg, dark text).
   Matches the BULK badge palette used on the bulk product cards. */
.dd-tag.dd-tag-dark {
  background: #1a1a1a;
  color: #ff6b35;
}

/* ============================================================
   THE DROP — Media gallery page (replaces the old blog page).
   Sticker-card grid of videos / press / featured / tastemaker tiles.
   Filter chips at top, follow-us CTA strip at bottom.
   ============================================================ */
.drop-hero {
  background: #fcfaf4;
  padding: 56px 32px 32px;
}
.drop-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.drop-hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #1a1a1a;
  margin: 8px 0 14px;
}
.drop-hero h1 .accent {
  background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.drop-hero .hero-eyebrow {
  display: inline-block;
  background: #1a1a1a;
  color: #ff6b35;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.drop-hero-sub {
  font-size: 16px;
  color: rgba(26, 26, 26, 0.72);
  line-height: 1.5;
  max-width: 640px;
  margin: 0;
}

/* Filter chips */
.drop-cats {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 32px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drop-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fcfaf4;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.drop-cat:hover {
  background: #ff6b35;
}
.drop-cat.active {
  background: #1a1a1a;
  color: #fcfaf4;
}
.drop-cat .count {
  font-size: 11px;
  font-weight: 700;
  color: rgba(26, 26, 26, 0.5);
  margin-left: 2px;
}
.drop-cat.active .count {
  color: rgba(252, 250, 244, 0.65);
}

/* Media grid */
.drop-grid-section {
  background: #fcfaf4;
  padding: 16px 32px 56px;
}
.drop-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.drop-tile {
  display: flex;
  flex-direction: column;
  background: #fcfaf4;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 5px 5px 0 #1a1a1a;
  overflow: hidden;
  text-decoration: none;
  color: #1a1a1a;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.drop-tile:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #1a1a1a;
}
.drop-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-bottom: 2px solid #1a1a1a;
  display: block;
}
.drop-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #fcfaf4;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}
.drop-cat-badge.cat-watch    { background: #ff6b35; color: #fcfaf4; }
.drop-cat-badge.cat-bts      { background: #1f5d3f; color: #fcfaf4; }
.drop-cat-badge.cat-press    { background: #1a1a1a; color: #ff6b35; }
.drop-cat-badge.cat-celebs   { background: #ffd166; color: #1a1a1a; }
.drop-cat-badge.cat-featured { background: #b8a5d9; color: #1a1a1a; }
.drop-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: rgba(252, 250, 244, 0.95);
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  font-size: 24px;
  box-shadow: 3px 3px 0 #1a1a1a;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.drop-tile:hover .drop-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 4px 4px 0 #1a1a1a;
}
.drop-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(26, 26, 26, 0.85);
  color: #fcfaf4;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.drop-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drop-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #1a1a1a;
  margin: 0;
}
.drop-meta {
  font-size: 12px;
  font-weight: 700;
  color: rgba(26, 26, 26, 0.55);
  letter-spacing: 0.01em;
}

/* Press tile variant — no photo, big logo treatment */
.drop-thumb-press {
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drop-press-logo {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fcfaf4;
  text-align: center;
  padding: 0 20px;
}
.drop-thumb-press .drop-play { display: none; }

/* Featured tile — 2x2 IG-style mini grid */
.drop-thumb-featured {
  background: #efece2;
  padding: 8px;
}
.drop-ig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  height: 100%;
}
.drop-ig-grid > div {
  border: 1.5px solid #1a1a1a;
  border-radius: 6px;
}
.drop-thumb-featured .drop-play { display: none; }

/* Load more */
.drop-loadmore {
  text-align: center;
  margin-top: 36px;
}
.drop-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: #1a1a1a;
  color: #fcfaf4;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  box-shadow: 5px 5px 0 #1a1a1a;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.drop-loadmore-btn:hover {
  background: #ff6b35;
  color: #1a1a1a;
}

/* Follow strip */
.drop-follow-section {
  background: #fcfaf4;
  padding: 24px 32px 56px;
}
.drop-follow-card {
  max-width: 1200px;
  margin: 0 auto;
  background: #fcfaf4;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #1a1a1a;
  padding: 28px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.drop-follow-text { flex: 1 1 360px; }
.drop-follow-headline {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.drop-follow-headline .accent { color: #ff6b35; }
.drop-follow-sub {
  font-size: 14px;
  color: rgba(26, 26, 26, 0.7);
  line-height: 1.4;
  margin: 0;
}
.drop-follow-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.drop-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  color: #fcfaf4;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #1a1a1a;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.drop-follow-btn iconify-icon { font-size: 18px; }
.drop-follow-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #1a1a1a;
}

/* Responsive */
@media (max-width: 1024px) {
  .drop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .drop-hero { padding: 36px 20px 22px; }
  .drop-cats { padding: 12px 20px 18px; gap: 6px; }
  .drop-cat { font-size: 12px; padding: 6px 12px; }
  .drop-grid-section { padding: 12px 20px 36px; }
  .drop-grid { grid-template-columns: 1fr; gap: 16px; }
  .drop-follow-section { padding: 16px 20px 36px; }
  .drop-follow-card { padding: 22px 22px; }
  .drop-follow-buttons { width: 100%; justify-content: flex-start; }
  .drop-title { font-size: 15px; }
}