@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/font-1.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/font-1.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/font-1.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/font-2.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/font-2.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/font-2.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/font-2.woff2') format('woff2')}

:root{
  --background:oklch(0.96 0.022 92);
  --foreground:oklch(0.32 0.045 158);
  --card:oklch(0.98 0.015 92);
  --primary:oklch(0.34 0.055 158);
  --primary-foreground:oklch(0.96 0.022 92);
  --secondary:oklch(0.91 0.03 92);
  --muted-foreground:oklch(0.48 0.045 158);
  --accent:oklch(0.62 0.16 42);
  --accent-foreground:oklch(0.98 0.015 92);
  --border:oklch(0.86 0.035 130);
  --destructive:oklch(0.577 0.245 27.325);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--background);color:var(--foreground)}
body{font-family:'Mulish',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
.serif{font-family:'Fraunces',Georgia,serif}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:64rem;margin:0 auto;padding:0 1.25rem}

/* Header */
.header{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in oklch,var(--border) 60%,transparent);background:color-mix(in oklch,var(--background) 85%,transparent);backdrop-filter:blur(10px)}
.header-inner{max-width:64rem;margin:0 auto;height:4rem;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;gap:.75rem}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;padding:0 1rem;border-radius:999px;border:2px solid var(--primary);background:var(--background);color:var(--primary);font-weight:700;font-size:.875rem;letter-spacing:.03em;transition:.2s}
.cart-btn:hover{background:var(--primary);color:var(--primary-foreground)}
.cart-btn svg{width:1.25rem;height:1.25rem}
.cart-count{position:absolute;top:-.375rem;right:-.375rem;display:none;min-width:1.25rem;height:1.25rem;padding:0 .3rem;align-items:center;justify-content:center;border-radius:999px;background:var(--accent);color:var(--accent-foreground);font-size:.75rem;font-weight:700}
.cart-count.show{display:flex}
.brand{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;letter-spacing:.2em;color:var(--primary)}
.header-spacer{width:2.75rem;height:2.75rem}

/* Hero */
.hero{max-width:42rem;margin:0 auto;padding:3.5rem 1.5rem 1rem;text-align:center}
.hero h1{font-family:'Fraunces',serif;font-size:1.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;text-wrap:balance}
.hero p{margin-top:1.5rem;font-size:.9375rem;line-height:1.65;color:var(--muted-foreground);text-wrap:pretty}

/* Flavor */
.flavor{max-width:64rem;margin:0 auto;display:grid;gap:2rem;align-items:center;padding:3rem 1.25rem}
.scene-wrap{position:relative;width:100%;max-width:26rem;margin:0 auto;aspect-ratio:1}
.ring-svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite}
.ring-text{fill:var(--foreground);font-family:'Mulish',sans-serif;font-size:10px;letter-spacing:.14em;font-weight:700}
.scene-oval{position:absolute;inset:9%;overflow:hidden;border-radius:999px;box-shadow:0 20px 40px -12px rgba(0,0,0,.35);outline:1px solid rgba(0,0,0,.05)}
.scene-oval img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ring-svg{animation:none}}

.details{display:flex;flex-direction:column;align-items:center;text-align:center}
.flavor-title{font-family:'Fraunces',serif;font-size:2.25rem;line-height:1.05;text-wrap:balance}
.flavor-title span{display:block}
.mix-label{margin-top:1.25rem;font-size:.75rem;font-weight:700;letter-spacing:.22em;color:var(--muted-foreground)}
.mix-pill{margin-top:.75rem;width:100%;max-width:24rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem .5rem;background:var(--primary);color:var(--primary-foreground);padding:.625rem 1.5rem;border-radius:999px;font-size:.875rem;font-weight:600}
.mix-pill .diamond{color:color-mix(in oklch,var(--primary-foreground) 50%,transparent)}
.tagline{margin-top:1.25rem;font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}
.buy-btn{margin-top:1.75rem;width:100%;max-width:24rem;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;border:2px solid var(--primary);color:var(--primary);padding:.875rem 2rem;border-radius:999px;font-size:.875rem;font-weight:700;letter-spacing:.18em;transition:.2s}
.buy-btn:hover{background:var(--primary);color:var(--primary-foreground)}
.buy-price{letter-spacing:normal;opacity:.7}
.buy-btn:hover .buy-price{opacity:1}

@media(min-width:1024px){
  .hero h1{font-size:2.25rem}
  .flavor{grid-template-columns:1fr 1fr;gap:3rem;padding:6rem 1.25rem}
  .flavor:not(.reverse) .details{align-items:flex-end;text-align:right}
  .flavor.reverse .details{align-items:flex-start;text-align:left}
}

/* Footer */
.footer{border-top:1px solid var(--border);text-align:center;padding:2.5rem 1.25rem;color:var(--muted-foreground);font-size:.8125rem}

