/* ===========================================================
   CACAO CRUNCH
   Production Stylesheet v3
   PART 1 OF 4
   Brand Foundation
=========================================================== */

/*===========================================================
SELF HOSTED FONTS
Place the .woff2 files in:
/fonts/
===========================================================*/

@font-face{
    font-family:"Nunito";
    src:url("/fonts/Nunito-Regular.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Nunito";
    src:url("/fonts/Nunito-SemiBold.woff2") format("woff2");
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Nunito";
    src:url("/fonts/Nunito-Bold.woff2") format("woff2");
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Nunito";
    src:url("/fonts/Nunito-ExtraBold.woff2") format("woff2");
    font-weight:800;
    font-style:normal;
    font-display:swap;
}

/*===========================================================
ROOT
Inspired directly from your product packaging
===========================================================*/

:root{

--bg:#f8f4eb;
--surface:#fffdf9;
--surface-alt:#f4ede3;

--text:#35251e;
--muted:#78695d;

--primary:#6b3b1f;
--primary-dark:#472617;

--red:#b4202b;
--blue:#4aa4d5;
--purple:#8756b2;
--gold:#c99637;

--accent:#d8b07b;

--border:#ddd0c1;

--glass:rgba(255,255,255,.22);
--glass-border:rgba(255,255,255,.34);

--success:#22c55e;

--shadow-xs:0 3px 10px rgba(0,0,0,.04);
--shadow-sm:0 8px 18px rgba(0,0,0,.06);
--shadow:0 18px 40px rgba(0,0,0,.10);
--shadow-lg:0 35px 80px rgba(0,0,0,.16);

--radius:20px;
--radius-lg:34px;
--radius-pill:999px;

--transition:.35s cubic-bezier(.22,.61,.36,1);

--container:1240px;

}

/*===========================================================
RESET
===========================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:var(--bg);

color:var(--text);

font-family:"Nunito",
system-ui,
sans-serif;

font-weight:500;

line-height:1.7;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

overflow-x:hidden;

}

/*===========================================================
SELECTION
===========================================================*/

::selection{

background:var(--gold);

color:white;

}

/*===========================================================
SCROLLBAR
===========================================================*/

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#efe8df;
}

::-webkit-scrollbar-thumb{

background:#bfa58b;
border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#9d8066;

}

/*===========================================================
ELEMENTS
===========================================================*/

img{

display:block;
max-width:100%;
height:auto;

user-select:none;

}

a{

color:inherit;
text-decoration:none;

transition:var(--transition);

}

button{

font:inherit;

border:none;

cursor:pointer;

transition:var(--transition);

}

input,
textarea,
select{

font:inherit;

}

/*===========================================================
CONTAINER
===========================================================*/

.container{

width:min(100% - 2rem,var(--container));

margin-inline:auto;

}

/*===========================================================
SECTIONS
===========================================================*/

section{

padding:90px 0;

position:relative;

}

/*===========================================================
TYPOGRAPHY
===========================================================*/

h1,
h2,
h3,
h4,
h5{

font-family:"Nunito",sans-serif;

font-weight:800;

letter-spacing:-.03em;

color:var(--primary-dark);

line-height:1.05;

}

h1{

font-size:clamp(3rem,5vw,5rem);

margin-bottom:28px;

max-width:12ch;

}

h2{

font-size:clamp(2.25rem,4vw,3.4rem);

margin-bottom:18px;

}

h3{

font-size:1.45rem;

margin-bottom:12px;

}

p{

color:var(--muted);

font-size:1.02rem;

margin-bottom:20px;

max-width:65ch;

}

.eyebrow{

display:inline-flex;

align-items:center;

gap:.6rem;

font-size:.8rem;

font-weight:800;

letter-spacing:.28em;

text-transform:uppercase;

color:var(--red);

margin-bottom:20px;

}

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

/*===========================================================
PREMIUM MOTION
Only 6s & 9s animations
===========================================================*/

@keyframes settle6{

0%{

opacity:0;
transform:
translateY(40px)
scale(.97);

filter:blur(10px);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

filter:blur(0);

}

}

@keyframes settle9{

0%{

opacity:0;

transform:
translateY(60px)
scale(1.04);

filter:blur(14px);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

filter:blur(0);

}

}

@keyframes floatSlow{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

@keyframes shimmer{

0%{

background-position:-300px 0;

}

100%{

background-position:300px 0;

}

}

/*===========================================================
GLOBAL ANIMATION HELPERS
===========================================================*/

.settle-6{

animation:settle6 6s cubic-bezier(.22,.61,.36,1) forwards;

}

.settle-9{

animation:settle9 9s cubic-bezier(.22,.61,.36,1) forwards;

}

.float-slow{

animation:floatSlow 9s ease-in-out infinite;

}

/*===========================================================
SURFACE HELPERS
===========================================================*/

.glass{

background:var(--glass);

backdrop-filter:blur(24px);

-webkit-backdrop-filter:blur(24px);

border:1px solid var(--glass-border);

box-shadow:var(--shadow);

}

.shadow-soft{

box-shadow:var(--shadow-sm);

}

.shadow-large{

box-shadow:var(--shadow-lg);

}

/* ==========================================================
   HEADER / GLASS NAVIGATION
========================================================== */

.site-header{

position:fixed;

top:18px;

left:auto;

transform:translateX(-50%);

width:min(calc(100% - 32px),1240px);

z-index:1000;

background:rgba(255,253,249,.18);

/*-webkit-backdrop-filter:blur(24px);*\

backdrop-filter:blur(24px);*/

border:1px solid rgba(255,255,255,.35);

border-radius:26px;

box-shadow:
0 18px 60px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.35);

transition:
background .35s ease,
box-shadow .35s ease,
transform .35s ease;

animation:settle6 3s cubic-bezier(.22,.61,.36,1) forwards;

}

