:root{
    --paper:#f6f2ea;
    --paper-2:#efe8db;
    --ink:#1b1d22;
    --ink-soft:#3a3d44;
    --rule:#cdc3ae;
    --rule-soft:#e3dac6;
    --sapphire:#1f3a8a;
    --sapphire-deep:#16295f;
    --gold:#9a7b2e;
    --gold-soft:#bfa25a;
    --grid-blue:#1f3a8a;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:'Cormorant Garamond',serif;font-weight:400;}
  body{
    background-image:
      radial-gradient(1200px 700px at 20% -10%, rgba(0,0,0,0.035), transparent 60%),
      radial-gradient(900px 600px at 110% 110%, rgba(0,0,0,0.04), transparent 60%);
    min-height:100vh;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
  #root{min-height:100vh}
  .no-scroll{overflow:hidden}

  /* paper grain overlay */
  .paper-grain::before{
    content:"";
    position:fixed;inset:0;
    background-image:
      repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(0deg, rgba(0,0,0,0.01) 0 1px, transparent 1px 3px);
    pointer-events:none;z-index:1;
  }
  .paper-grain::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(40,25,10,0.08) 100%);
  }

  /* --- Reusable --- */
  .rule{height:1px;background:var(--rule);width:100%}
  .rule-ink{height:1px;background:var(--ink);width:100%}
  .caps{letter-spacing:.24em;text-transform:uppercase}
  .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:300}
  .italiana{font-family:'Italiana',serif;font-weight:400}
  .script{font-family:'Cormorant Garamond',serif;font-style:italic}
  .serif-infant{font-family:'Cormorant Infant',serif}
  .small-caps{font-variant:all-small-caps;letter-spacing:.18em}

  /* --- Layout shell --- */
  .shell{
    display:grid;grid-template-columns:280px 1fr;min-height:100vh;
    position:relative;z-index:3;
  }
  .sidebar{
    border-right:1px solid var(--rule);
    background:linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    padding:28px 22px 28px 28px;
    position:sticky;top:0;height:100vh;overflow-y:auto;
  }
  .sidebar::-webkit-scrollbar{width:6px}
  .sidebar::-webkit-scrollbar-thumb{background:#d8cfba;border-radius:3px}
  .content{padding:44px 56px 80px;max-width:1100px;position:relative}

  /* menu */
  .brand-mark{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:22px;
  }
  .brand-mark .mini-logo{
    height:46px;width:auto;filter:none;
  }
  .brand-mark .est{
    font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.3em;color:var(--ink-soft);
  }
  .nav-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
  .nav-list li{
    border-bottom:1px solid var(--rule-soft);
  }
  .nav-list button{
    width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:11px 4px;
    font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--ink);
    text-align:left;letter-spacing:.01em;
    transition:color .35s ease, padding .35s ease;
    position:relative;
  }
  .nav-list button .num{
    font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#8a7e66;letter-spacing:.15em;
  }
  .nav-list button:hover{color:var(--sapphire);padding-left:10px}
  .nav-list li.active button{
    color:var(--sapphire);font-style:italic;font-weight:500;
  }
  .nav-list li.active button::before{
    content:"";position:absolute;left:-28px;top:50%;width:20px;height:1px;background:var(--sapphire);transform:translateY(-50%);
  }

  .sidebar-footer{
    margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-soft);
    display:flex;flex-direction:column;gap:10px;
  }
  .lang-switch{display:flex;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em}
  .lang-switch button{padding:3px 6px;color:#8a7e66;border:1px solid transparent;border-radius:2px}
  .lang-switch button.on{color:var(--ink);border-color:var(--rule)}
  .sidebar-meta{font-family:'JetBrains Mono',monospace;font-size:9px;color:#8a7e66;letter-spacing:.18em;line-height:1.7}

  /* content headings */
  .page-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.32em;color:#8a7e66;margin-bottom:14px}
  .page-title{
    font-family:'Italiana',serif;font-size:84px;line-height:.95;letter-spacing:.01em;margin:0 0 6px;
    font-weight:400;color:var(--ink);
  }
  .page-title .amp{color:var(--sapphire);font-style:italic;font-family:'Cormorant Garamond',serif}
  .page-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:var(--ink-soft);margin:0 0 34px}
  .page-head{border-bottom:1px solid var(--ink);padding-bottom:30px;margin-bottom:44px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
  .page-head .right-meta{text-align:right;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:#8a7e66;line-height:1.9;flex-shrink:0}

  /* buttons */
  .btn-paper{
    display:inline-block;border:1px solid var(--ink);
    padding:11px 34px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;
    background:var(--paper);letter-spacing:.02em;
    transition:background .35s ease, color .35s ease, transform .35s ease;
    cursor:pointer;
  }
  .btn-paper:hover{background:var(--ink);color:var(--paper)}
  .btn-ghost{
    display:inline-block;border:1px solid var(--rule);padding:8px 22px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-soft);
    transition:all .3s ease;cursor:pointer;
  }
  .btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

  /* home */
  .home{
    min-height:calc(100vh - 0px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:48px 40px 60px;text-align:center;position:relative;
  }
  .home .corner{position:absolute;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.28em;color:#8a7e66}
  .home .corner.tl{top:24px;left:36px}
  .home .corner.tr{top:24px;right:36px;text-align:right}
  .home .corner.bl{bottom:24px;left:36px}
  .home .corner.br{bottom:24px;right:36px;text-align:right}
  .home .logo{max-width:560px;width:70%;height:auto;opacity:1}
  .home .crest{max-width:340px;width:44%;height:auto;margin:30px 0 26px;opacity:1;filter:drop-shadow(0 10px 30px rgba(30,20,10,0.18))}
  .home .est-line{
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.45em;color:#8a7e66;
    margin:12px 0 26px;display:flex;align-items:center;gap:14px;opacity:1;
  }
  .home .est-line .hair{height:1px;width:60px;background:var(--rule)}
  .home .entrez{opacity:1}
  .home .tagline{
    font-family:'Italiana',serif;font-size:30px;color:var(--sapphire);margin:0 0 6px;letter-spacing:.05em;opacity:1;
  }
  .home .sub-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--ink-soft);margin-bottom:32px;opacity:1}

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

  /* A4 window / card patterns */
  .a4-window{
    border:1px solid var(--ink);background:var(--paper);
    position:relative;
  }
  .a4-window.sapphire{border-color:var(--sapphire)}

  .caption-row{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#6d6550;letter-spacing:.2em;padding:8px 2px 0}

  /* placeholder art swatches (stripes) */
  .ph-stripe{
    background-image:repeating-linear-gradient(135deg, #e3dac6 0 2px, transparent 2px 10px);
    background-color:#f1ead9;
  }
  .ph-silhouette{
    background:
      radial-gradient(80% 60% at 50% 40%, rgba(31,58,138,0.06), transparent 70%),
      linear-gradient(180deg, #f3ecdc 0%, #ede4d0 100%);
    position:relative;overflow:hidden;
  }
  .ph-silhouette svg{position:absolute;inset:0;width:100%;height:100%}
  .photo-frame{position:relative;overflow:hidden;background:var(--paper-2)}
  .photo-frame img{display:block;width:100%;height:100%;object-fit:cover}
  .photo-frame.contain img{object-fit:contain}
  .photo-frame::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    border:1px solid rgba(27,29,34,.16);box-shadow:inset 0 0 0 10px rgba(246,242,234,.12)
  }
  .photo-muted img{filter:grayscale(12%) contrast(1.04);transition:filter .5s ease, transform .8s ease}
  .a4-window:hover .photo-muted img,
  button:hover .photo-muted img{filter:grayscale(0) contrast(1.05);transform:scale(1.035)}
  .photo-frame.contain img,
  .a4-window:hover .photo-frame.contain img,
  button:hover .photo-frame.contain img{transform:none}

  /* cobalt grid bg (galleries) */
  .cobalt-grid{
    background:
      linear-gradient(180deg, #0e1d4a 0%, #111a3a 100%);
    background-image:
      linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
      linear-gradient(180deg, #0e1d4a 0%, #111a3a 100%);
    background-size:40px 40px, 40px 40px, 100% 100%;
    background-position:0 0, 0 0, 0 0;
    position:relative;
  }
  .cobalt-grid::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%);
  }

  /* modal */
  .modal-back{
    position:fixed;inset:0;background:rgba(20,15,8,0.55);backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;z-index:40;
    animation:fadeIn .4s ease;
  }
  .modal{
    background:var(--paper);border:1px solid var(--ink);padding:40px 44px 32px;
    width:min(520px, 92vw);position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,0.25);
    animation:modalIn .5s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  .modal::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule);pointer-events:none}
  .modal .close{position:absolute;top:10px;right:14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:#8a7e66}
  .modal .close:hover{color:var(--ink)}
  .form-field{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
  .form-field label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.25em;color:#8a7e66;text-transform:uppercase}
  .form-field input, .form-field select, .form-field textarea{
    background:transparent;border:none;border-bottom:1px solid var(--rule);padding:6px 2px;
    font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--ink);outline:none;
    transition:border-color .3s;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{border-color:var(--sapphire)}

  /* flipbook */
  .flipbook-stage{
    background:#2a2418;padding:48px 40px 40px;position:relative;
    border:1px solid var(--ink);
  }
  .flipbook-stage::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,0.08);pointer-events:none}
  .flip-page{
    background:var(--paper);width:520px;height:740px;position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 1px var(--rule);
    display:flex;flex-direction:column;
  }
  .flip-page.turning{transform:rotateY(-12deg);transition:transform .9s ease}
  .flip-shadow{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(0,0,0,0.08);transform:translateX(-1px)}

  /* tweaks panel */
  .tweaks{
    position:fixed;right:20px;bottom:20px;z-index:60;
    background:var(--paper);border:1px solid var(--ink);
    width:280px;padding:18px 18px 16px;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    font-family:'JetBrains Mono',monospace;font-size:11px;
  }
  .tweaks h4{margin:0 0 10px;font-family:'Italiana',serif;font-size:20px;letter-spacing:.1em;font-weight:400}
  .tweaks .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:10px;letter-spacing:.15em;color:#6d6550;text-transform:uppercase}
  .tweaks select, .tweaks input[type="range"]{font-family:'JetBrains Mono',monospace;font-size:10px}
  .tweaks .swatches{display:flex;gap:6px}
  .tweaks .sw{width:22px;height:22px;border:1px solid var(--rule);cursor:pointer}
  .tweaks .sw.on{outline:2px solid var(--ink);outline-offset:2px}

  /* misc */
  .drop-cap::first-letter{
    font-family:'Italiana',serif;font-size:74px;float:left;line-height:.85;padding:6px 10px 0 0;color:var(--sapphire);
  }
  .prose{font-size:18px;line-height:1.65;color:var(--ink-soft);max-width:62ch}
  .prose p{margin:0 0 16px}
  .prose em{color:var(--ink);font-style:italic}

  .pull-quote{
    font-family:'Italiana',serif;font-size:30px;line-height:1.25;color:var(--ink);
    padding:22px 26px;border-left:2px solid var(--sapphire);background:rgba(255,255,255,0.3);margin:30px 0;
  }

  .tag{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:#8a7e66;text-transform:uppercase;padding:3px 8px;border:1px solid var(--rule)}

  /* --- Add-to-cart button on product windows --- */
  .btn-add{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    border:1px solid var(--ink);background:var(--paper);color:var(--ink);
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
    padding:9px 10px;cursor:pointer;transition:all .25s ease;
  }
  .btn-add:hover{background:var(--ink);color:var(--paper)}
  .btn-add .plus{font-family:'Italiana',serif;font-size:18px;letter-spacing:0;line-height:1}

  /* --- Menu groups (collapsible in sidebar) --- */
  .nav-groups{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
  .nav-groups > li{border-bottom:1px solid var(--rule-soft)}
  .nav-group-head{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:13px 4px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;letter-spacing:.03em;color:var(--ink);
    transition:color .3s, padding .3s;
  }
  .nav-group-head:hover{color:var(--sapphire);padding-left:6px}
  .nav-group-head .chev{
    font-family:'JetBrains Mono',monospace;font-size:11px;color:#8a7e66;
    transition:transform .3s ease;display:inline-block;
  }
  .nav-group.open .nav-group-head .chev{transform:rotate(90deg);color:var(--sapphire)}
  .nav-group-items{
    list-style:none;margin:0;padding:0 0 10px 16px;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;
  }
  .nav-group.open .nav-group-items{grid-template-rows:1fr}
  .nav-group-items > div{overflow:hidden;min-height:0}
  .nav-group-items li{border-bottom:1px dotted var(--rule-soft)}
  .nav-group-items li:last-child{border-bottom:none}
  .nav-group-items button{
    width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:8px 4px 8px 10px;
    font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--ink-soft);
    transition:color .3s, padding .3s;font-style:italic;position:relative;
  }
  .nav-group-items button .num{
    font-family:'JetBrains Mono',monospace;font-size:9px;color:#b0a58c;letter-spacing:.15em;font-style:normal;
  }
  .nav-group-items button:hover{color:var(--sapphire);padding-left:16px}
  .nav-group-items li.active button{color:var(--sapphire);font-weight:500}
  .nav-group-items li.active button::before{
    content:"";position:absolute;left:-2px;top:50%;width:8px;height:1px;background:var(--sapphire);transform:translateY(-50%);
  }

  /* --- Cart icon (top-right) --- */
  .cart-fab{
    position:fixed;top:22px;right:24px;z-index:40;
    width:52px;height:52px;border:1px solid var(--ink);background:var(--paper);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:all .3s ease;
  }
  .cart-fab:hover{background:var(--ink);color:var(--paper)}
  .cart-fab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4}
  .cart-fab .badge{
    position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;
    background:var(--sapphire);color:var(--paper);border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;font-weight:400;
    border:1px solid var(--paper);
  }

  /* --- Cart panel (slide-in from right) --- */
  .cart-overlay{
    position:fixed;inset:0;z-index:45;background:rgba(20,15,8,0.45);
    opacity:0;pointer-events:none;transition:opacity .35s ease;
  }
  .cart-overlay.open{opacity:1;pointer-events:auto}
  .cart-panel{
    position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(460px,94vw);
    background:var(--paper);border-left:1px solid var(--ink);
    transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.3,1);
    display:flex;flex-direction:column;
  }
  .cart-panel.open{transform:translateX(0)}
  .cart-head{
    padding:26px 30px 18px;border-bottom:1px solid var(--rule);
    display:flex;align-items:center;justify-content:space-between;
  }
  .cart-head h3{font-family:'Italiana',serif;font-weight:400;font-size:30px;margin:0;color:var(--sapphire);letter-spacing:.04em}
  .cart-head .close{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:#8a7e66;cursor:pointer}
  .cart-head .close:hover{color:var(--ink)}
  .cart-body{flex:1;overflow-y:auto;padding:18px 30px}
  .cart-body::-webkit-scrollbar{width:6px}
  .cart-body::-webkit-scrollbar-thumb{background:#d8cfba;border-radius:3px}
  .cart-empty{
    padding:60px 10px;text-align:center;color:var(--ink-soft);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:18px;
  }
  .cart-item{
    display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;
    padding:16px 0;border-bottom:1px solid var(--rule-soft);
  }
  .cart-item .thumb{
    width:64px;height:80px;background:var(--paper-2);border:1px solid var(--rule);
    display:flex;align-items:center;justify-content:center;color:#8a7e66;font-family:'Italiana',serif;font-size:20px;
  }
  .cart-item .info .num{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:#8a7e66}
  .cart-item .info .title{font-family:'Italiana',serif;font-size:19px;margin:2px 0 2px}
  .cart-item .info .meta{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:var(--ink-soft)}
  .cart-item .qty-row{
    display:flex;align-items:center;gap:0;margin-top:8px;
    border:1px solid var(--rule);width:fit-content;
  }
  .cart-item .qty-row button{
    width:24px;height:24px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-soft);
  }
  .cart-item .qty-row button:hover{color:var(--sapphire)}
  .cart-item .qty-row .q{
    width:28px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;border-left:1px solid var(--rule);border-right:1px solid var(--rule);padding:4px 0;
  }
  .cart-item .right{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
  .cart-item .right .line-total{font-family:'Italiana',serif;font-size:18px}
  .cart-item .right .remove{
    font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:#b0a58c;cursor:pointer;
  }
  .cart-item .right .remove:hover{color:#4a0d0d}
  .cart-foot{
    border-top:1px solid var(--ink);padding:20px 30px 26px;background:var(--paper-2);
  }
  .cart-foot .totals{
    display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;
  }
  .cart-foot .totals .t-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;color:#8a7e66;text-transform:uppercase}
  .cart-foot .totals .t-amount{font-family:'Italiana',serif;font-size:34px;color:var(--sapphire)}
  .cart-foot .checkout-btn{
    display:block;width:100%;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
    padding:14px;font-family:'Italiana',serif;font-size:20px;letter-spacing:.04em;cursor:pointer;
    transition:all .3s ease;
  }
  .cart-foot .checkout-btn:hover{background:var(--sapphire);border-color:var(--sapphire)}
  .cart-foot .continue{
    display:block;text-align:center;margin-top:10px;font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.25em;color:#8a7e66;cursor:pointer;
  }
  .cart-foot .continue:hover{color:var(--ink)}

  /* --- Checkout form (inside modal) --- */
  .checkout-summary{
    background:var(--paper-2);border:1px solid var(--rule);padding:14px 16px;margin-bottom:22px;
  }
  .checkout-summary .line{
    display:flex;justify-content:space-between;font-family:'Cormorant Garamond',serif;font-size:15px;padding:3px 0;
  }
  .checkout-summary .sep{height:1px;background:var(--rule);margin:8px 0}
  .checkout-summary .total{font-family:'Italiana',serif;font-size:22px;color:var(--sapphire)}
  .checkout-section-label{
    font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.28em;color:#8a7e66;text-transform:uppercase;
    margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule-soft);
  }

  /* monochrome mode */
  body.mono{
    --paper:#f5f2ec;--paper-2:#ece7dd;
    --sapphire:#1b1d22;--sapphire-deep:#000;
    --gold:#3a3d44;--gold-soft:#6d6550;
  }
  body.mono .home .tagline{color:var(--ink)}
  body.mono .page-title .amp{color:var(--ink)}

  /* responsive (basic) */
  @media (max-width: 900px){
    .shell{grid-template-columns:1fr}
    .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--rule)}
    .content{padding:30px 22px 60px}
    .page-title{font-size:52px}
    .flip-page{width:80vw;height:calc(80vw * 1.42)}
  }

  /* --- Cart page --- */
  .cart-page-grid{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
  .cart-item-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule-soft)}
  .cart-item-row .thumb{width:64px;height:80px;background:var(--paper-2);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:'Italiana',serif;font-size:20px;color:#8a7e66}
  .cart-summary-box{border:1px solid var(--ink);background:var(--paper-2);padding:28px;position:sticky;top:30px}

  /* --- Cart FAB pulse --- */
  @keyframes cartPulse{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
  .cart-fab.pulse .badge{animation:cartPulse .5s ease}

  /* --- Add-to-cart feedback --- */
  @keyframes btnAdded{0%{background:var(--paper);color:var(--ink)}30%{background:#2d4a2a;color:var(--paper)}100%{background:var(--paper);color:var(--ink)}}
  .btn-add.added{animation:btnAdded 1.5s ease}

  /* --- Toast notification --- */
  @keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  @keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}
  .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:100;background:var(--ink);color:var(--paper);padding:12px 28px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;letter-spacing:.02em;animation:toastIn .35s ease;pointer-events:none;white-space:nowrap}
  .toast.out{animation:toastOut .35s ease forwards}

  /* --- Product detail modal --- */
  .detail-modal-back{position:fixed;inset:0;background:rgba(20,15,8,0.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:60;animation:fadeIn .3s ease}
  .detail-modal{background:var(--paper);border:1px solid var(--ink);width:min(1120px,95vw);height:min(88vh,780px);display:grid;grid-template-columns:1fr 380px;overflow:hidden;animation:modalIn .4s cubic-bezier(.2,.8,.2,1)}
  .detail-modal .slider-area{position:relative;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .detail-modal .slider-area svg{width:70%;height:70%;max-height:80%}
  .detail-modal .slider-area .photo-frame{width:100%;height:100%}
  .detail-modal .slider-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:1px solid var(--rule);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--ink-soft);transition:all .2s}
  .detail-modal .slider-btn:hover{background:var(--ink);color:var(--paper)}
  .detail-modal .slider-btn.prev{left:14px}
  .detail-modal .slider-btn.next{right:14px}
  .detail-modal .slider-dots{position:absolute;bottom:14px;display:flex;gap:6px}
  .detail-modal .slider-dots span{width:8px;height:8px;border-radius:50%;background:var(--rule);cursor:pointer;transition:background .3s}
  .detail-modal .slider-dots span.on{background:var(--ink)}
  .detail-modal .info-panel{padding:36px 32px;display:flex;flex-direction:column;border-left:1px solid var(--ink);overflow-y:auto}
  .detail-modal .close-btn{position:absolute;top:14px;right:18px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:#8a7e66;cursor:pointer;z-index:2}
  .detail-modal .close-btn:hover{color:var(--ink)}

  /* --- Vacancy modal --- */
  .vac-modal{background:var(--paper);border:1px solid var(--ink);width:min(640px,92vw);padding:40px 44px 32px;position:relative;animation:modalIn .4s cubic-bezier(.2,.8,.2,1)}
  .vac-modal::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule);pointer-events:none}

  /* --- Category grid transition --- */
  .grid-fade-enter{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
  .grid-fade-active{opacity:1;transform:translateY(0)}
  .grid-fade-leave{opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease}

  /* --- Flipbook smooth --- */
  @keyframes flipOut{from{transform:rotateY(0);opacity:1}to{transform:rotateY(-18deg);opacity:.5}}
  @keyframes flipIn{from{transform:rotateY(18deg);opacity:.5}to{transform:rotateY(0);opacity:1}}
  .flip-page.flip-out{animation:flipOut .42s ease forwards}
  .flip-page.flip-in{animation:flipIn .5s cubic-bezier(.2,.8,.2,1) forwards}