:root{
      --bg:#f5f5f5;
      --fg:#0b0b0b;
      --muted:#6b7280;
      --card:#ffffff;
      --border:#e7e7e7;
      --shadow:0 18px 40px rgba(0,0,0,.08);

      --safe-top:max(env(safe-area-inset-top),0px);
      --safe-bot:max(env(safe-area-inset-bottom),0px);
      --header-h:64px;
    }

    @font-face{
      font-family:'Afacad Flux';
      src: local('Afacad Flux Regular'),
           url('/fonts/AfacadFlux-Regular.woff2') format('woff2'),
           url('/fonts/AfacadFlux-Regular.woff') format('woff');
      font-weight:400; font-style:normal; font-display:swap;
    }

    html,body{height:100%}
    html{color-scheme:light}

    body{
      margin:0;
      font-family:'Afacad Flux',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
      background:var(--bg);
      color:var(--fg);
      min-height:100dvh;
      display:grid;
      grid-template-rows:auto 1fr auto;
      -webkit-tap-highlight-color:transparent;
    }

    /* ===== Header ===== */
    header{
      position:fixed; top:0; left:0; right:0; z-index:60;
      padding-top:var(--safe-top); height:var(--header-h);
      backdrop-filter:saturate(180%) blur(10px);
      background:rgba(245,245,245,.82);
      border-bottom:1px solid var(--border);
      box-sizing:border-box;
    }
    .nav{
      max-width:1320px; margin:0 auto; padding:12px 24px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      box-sizing:border-box;
    }
    .brand{
      font-weight:700;
      letter-spacing:.12em;
      text-decoration:none;
      color:var(--fg);
      white-space:nowrap;
      flex:0 0 auto;
      font-size:13px;
      text-transform:uppercase;
    }
    .links{
      display:flex; gap:10px; align-items:center;
      overflow-x:auto; overscroll-behavior-inline:contain;
      scrollbar-width:none;
      max-width:100%;
    }
    .links::-webkit-scrollbar{display:none}
    .links a{
      color:var(--fg);
      text-decoration:none;
      opacity:.85;
      padding:8px 12px;
      border-radius:999px;
      white-space:nowrap;
      font-size:14px;
      flex:0 0 auto;
    }
    .links a:hover{opacity:1;background:rgba(0,0,0,.04)}
    .links a[aria-current="page"]{background:rgba(0,0,0,.06);opacity:1}

    /* ===== Hero ===== */
    .page-hero{
      padding-top:calc(var(--header-h) + 64px);
      padding-bottom:24px;
      max-width:1320px;
      margin:0 auto;
      padding-inline:24px;
      box-sizing:border-box;
      text-align:center;
    }
    .page-hero h1{
      font-size:clamp(30px,4vw,52px);
      margin:0 0 10px;
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .page-hero p{
      color:var(--muted);
      font-size:clamp(14px,1.8vw,18px);
      margin:0 auto;
      max-width:58ch;
      line-height:1.5;
    }

    .store-note{
      max-width:1320px;
      margin:0 auto 28px;
      padding:0 24px;
      box-sizing:border-box;
    }

    .store-note__grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      border:1px solid var(--border);
      background:var(--border);
      gap:1px;
    }

    .store-note__item{
      background:#fff;
      padding:18px 20px;
      min-height:86px;
      box-sizing:border-box;
    }

    .store-note__label{
      margin:0 0 6px;
      color:var(--muted);
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.12em;
      font-weight:700;
    }

    .store-note__value{
      margin:0;
      color:var(--fg);
      font-size:17px;
      line-height:1.35;
      font-weight:600;
    }

    /* ===== Store grid ===== */
    .store{
      max-width:1320px;
      margin:0 auto 72px;
      padding:0 24px;
      display:grid;
      gap:26px;
      grid-template-columns:repeat(3, minmax(0,1fr));
      align-items:start;
      box-sizing:border-box;
    }

    .product{
      display:flex;
      flex-direction:column;
      gap:14px;
      background:transparent;
    }

    .tile{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:0;
      padding:22px 22px 28px;
      min-height:520px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      position:relative;
      box-shadow:0 10px 24px rgba(0,0,0,.06);
      transition:transform .25s ease, box-shadow .25s ease;
      overflow:hidden;
    }
    .tile:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
    }

    .meta{
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:12px;
      color:var(--fg);
      opacity:.9;
      margin-bottom:12px;
    }

    .thumb{
      margin-top:10px;
      flex:1;
      display:grid;
      place-items:center;
      cursor:pointer;
      position:relative;
    }

    .mat{
      position:relative;
      width:min(92%, 420px);
      background:transparent;
      border:0;
      box-shadow:none;
      padding:0;
      box-sizing:border-box;
      display:grid;
      place-items:center;
      overflow:hidden;
    }

    .mat::after{
      content:"";
      position:absolute;
      inset:0;
      border:0px solid transparent;
      transition:border-color .18s ease;
      pointer-events:none;
      z-index:2;
    }
    .thumb:hover .mat::after{ border-color:#0b0b0b; }

    .thumb img{
      width:100%;
      height:auto;
      max-height:320px;
      object-fit:contain;
      display:block;
      transition:transform .5s ease;
    }
    .thumb:hover img{ transform:scale(1.02); }

    .autotrim{
      transform-origin:50% 50%;
      will-change:transform;
    }

    .quick{
      position:relative;
      width:100%;
      min-height:48px;
      margin-top:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:13px;
      background:#0b0b0b;
      color:#fff;
      border:1px solid #0b0b0b;
      transition:background .18s ease, color .18s ease;
      cursor:pointer;
      pointer-events:auto;
    }
    .quick:hover{
      background:#fff;
      color:#0b0b0b;
    }

    .caption{
      padding:2px 2px 0;
      display:grid;
      gap:6px;
    }
    .name{
      margin:0;
      font-size:15px;
      font-weight:600;
      line-height:1.25;
      color:var(--fg);
    }
    .priceLine{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .price{
      font-size:16px;
      font-weight:600;
      letter-spacing:.01em;
      color:var(--fg);
    }

    /* ===== Lightbox ===== */
    .lightbox{
      position:fixed; inset:0;
      background:rgba(0,0,0,.92);
      display:none; z-index:80;
    }
    .lightbox[aria-hidden="false"]{display:grid}
    .lightbox__inner{
      display:grid;
      grid-template-rows:1fr auto;
      width:100%;
      height:100%;
    }
    .lightbox__image-wrap{
      display:grid;
      place-items:center;
      padding:24px;
      box-sizing:border-box;
      width:100%;
    }
    .lightbox__img{
      display:block;
      margin:auto;
      max-width:100%;
      max-height:86vh;
      width:auto;
      height:auto;
      object-fit:contain;
      cursor:pointer;
    }
    .lightbox__caption{
      padding:12px 24px 24px;
      display:flex; gap:16px; align-items:center; justify-content:space-between;
      color:rgba(255,255,255,.75);
      padding-bottom: calc(24px + var(--safe-bot));
      box-sizing:border-box;
    }
    .lightbox__caption strong{color:#fff; font-weight:600}

    /* ===== Quick View Modal ===== */
    .qv{
      position:fixed;
      inset:0;
      display:none;
      z-index:90;
      background:rgba(0,0,0,.45);
      padding:24px;
      box-sizing:border-box;
    }
    .qv[aria-hidden="false"]{display:grid; place-items:center;}

    .qv__panel{
      width:min(1040px, 100%);
      background:#fff;
      border:1px solid var(--border);
      box-shadow:0 30px 80px rgba(0,0,0,.18);
      position:relative;
      box-sizing:border-box;
      overflow:hidden;
    }

    .qv__close{
      position:absolute;
      top:14px;
      right:14px;
      width:40px;
      height:40px;
      border:0px solid #111;
      background:transparent;
      border-radius:0;
      cursor:pointer;
      font-size:18px;
      line-height:1;
      z-index:2;
    }

    .qv__grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:0;
      min-height:640px;
    }

    .qv__media{
      padding:0;
      border-right:1px solid var(--border);
      display:grid;
      grid-template-columns:1fr;
      gap:0;
      align-items:stretch;
      background:#fff;
      position:relative;
    }

    .qv__thumbs{ display:none !important; }

    .qv__mat{
      width:100%;
      padding:0;
      background:transparent;
      border:0;
      box-shadow:none;
      display:grid;
      place-items:center;
    }

    .qv__mat img{
      width:80%;
      height:80%;
      max-height:540px;
      object-fit:contain;
      display:block;
      filter:
        drop-shadow(0 10px 22px rgba(0,0,0,.22))
        drop-shadow(0 10px 16px rgba(0,0,0,.38));
    }

    #qv-img{
      opacity:1;
      transition: opacity .22s ease;
      will-change: opacity;
    }
    #qv-img.is-switching{ opacity:0; }

    #qv[data-finish="unframed"] .qv__mat img{
      width:65%;
      height:auto;
      max-height:480px;
    }
    #qv[data-finish="unframed"] .qv__mat{ padding:24px 0; }

    .qv__info{
      padding:26px 28px 26px;
      display:flex;
      flex-direction:column;
    }

    .qv__meta{
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:12px;
      opacity:.9;
      margin-bottom:10px;
    }
    .qv__title{
      margin:0 0 10px;
      font-size:44px;
      line-height:1.02;
      letter-spacing:-.02em;
      font-weight:900;
    }
    .qv__price{
      font-weight:600;
      font-size:18px;
      margin-bottom:14px;
    }
    .qv__note{
      margin:0 0 18px;
      color:#111;
      font-size:14px;
      line-height:1.45;
    }
    .qv__note u{text-underline-offset:3px;}

    .qv__field{
      display:grid;
      gap:10px;
      margin-top:8px;
      margin-bottom:18px;
    }
    .qv__label{
      font-size:16px;
      font-weight:600;
      color:#111;
    }

    .qv__sizes{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .qv__size-btn{
      appearance:none;
      border:2px solid rgba(0,0,0,.14);
      background:#fff;
      color:#111;
      padding:12px 14px;
      min-width:120px;
      border-radius:0;
      cursor:pointer;
      text-align:left;
      display:grid;
      gap:2px;
      font:inherit;
    }
    .qv__size-btn strong{
      font-size:15px;
      line-height:1.1;
      font-weight:700;
    }
    .qv__size-btn span{
      font-size:12px;
      color:var(--muted);
      line-height:1.2;
    }
    .qv__size-btn[aria-current="true"]{
      border-color:#111;
      box-shadow:0 10px 18px rgba(0,0,0,.08);
    }
    .qv__size-note{
      width:fit-content;
      max-width:100%;
      padding:14px 16px;
      border:2px solid #111;
      border-radius:0;
      background:#fff;
      font:inherit;
      min-width:280px;
      box-sizing:border-box;
    }

    .qv__finish{
      margin-top:6px;
      border-top:1px solid var(--border);
      padding-top:16px;
      margin-bottom:14px;
    }
    .qv__finish-row{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    .qv__finish-title{
      font-size:18px;
      font-weight:700;
      color:#111;
    }
    .qv__finish-title span{
      font-weight:500;
      color:var(--muted);
    }
    .qv__swatches{
      display:flex;
      gap:12px;
      margin-top:12px;
      align-items:center;
    }
    .qv__sw{
      width:56px;
      height:56px;
      border-radius:999px;
      border:2px solid rgba(0,0,0,.15);
      background:#fff;
      cursor:pointer;
      display:grid;
      place-items:center;
      position:relative;
      opacity:.95;
    }
    .qv__sw[aria-current="true"]{
      border-color:#111;
      box-shadow:0 10px 18px rgba(0,0,0,.12);
    }
    .qv__corner{
      width:28px;
      height:28px;
      border-left:5px solid #111;
      border-top:5px solid #111;
      transform:translate(2px,2px);
    }
    .qv__sw--white .qv__corner{border-color:#d9d9d9;}
    .qv__sw--black .qv__corner{border-color:#111;}
    .qv__sw--unframed .qv__corner{
      border-left:4px solid #d9d9d9;
      border-top:4px solid #d9d9d9;
    }

    .qv__actions{
      display:grid;
      gap:12px;
      margin-top:auto;
      padding-top:10px;
      border-top:1px solid var(--border);
    }
    .qv__btn{
      width:100%;
      appearance:none;
      border:2px solid #111;
      background:#fff;
      color:#111;
      padding:16px 18px;
      border-radius:0;
      font-weight:800;
      letter-spacing:.02em;
      text-transform:none;
      font-size:18px;
      cursor:pointer;
    }
    .qv__btn--primary{
      background:#4b2ae6;
      color:#fff;
      border-color:#4b2ae6;
    }
    .qv__btn[disabled]{opacity:.5; cursor:not-allowed;}

    .qv__details{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:12px;
      font-weight:900;
      letter-spacing:.02em;
      text-transform:uppercase;
      font-size:14px;
      color:#111;
      text-decoration:none;
      width:fit-content;
      border-bottom:2px solid #111;
      padding-bottom:4px;
    }

    @media(max-width:980px){
      .qv__title{font-size:32px;}
    }

    @media (max-width:820px){
      .qv{
        padding:0;
        place-items:stretch;
        overflow:hidden;
      }
      .qv[aria-hidden="false"]{
        display:block;
      }

      .qv__panel{
        width:100%;
        height:100dvh;
        max-height:100dvh;
        overflow:auto;
        -webkit-overflow-scrolling: touch;
        border-left:0;
        border-right:0;
        margin:0;
      }

      .qv__close{
        position:sticky;
        top:calc(var(--safe-top) + 10px);
        right:10px;
        margin-left:auto;
        display:block;
        z-index:5;
      }

      .qv__grid{
        grid-template-columns:1fr;
        min-height:0;
      }

      .qv__media{
        border-right:none;
        border-bottom:1px solid var(--border);
        min-height:0;
      }

      .qv__mat{ padding:16px 0; }

      .qv__mat img{
        width:92%;
        height:auto;
        max-height:42vh;
      }

      .qv__info{ padding:18px 16px 24px; }
      .qv__title{font-size:28px;}
      .qv__btn{font-size:16px;}
      .qv__size-btn{min-width:unset; flex:1 1 calc(50% - 10px);}
      .qv__size-note{min-width:unset; width:100%;}
    }

    /* ===== Footer ===== */
    footer{
      border-top:1px solid var(--border);
      color:var(--muted);
      padding:24px;
      padding-bottom: calc(24px + var(--safe-bot));
      box-sizing:border-box;
      background:var(--bg);
    }
    footer .row{
      max-width:1320px;margin:0 auto;
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:0 24px;
      box-sizing:border-box;
    }

    /* ===== Responsive ===== */
    @media(max-width:1100px){
      .store{grid-template-columns:repeat(2, minmax(0,1fr));}
      .tile{min-height:500px;}
    }
    @media(max-width:740px){
      .store{grid-template-columns:1fr;}
      .tile{min-height:460px;}
      .mat{width:min(94%, 520px); padding:22px;}
      .thumb img{max-height:300px;}
    }

    @media(max-width:640px){
      :root{--header-h:auto;}
      header{
        position: sticky;
        height:auto;
        padding-bottom: 10px;
      }
      .nav{
        padding:12px 12px;
        flex-direction: column;
        align-items:flex-start;
        gap:10px;
      }
      .brand{font-size:12px;}
      .links{
        width:100%;
        flex-wrap:wrap;
        overflow:visible;
        gap:8px;
      }
      .links a{font-size:14px; padding:10px 12px;}
      .page-hero{
        padding-top: 18px;
        padding-inline:12px;
        text-align:left;
      }
      .page-hero h1{font-size:34px; line-height:1.05;}
      .page-hero p{font-size:14px; line-height:1.45;}
      .store{padding:0 12px; margin-bottom:40px;}
      .store-note{padding:0 12px; margin-bottom:22px;}
      .store-note__grid{grid-template-columns:1fr;}
      footer .row{flex-direction:column; align-items:flex-start; padding:0 12px;}
      footer{padding:20px 12px calc(20px + var(--safe-bot));}
    }

    @media (prefers-reduced-motion: reduce){
      .tile:hover{transform:none}
      .thumb:hover img{transform:none}
      .quick{transition:none}
      .mat::after{transition:none}
      #qv-img{transition:none}
    }