.site-header.scrolled{

background:rgba(255,253,249,.72);

box-shadow:
0 24px 70px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.45);

}

.site-header .container{

display:flex;

align-items:center;

justify-content:space-between;

height:82px;

padding-inline:22px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

display:flex;

align-items:center;

gap:14px;

flex-shrink:0;

}

.logo img{

height:52px;

width:auto;

transition:
transform .35s ease,
filter .35s ease;

}

.logo:hover img{

transform:scale(1.04);

filter:drop-shadow(0 10px 18px rgba(0,0,0,.12));

}

/* ==========================================================
   NAVIGATION
========================================================== */

nav{

display:flex;

align-items:center;

gap:12px;

}

nav a{

display:flex;

align-items:center;

justify-content:center;

padding:12px 18px;

border-radius:999px;

font-size:.95rem;

font-weight:700;

letter-spacing:.02em;

color:var(--primary-dark);

transition:
background .30s ease,
color .30s ease,
transform .30s ease,
box-shadow .30s ease;

}

nav a:not(.cart-button):hover{

background:rgba(255,255,255,.55);

transform:translateY(-2px);

box-shadow:0 8px 22px rgba(0,0,0,.08);

color:var(--red);

}

nav a:focus-visible{

outline:none;

background:rgba(255,255,255,.6);

box-shadow:
0 0 0 3px rgba(201,150,55,.25);

}

/* ==========================================================
   BUTTONS
========================================================== */

.primary-button,
.checkout-button{

display:inline-flex;

align-items:center;

justify-content:center;

gap:.65rem;

padding:15px 32px;

border-radius:999px;

font-family:"Nunito",sans-serif;

font-weight:800;

font-size:.96rem;

letter-spacing:.03em;

color:#fff;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

box-shadow:
0 12px 28px rgba(71,38,23,.22);

transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease,
filter .3s ease;

position:relative;

overflow:hidden;

}

.primary-button::before,
.checkout-button::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,.30) 50%,
transparent 100%
);

transform:translateX(-120%);

transition:transform .8s ease;

}

.primary-button:hover::before,
.checkout-button:hover::before{

transform:translateX(120%);

}

.primary-button:hover,
.checkout-button:hover{

transform:translateY(-3px);

box-shadow:
0 22px 45px rgba(71,38,23,.28);

filter:brightness(1.03);

}

.primary-button:active,
.checkout-button:active{

transform:translateY(0);

box-shadow:
0 8px 18px rgba(71,38,23,.18);

}

.primary-button:focus-visible,
.checkout-button:focus-visible{

outline:none;

box-shadow:
0 0 0 4px rgba(201,150,55,.25),
0 18px 42px rgba(71,38,23,.24);

}

/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.secondary-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 30px;

border-radius:999px;

font-weight:700;

background:rgba(255,255,255,.72);

border:1px solid rgba(221,208,193,.9);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

box-shadow:0 8px 20px rgba(0,0,0,.06);

transition:
all .3s ease;

}

.secondary-button:hover{

background:#fff;

transform:translateY(-2px);

box-shadow:
0 16px 34px rgba(0,0,0,.10);

}

/* ==========================================================
   CART BUTTON
========================================================== */

.cart-button{

display:flex;

align-items:center;

gap:.85rem;

padding:10px 16px;

border-radius:999px;

background:rgba(255,255,255,.35);

border:1px solid rgba(255,255,255,.45);

backdrop-filter:blur(16px);

-webkit-backdrop-filter:blur(16px);

box-shadow:
0 10px 28px rgba(0,0,0,.08);

font-weight:800;

transition:
all .35s ease;

}

.cart-button:hover{

transform:translateY(-2px);

background:rgba(255,255,255,.62);

box-shadow:
0 18px 42px rgba(0,0,0,.14);

}

.cart-button.active{

background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

border-color:transparent;

color:#fff;

}

.cart-counter{

display:flex;

align-items:center;

justify-content:center;

width:30px;

height:30px;

border-radius:50%;

background:var(--red);

color:#fff;

font-size:.82rem;

font-weight:800;

box-shadow:
0 8px 18px rgba(180,32,43,.28);

transition:
transform .3s ease,
background .3s ease;

}

.cart-button:hover .cart-counter{

transform:scale(1.08);

}

.cart-button.active .cart-counter{

background:#fff;

color:var(--red);

}

/* ==========================================================
   HERO / BANNER
========================================================== */

.hero{

position:relative;

padding:135px 0 90px;

overflow:hidden;

background:
linear-gradient(
180deg,
#fdfbf7 0%,
#f8f4eb 55%,
#f4ede3 100%
);

}

/* ==========================================================

   HERO ACTIONS

========================================================== */

.hero-actions{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-top:34px;

}


/* ==========================================================

   TRUST BAR

========================================================== */

