/* ============================================================
   TechEng: glass surfaces, laser effects, and product links.
   Loaded last, so it has the final say. Works in light (default)
   and dark.
   ============================================================ */

:root{
  --glass-bg:rgba(22,24,34,.5);
  --glass-bg-strong:rgba(16,18,27,.78);
  --glass-field:rgba(255,255,255,.07);
  --glass-border:rgba(255,255,255,.13);
  --glass-edge:rgba(212,175,55,.38);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.14);
  --glass-shadow:0 18px 50px rgba(0,0,0,.38);
  --glass-blur:blur(18px) saturate(150%);
  --laser-a:#f0cf73;
  --laser-b:#d4af37;
  --laser-c:#6d2cff;
  --laser-glow:rgba(240,207,115,.85);
  --laser-glow-soft:rgba(109,44,255,.38);
}
html[data-theme="light"]{
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,253,248,.82);
  --glass-field:rgba(255,255,255,.62);
  --glass-border:rgba(255,255,255,.8);
  --glass-edge:rgba(128,91,23,.3);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.95);
  --glass-shadow:0 16px 44px rgba(80,64,36,.14);
  --laser-a:#ffe49a;
  --laser-b:#c4912f;
  --laser-c:#7a4dd8;
  --laser-glow:rgba(196,145,47,.8);
  --laser-glow-soft:rgba(122,77,216,.28);
}

/* Browsers that cannot blur get a solid panel instead of a see-through mess. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-bg:rgba(24,26,36,.94);--glass-bg-strong:rgba(16,18,27,.98);--glass-field:rgba(255,255,255,.1)}
  html[data-theme="light"]{--glass-bg:rgba(255,253,248,.97);--glass-bg-strong:#fffdf8;--glass-field:#fff}
}

/* ------------------------------------------------------------
   Header search
   ------------------------------------------------------------ */
.nav-search-input{
  background:var(--glass-field);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-hi),0 6px 20px rgba(0,0,0,.08);
}
.nav-search-input:focus{
  border-color:var(--laser-b);
  box-shadow:var(--glass-hi),0 0 0 3px rgba(212,175,55,.2),0 0 22px rgba(212,175,55,.22);
}
/* The laser line that runs along the field while it is searching. */
.nav-search::after,
.filters .field::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--laser-a),var(--laser-b),var(--laser-c),transparent);
  box-shadow:0 0 10px var(--laser-glow),0 0 22px var(--laser-glow-soft);
  transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none;
}
.nav-search.is-scanning::after,
.filters .field.is-scanning::after{animation:laserField .8s cubic-bezier(.45,.05,.2,1)}
@keyframes laserField{
  0%{transform:scaleX(0);opacity:1;transform-origin:left center}
  60%{transform:scaleX(1);opacity:1;transform-origin:left center}
  61%{transform-origin:right center}
  100%{transform:scaleX(0);opacity:0;transform-origin:right center}
}
.filters .field{position:relative}

/* Suggestions drop-down. */
.ps-list{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border:1px solid var(--glass-border);
  outline:1px solid var(--glass-edge);outline-offset:-1px;
  border-radius:18px;
  box-shadow:var(--glass-hi),0 26px 70px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="light"] .ps-list{box-shadow:var(--glass-hi),0 26px 70px rgba(80,64,36,.22)}
.ps-item{position:relative;overflow:hidden;border-radius:12px;transition:background .18s,transform .18s}
.ps-item::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--laser-a),var(--laser-b),var(--laser-c));
  box-shadow:0 0 10px var(--laser-glow);transform:scaleY(0);transition:transform .22s ease;
}
.ps-item:hover,.ps-item.is-active{background:rgba(212,175,55,.14)}
.ps-item:hover::before,.ps-item.is-active::before{transform:scaleY(1)}
.ps-item img{background:var(--glass-field);border-color:var(--glass-border);object-fit:contain;padding:3px}
.ps-list .ps-item{animation:psIn .36s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*45ms)}
@keyframes psIn{
  0%{opacity:0;transform:translateY(-6px);clip-path:inset(0 100% 0 0)}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

/* ------------------------------------------------------------
   The shop
   ------------------------------------------------------------ */
.shop-stack{position:relative;isolation:isolate}
/* Soft colour behind the glass, so the glass has something to refract. */
.shop-stack::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-60px 0 -40px;
  background:
    radial-gradient(ellipse 34% 14% at 12% 30%,rgba(212,175,55,.22),transparent 70%),
    radial-gradient(ellipse 30% 12% at 88% 22%,rgba(109,44,255,.16),transparent 70%),
    radial-gradient(ellipse 36% 14% at 70% 62%,rgba(212,175,55,.14),transparent 70%),
    radial-gradient(ellipse 30% 12% at 18% 88%,rgba(109,44,255,.12),transparent 70%);
}
html[data-theme="light"] .shop-stack::before{
  background:
    radial-gradient(ellipse 34% 14% at 12% 30%,rgba(214,170,70,.3),transparent 70%),
    radial-gradient(ellipse 30% 12% at 88% 22%,rgba(150,110,235,.2),transparent 70%),
    radial-gradient(ellipse 36% 14% at 70% 62%,rgba(214,170,70,.2),transparent 70%),
    radial-gradient(ellipse 30% 12% at 18% 88%,rgba(150,110,235,.16),transparent 70%);
}

