/* Online store in its own visual language, with a switch between three looks (data-look on the section):
   - "glow" = „Neon dark" (default): plain black like Framer/Osmo, a faint satin, flat dark panes lit from the top,
              a neon impulse on the collection bar;
   - "aurora": teal, blue and pink light behind dark glass panes, two-tone rims, the impulse runs teal to pink;
   - "liquid" (Liquid glass): clear glass panes over a vivid backdrop, sheen and bright edges, a white glint as the impulse.
   The looks change only what is inside the browser window: the aura, eyebrow and caption around it stay the same.
   Behaviour and assembly are shared with the original through shop-demo.js and shop-bento.js. */

/* ---------- Shared by both looks ---------- */
.shop-glass .shop-eyebrow{flex-wrap:wrap}
.shop-glass .shop-eyebrow>span:first-child{background:#b6a0ff;box-shadow:0 0 14px #8254ff}
/* The eyebrow styles its spans as a dot; the switch opts out of that. */
.shop-glass .shop-eyebrow>.shop-look{display:inline-flex;align-items:center;gap:4px;width:auto;height:auto;margin-left:14px;padding:3px 3px 3px 10px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff08;box-shadow:none;white-space:nowrap;letter-spacing:0;pointer-events:auto}
.shop-look>b{margin-right:6px;font-size:9px;font-weight:600;letter-spacing:.12em;color:#8f8a96}
.shop-look button{padding:6px 11px;border:0;border-radius:999px;background:transparent;color:#a9a4b1;font:inherit;font-size:10px;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:background-color .2s,color .2s}
.shop-look button:hover{color:#fff}
.shop-look button[aria-pressed="true"]{background:#b6a0ff;color:#140d24}
.shop-look button:focus-visible{outline:2px solid #cdbfff;outline-offset:2px}
.shop-glass .shop-aura{background:radial-gradient(ellipse closest-side at 50% 45%,#7045ff2b 0%,#7045ff0f 62%,#7045ff00 100%)}

.shop-glass .shop-window{border-color:#ffffff1f;border-radius:20px;box-shadow:0 40px 110px #000b}
.shop-glass .shop-chrome{background:#0d0d11;border-bottom-color:#ffffff0d;border-radius:20px 20px 0 0;color:#62636e}
.shop-glass .shop-address{padding:4px 44px;border:1px solid #ffffff0d;border-radius:7px;background:#ffffff08;color:#a7a8b3;font-size:11px}
.shop-glass .shop-content{padding:0 20px}
.shop-glass :is(.shop-store-nav>strong,.shop-store-nav>[data-piece="nav"],.shop-search,.shop-bag,.shop-filters,.shop-collection,.shop-product,.shop-no-results){border:0;border-radius:12px}

/* Store header: separate pills, like the demo sites. */
.shop-glass .shop-store-nav{height:auto;padding:20px 0 0;margin-bottom:18px;background:none;border:0;border-radius:0}
.shop-glass .shop-store-nav>strong{display:flex;align-items:center;height:52px;padding:0 22px;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:27px;letter-spacing:-.02em;color:#f6efe6}
.shop-glass .shop-store-nav>strong>i{font-style:normal;color:#b6a0ff}
.shop-glass .shop-store-nav>[data-piece="nav"]{display:flex;align-items:center;height:52px;padding:0 26px;gap:26px;font-size:13px;color:#ece8f2}
.shop-glass .shop-store-nav>[data-piece="nav"]>span{color:#9d98a6}
.shop-glass .shop-store-actions{gap:12px}
.shop-glass .shop-store-actions>.shop-search{width:200px;height:52px;padding:0 18px;color:#9d98a6}
.shop-glass .shop-search input{color:#f2eee8}.shop-glass .shop-search input::placeholder{color:#9d98a6}
.shop-glass .shop-bag{display:flex;justify-content:center;gap:8px;height:52px;padding:0 16px;color:#f2eee8}
.shop-glass .shop-bag b{background:#b6a0ff;color:#140d24;font-weight:600}

/* Filters */
.shop-glass .shop-filters{padding:20px 18px}
.shop-glass .shop-filter-title{font-size:14px;color:#f2eee8}
.shop-glass .shop-filters legend,.shop-glass .shop-price-filter>label{color:#a6a1ad;font-weight:600;letter-spacing:.16em}
.shop-glass .shop-filter-option{color:#e3ded7}
.shop-glass .shop-filter-option small{color:#8f8a96}
.shop-glass .shop-filter-option input,.shop-glass .shop-price-filter input{accent-color:#b6a0ff}
.shop-glass .shop-price-filter output{color:#e3ded7}
.shop-glass .shop-color{border-color:#16151b;outline-color:#4c4a55}
.shop-glass .shop-color[aria-pressed="true"]{outline:2px solid #cdbfff}
.shop-glass .shop-filter-reset{color:#cdbfff;border-bottom-color:#b6a0ff66}

/* Collection bar and sort */
.shop-glass .shop-collection{position:relative;padding:14px 14px 14px 20px;margin-bottom:16px}
.shop-glass .shop-collection>span:first-child{font-family:Georgia,'Times New Roman',serif;font-size:20px;letter-spacing:-.01em;color:#f6efe6}
.shop-glass .shop-collection small{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:11px;letter-spacing:0;color:#9d98a6}
.shop-glass .shop-sort{padding:9px 14px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff0d;color:#e3ded7}
.shop-glass .shop-sort option{background:#151419;color:#e3ded7}

/* Product cards: a framed photo, serif name, small uppercase label. */
.shop-glass .shop-products{gap:16px}
.shop-glass .shop-product{position:relative;padding:8px;border-radius:14px}
.shop-glass .shop-product-art{border-radius:9px;background:#15151a}
.shop-glass .shop-tag{padding:5px 9px;border:1px solid #ffffff26;border-radius:999px;background:#0b0b0dcc;color:#ece8f2;letter-spacing:.12em}
.shop-glass .shop-product-art:has(img[src*="headphones-light"]) .shop-tag,.shop-glass .shop-product-art:has(img[src*="speaker-jungle"]) .shop-tag{background:#0b0b0dcc;border-color:#ffffff26;color:#ece8f2}
.shop-glass .shop-window button.shop-heart{top:9px;right:9px;width:30px;height:30px;border-radius:50%;background:#0b0b0d8c;color:#f2eee8;font-size:17px}
.shop-glass .shop-window button.shop-heart[aria-pressed="true"]{color:#ff5367}
.shop-glass .shop-product-info{padding:15px 8px 13px}
.shop-glass .shop-product-info h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:18px;letter-spacing:-.01em;color:#f5efe7}
.shop-glass .shop-product-info p{margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#cdbfff}
.shop-glass .shop-product-info>span{font-size:13px;color:#f6f3ee}
.shop-glass .shop-add{border:1px solid #ffffff1f;border-radius:999px;background:#ffffff0d;color:#e9e4f2;padding:11px 16px;transition:background-color .2s,color .2s,box-shadow .2s}
.shop-glass .shop-add>span{color:#cdbfff}
.shop-glass .shop-window button:focus-visible,.shop-glass .shop-window select:focus-visible,.shop-glass .shop-window input:focus-visible{outline-color:#cdbfff}

/* Cart */
.shop-glass .shop-cart-surface{border:0;border-radius:16px;box-shadow:inset 1px 1px 1px #ffffff29,inset -1px -1px 1px #ffffff0d,0 24px 60px #000a}
.shop-glass .shop-cart-head h3{font-family:Georgia,'Times New Roman',serif;font-size:18px}
.shop-glass .shop-cart-panel button{background:#ffffff10;border-color:#ffffff1f;color:#efeaf6}
.shop-glass .shop-cart-panel .shop-cart-remove{background:transparent;border-color:transparent}
.shop-glass .shop-cart-panel .shop-cart-remove:hover{background:#ffffff14;border-color:#ffffff1f}
.shop-glass .shop-cart-row{border-top-color:#ffffff14}
.shop-glass .shop-cart-list{scrollbar-color:#6a6475 transparent}

/* Caption */
.shop-glass .shop-progress i{background:#b6a0ff}
.shop-glass .shop-scroll-hint>span{color:#cdbfff}
.shop-glass .shop-caption a{border-bottom-color:#b6a0ff55}.shop-glass .shop-caption a:hover{border-color:#b6a0ff}
.shop-glass .shop-caption a:focus-visible{outline-color:#cdbfff}

/* ---------- Look "glow": the middle ground ---------- */
/* Plain black window; the satin survives only as a faint, vignetted hint of depth. */
.shop-glass[data-look="glow"] .shop-window{background:radial-gradient(110% 55% at 50% 0%,#141220 0%,#09090c 50%,#050507 100%)}
.shop-glass[data-look="glow"] .shop-window:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(assets/site-uri/fundal-satin.webp) 50% 35%/cover no-repeat;opacity:.16;-webkit-mask-image:radial-gradient(85% 65% at 55% 45%,#000 15%,transparent 75%);mask-image:radial-gradient(85% 65% at 55% 45%,#000 15%,transparent 75%);pointer-events:none}
/* Flat dark panes: a hairline, a lit top edge, a soft shadow. */
.shop-glass[data-look="glow"] :is(.shop-store-nav>strong,.shop-store-nav>[data-piece="nav"],.shop-search,.shop-bag,.shop-filters,.shop-collection,.shop-product,.shop-no-results){background:linear-gradient(180deg,#17161ded,#0e0e12f2);box-shadow:inset 0 1px 0 #ffffff17,inset 0 0 0 1px #ffffff0e,0 12px 30px #0000008c}
.shop-glass[data-look="glow"] .shop-bag:hover{background:linear-gradient(180deg,#1f1d27,#141319)}
.shop-glass[data-look="glow"] .shop-bag b{box-shadow:0 0 12px #b6a0ffb3}
.shop-glass[data-look="glow"] .shop-filter-option:has(input:checked){color:#fff;text-shadow:0 0 14px #a88bff}
.shop-glass[data-look="glow"] .shop-color[aria-pressed="true"]{box-shadow:0 0 12px #b6a0ff}
/* A thin neon line on top of the collection bar, like a selection in a design tool. It is an impulse now
   (timing in shop-glass.js): a bright head runs left to right, the violet-to-blue line forms behind it,
   holds for a moment and fades. Only on this top edge. Reduced motion shows the finished line. */
@property --line{syntax:'<number>';inherits:true;initial-value:0}
@property --line-o{syntax:'<number>';inherits:true;initial-value:0}
@property --head-o{syntax:'<number>';inherits:true;initial-value:0}
.shop-glass:is([data-look="glow"],[data-look="aurora"],[data-look="liquid"]) .shop-collection:before{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,#b6a0ff 30%,#6fa2ff 70%,transparent);box-shadow:0 0 12px #8f7bff;clip-path:inset(-20px calc((1 - var(--line)) * 100%) -20px -20px);opacity:var(--line-o);pointer-events:none}
.shop-glass:is([data-look="glow"],[data-look="aurora"],[data-look="liquid"]) .shop-collection:after{content:'';position:absolute;top:-1px;left:calc(18px + (100% - 36px) * var(--line));width:90px;height:3px;border-radius:2px;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#d9d0ff 80%,#fff);box-shadow:6px 0 14px #a88bff;opacity:var(--head-o);pointer-events:none}
.shop-glass:is([data-look="glow"],[data-look="aurora"],[data-look="liquid"]) .shop-collection.is-pulsing{animation:shop-line 2.8s linear both}
@keyframes shop-line{
  0%{--line:0;--line-o:1;--head-o:0;animation-timing-function:cubic-bezier(.3,.05,.3,1)}
  8%{--head-o:1}
  46%{--line:1}
  54%{--head-o:0}
  70%{--line-o:1}
  100%{--line:1;--line-o:0;--head-o:0}
}

/* Product cards stay flat like the other panes (glow per product was too much, 29.09); only the button lights up on hover. */
.shop-glass[data-look="glow"] .shop-add:hover{background:#b6a0ff;border-color:transparent;color:#140d24}.shop-glass[data-look="glow"] .shop-add:hover>span{color:#140d24}
.shop-glass[data-look="glow"] .shop-cart-surface{background:linear-gradient(180deg,#17161d,#0d0d11);box-shadow:inset 0 1px 0 #ffffff1c,inset 0 0 0 1px #b6a0ff33,0 0 40px -10px #7045ff80,0 24px 60px #000a}
/* ---------- Look "aurora" ---------- */
.shop-glass[data-look="aurora"] .shop-window{border-color:#ffffff26;background:radial-gradient(60% 50% at 8% 4%,#14e0c230,transparent 70%),radial-gradient(55% 55% at 96% 96%,#ff4fa12b,transparent 70%),radial-gradient(70% 60% at 60% 40%,#4f5dff21,transparent 75%),#06070d}
.shop-glass[data-look="aurora"] :is(.shop-store-nav>strong,.shop-store-nav>[data-piece="nav"],.shop-search,.shop-bag,.shop-filters,.shop-collection,.shop-product,.shop-no-results){background:linear-gradient(160deg,#151b2ce0,#0b0d17ed);box-shadow:inset 1px 1px 0 #43f0d852,inset -1px -1px 0 #ff5fa245,0 12px 30px #0000008c}
.shop-glass[data-look="aurora"] .shop-bag:hover{background:linear-gradient(160deg,#1b2338,#0f1220)}
.shop-glass[data-look="aurora"] .shop-bag b{background:linear-gradient(135deg,#3ff0d5,#ff5fa2);color:#07101a;box-shadow:0 0 12px #3ff0d580}
.shop-glass[data-look="aurora"] .shop-filter-option:has(input:checked){color:#fff;text-shadow:0 0 14px #3ff0d5}
.shop-glass[data-look="aurora"] .shop-color[aria-pressed="true"]{box-shadow:0 0 12px #3ff0d5}
.shop-glass[data-look="aurora"] .shop-add:hover{background:linear-gradient(90deg,#3ff0d5,#8f9bff 50%,#ff7ab8);border-color:transparent;color:#07101a}.shop-glass[data-look="aurora"] .shop-add:hover>span{color:#07101a}
.shop-glass[data-look="aurora"] .shop-cart-surface{background:linear-gradient(180deg,#151b2c,#0b0d17);box-shadow:inset 1px 1px 0 #43f0d852,inset -1px -1px 0 #ff5fa245,0 0 40px -10px #3ff0d566,0 24px 60px #000a}
.shop-glass[data-look="aurora"] .shop-collection:before{background:linear-gradient(90deg,transparent,#3ff0d5 30%,#ff5fa2 70%,transparent);box-shadow:0 0 12px #3ff0d5}
.shop-glass[data-look="aurora"] .shop-collection:after{background:linear-gradient(90deg,transparent,#c9fff6 80%,#fff);box-shadow:6px 0 14px #3ff0d5}
/* ---------- Look "liquid" (Liquid glass) ---------- */
.shop-glass[data-look="liquid"] .shop-window{background:radial-gradient(42% 40% at 14% 12%,#6a4bffa6,transparent 70%),radial-gradient(38% 36% at 88% 10%,#ff4f9a80,transparent 70%),radial-gradient(48% 42% at 74% 92%,#ff8a3d73,transparent 70%),radial-gradient(44% 40% at 20% 94%,#1fb6ff66,transparent 70%),#0a0914}
.shop-glass[data-look="liquid"] :is(.shop-store-nav>strong,.shop-store-nav>[data-piece="nav"],.shop-search,.shop-bag,.shop-filters,.shop-collection,.shop-product,.shop-no-results){background:radial-gradient(120% 70% at 0% 0%,#ffffff1f,transparent 55%),linear-gradient(180deg,#ffffff1a,#ffffff06 45%,#ffffff03 70%,#ffffff0f),#0e0c1c5c;box-shadow:inset 0 1px 0 #ffffff8c,inset 1px 0 0 #ffffff38,inset -1px 0 0 #ffffff1a,inset 0 -1px 0 #ffffff29,inset 0 0 22px #ffffff0d,0 16px 36px #00000066}
.shop-glass[data-look="liquid"] .shop-bag:hover{background:linear-gradient(180deg,#ffffff2e,#ffffff0d),#0e0c1c5c}
.shop-glass[data-look="liquid"] .shop-bag b{background:#ffffffeb;color:#140d24;box-shadow:0 0 12px #ffffff80}
.shop-glass[data-look="liquid"] .shop-filter-option:has(input:checked){color:#fff;text-shadow:0 0 14px #ffffffa6}
.shop-glass[data-look="liquid"] .shop-color[aria-pressed="true"]{box-shadow:0 0 12px #ffffffb3}
.shop-glass[data-look="liquid"] .shop-add:hover{background:#ffffffeb;border-color:transparent;color:#140d24}.shop-glass[data-look="liquid"] .shop-add:hover>span{color:#140d24}
.shop-glass[data-look="liquid"] .shop-cart-surface{background:linear-gradient(180deg,#1c1834f2,#0e0c1cf5);box-shadow:inset 0 1px 0 #ffffff8c,inset 1px 0 0 #ffffff38,inset -1px 0 0 #ffffff1a,inset 0 -1px 0 #ffffff29,0 0 40px -10px #6a4bff80,0 24px 60px #000a}
.shop-glass[data-look="liquid"] .shop-collection:before{background:linear-gradient(90deg,transparent,#ffffffd9 30%,#ffffffd9 70%,transparent);box-shadow:0 0 10px #ffffffa6}
.shop-glass[data-look="liquid"] .shop-collection:after{background:linear-gradient(90deg,transparent,#fff 80%,#fff);box-shadow:6px 0 14px #fff}
/* Accents inside the store follow the look (teal in "aurora"); the section around the window stays as it is. */
.shop-glass[data-look="aurora"] .shop-store-nav>strong>i{color:#3ff0d5}
.shop-glass[data-look="aurora"] :is(.shop-filter-option,.shop-price-filter) input{accent-color:#3ff0d5}
.shop-glass[data-look="aurora"] .shop-color[aria-pressed="true"]{outline-color:#9ff7e8}
.shop-glass[data-look="aurora"] .shop-filter-reset{color:#9ff7e8;border-bottom-color:#3ff0d566}
.shop-glass[data-look="aurora"] :is(.shop-product-info p,.shop-add>span){color:#9ff7e8}


@media(max-width:1050px){.shop-glass .shop-store-actions>.shop-search{width:130px}.shop-glass .shop-store-nav>[data-piece="nav"]{gap:16px;padding:0 16px}}
@media(max-width:700px){
  .shop-glass .shop-eyebrow>.shop-look{display:flex;width:fit-content;margin:12px 0 0}
  .shop-look>b{font-size:8px}.shop-look button{padding:6px 10px;font-size:10px}
  .shop-glass .shop-content{padding:0 16px}
  .shop-glass .shop-store-nav{padding-top:16px;margin-bottom:16px}
  .shop-glass .shop-store-nav>strong{height:46px;padding:0 16px;font-size:24px}
  .shop-glass .shop-store-nav>[data-piece="nav"]{height:46px;padding:0 16px}
  .shop-glass .shop-bag{height:46px;padding:0 13px}
  .shop-glass .shop-filters{padding:12px 14px}
  .shop-glass .shop-collection{padding:12px 16px}
  .shop-glass .shop-collection>span:first-child{font-size:18px}
  .shop-glass .shop-product-info h3{font-size:17px}
}