.trust-bar{

padding:40px 0 90px;

background:transparent;

}

.trust-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

}

.trust-item,

.trust-grid .glass-card{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

padding:30px;

min-height:230px;

animation:fadeUp .7s ease both;

}

.trust-grid h3{

margin:16px 0 10px;

}

.trust-grid p{

margin:0;

}

/* ==========================================================

   PRODUCT ACTIONS

========================================================== */

.product-actions{

display:flex;

flex-direction:column;

gap:14px;

margin-top:auto;

}

.product-actions .secondary-button{

width:100%;

justify-content:center;

}

/* ==========================================================

   STORY

========================================================== */

.story-image{

border-radius:var(--radius-lg);

overflow:hidden;

box-shadow:var(--shadow-lg);

}

.story-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.story-content{

display:flex;

flex-direction:column;

justify-content:center;

}

.story-highlight{

margin-top:30px;

padding:24px;

border-left:5px solid var(--accent);

background:#fff;

border-radius:16px;

font-weight:600;

color:var(--primary);

box-shadow:var(--shadow-sm);

}

/* ==========================================================

   NEWSLETTER CARD

========================================================== */

.newsletter-card{

max-width:820px;

margin:auto;

padding:60px;

background:linear-gradient(

145deg,

#ffffff,

#f8f3ee

);

border-radius:var(--radius-lg);

box-shadow:var(--shadow-lg);

text-align:center;

}

.newsletter-card h2{

margin-bottom:18px;

}

.newsletter-card p{

max-width:620px;

margin:0 auto 30px;

}

/* ==========================================================

   FOOTER LOGO

========================================================== */

.footer-logo{

display:inline-block;

margin-bottom:24px;

}

.footer-links{

display:flex;

flex-direction:column;

gap:12px;

}

.footer-social{

display:flex;

gap:14px;

margin-top:20px;

}

.footer-social a{

display:flex;

justify-content:center;

align-items:center;

width:44px;

height:44px;

border-radius:50%;

background:rgba(255,255,255,.10);

transition:var(--transition);

}

.footer-social a:hover{

background:var(--primary);

transform:translateY(-3px);

}

/* ==========================================================

   RESPONSIVE ADDITIONS

========================================================== */

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.skip-link{
    position:absolute;
    left:20px;
    top:-60px;
    z-index:9999;
    padding:12px 18px;
    background:#6b3e1f;
    color:#fff;
    border-radius:12px;
    transition:top .25s ease;
}

.skip-link:focus{
    top:20px;
}


@media (max-width:980px){

.trust-grid{

grid-template-columns:repeat(2,1fr);

}

.hero-actions{

justify-content:center;

}

}

@media (max-width:768px){

.trust-grid{

grid-template-columns:1fr;

}

.hero-actions{

flex-direction:column;

}

.hero-actions .primary-button,

.hero-actions .secondary-button{

width:100%;

}

.newsletter-card{

padding:40px 28px;

}

}

/* Banner Container */

.hero-banner{

position:relative;

width:min(100%,1240px);

margin:0 auto 70px;

border-radius:34px;

overflow:hidden;

box-shadow:
0 28px 80px rgba(0,0,0,.14);

animation:settle9 9s cubic-bezier(.22,.61,.36,1) forwards;

}

/* Banner Image */

.hero-banner img{

display:block;

width:100%;

height:auto;

transform:scale(1.02);

animation:
bannerSettle 9s cubic-bezier(.22,.61,.36,1) forwards;

}

/* Top highlight */

.hero-banner::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:
linear-gradient(
180deg,
rgba(255,255,255,.18),
transparent 28%,
transparent 72%,
rgba(0,0,0,.05)
);

z-index:2;

}

/* Soft edge fade */

.hero-banner::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:
radial-gradient(
circle at center,
transparent 62%,
rgba(248,244,235,.18) 82%,
rgba(248,244,235,.65) 100%
);

z-index:3;

}

/* Main hero layout */

.hero-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:72px;

position:relative;

z-index:5;

animation:settle6 6s ease forwards;

}

.hero-content{

animation:settle6 6s ease forwards;

}

.hero-content h1{

max-width:11ch;

margin-bottom:24px;

}

.hero-content p{

max-width:560px;

font-size:1.08rem;

margin-bottom:34px;

}

/* Banner animation */

@keyframes bannerSettle{

0%{

transform:
translateY(18px)
scale(1.02);

filter:
blur(10px);

opacity:0;

}

100%{

transform:
translateY(0)
scale(1);

filter:
blur(0);

opacity:1;

}

}

/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-text{

font-size:1.08rem;

color:var(--muted);

max-width:560px;

margin-bottom:36px;

animation:settle6 6s cubic-bezier(.22,.61,.36,1) forwards;

}

.hero-actions{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

animation:settle6 6s cubic-bezier(.22,.61,.36,1) forwards;

}

.hero-actions .primary-button,
.hero-actions .secondary-button{

min-width:190px;

}

/* ==========================================================
   HERO IMAGE (Fallback)
   Used only if banner is removed
========================================================== */

.hero-card{

position:relative;

background:rgba(255,255,255,.45);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.40);

border-radius:30px;

padding:50px;

overflow:hidden;

box-shadow:
0 24px 70px rgba(0,0,0,.12);

animation:settle9 9s cubic-bezier(.22,.61,.36,1) forwards;

}