/* The filter bar */
.filters{
  position:relative;
  padding:18px 18px 20px;gap:14px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:22px;
  box-shadow:var(--glass-hi),var(--glass-shadow);
}
.filters::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--laser-b),transparent);opacity:.7;
}
.filters .field label{
  color:var(--gold-ink,#d4af37);
  font:700 10px/1.2 Orbitron,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px;display:block;
}
html:not([data-theme="light"]) .filters .field label{color:#d4af37}
.filters .input,
.filters select.input{
  background-color:var(--glass-field);
  border:1px solid var(--glass-edge);border-radius:14px;
  color:inherit;min-height:46px;
  box-shadow:var(--glass-hi);
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
html[data-theme="light"] .filters .input{color:#24221e}
.filters .input::placeholder{color:var(--muted,#8a8f9e);opacity:.9}
.filters .input:focus,.filters .input:focus-visible{
  outline:none;border-color:var(--laser-b);
  box-shadow:var(--glass-hi),0 0 0 3px rgba(212,175,55,.2),0 0 22px rgba(212,175,55,.2);
}
html:not([data-theme="light"]) .filters select.input option{background:#14161f;color:#e9eaf0}

/* Product-type pills */
.chip{
  background:var(--glass-field);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-hi);
}
html[data-theme="light"] .chip{background:var(--glass-field);border-color:var(--glass-edge)}
.chip:hover{border-color:var(--laser-b);box-shadow:var(--glass-hi),0 0 18px rgba(212,175,55,.28)}
.chip.active{
  background:linear-gradient(135deg,#e9c95e,#c49a2a);color:#1a1400;border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 6px 22px rgba(196,145,47,.4);
}
.chip small{opacity:.7}

/* Recipient tiles: frosted caption plate over the picture */
.shop-collection{
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-hi),var(--glass-shadow);
}
.shop-collection::after{
  background:linear-gradient(180deg,transparent 52%,rgba(7,8,13,.5) 100%);
}
.shop-collection > span{
  left:12px;right:12px;bottom:12px;padding:11px 14px 12px;border-radius:14px;
  background:rgba(14,15,22,.46);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .shop-collection > span{
  background:rgba(255,253,248,.62);border-color:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 18px rgba(80,64,36,.1);
}
html[data-theme="light"] .shop-collection::after{background:linear-gradient(180deg,transparent 55%,rgba(255,253,248,.35) 100%)}
html[data-theme="light"] .shop-collection strong{color:#24221e}
html[data-theme="light"] .shop-collection small{color:#7a5a14}
.shop-collection.active{border-color:var(--laser-b);box-shadow:0 0 0 2px rgba(212,175,55,.35),var(--glass-shadow),0 0 30px rgba(212,175,55,.3)}
.shop-collection:focus-visible,.chip:focus-visible{outline:2px solid var(--laser-b);outline-offset:3px}

/* The "bring your own item" panel */
.own-product-banner{
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
html[data-theme="light"] .own-product-benefits span{
  color:#4a3f27;background:rgba(255,255,255,.7);border-color:rgba(128,91,23,.32);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
html[data-theme="light"] .own-product-kicker{color:#805b17}
html[data-theme="light"] .own-product-action small{color:rgba(36,28,13,.78)}

/* Status strip, empty state */
.active-collection{
  background:var(--glass-field);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);border-left:3px solid var(--laser-b);border-radius:12px;
  box-shadow:var(--glass-hi);font-size:12.5px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
}
.catalog-empty{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px dashed var(--glass-edge);box-shadow:var(--glass-hi);
}

/* Product cards: a pane of glass with the picture sitting in it */
.product-card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-hi),0 12px 34px rgba(0,0,0,.2);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
html[data-theme="light"] .product-card{background:var(--glass-bg);box-shadow:var(--glass-hi),0 12px 34px rgba(80,64,36,.1)}
.product-card:hover{
  border-color:var(--laser-b);transform:translateY(-4px);
  box-shadow:var(--glass-hi),0 22px 50px rgba(0,0,0,.26),0 0 26px rgba(212,175,55,.22);
}
html[data-theme="light"] .product-card:hover{box-shadow:var(--glass-hi),0 22px 50px rgba(80,64,36,.18),0 0 26px rgba(196,145,47,.25)}
.product-card{cursor:pointer}
.product-card .btn{cursor:pointer}

#loadMore,.catalog-count .btn:not(.btn-orange),#allCollections{
  background:var(--glass-field);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-hi);
}

/* Showcase: every picture is a link now */
.gallery-link{display:block;position:relative;width:100%;height:100%;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.gallery-link:focus-visible{outline:2px solid var(--laser-b);outline-offset:-4px;border-radius:inherit}
.gallery-item{cursor:pointer}
.bento-card,.gallery-item,.fr-card{-webkit-tap-highlight-color:transparent}

/* ------------------------------------------------------------
   Laser effects
   ------------------------------------------------------------ */
@property --laser-angle{syntax:'<angle>';inherits:false;initial-value:0deg}

.laser-fx-layer{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden}

.laser-beam{
  position:fixed;top:0;width:2px;margin-left:-1px;height:var(--h,200px);
  transform-origin:top center;transform:scaleY(0);opacity:0;
  background:linear-gradient(180deg,transparent,var(--laser-a) 38%,#fff 92%,var(--laser-a));
  box-shadow:0 0 9px 1px var(--laser-glow),0 0 30px 7px var(--laser-glow-soft);
  animation:laserBeam .3s cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes laserBeam{
  0%{transform:scaleY(0);opacity:1}
  62%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);opacity:0}
}
.laser-ring{
  position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid var(--laser-a);box-shadow:0 0 16px var(--laser-glow),inset 0 0 10px var(--laser-glow);
  opacity:0;animation:laserRing .6s .16s ease-out forwards;
}
@keyframes laserRing{0%{transform:scale(.25);opacity:1}100%{transform:scale(7);opacity:0}}
.laser-spark{
  position:fixed;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:#fff;box-shadow:0 0 7px 2px var(--laser-glow);opacity:0;
  animation:laserSpark .62s .16s cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes laserSpark{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(.15);opacity:0}
}
.laser-trace{
  position:fixed;box-sizing:border-box;padding:2px;
  background:conic-gradient(from var(--laser-angle),transparent 0 62%,var(--laser-c) 78%,var(--laser-b) 90%,#fff 99%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:drop-shadow(0 0 5px var(--laser-glow));
  animation:laserTrace .72s linear forwards;
}
@keyframes laserTrace{
  0%{--laser-angle:0deg;opacity:1}
  80%{opacity:1}
  100%{--laser-angle:360deg;opacity:0}
}

/* The page cut. Frosted, and it follows the theme. */
.laser-wipe{
  background:rgba(8,8,12,.78);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
}
html[data-theme="light"] .laser-wipe{background:rgba(247,243,235,.78)}
.laser-line{
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--laser-a) 18%,var(--laser-b) 50%,var(--laser-c) 82%,transparent);
  box-shadow:0 0 12px var(--laser-glow),0 0 32px var(--laser-glow-soft);
}
.laser-label{color:var(--laser-b)}
html[data-theme="light"] .laser-label{color:#805b17}

/* Results engraved into view. */
.laser-reveal{position:relative}
.laser-reveal::before{
  content:"";position:absolute;left:-2%;right:-2%;top:0;height:3px;z-index:6;pointer-events:none;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--laser-a),var(--laser-b),var(--laser-c),transparent);
  box-shadow:0 0 14px var(--laser-glow),0 0 34px var(--laser-glow-soft);
  animation:laserGridScan .85s cubic-bezier(.4,.1,.3,1) forwards;
}
@keyframes laserGridScan{
  0%{transform:translateY(0);opacity:1}
  85%{opacity:1}
  100%{transform:translateY(var(--scan,640px));opacity:0}
}
.laser-reveal > *{
  animation:laserEngrave .6s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--n,0)*45ms);
}
@keyframes laserEngrave{
  0%{opacity:0;transform:translateY(10px);clip-path:inset(0 0 100% 0)}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

@media (prefers-reduced-motion:reduce){
  .laser-beam,.laser-ring,.laser-spark,.laser-trace,.laser-reveal::before,
  .nav-search::after,.filters .field::after{display:none!important}
  .laser-reveal > *,.ps-list .ps-item{animation:none!important}
}

/* ------------------------------------------------------------
   Phones and tablets
   ------------------------------------------------------------ */
@media (max-width:900px){
  .filters{padding:14px 14px 16px;border-radius:18px}
  .ps-list{
    position:fixed;left:10px;right:10px;width:auto;
    top:calc(var(--ps-top,76px));max-height:min(62vh,440px);
  }
}
@media (max-width:620px){
  .shop-collection > span{left:8px;right:8px;bottom:8px;padding:8px 10px 9px;border-radius:12px}
  .chip{min-height:44px}
  .filters .input,.filters select.input{min-height:48px;font-size:16px}   /* 16px stops iOS zooming in on focus */
  .product-card:hover{transform:none}
}
@media (hover:none){
  .product-card:hover{transform:none}
}

/* The chat button sat on top of the Place your order button on a phone. */
@media (max-width:900px){
  body:has(#coSticky) .chat{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* ------------------------------------------------------------
   Touch screens: fingertip-sized targets and readable small print
   ------------------------------------------------------------ */
@media (pointer:coarse){
  .nav-search-btn{width:40px;height:40px}
  .pw-toggle,.btn-small,.chip{min-height:44px}
  .pw-toggle{min-width:56px}
  .footer a{display:inline-block;padding:9px 0}
  .loc-actions .btn,.loc-result{min-height:44px}
}
@media (max-width:900px){
  .site-ribbon{font-size:11px}
  .locale-mark,.guest-badge{font-size:10px}
  #cart-count{font-size:11px}
  .copyright{font-size:12px}
}

/* Card headings used to be forced white in the page itself, which made them
   invisible on the white cards of light mode. */
.card-title{color:#fff}
html[data-theme="light"] .card-title{color:#24221e}

/* ------------------------------------------------------------
   Design Studio on a phone. The tool panel was two columns of
   fixed-width controls, wider than the screen, and the page was
   quietly clipped on the right. One column under 700px.
   ------------------------------------------------------------ */
.toolbar > h3,.layers > h3{grid-column:1/-1}
@media (max-width:900px){
  .toolbar,.layers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar > *,.layers > *{min-width:0}
}
@media (max-width:780px){
  .studio-wrap.pro-studio{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .toolbar,.layers,.pro-studio .layers{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------
   Light-mode contrast fixes found by tests/contrast-audit.js
   ------------------------------------------------------------ */
html[data-theme="light"] .layer-item{background:rgba(255,255,255,.72);border-color:rgba(80,64,36,.14);color:#24221e}
html[data-theme="light"] .layer-item button{color:#49443c}
html[data-theme="light"] .co-agree a,
html[data-theme="light"] .co-total span,
html[data-theme="light"] .co-sticky-total span,
html[data-theme="light"] .co-choice .co-cost{color:#7a5a14}
html[data-theme="light"] .co-total b,
html[data-theme="light"] .co-sticky-total b{background:linear-gradient(90deg,#7a5a14,#a47a1c);-webkit-background-clip:text;background-clip:text}

/* Gold that reads on a dark page is far too pale on a light one. */
html[data-theme="light"] :is(.locale-mark,.welcome-own-link,.identity-signin,.library-toggle,.clear-library-design,.studio-steps span.active,.own-product-mark,.co-hint b,fieldset legend,legend){color:#7a5a14}
html[data-theme="light"] .welcome-own-link:hover{color:#24221e;text-shadow:none}
html[data-theme="light"] .studio-upload b,html[data-theme="light"] .own-product-upload b{color:#24221e}
html[data-theme="light"] .bento-tag{color:#fff}

/* ------------------------------------------------------------
   Home page "Objects with presence" cards: the words sit on a pane of
   glass. They were written for a dark page (white on near black) and
   came out dark grey on dark grey in light mode.
   ------------------------------------------------------------ */
.bento-content{
  left:16px;right:16px;bottom:16px;padding:16px 18px 17px;border-radius:18px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-border);box-shadow:var(--glass-hi),0 10px 30px rgba(0,0,0,.18);
}
html:not([data-theme="light"]) .bento-content{background:rgba(12,13,20,.58)}
.bento-media::after{background:linear-gradient(180deg,transparent 40%,rgba(7,8,13,.38) 100%)}
html[data-theme="light"] .bento-media::after{background:linear-gradient(180deg,transparent 45%,rgba(255,253,248,.4) 100%)}
html[data-theme="light"] .bento-content h3{color:#24221e}
html[data-theme="light"] .bento-content p{color:#49443c}
html[data-theme="light"] .bento-tag{color:#7a5a14;background:rgba(255,255,255,.8);border-color:rgba(128,91,23,.35)}
@media (max-width:620px){.bento-content{left:10px;right:10px;bottom:10px;padding:13px 14px 14px}}

@media (min-width:1001px){
  .bento-card:nth-child(1){min-height:620px}
  .bento-card:nth-child(n+2){min-height:310px}
}

html[data-theme="light"] :is(.admin-note,.notice,.co-hint,.subtitle) b{color:#7a5a14}