/* Cart drawer */
.cart-root{position:fixed;inset:0;z-index:50}
.cart-root[hidden]{display:none}
.cart-overlay{position:absolute;inset:0;background:color-mix(in oklch,var(--primary) 40%,transparent);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.cart-panel{position:absolute;top:0;right:0;height:100%;width:100%;max-width:28rem;display:flex;flex-direction:column;background:var(--background);box-shadow:-10px 0 40px rgba(0,0,0,.25);transform:translateX(100%);transition:transform .3s ease-out}
.cart-root.open .cart-overlay{opacity:1}
.cart-root.open .cart-panel{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:1rem 1.25rem}
.cart-head h2{font-family:'Fraunces',serif;font-size:1.5rem;display:flex;align-items:center;gap:.5rem}
.cart-head .cnt{color:var(--muted-foreground);font-size:1rem;font-family:'Mulish',sans-serif}
.icon-btn{display:grid;place-items:center;padding:.5rem;border-radius:999px;transition:.2s}
.icon-btn:hover{background:var(--secondary)}
.icon-btn svg{width:1.25rem;height:1.25rem}
.cart-body{flex:1;overflow-y:auto;padding:1rem 1.25rem}
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:1.5rem}
.cart-empty .big{font-family:'Fraunces',serif;font-size:1.5rem}
.cart-empty p{font-size:.875rem;color:var(--muted-foreground)}
.link-btn{margin-top:.5rem;border:2px solid var(--primary);color:var(--primary);padding:.625rem 1.5rem;border-radius:999px;font-weight:700;font-size:.875rem;transition:.2s}
.link-btn:hover{background:var(--primary);color:var(--primary-foreground)}
.ship-note{margin-bottom:1rem;border-radius:.75rem;background:var(--secondary);padding:.75rem 1rem;text-align:center;font-size:.875rem}
.ship-note.free{background:var(--accent);color:var(--accent-foreground);font-weight:600}
.cart-list{list-style:none;display:flex;flex-direction:column;gap:1rem}
.cart-item{display:flex;gap:1rem}
.cart-item .thumb{position:relative;width:5rem;height:5rem;flex-shrink:0;border-radius:.75rem;overflow:hidden;background:var(--secondary);outline:1px solid var(--border)}
.cart-item .thumb img{width:100%;height:100%;object-fit:cover}
.cart-item .info{flex:1;display:flex;flex-direction:column}
.cart-item .row1{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start}
.cart-item .nm{font-family:'Fraunces',serif;font-size:1.125rem;line-height:1.2}
.cart-item .unit{font-size:.875rem;color:var(--muted-foreground)}
.trash{padding:.25rem;border-radius:999px;color:var(--muted-foreground);transition:.2s}
.trash:hover{color:var(--destructive)}
.trash svg{width:1rem;height:1rem}
.qty-row{margin-top:auto;padding-top:.5rem;display:flex;align-items:center;justify-content:space-between}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px}
.stepper button{display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;transition:.2s}
.stepper button:hover{background:var(--secondary)}
.stepper button svg{width:1rem;height:1rem}
.stepper .q{width:2rem;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.line-total{font-weight:700;font-variant-numeric:tabular-nums}
.clear-btn{margin-top:1.25rem;font-size:.875rem;color:var(--muted-foreground);text-decoration:underline;text-underline-offset:4px}
.clear-btn:hover{color:var(--destructive)}
.cart-foot{border-top:1px solid var(--border);padding:1rem 1.25rem}
.foot-row{display:flex;justify-content:space-between;font-size:.875rem;color:var(--muted-foreground)}
.foot-total{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.foot-total .lbl{font-family:'Fraunces',serif;font-size:1.25rem}
.foot-total .val{font-family:'Fraunces',serif;font-size:1.5rem;font-variant-numeric:tabular-nums}
.checkout-btn{margin-top:1rem;width:100%;border-radius:999px;background:var(--primary);color:var(--primary-foreground);padding:1rem;font-weight:700;font-size:.875rem;letter-spacing:.18em;transition:opacity .2s}
.checkout-btn:hover{opacity:.9}
.tabnum{font-variant-numeric:tabular-nums}


/* Giftoboom product/legal additions */
.product-specs{
  margin-top:1.15rem;
  width:100%;
  max-width:24rem;
  padding:1rem 1.1rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:color-mix(in oklch,var(--card) 72%,transparent);
  font-size:.82rem;
  line-height:1.55;
  color:var(--muted-foreground);
}
.product-specs p + p{margin-top:.35rem}
.product-specs b{color:var(--foreground);font-weight:800}
.legal-footer{text-align:left}
.footer-inner{max-width:64rem;margin:0 auto}
.footer-brand{text-align:center;color:var(--foreground);font-weight:700}
.footer-links{
  margin:1.35rem auto 1rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.55rem 1rem;
}
.footer-links a,
.footer-requisites a{color:var(--foreground);text-decoration:underline;text-underline-offset:3px}
.footer-requisites{text-align:center;line-height:1.65}


/* Product separators */
.product-divider{
  width:min(960px,calc(100% - 40px));
  margin:10px auto 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  color:var(--foreground);
  opacity:.72;
}

.product-divider-line{
  height:2px;
  background:
    repeating-linear-gradient(
      to right,
      currentColor 0 14px,
      transparent 14px 24px
    );
  border-radius:999px;
}

.product-divider-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:14px;
  line-height:1;
  background:var(--background);
}

@media (max-width:640px){
  .product-divider{
    width:calc(100% - 28px);
    margin:4px auto 10px;
    gap:10px;
  }

  .product-divider-line{
    height:1.5px;
    background:
      repeating-linear-gradient(
        to right,
        currentColor 0 10px,
        transparent 10px 17px
      );
  }

  .product-divider-mark{
    width:28px;
    height:28px;
    font-size:12px;
  }
}

/* Safari/iOS: decorative rotating ring must never intercept taps */
.ring-svg {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}