.hero-card img{

width:100%;

height:auto;

display:block;

animation:floatSlow 9s ease-in-out infinite;

}

/* ==========================================================
   HERO BACKGROUND ACCENTS
========================================================== */

.hero::before{

content:"";

position:absolute;

width:420px;

height:420px;

left:-180px;

top:-120px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(201,150,55,.16),
transparent 70%);

pointer-events:none;

}

.hero::after{

content:"";

position:absolute;

width:360px;

height:360px;

right:-140px;

bottom:-120px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(74,164,213,.10),
transparent 70%);

pointer-events:none;

}

/* ==========================================================
   HERO RESPONSIVE
========================================================== */

@media (max-width:980px){

.hero{

padding-top:120px;

}

.hero-banner{

margin-bottom:50px;

border-radius:24px;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.hero-content{

display:flex;

flex-direction:column;

align-items:center;

}

.hero-text{

margin-inline:auto;

}

.hero-actions{

justify-content:center;

}

}

@media (max-width:768px){

.hero{

padding-top:105px;

padding-bottom:70px;

}

.hero-banner{

border-radius:20px;

margin-bottom:40px;

}

.hero-actions{

flex-direction:column;

width:100%;

}

.hero-actions .primary-button,
.hero-actions .secondary-button{

width:100%;

max-width:340px;

}

}

@media (max-width:480px){

.hero{

padding-top:95px;

}

.hero-banner{

border-radius:16px;

}

.hero h1{

max-width:none;

}

.hero-text{

font-size:1rem;

}

}

/* ==========================================================
   PRODUCTS
========================================================== */

.products{

position:relative;

padding:100px 0;

background:linear-gradient(
180deg,
#f8f4eb 0%,
#fffdf9 45%,
#f8f4eb 100%
);

overflow:hidden;

}

.products::before{

content:"";

position:absolute;

top:-180px;

left:-140px;

width:420px;

height:420px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(201,150,55,.10),
transparent 72%
);

pointer-events:none;

}

.products::after{

content:"";

position:absolute;

right:-180px;

bottom:-140px;

width:380px;

height:380px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(74,164,213,.08),
transparent 70%
);

pointer-events:none;

}

.product-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:36px;

align-items:stretch;

position:relative;

z-index:2;

}

/* ==========================================================
   PRODUCT CARD
========================================================== */

.product-card{

position:relative;

display:flex;

flex-direction:column;

background:rgba(255,255,255,.78);

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.55);

border-radius:28px;

padding:30px;

overflow:hidden;

box-shadow:
0 16px 42px rgba(0,0,0,.08);

transition:

transform .35s ease,

box-shadow .35s ease,

border-color .35s ease;

animation:settle6 6s ease forwards;

}

.product-card:hover{

transform:

translateY(-10px);

border-color:rgba(201,150,55,.45);

box-shadow:

0 28px 65px rgba(0,0,0,.15);

}

.product-card::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:5px;

background:

linear-gradient(
90deg,

var(--red),

var(--gold),

var(--blue),

var(--purple)

);

opacity:.9;

}

.product-image{

display:flex;

justify-content:center;

align-items:center;

height:280px;

margin-bottom:28px;

border-radius:22px;

background:

linear-gradient(
180deg,
#fffdfb,
#f5ede3
);

overflow:hidden;

}

.product-image img{

max-width:220px;

width:100%;

transition:

transform 9s ease,

filter .35s ease;

}

.product-card:hover .product-image img{

transform:

scale(1.05);

}

.product-card h3{

font-size:1.55rem;

font-weight:800;

margin-bottom:12px;

color:var(--primary-dark);

}

.product-card p{

flex:1;

font-size:.98rem;

line-height:1.75;

margin-bottom:24px;

}

.price{

display:flex;

align-items:center;

gap:8px;

margin:18px 0 26px;

font-size:2rem;

font-weight:800;

color:var(--primary);

}

.product-actions{

display:flex;

flex-direction:column;

gap:14px;

margin-top:auto;

}

.product-actions button{

width:100%;

padding:16px;

border-radius:999px;

background:

linear-gradient(
135deg,

var(--primary),

var(--primary-dark)

);

color:white;

font-weight:800;

font-size:.95rem;

transition:all .35s ease;

}

.product-actions button:hover{

transform:translateY(-2px);

box-shadow:

0 20px 40px rgba(71,38,23,.25);

}

.product-actions a{

display:flex;

justify-content:center;

align-items:center;

padding:14px;

border-radius:999px;

background:white;

border:1px solid var(--border);

font-weight:700;

transition:all .35s ease;

}

.product-actions a:hover{

background:#f7f3ec;

transform:translateY(-2px);

}

.product-card.chocolate::before{

background:#6b3b1f;

}

.product-card.caramel::before{

background:#c99637;

}

.product-card.salty::before{

background:#4aa4d5;

}

.product-card.plain::before{

background:#8756b2;

}

/* ==========================================================
   PRODUCT DETAILS PAGE
========================================================== */

.product-page{

padding:140px 0 100px;

background:
linear-gradient(
180deg,
#fdfbf7 0%,
#f8f4eb 55%,
#fffdf9 100%
);

}

