/* Page structure; shared club tokens and theme load after this file. */

    /* ─── RESET & BASE ─── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --ivory:      #F9F7F2;
      --cream:      #F0EBE0;
      --sand:       #DDD3C0;
      --navy:       #111827;
      --forest:     #1E2D20;
      --gold:       #9A8455;
      --warm:       #6B4F35;
      --mid:        #5A5A5A;
      --soft-black: #141414;
      --off-white:  #FAFAF8;
      --border:     rgba(20,20,20,0.1);
      --border-light: rgba(20,20,20,0.06);
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--ivory);
      font-family: 'DM Sans', sans-serif;
      color: var(--soft-black);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img { display: block; max-width: 100%; }
    button { cursor: pointer; font-family: inherit; }
    a { text-decoration: none; color: inherit; }

    /* ─── NAVIGATION ─── */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      height: 68px;
      background: var(--ivory);
      border-bottom: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      z-index: 500;
      transition: box-shadow 0.3s;
    }
    .nav.scrolled { box-shadow: 0 1px 20px rgba(0,0,0,0.06); }

    .nav-logo {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      letter-spacing: 0.12em;
      color: var(--soft-black);
      cursor: pointer;
      flex-shrink: 0;
    }

    .nav-center {
      display: flex;
      gap: 36px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav-link {
      font-size:14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--mid);
      cursor: pointer;
      padding: 4px 0;
      border-bottom: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s;
      background: none;
      border-top: none;
      border-left: none;
      border-right: none;
    }
    .nav-link:hover { color: var(--soft-black); }
    .nav-link.active {
      color: var(--soft-black);
      border-bottom-color: var(--gold);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-shrink: 0;
    }

    .nav-icon-btn {
      background: none;
      border: none;
      color: var(--mid);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      transition: color 0.2s;
      position: relative;
    }
    .nav-icon-btn:hover { color: var(--soft-black); }
    .nav-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.5; }

    .bag-count {
      position: absolute;
      top: 4px; right: 4px;
      width: 14px; height: 14px;
      background: var(--gold);
      border-radius: 50%;
      font-size:14px;
      color: white;
      display: flex; align-items: center; justify-content: center;
      font-weight: 500;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .bag-count.visible { opacity: 1; }

    .nav-cta {
      font-size:14px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 10px 24px;
      background: var(--soft-black);
      color: var(--ivory);
      border: none;
      transition: background 0.2s;
    }
    .nav-cta:hover { background: var(--forest); }

    /* ─── PAGE SYSTEM ─── */
    .page { display: none; animation: fadeUp 0.45s ease both; }
    .page.active { display: block; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ══════════════════════════════════════
       BRAND / STORY PAGE
    ══════════════════════════════════════ */

    .brand-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: calc(100vh - 68px);
    }

    /* Left — visual panel */
    .bh-visual {
      background: var(--forest);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 580px;
    }

    .bh-rings {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .bh-monogram {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .bh-outer-ring {
      width: 180px;
      height: 180px;
      border: 1px solid rgba(154,132,85,0.18);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 28px;
      position: relative;
      animation: rotateRing 30s linear infinite;
    }
    @keyframes rotateRing {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .bh-outer-ring::before {
      content: '';
      position: absolute;
      inset: 18px;
      border: 0.5px solid rgba(154,132,85,0.1);
      border-radius: 50%;
      animation: rotateRing 20s linear infinite reverse;
    }
    .bh-letter {
      font-family: 'Playfair Display', serif;
      font-size: 80px;
      color: rgba(249,247,242,0.1);
      font-style: italic;
      line-height: 1;
      animation: rotateRing 30s linear infinite reverse; /* counter-rotate to keep upright */
    }

    .bh-brand-mark {
      font-size:14px;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: rgba(154,132,85,0.45);
    }

    /* Right — content panel */
    .bh-content {
      background: var(--cream);
      padding: 80px 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .eyebrow {
      font-size:14px;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .eyebrow::before {
      content: '';
      width: 24px;
      height: 0.5px;
      background: var(--gold);
      flex-shrink: 0;
    }

    .brand-headline {
      font-family: 'Playfair Display', serif;
      font-size: 52px;
      font-weight: 400;
      line-height: 1.05;
      margin-bottom: 32px;
      color: var(--soft-black);
    }
    .brand-headline em {
      font-style: italic;
      color: var(--warm);
    }

    .brand-body {
      font-size:14px;
      line-height: 2;
      color: rgba(20,20,20,0.52);
      letter-spacing: 0.01em;
      margin-bottom: 14px;
    }

    .bh-divider {
      width: 48px;
      height: 0.5px;
      background: var(--sand);
      margin: 32px 0;
    }

    .bh-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 0.5px solid var(--sand);
    }
    .bh-stat {
      padding: 20px 14px;
      border-right: 0.5px solid var(--sand);
      transition: background 0.2s;
    }
    .bh-stat:last-child { border-right: none; }
    .bh-stat:hover { background: rgba(154,132,85,0.04); }
    .bh-stat-n {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 400;
      color: var(--soft-black);
      margin-bottom: 4px;
    }
    .bh-stat-l {
      font-size:14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(20,20,20,0.32);
    }

    /* ─── Life Pillars Band ─── */
    .life-band {
      background: var(--soft-black);
      padding: 88px 48px;
    }

    .life-header {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 64px;
    }
    .life-header-title {
      font-size:14px;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: rgba(249,247,242,0.28);
      white-space: nowrap;
    }
    .life-header-line {
      flex: 1;
      height: 0.5px;
      background: rgba(249,247,242,0.07);
    }

    .life-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(249,247,242,0.05);
    }

    .life-pillar {
      background: var(--soft-black);
      padding: 48px 40px;
      transition: background 0.3s;
    }
    .life-pillar:hover { background: #1c1c1c; }

    .lp-num {
      font-family: 'Playfair Display', serif;
      font-size:14px;
      letter-spacing: 0.24em;
      color: rgba(154,132,85,0.35);
      margin-bottom: 36px;
    }
    .lp-rule {
      width: 22px;
      height: 0.5px;
      background: var(--gold);
      opacity: 0.35;
      margin-bottom: 28px;
    }
    .lp-icon {
      margin-bottom: 20px;
    }
    .lp-icon svg {
      width: 22px;
      height: 22px;
      stroke: rgba(154,132,85,0.55);
      stroke-width: 1.5;
      fill: none;
    }
    .lp-title {
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      font-weight: 400;
      color: rgba(249,247,242,0.85);
      margin-bottom: 12px;
    }
    .lp-body {
      font-size:14px;
      line-height: 2;
      color: rgba(249,247,242,0.3);
      letter-spacing: 0.02em;
    }

    /* ─── Shop CTA ─── */
    .shop-cta-section {
      background: var(--cream);
      padding: 96px 48px;
      text-align: center;
    }
    .sc-eyebrow {
      font-size:14px;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 20px;
    }
    .sc-title {
      font-family: 'Playfair Display', serif;
      font-size: 40px;
      font-weight: 400;
      color: var(--soft-black);
      margin-bottom: 16px;
      line-height: 1.1;
    }
    .sc-title em { font-style: italic; color: var(--warm); }
    .sc-sub {
      font-size:14px;
      color: rgba(20,20,20,0.42);
      margin-bottom: 44px;
      letter-spacing: 0.02em;
    }
    .sc-btn {
      font-size:14px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      padding: 15px 48px;
      background: var(--soft-black);
      color: var(--ivory);
      border: none;
      transition: background 0.2s, letter-spacing 0.2s;
    }
    .sc-btn:hover {
      background: var(--forest);
      letter-spacing: 0.28em;
    }

    /* ══════════════════════════════════════
       SHOP PAGE
    ══════════════════════════════════════ */

    .shop-header {
      padding: 40px 48px 0;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }

    .shop-title-block {}
    .shop-page-eyebrow {
      font-size:14px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 8px;
    }
    .shop-page-title {
      font-family: 'Playfair Display', serif;
      font-size: 32px;
      font-weight: 400;
      color: var(--soft-black);
      line-height: 1;
    }
    .shop-page-title span {
      font-style: italic;
      opacity: 0.3;
      font-size: 24px;
      margin-left: 10px;
    }

    .shop-controls {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .filter-tabs {
      display: flex;
    }
    .filter-tab {
      font-size:14px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 9px 18px;
      border: 0.5px solid var(--sand);
      background: transparent;
      color: var(--mid);
      transition: all 0.18s;
      margin-right: -0.5px;
    }
    .filter-tab:hover { color: var(--soft-black); border-color: rgba(20,20,20,0.25); }
    .filter-tab.on {
      background: var(--soft-black);
      color: var(--ivory);
      border-color: var(--soft-black);
      position: relative;
      z-index: 1;
    }

    .shop-sort {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sort-label {
      font-size:14px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--mid);
    }
    .sort-select {
      border: 0.5px solid var(--sand);
      background: transparent;
      font-family: 'DM Sans', sans-serif;
      font-size:14px;
      color: var(--soft-black);
      padding: 8px 12px;
      cursor: pointer;
      outline: none;
      letter-spacing: 0.06em;
    }

    .shop-count {
      padding: 20px 48px 0;
      font-size:14px;
      color: rgba(20,20,20,0.35);
      letter-spacing: 0.06em;
    }

    /* ─── Product Grid ─── */
    .prod-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(20,20,20,0.06);
      margin: 24px 0 0;
    }

    .prod-card {
      background: var(--ivory);
      cursor: pointer;
      transition: background 0.2s;
    }
    .prod-card:hover { background: var(--off-white); }

    .prod-img-area {
      position: relative;
      overflow: hidden;
    }

    .prod-swatch {
      width: 100%;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
    }
    .prod-card:hover .prod-swatch { transform: scale(1.05); }

    .prod-swatch svg {
      opacity: 0.75;
      transition: opacity 0.3s;
    }
    .prod-card:hover .prod-swatch svg { opacity: 0.9; }

    .prod-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      font-size:14px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 4px 10px;
      background: var(--soft-black);
      color: var(--ivory);
      pointer-events: none;
    }
    .prod-badge.gold { background: var(--gold); }

    .prod-actions {
      position: absolute;
      top: 14px;
      right: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      opacity: 0;
      transform: translateX(6px);
      transition: opacity 0.2s, transform 0.2s;
    }
    .prod-card:hover .prod-actions {
      opacity: 1;
      transform: translateX(0);
    }

    .prod-action-btn {
      width: 34px;
      height: 34px;
      background: rgba(249,247,242,0.92);
      border: 0.5px solid rgba(20,20,20,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, transform 0.15s;
    }
    .prod-action-btn:hover { background: white; transform: scale(1.08); }
    .prod-action-btn svg { width: 14px; height: 14px; stroke: var(--mid); stroke-width: 1.5; fill: none; }

    .prod-info {
      padding: 16px 18px 22px;
    }
    .prod-info-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 4px;
    }
    .prod-name {
      font-family: 'Playfair Display', serif;
      font-size: 14px;
      font-weight: 400;
      color: var(--soft-black);
    }
    .prod-price {
      font-size:14px;
      color: var(--mid);
      letter-spacing: 0.04em;
    }
    .prod-meta {
      font-size:14px;
      color: rgba(20,20,20,0.35);
      letter-spacing: 0.05em;
      margin-bottom: 10px;
    }
    .prod-colors {
      display: flex;
      gap: 6px;
    }
    .color-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 0.5px solid rgba(20,20,20,0.15);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .color-dot:hover {
      transform: scale(1.25);
      box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3px rgba(20,20,20,0.2);
    }

    /* ══════════════════════════════════════
       PRODUCT DETAIL OVERLAY
    ══════════════════════════════════════ */
    .detail-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10,10,10,0.6);
      z-index: 600;
      align-items: center;
      justify-content: center;
      padding: 32px;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .detail-overlay.open { display: flex; animation: fadeIn 0.25s ease; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .detail-modal {
      background: var(--ivory);
      max-width: 900px;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-height: 88vh;
      overflow: hidden;
      position: relative;
      animation: slideUp 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes slideUp {
      from { transform: translateY(24px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }

    .detail-close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 10;
      width: 36px;
      height: 36px;
      background: rgba(249,247,242,0.9);
      border: 0.5px solid rgba(20,20,20,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .detail-close:hover { background: white; }
    .detail-close svg { width: 16px; height: 16px; stroke: var(--mid); stroke-width: 1.5; fill: none; }

    .detail-img-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 480px;
      position: relative;
      overflow: hidden;
      transition: background 0.4s;
    }
    .detail-img-panel svg {
      opacity: 0.7;
      transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .detail-img-panel:hover svg { transform: scale(1.04); }

    .detail-content {
      padding: 52px 48px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    /* Scrollbar styling */
    .detail-content::-webkit-scrollbar { width: 3px; }
    .detail-content::-webkit-scrollbar-track { background: transparent; }
    .detail-content::-webkit-scrollbar-thumb { background: var(--sand); }

    .d-cat {
      font-size:14px;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 14px;
    }
    .d-name {
      font-family: 'Playfair Display', serif;
      font-size: 30px;
      font-weight: 400;
      line-height: 1.08;
      margin-bottom: 8px;
      color: var(--soft-black);
    }
    .d-sub {
      font-size:14px;
      color: rgba(20,20,20,0.38);
      letter-spacing: 0.06em;
      margin-bottom: 22px;
    }
    .d-price {
      font-family: 'Playfair Display', serif;
      font-size: 24px;
      color: var(--soft-black);
      margin-bottom: 28px;
    }

    .d-divider {
      height: 0.5px;
      background: var(--sand);
      margin: 0 0 24px;
    }

    .d-label {
      font-size:14px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(20,20,20,0.38);
      margin-bottom: 12px;
    }

    .d-sizes {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }
    .size-btn {
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0.5px solid var(--sand);
      font-size:14px;
      letter-spacing: 0.04em;
      color: var(--mid);
      background: transparent;
      transition: all 0.15s;
      font-family: 'DM Sans', sans-serif;
    }
    .size-btn:hover:not(.sold) {
      border-color: var(--soft-black);
      color: var(--soft-black);
    }
    .size-btn.picked {
      background: var(--soft-black);
      color: var(--ivory);
      border-color: var(--soft-black);
    }
    .size-btn.sold {
      opacity: 0.22;
      cursor: not-allowed;
      text-decoration: line-through;
    }

    .d-colors {
      display: flex;
      gap: 10px;
      margin-bottom: 32px;
    }
    .d-color-swatch {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 0.5px solid rgba(20,20,20,0.15);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .d-color-swatch:hover, .d-color-swatch.active {
      transform: scale(1.1);
      box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3.5px rgba(20,20,20,0.3);
    }

    .d-add {
      width: 100%;
      padding: 16px;
      background: var(--soft-black);
      color: var(--ivory);
      border: none;
      font-size:14px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      font-family: 'DM Sans', sans-serif;
      transition: background 0.2s, letter-spacing 0.2s;
      margin-bottom: 12px;
    }
    .d-add:hover { background: var(--forest); letter-spacing: 0.28em; }
    .d-add.added { background: var(--gold); }

    .d-wishlist {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size:14px;
      color: var(--mid);
      background: none;
      border: none;
      font-family: 'DM Sans', sans-serif;
      letter-spacing: 0.06em;
      margin-bottom: 28px;
      padding: 6px;
      transition: color 0.2s;
    }
    .d-wishlist:hover { color: var(--soft-black); }
    .d-wishlist svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }

    .d-desc {
      font-size:14px;
      line-height: 1.95;
      color: rgba(20,20,20,0.48);
      letter-spacing: 0.01em;
      margin-bottom: 24px;
    }

    .d-material-row {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 0.5px solid rgba(20,20,20,0.06);
      font-size:14px;
    }
    .d-material-key {
      color: rgba(20,20,20,0.35);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size:14px;
    }
    .d-material-val { color: var(--soft-black); }

    /* ─── FOOTER ─── */
    .footer {
      background: var(--soft-black);
      padding: 64px 48px 32px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 56px;
      margin-bottom: 56px;
    }
    .f-brand {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      color: rgba(249,247,242,0.82);
      letter-spacing: 0.1em;
      margin-bottom: 10px;
    }
    .f-tagline {
      font-size:14px;
      line-height: 1.85;
      color: rgba(249,247,242,0.26);
      max-width: 200px;
    }
    .f-col-title {
      font-size:14px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(249,247,242,0.36);
      margin-bottom: 18px;
    }
    .f-col a {
      display: block;
      font-size:14px;
      margin-bottom: 10px;
      color: rgba(249,247,242,0.22);
      transition: color 0.2s;
    }
    .f-col a:hover { color: var(--gold); }
    .f-bottom {
      border-top: 0.5px solid rgba(249,247,242,0.06);
      padding-top: 22px;
      display: flex;
      justify-content: space-between;
      font-size:14px;
      color: rgba(249,247,242,0.18);
    }

    /* ─── TOAST ─── */
    .toast {
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--soft-black);
      color: var(--ivory);
      padding: 13px 28px;
      font-size:14px;
      letter-spacing: 0.1em;
      opacity: 0;
      transition: opacity 0.25s, transform 0.25s;
      z-index: 700;
      pointer-events: none;
    }
    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ─── SCROLL REVEAL ─── */
    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 960px) {
      .nav { padding: 0 24px; }
      .nav-center { display: none; }
      .brand-hero { grid-template-columns: 1fr; }
      .bh-visual { min-height: 320px; }
      .bh-content { padding: 56px 32px; }
      .brand-headline { font-size: 38px; }
      .bh-stats { grid-template-columns: repeat(2, 1fr); }
      .bh-stat:nth-child(2) { border-right: none; }
      .bh-stat:nth-child(3) { border-top: 0.5px solid var(--sand); }
      .bh-stat:nth-child(4) { border-top: 0.5px solid var(--sand); }
      .life-band { padding: 56px 24px; }
      .life-pillars { grid-template-columns: 1fr; }
      .prod-grid { grid-template-columns: repeat(2, 1fr); }
      .detail-modal { grid-template-columns: 1fr; }
      .detail-img-panel { min-height: 260px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .shop-header { padding: 28px 24px 0; flex-direction: column; align-items: flex-start; }
      .shop-count { padding: 12px 24px 0; }
    }

    @media (max-width: 600px) {
      .bh-content { padding: 40px 24px; }
      .brand-headline { font-size: 30px; }
      .prod-grid { grid-template-columns: 1fr; }
      .shop-controls { flex-direction: column; align-items: flex-start; gap: 10px; }
      .footer-grid { grid-template-columns: 1fr; }
      .detail-content { padding: 32px 24px; }
      .d-name { font-size: 24px; }
    }