/*
Theme Name: Lily Rose Cookies
Theme URI: https://example.com/
Author: Custom
Description: A warm, boutique cookie bakery WordPress theme inspired by the Lily Rose Cookies brand guide.
Version: 1.0.0
Text Domain: lily-rose-cookies
*/

:root{
  --blush:#FDE0D6;
  --pink:#FF9294;
  --tan:#D0A77B;
  --caramel:#9F7546;
  --brown:#423124;
  --cream:#fffaf7;
  --line:rgba(66,49,36,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:"Montserrat",Arial,sans-serif;
  line-height:1.6;
}
a{color:inherit}
img{max-width:100%;height:auto}
.site-wrap{overflow:hidden}

.container{width:min(1120px,calc(100% - 40px));margin:auto}

.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,250,247,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px
}
.site-branding a{text-decoration:none}
.wordmark{
  margin:0;font-size:1.55rem;letter-spacing:.22em;font-weight:800;color:var(--brown)
}
.wordmark span{color:var(--pink)}
.tagline{font-family:Georgia,serif;letter-spacing:.12em;font-size:.8rem;color:var(--caramel);margin-top:-3px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}
.main-nav a{text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.main-nav a:hover{color:var(--pink)}
.menu-toggle{display:none;background:none;border:0;font:inherit;color:var(--brown);font-weight:700}

.hero{
  min-height:630px;
  display:grid;place-items:center;
  padding:90px 0;
  background:
    radial-gradient(circle at 78% 24%, rgba(255,146,148,.32) 0 90px, transparent 91px),
    radial-gradient(circle at 14% 76%, rgba(208,167,123,.35) 0 120px, transparent 121px),
    linear-gradient(135deg,#fde0d6 0%,#f9e7de 55%,#f5d7cc 100%);
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:60px}
.eyebrow,.section-kicker{
  text-transform:uppercase;letter-spacing:.25em;font-size:.72rem;font-weight:800;color:var(--caramel)
}
.hero h1{
  margin:.15em 0 .1em;font-size:clamp(4rem,10vw,8.7rem);line-height:.9;letter-spacing:.07em
}
.hero h1 .cookie-o{
  display:inline-grid;place-items:center;width:.8em;height:.8em;border:4px solid currentColor;border-radius:50%;
  font-size:.62em;vertical-align:middle;position:relative
}
.cookie-o:after{content:"•  •  •";font-size:.38em;letter-spacing:.05em;position:absolute}
.hero .subline{
  margin:22px 0 30px;font-family:Georgia,serif;color:var(--caramel);
  font-size:clamp(1.3rem,2.5vw,2rem);letter-spacing:.12em
}
.button{
  display:inline-block;padding:14px 24px;border-radius:999px;text-decoration:none;
  background:var(--brown);color:white;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:.2s transform,.2s background
}
.button:hover{transform:translateY(-2px);background:var(--pink)}
.hero-card{
  aspect-ratio:1/1;border-radius:50%;background:var(--brown);padding:28px;border:8px solid rgba(255,255,255,.8);
  display:grid;place-items:center;text-align:center;box-shadow:0 30px 70px rgba(66,49,36,.22)
}
.hero-card-inner{
  width:100%;height:100%;border-radius:50%;border:1px dashed rgba(255,255,255,.35);
  display:grid;place-items:center;color:var(--blush);padding:28px
}
.hero-card strong{font-size:2.2rem;line-height:1;letter-spacing:.08em}
.hero-card p{margin:8px 0 0;font-size:.76rem;text-transform:uppercase;letter-spacing:.18em}

.section{padding:96px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 48px}
.section-title{
  margin:10px 0;font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.7rem);font-weight:500;letter-spacing:.04em
}
.section-copy{margin:auto;max-width:640px;color:rgba(66,49,36,.75)}

.pricing{background:var(--caramel);color:#fff}
.pricing .section-kicker{color:var(--blush)}
.pricing .section-title{color:#fff}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:55px}
.price-card{text-align:center;padding:22px 12px;border-top:1px solid rgba(255,255,255,.35)}
.price-card strong{display:block;font-size:1.7rem;font-weight:500}
.price-card span{font-size:.82rem;letter-spacing:.1em}

.cookie-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px}
.cookie{
  aspect-ratio:1/1;border-radius:50%;border:8px solid rgba(255,255,255,.9);
  display:grid;place-items:center;text-align:center;padding:25px;color:white;
  font-size:.86rem;text-transform:uppercase;letter-spacing:.08em;
  box-shadow:0 12px 30px rgba(0,0,0,.12)
}
.cookie:nth-child(4n+1){background:var(--tan)}
.cookie:nth-child(4n+2){background:var(--pink)}
.cookie:nth-child(4n+3){background:var(--blush);color:var(--brown)}
.cookie:nth-child(4n){background:var(--brown)}

.story{background:var(--blush)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.cookie-stamp{
  width:min(430px,100%);aspect-ratio:1;border-radius:50%;margin:auto;background:var(--brown);
  border:12px solid rgba(255,255,255,.75);outline:1px dashed rgba(255,255,255,.55);outline-offset:-30px;
  display:grid;place-items:center;text-align:center;color:var(--blush);padding:50px
}
.cookie-stamp strong{font-size:3rem;letter-spacing:.12em;line-height:1}
.cookie-stamp small{text-transform:uppercase;letter-spacing:.18em}
.story h2{font-family:Georgia,serif;font-size:3rem;font-weight:500;margin:8px 0}
.story p{max-width:540px}

.contact{background:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-card{padding:46px;background:var(--blush);border:1px solid var(--line)}
.contact-card h3{font-family:Georgia,serif;font-size:2rem;font-weight:500;margin:0 0 12px}
.contact-link{font-size:1.05rem;font-weight:700;word-break:break-word}
.order-card{background:var(--brown);color:var(--blush)}
.order-card .button{background:var(--pink)}
.order-card .button:hover{background:white;color:var(--brown)}

.site-footer{background:var(--brown);color:var(--blush);padding:30px 0;text-align:center}
.site-footer p{margin:0;font-size:.8rem;letter-spacing:.06em}

@media(max-width:850px){
  .hero-grid,.story-grid,.contact-grid{grid-template-columns:1fr}
  .hero{text-align:center}
  .hero-card{width:min(360px,80vw);margin:auto}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .cookie-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .menu-toggle{display:block}
  .main-nav{display:none}
  .main-nav.is-open{display:block;position:absolute;top:76px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line)}
  .main-nav ul{padding:20px;display:grid;gap:14px}
  .header-inner{min-height:68px}
  .section{padding:70px 0}
}
@media(max-width:480px){
  .container{width:min(100% - 28px,1120px)}
  .hero h1{font-size:3.65rem}
  .cookie-grid{gap:18px}
  .cookie{border-width:6px;font-size:.72rem;padding:14px}
}

/* Homepage layout fixes */
.hero h1{
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
}

/* Keep the Get in touch card centered when it is the only contact card. */
.contact-grid{
  justify-items:center;
}
.contact-card{
  width:100%;
  max-width:720px;
}

@media(max-width:480px){
  .hero h1{
    font-size:clamp(2.7rem,14vw,3.65rem);
    letter-spacing:.035em;
  }
}

/* Final homepage fixes - also applies when the homepage is built with Elementor. */
.lily-rose-title-fix,
.lily-rose-title-fix .elementor-heading-title,
.elementor .lily-rose-title-fix h1,
.elementor .lily-rose-title-fix h2,
.elementor .lily-rose-title-fix h3{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  display:inline-block !important;
  width:auto !important;
  max-width:none !important;
}

@media(max-width:600px){
  .lily-rose-title-fix,
  .lily-rose-title-fix .elementor-heading-title,
  .elementor .lily-rose-title-fix h1,
  .elementor .lily-rose-title-fix h2,
  .elementor .lily-rose-title-fix h3{
    font-size:clamp(2.25rem,11.5vw,4.5rem) !important;
    letter-spacing:.025em !important;
  }
}

/* Center the exact Get in touch box, including Elementor containers/columns. */
.lily-contact-box-fix{
  margin-left:auto !important;
  margin-right:auto !important;
  justify-self:center !important;
}
.lily-contact-box-fix.elementor-element,
.elementor .lily-contact-box-fix{
  width:100% !important;
  max-width:720px !important;
}

/* Homepage motion. JavaScript adds .lily-animate and .is-visible as elements enter view. */
.lily-animate{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.25,1);
  will-change:opacity,transform;
}
.lily-animate.is-visible{opacity:1;transform:none}
.hero .eyebrow,.hero .section-kicker{animation:lilyFadeUp .65s ease both}
.hero h1{animation:lilyFadeUp .8s .08s cubic-bezier(.2,.75,.25,1) both}
.hero .subline{animation:lilyFadeUp .8s .18s cubic-bezier(.2,.75,.25,1) both}
.hero .button{animation:lilyFadeUp .8s .28s cubic-bezier(.2,.75,.25,1) both}
@keyframes lilyFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .lily-animate{opacity:1;transform:none}
}


/* Plain-text Lily Rose branding and reliable contact-card centering */
.lily-rose-plain-text, .wordmark{
  font-family:Montserrat,Arial,sans-serif !important;
  font-weight:800 !important;
  color:var(--brown) !important;
  letter-spacing:.12em !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-height:1 !important;
}
.lily-rose-plain-text{font-size:clamp(2.5rem,8vw,6.5rem);text-align:center;margin:0 auto}
/* Fallback theme contact card */
.contact-grid{display:flex !important;justify-content:center !important;align-items:stretch !important}
.contact-grid .contact-card{flex:0 1 720px !important;margin-left:auto !important;margin-right:auto !important}
/* Elementor contact box: center the entire containing column/container */
.elementor .lily-contact-box-fix{
  margin-left:auto !important;
  margin-right:auto !important;
  align-self:center !important;
  justify-self:center !important;
}
.elementor .elementor-container:has(.lily-contact-box-fix),
.elementor .e-con:has(.lily-contact-box-fix){justify-content:center !important}


/* Remove unused mobile menu button */
.menu-toggle{display:none !important;}