.product-layout{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.product-gallery{

position:relative;

display:flex;

justify-content:center;

align-items:center;

padding:50px;

border-radius:32px;

background:rgba(255,255,255,.72);

backdrop-filter:blur(16px);

-webkit-backdrop-filter:blur(16px);

box-shadow:
0 22px 60px rgba(0,0,0,.10);

animation:settle9 9s ease forwards;

}

.product-gallery img{

max-width:380px;

width:100%;

animation:floatSlow 9s ease-in-out infinite;

}

.product-info{

animation:settle6 6s ease forwards;

}

.product-info h1{

font-size:3.2rem;

margin-bottom:18px;

}

.product-price{

font-size:2.2rem;

font-weight:800;

color:var(--primary);

margin:18px 0 30px;

}

.product-description{

font-size:1.05rem;

line-height:1.8;

margin-bottom:34px;

}

.product-meta{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin:35px 0;

}

.meta-card{

padding:18px;

border-radius:18px;

background:white;

border:1px solid var(--border);

box-shadow:var(--shadow-xs);

}

.meta-card h4{

margin-bottom:8px;

font-size:1rem;

}

.meta-card p{

margin:0;

font-size:.95rem;

}

.product-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

}

.back-link{

display:inline-flex;

align-items:center;

font-weight:700;

margin-top:30px;

color:var(--primary);

}

@media(max-width:980px){

.product-layout{

grid-template-columns:1fr;

text-align:center;

}

.product-gallery{

order:-1;

}

.product-meta{

grid-template-columns:1fr;

}

.product-buttons{

justify-content:center;

}

}

/* ==========================================================
   OUR STORY
========================================================== */

.story{

padding:120px 0;

background:#fffdf9;

}

.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.story-image{

border-radius:30px;

overflow:hidden;

box-shadow:
0 24px 65px rgba(0,0,0,.12);

animation:settle9 9s ease forwards;

}

.story-image img{

width:100%;

display:block;

transition:transform 9s ease;

}

.story-image:hover img{

transform:scale(1.04);

}

.story-content{

animation:settle6 6s ease forwards;

}

.story-content h2{

margin-bottom:22px;

}

.story-content p{

margin-bottom:22px;

}

.story-highlight{

margin-top:32px;

padding:28px;

border-left:5px solid var(--gold);

background:#f8f4eb;

border-radius:18px;

font-weight:700;

color:var(--primary-dark);

}

@media(max-width:980px){

.story-grid{

grid-template-columns:1fr;

}

.story-content{

text-align:center;

}

}

/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter{

padding:120px 0;

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:white;

position:relative;

overflow:hidden;

}

.newsletter::before{

content:"";

position:absolute;

top:-180px;

right:-140px;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(255,255,255,.08),
transparent 70%);

}

.newsletter .container{

position:relative;

z-index:2;

}

.newsletter-card{

max-width:900px;

margin:auto;

padding:70px;

border-radius:34px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.18);

text-align:center;

animation:settle6 6s ease forwards;

}

.newsletter h2{

color:white;

margin-bottom:18px;

}

.newsletter p{

color:rgba(255,255,255,.86);

margin:0 auto 34px;

max-width:620px;

}

.newsletter-form{

display:flex;

gap:18px;

justify-content:center;

flex-wrap:wrap;

}

.newsletter-form input{

flex:1;

min-width:280px;

padding:18px 24px;

border:none;

border-radius:999px;

background:white;

font-size:1rem;

}

.newsletter-form button{

padding:18px 34px;

border-radius:999px;

background:var(--gold);

color:white;

font-weight:800;

transition:.3s;

}

.newsletter-form button:hover{

transform:translateY(-2px);

filter:brightness(1.05);

box-shadow:
0 18px 40px rgba(0,0,0,.18);

}

@media(max-width:768px){

.newsletter-card{

padding:40px 24px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input,
.newsletter-form button{

width:100%;

}

}

/* ==========================================================
   GENERAL COMPONENTS
========================================================== */

.divider{

width:100%;

height:1px;

background:linear-gradient(
90deg,
transparent,
rgba(107,59,31,.18),
transparent
);

margin:80px 0;

}

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:8px 18px;

border-radius:999px;

background:#fff;

border:1px solid var(--border);

font-size:.82rem;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--primary);

box-shadow:var(--shadow-xs);

}

.glass-card{

background:rgba(255,255,255,.72);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.45);

border-radius:28px;

box-shadow:var(--shadow);

}

.card{

background:#fff;

border-radius:24px;

padding:32px;

border:1px solid var(--border);

box-shadow:var(--shadow-xs);

transition:
transform .35s ease,
box-shadow .35s ease;

}

.card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.icon-circle{

display:flex;

align-items:center;

justify-content:center;

width:62px;

height:62px;

border-radius:50%;

background:linear-gradient(
135deg,
var(--gold),
#ddb56a
);

color:#fff;

font-size:1.4rem;

margin-bottom:20px;

}

.small-title{

font-size:.82rem;

font-weight:800;

letter-spacing:.16em;

text-transform:uppercase;

color:var(--red);

margin-bottom:14px;

}

/* ==========================================================
   FORMS
========================================================== */

form{

width:100%;

}

.form-group{

margin-bottom:22px;

}

label{

display:block;

margin-bottom:8px;

font-weight:700;

color:var(--primary-dark);

}

input,
textarea,
select{

width:100%;

padding:16px 20px;

border-radius:18px;

border:1px solid var(--border);

background:#fff;

font-size:1rem;

color:var(--text);

transition:
border-color .3s ease,
box-shadow .3s ease,
background .3s ease;

}

