/* Amaze Packaging — standalone static stylesheet */
:root {
  --radius: 0.25rem;
  --background: oklch(0.982 0.008 85);
  --foreground: oklch(0.24 0.02 40);
  --card: oklch(0.995 0.004 85);
  --primary: oklch(0.31 0.035 35);
  --primary-foreground: oklch(0.985 0.008 85);
  --secondary: oklch(0.945 0.018 75);
  --muted-foreground: oklch(0.48 0.02 45);
  --gold: oklch(0.74 0.09 78);
  --gold-deep: oklch(0.62 0.1 72);
  --border: oklch(0.9 0.015 80);
  --gradient-hero: linear-gradient(160deg, oklch(0.985 0.012 85) 0%, oklch(0.955 0.028 45) 55%, oklch(0.93 0.04 72) 100%);
  --shadow-soft: 0 18px 45px -28px oklch(0.35 0.05 50 / 0.55);
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--background) 85%, transparent); backdrop-filter: blur(8px); }
.header-inner { max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: 0.02em; }
.logo-accent { color: var(--gold-deep); }
.nav { display: none; gap: 2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }
.nav a:hover { color: var(--foreground); }
@media (min-width: 768px) { .nav { display: flex; } }
.cart-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; }
.cart-count { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius); padding: 0.75rem 1.75rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; transition: all 200ms ease; }
.btn-gold { background: var(--gold-deep); color: oklch(0.99 0.005 85); }
.btn-gold:hover { background: var(--gold); }
.btn-outline { border: 1px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--primary-foreground); }
.btn-block { width: 100%; }

/* Hero */
.hero { background-image: var(--gradient-hero); }
.hero-inner { max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .hero-inner { grid-template-columns: 1fr 1fr; padding: 7rem 1.5rem; } }
.eyebrow { margin-bottom: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold-deep); }
.hero h1 { font-size: 3rem; line-height: 1.05; }
@media (min-width: 768px) { .hero h1 { font-size: 3.75rem; } }
.hero-sub { margin-top: 1.5rem; max-width: 28rem; color: var(--muted-foreground); }
.hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-note { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.hero-note .star { color: var(--gold-deep); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hero-grid img { height: 14rem; width: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.hero-grid img:nth-child(2), .hero-grid img:nth-child(4) { margin-top: 2rem; }

/* Perks */
.perks { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--secondary) 50%, transparent); }
.perks-inner { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .perks-inner { grid-template-columns: repeat(3, 1fr); } }
.perk { display: flex; gap: 1rem; }
.perk-icon { color: var(--gold-deep); font-size: 1.1rem; margin-top: 0.25rem; }
.perk h3 { font-size: 1.15rem; }
.perk p { font-size: 0.875rem; color: var(--muted-foreground); }

/* Shop */
.shop { max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem; }
.shop-head { text-align: center; margin-bottom: 2.5rem; }
.shop-head h2 { font-size: 2.5rem; }
.shop-head p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
.filter-btn { border: 1px solid var(--border); border-radius: 9999px; padding: 0.5rem 1.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); transition: all 200ms ease; }
.filter-btn:hover { border-color: var(--gold-deep); }
.filter-btn.active { border-color: var(--gold-deep); background: var(--gold-deep); color: oklch(0.99 0.005 85); }
.grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }
.card { display: flex; flex-direction: column; }
.card-img-wrap { overflow: hidden; border-radius: var(--radius); background: var(--secondary); }
.card-img-wrap img { height: 16rem; width: 100%; object-fit: cover; transition: transform 500ms ease; }
.card:hover .card-img-wrap img { transform: scale(1.05); }
.card h3 { margin-top: 1rem; font-size: 1.15rem; line-height: 1.3; }
.price { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.price .now { color: var(--foreground); }
.price .was { text-decoration: line-through; }
.card-actions { margin-top: 1rem; display: flex; gap: 0.5rem; }
.card-actions .btn { flex: 1; }

/* Process */
.process { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--secondary) 40%, transparent); }
.process-inner { max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem; }
.process h2 { text-align: center; font-size: 2.5rem; }
.steps { margin-top: 3rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step-n { font-family: var(--font-serif); font-size: 1.875rem; color: var(--gold-deep); }
.steps h3 { margin-top: 0.5rem; font-size: 1.15rem; }
.steps p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* Contact */
.contact { max-width: 48rem; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.contact h2 { font-size: 2.5rem; }
.contact p { margin-top: 1rem; color: var(--muted-foreground); }
.contact-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 2rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }

/* Cart drawer */
.cart-overlay { position: fixed; inset: 0; z-index: 50; background: color-mix(in oklch, var(--foreground) 40%, transparent); opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; z-index: 51; height: 100%; width: 100%; max-width: 28rem; background: var(--card); box-shadow: -20px 0 50px -20px rgba(0,0,0,0.4); transform: translateX(100%); transition: transform 300ms ease; display: flex; flex-direction: column; }
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
.cart-head h2 { font-size: 1.5rem; }
.icon-btn { padding: 0.25rem; font-size: 1.25rem; }
.cart-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted-foreground); }
.cart-line { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.cart-line img { height: 5rem; width: 5rem; border-radius: var(--radius); object-fit: cover; }
.cart-line .cl-title { font-size: 0.875rem; line-height: 1.3; }
.cart-line .cl-price { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.qty-row { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.75rem; }
.qty-btn { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.qty-val { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cl-remove { margin-left: auto; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); text-decoration: underline; }
.cart-foot { border-top: 1px solid var(--border); padding: 1.25rem 1.5rem; }
.cart-subtotal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cart-subtotal span:first-child { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.cart-subtotal span:last-child { font-family: var(--font-serif); font-size: 1.25rem; }
.cart-note { margin-top: 0.75rem; text-align: center; font-size: 0.7rem; color: var(--muted-foreground); }
.btn-disabled { pointer-events: none; opacity: 0.5; }