textarea{

min-height:160px;

resize:vertical;

}

input::placeholder,
textarea::placeholder{

color:#9b8f84;

}

input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:var(--gold);

box-shadow:
0 0 0 4px rgba(201,150,55,.16);

background:#fffefc;

}

input:disabled,
textarea:disabled,
select:disabled{

opacity:.65;

cursor:not-allowed;

background:#f5f2ed;

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.form-note{

font-size:.88rem;

color:var(--muted);

margin-top:10px;

}

/* ==========================================================
   FOOTER
========================================================== */

.footer{

padding:90px 0 40px;

background:linear-gradient(
180deg,
#3d271b,
#2d1c14
);

color:rgba(255,255,255,.88);

position:relative;

overflow:hidden;

}

.footer::before{

content:"";

position:absolute;

top:-180px;

left:-120px;

width:360px;

height:360px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(255,255,255,.06),
transparent 72%);

pointer-events:none;

}

.footer .container{

position:relative;

z-index:2;

}

.footer-grid{

display:grid;

grid-template-columns:
2fr
1fr
1fr
1fr;

gap:50px;

margin-bottom:60px;

}

.footer-logo{

width:170px;

margin-bottom:22px;

}

.footer p{

color:rgba(255,255,255,.72);

margin-bottom:20px;

max-width:360px;

}

.footer h4{

color:#fff;

margin-bottom:18px;

font-size:1.1rem;

}

.footer-links{

display:flex;

flex-direction:column;

gap:12px;

}

.footer-links a{

color:rgba(255,255,255,.72);

transition:
color .3s ease,
transform .3s ease;

}

.footer-links a:hover{

color:#fff;

transform:translateX(4px);

}

.footer-social{

display:flex;

gap:14px;

margin-top:24px;

}

.footer-social a{

display:flex;

align-items:center;

justify-content:center;

width:44px;

height:44px;

border-radius:50%;

background:rgba(255,255,255,.08);

transition:
background .3s ease,
transform .3s ease;

}

.footer-social a:hover{

background:var(--gold);

transform:translateY(-3px);

}

.footer-bottom{

padding-top:26px;

border-top:1px solid rgba(255,255,255,.10);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

font-size:.9rem;

color:rgba(255,255,255,.60);

}

.footer-bottom a{

color:rgba(255,255,255,.70);

}

.footer-bottom a:hover{

color:#fff;

}

@media(max-width:980px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.form-row{

grid-template-columns:1fr;

}

.footer{

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer p{

margin-inline:auto;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

justify-content:center;

text-align:center;

}

}


/* ==========================================================
   CART
========================================================== */

.cart-page{

padding:140px 0 90px;

background:
linear-gradient(
180deg,
#fdfbf7 0%,
#f8f4eb 55%,
#fffdf9 100%
);

min-height:100vh;

}

.cart-layout{

display:grid;

grid-template-columns:2fr 420px;

gap:42px;

align-items:start;

}

.cart-items{

display:flex;

flex-direction:column;

gap:24px;

}

.cart-item{

display:grid;

grid-template-columns:120px 1fr auto;

gap:28px;

align-items:center;

padding:24px;

background:rgba(255,255,255,.82);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border-radius:26px;

border:1px solid rgba(255,255,255,.45);

box-shadow:var(--shadow-sm);

animation:settle6 6s ease forwards;

transition:
transform .35s ease,
box-shadow .35s ease;

}

.cart-item:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

.cart-item img{

width:100px;

margin:auto;

transition:transform 9s ease;

}

.cart-item:hover img{

transform:scale(1.05);

}

.cart-details h3{

margin-bottom:8px;

font-size:1.3rem;

}

.cart-details p{

margin-bottom:12px;

font-size:.95rem;

}

.cart-price{

font-size:1.4rem;

font-weight:800;

color:var(--primary);

}

.cart-controls{

display:flex;

align-items:center;

gap:12px;

margin-top:18px;

}

.qty-button{

width:42px;

height:42px;

border-radius:50%;

background:white;

border:1px solid var(--border);

font-size:1.2rem;

font-weight:700;

transition:.3s;

}

.qty-button:hover{

background:var(--gold);

color:white;

transform:translateY(-2px);

}

.qty-value{

width:42px;

text-align:center;

font-weight:800;

}

.remove-item{

margin-top:16px;

color:var(--red);

font-weight:700;

cursor:pointer;

transition:.3s;

}

.remove-item:hover{

opacity:.75;

}

/* ==========================================================
   CART SUMMARY
========================================================== */

.cart-summary{

position:sticky;

top:120px;

padding:34px;

background:rgba(255,255,255,.80);

backdrop-filter:blur(20px);

border-radius:30px;

border:1px solid rgba(255,255,255,.45);

box-shadow:var(--shadow);

animation:settle9 9s ease forwards;

}

.cart-summary h2{

margin-bottom:28px;

font-size:2rem;

}

.summary-row{

display:flex;

justify-content:space-between;

margin-bottom:18px;

font-size:1rem;

}

.summary-row.total{

margin-top:28px;

padding-top:22px;

border-top:1px solid var(--border);

font-size:1.3rem;

font-weight:800;

}

.checkout-button{

width:100%;

margin-top:34px;

padding:18px;

font-size:1rem;

}

/* ==========================================================
   CHECKOUT
========================================================== */

.checkout-page{

padding:140px 0 100px;

background:
linear-gradient(
180deg,
#fffdf9,
#f7f2e8
);

}

.checkout-layout{

display:grid;

grid-template-columns:1.4fr .9fr;

gap:46px;

align-items:start;

}

.checkout-card{

padding:40px;

background:rgba(255,255,255,.82);

backdrop-filter:blur(18px);

border-radius:30px;

border:1px solid rgba(255,255,255,.45);

box-shadow:var(--shadow);

animation:settle6 6s ease forwards;

}

.checkout-card h2{

margin-bottom:28px;

}

.checkout-section{

margin-bottom:38px;

}

.checkout-section:last-child{

margin-bottom:0;

}

.checkout-summary{

position:sticky;

top:120px;

padding:34px;

background:white;

border-radius:28px;

box-shadow:var(--shadow-sm);

border:1px solid var(--border);

animation:settle9 9s ease forwards;

}

.checkout-summary h3{

margin-bottom:22px;

}

.checkout-item{

display:flex;

justify-content:space-between;

margin-bottom:16px;

font-size:.95rem;

}

.checkout-total{

margin-top:24px;

padding-top:22px;

border-top:1px solid var(--border);

display:flex;

justify-content:space-between;

font-size:1.35rem;

font-weight:800;

}

.payment-icons{

display:flex;

gap:14px;

margin-top:22px;

flex-wrap:wrap;

opacity:.8;

}

.payment-icons img{

height:28px;

width:auto;

}

.secure-checkout{

margin-top:24px;

display:flex;

align-items:center;

gap:12px;

font-weight:700;

color:var(--success);

font-size:.95rem;

}

/* ==========================================================
   EMPTY CART
========================================================== */

.empty-cart{

text-align:center;

padding:100px 30px;

background:white;

border-radius:30px;

border:1px dashed var(--border);

}

.empty-cart img{

max-width:220px;

margin:0 auto 30px;

opacity:.9;

}

.empty-cart h2{

margin-bottom:16px;

}

.empty-cart p{

margin:0 auto 28px;

max-width:500px;

}

/* ==========================================================
   SUCCESS PAGE
========================================================== */

.success-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:140px 20px;

background:
linear-gradient(
180deg,
#fffdf9 0%,
#f8f4eb 100%
);

}

.success-card{

max-width:760px;

width:100%;

padding:70px 60px;

text-align:center;

background:rgba(255,255,255,.82);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border-radius:34px;

border:1px solid rgba(255,255,255,.45);

box-shadow:
0 30px 80px rgba(0,0,0,.12);

animation:settle9 9s ease forwards;

}

.success-icon{

display:flex;

justify-content:center;

align-items:center;

width:120px;

height:120px;

margin:0 auto 34px;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--success),
#47d47a
);

color:white;

font-size:3rem;

box-shadow:
0 18px 45px rgba(34,197,94,.28);

animation:floatSlow 9s ease-in-out infinite;

}

.success-card h1{

margin-bottom:22px;

font-size:3rem;

}

.success-card p{

max-width:560px;

margin:0 auto 34px;

}

.success-actions{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-top:30px;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

.container{

width:min(calc(100% - 40px),1100px);

}

.hero-grid,
.product-layout,
.story-grid,
.checkout-layout,
.cart-layout{

gap:36px;

}

}

@media (max-width:980px){

.hero-grid,
.story-grid,
.product-layout,
.checkout-layout,
.cart-layout,
.footer-grid{

grid-template-columns:1fr;

}

.cart-summary,
.checkout-summary{

position:relative;

top:auto;

margin-top:30px;

}

.product-grid{

grid-template-columns:
repeat(2,minmax(0,1fr));

}

nav{

gap:6px;

}

nav a{

padding:10px 14px;

font-size:.9rem;

}

}

@media (max-width:768px){

section{

padding:80px 0;

}

.container{

width:min(calc(100% - 28px),100%);

}

.product-grid{

grid-template-columns:1fr;

}

.cart-item{

grid-template-columns:1fr;

text-align:center;

}

.cart-controls{

justify-content:center;

}

.product-buttons,
.hero-actions,
.success-actions{

flex-direction:column;

}

.primary-button,
.secondary-button,
.checkout-button{

width:100%;

}

.footer-bottom{

flex-direction:column;

gap:14px;

}

}

@media (max-width:480px){

html{

font-size:15px;

}

h1{

font-size:2.4rem;

}

h2{

font-size:2rem;

}

.hero{

padding-top:90px;

}

.hero-banner{

border-radius:16px;

}

.product-card{

padding:22px;

}

.checkout-card,
.success-card,
.cart-summary{

padding:26px;

}

}

/* ==========================================================
   LANDSCAPE IPHONE / SAFARI
========================================================== */

@media screen
and (max-height:500px)
and (orientation:landscape){

.hero{

padding-top:105px;

padding-bottom:60px;

}

.hero-banner{

margin-bottom:35px;

}

.hero-grid{

grid-template-columns:1fr 1fr;

gap:28px;

align-items:center;

}

.hero h1{

font-size:2.5rem;

}

.product-layout{

grid-template-columns:1fr 1fr;

}

.story-grid{

grid-template-columns:1fr 1fr;

}

}

/* ==========================================================
   SAFARI FIXES
========================================================== */

@supports (-webkit-touch-callout:none){

html{

-webkit-text-size-adjust:100%;

}

body{

overflow-x:hidden;

}

img{

max-width:100%;

height:auto;

}

.hero-banner img{

transform:translateZ(0);

backface-visibility:hidden;

-webkit-backface-visibility:hidden;

will-change:transform;

}

.site-header{

/*-webkit-backdrop-filter:blur(24px);*/

}

.glass,
.hero-card,
.product-card,
.cart-summary,
.checkout-card,
.newsletter-card{

-webkit-backdrop-filter:blur(18px);

}

button,
a{

-webkit-tap-highlight-color:transparent;

}

input,
textarea,
select{

appearance:none;

-webkit-appearance:none;

border-radius:18px;

}

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/* ==========================================================
   PRINT STYLES
========================================================== */

@media print{

*{

background:transparent !important;

color:#000 !important;

box-shadow:none !important;

text-shadow:none !important;

animation:none !important;

transition:none !important;

filter:none !important;

}

html,
body{

background:#fff;

font-size:12pt;

line-height:1.45;

}

.site-header,
.hero-actions,
.newsletter,
.footer,
.cart-button,
.primary-button,
.secondary-button,
.checkout-button,
button,
video,
iframe{

display:none !important;

}

section{

padding:18pt 0 !important;

break-inside:avoid;

}

.container{

width:100%;

max-width:none;

padding:0;

margin:0;

}

img{

max-width:100%;

page-break-inside:avoid;

}

a{

text-decoration:none;

color:#000;

}

h1,
h2,
h3{

page-break-after:avoid;

}

table{

page-break-inside:auto;

}

tr{

page-break-inside:avoid;

}

}

/* ==========================================================
   FINAL UTILITIES
========================================================== */

.text-center{

text-align:center;

}

.text-left{

text-align:left;

}

.text-right{

text-align:right;

}

.flex{

display:flex;

}

.flex-column{

flex-direction:column;

}

.flex-center{

display:flex;

justify-content:center;

align-items:center;

}

.space-between{

justify-content:space-between;

}

.wrap{

flex-wrap:wrap;

}

.grid{

display:grid;

}

.hidden{

display:none !important;

}

.visible{

display:block !important;

}

.w-100{

width:100%;

}

.h-100{

height:100%;

}

.round{

border-radius:50%;

}

.radius{

border-radius:var(--radius);

}

.radius-lg{

border-radius:var(--radius-lg);

}

.mt-1{margin-top:.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:2rem;}
.mt-4{margin-top:3rem;}

.mb-1{margin-bottom:.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:2rem;}
.mb-4{margin-bottom:3rem;}

.pt-1{padding-top:.5rem;}
.pt-2{padding-top:1rem;}
.pt-3{padding-top:2rem;}
.pt-4{padding-top:3rem;}

.pb-1{padding-bottom:.5rem;}
.pb-2{padding-bottom:1rem;}
.pb-3{padding-bottom:2rem;}
.pb-4{padding-bottom:3rem;}

.opacity-0{opacity:0;}
.opacity-50{opacity:.5;}
.opacity-75{opacity:.75;}
.opacity-100{opacity:1;}

.shadow-none{

box-shadow:none !important;

}

.shadow-soft{

box-shadow:var(--shadow-sm);

}

.shadow{

box-shadow:var(--shadow);

}

.shadow-large{

box-shadow:var(--shadow-lg);

}

.glass-light{

background:rgba(255,255,255,.68);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.40);

}

.border{

border:1px solid var(--border);

}

.border-top{

border-top:1px solid var(--border);

}

.border-bottom{

border-bottom:1px solid var(--border);

}

/* ==========================================================
   PERFORMANCE OPTIMIZATIONS
========================================================== */

/* GPU acceleration */

.hero-banner img,
.product-image img,
.story-image img,
.logo img,
.product-gallery img{

transform:translateZ(0);

backface-visibility:hidden;

-webkit-backface-visibility:hidden;

will-change:transform;

}

/* Smooth scrolling */

html{

scroll-padding-top:110px;

}

/* Faster interactions */

button,
a,
input,
select,
textarea{

touch-action:manipulation;

}

/* Lazy loaded images */

img[loading="lazy"]{

content-visibility:auto;

}

/* Skip rendering offscreen sections */

.products,
.story,
.newsletter,
.footer{

content-visibility:auto;

contain-intrinsic-size:900px;

}

/* Better repaint isolation */

.product-card,
.cart-item,
.checkout-card,
.newsletter-card,
.success-card{

contain:layout paint style;

}

/* Reduce expensive paints */

.hero,
.products,
.story{

isolation:isolate;

}

/* Improve font rendering */

body{

text-rendering:optimizeLegibility;

font-kerning:normal;

}

/* Better mobile scrolling */

body{

-webkit-overflow-scrolling:touch;

overscroll-behavior-y:none;

}

/* Better focus */

:focus-visible{

outline:2px solid var(--gold);

outline-offset:3px;

}

/* Selection */

::selection{

background:var(--gold);

color:#fff;

}

/* Images */

svg,
img{

vertical-align:middle;

}

/* Prevent layout shift */

img{

height:auto;

}

/* End of stylesheet */