/* ======================================================================
   Green Apple Landing Pages - Shared Styles
   Structure: full-width sections (.section) with centered .container
   ====================================================================== */

/* Chakra Petch – regular & bold */
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra_petch/ChakraPetch-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra_petch/ChakraPetch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bona Nova SC – regular & bold (for headings) */
@font-face {
  font-family: "Bona Nova SC";
  src: url("../fonts/bona_nova/BonaNovaSC-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bona Nova SC";
  src: url("../fonts/bona_nova/BonaNovaSC-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



:root{
  --maxw: 1180px;
  --gutter: 28px;
  --brand: #B7F9BB;
  --brand-ink: #0b0b0b;
  --ink: #efe9e3;
  --ink-dim: #E4DBCE;
  --paper: #E4DBCE;
  --paper-ink: #1d1b19;
  --bg: #1e1103;
  --btn: var(--brand);
  --btn-ink: #162D27;
  --shadow: 0 10px 20px rgba(0,0,0,.25);
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --swiper-pagination-bottom: 0px;
  --swiper-pagination-top:unset;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "Chakra Petch",ui-serif,Georgia,serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1 {font-family:"Bona Nova SC",ui-serif,Georgia,serif;margin:0 0 .5em}
h2,h3,h4{font-family:"Bona Nova SC",ui-serif,Georgia,serif;margin:0 0 .5em}
p{font-family:"Chakra Petch",ui-serif,Georgia,serif;}
h1{font-size:clamp(28px,6vw,38px);line-height:1.05}
h2{font-size:clamp(26px,3.4vw,32px)}
h3{font-size:clamp(22px,2.4vw,28px)}
p{margin:0 0 1rem}
small,.small{font-size:.92rem;color:var(--ink-dim)}
.main-logo {max-width: 700px;height: auto;width:100%;margin:0 auto 40px;}

/* Containers */
.section{position:relative;width:100%}
.section--dark{background:#0f0c0a}
.section--paper{background:var(--paper);color:var(--paper-ink)}
.section--inset{padding:32px 0}
.section--xl{padding:72px 0}
.section--lg{padding:56px 0}
.section--md{padding:40px 0}
.section--sm{padding:26px 0}


.container{
  width:min(100%,var(--maxw));
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,var(--gutter));
}

/* Full-bleed hero media */
.fw-media{
  position:relative;min-height:772px;display:grid;place-items:center;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.overlay::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgb(118 118 118 / 15%), rgb(118 118 118 / 15%));
  pointer-events:none;
}
.hero{position:relative;text-align:center;z-index:2;padding:24px;display: flex;flex-direction: column;}
.hero__kicker{
  display:inline-block;margin-bottom:0px;letter-spacing:.08em;
  background:#000;color:#fff;padding:10px 16px;box-shadow:var(--shadow);
}
.hero__sub{max-width:760px;margin:0px auto 22px;color:#000;font-size:24px;background-color:var(--ink-dim);padding:16px;line-height: 1;}
.hero .btn {width: 223px;margin: 0 auto;text-transform: uppercase;}

/* Buttons */
.btn{
  --_bg:var(--btn);--_ink:var(--btn-ink);
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:12px 18px;cursor:pointer;
  border:0;background:var(--_bg);color:var(--_ink);
  font-weight:700;letter-spacing:.01em;
  transition:transform .06s ease,filter .2s ease;
  box-shadow:var(--shadow);
  width:223px;
}
.btn:hover{filter:brightness(.96);background:#e4dbce}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.4);box-shadow:none}
.btn--ghost:hover{color:var(--_ink);}
.btn--dark{background:#111;color:#fff}
.btn--block{width:100%}

/* Layout helpers */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.flex{display:flex;align-items:center;gap:16px}
.flex-col{flex-direction:column}
.center{text-align:center}
.stack-sm>*+*{margin-top:.5rem}
.stack>*+*{margin-top:1rem}
.stack-lg>*+*{margin-top:1.25rem}

/* Cards */
.card{
  background:var(--paper);color:var(--paper-ink);
  padding:54px;box-shadow:var(--shadow);
}
.card--dark{background:#12100e;color:var(--ink);border:1px solid rgba(255,255,255,.06)}
.card__title{font:800 18px/1.2 "Chakra Petch",ui-serif,Georgia,serif;margin-bottom:.35rem}
.card__icon{font-size:32px;opacity:.8;margin-bottom:10px}
.card p {margin-bottom:0;}

/* Steps */
.steps{counter-reset:step}
.step{display: grid;grid-template-columns: 52px 1fr;gap:16px;align-items:start}
.step::before{
  counter-increment:step;content:counter(step);
  display:grid;place-items:center;width:52px;height:52px;
  background:var(--brand);color:#0b0b0b;font-weight:800;box-shadow:var(--shadow);
}

/* Delivery Lander*/
#hiw {background-image:url('../images/3box-bg-alt.webp');background-size:cover;background-repeat:no-repeat;background-position:right -1300px;padding:35px 0}
#wedeliver {background-image:url('../images/green-apple-delivery-map-trans-alt.webp ');background-size:cover;background-repeat:no-repeat;background-position:left -470px;padding:35px 0}
#reviews {background-image:url('../images/5.0.webp');background-size:auto;background-repeat:no-repeat;background-position:left 20px;}
#reviews h2 {margin-bottom: 0;}
#reviews .review-stars {display:flex;justify-content:space-evenly;max-width: 300px;margin: 0 auto;}
#reviews .review-stars svg {fill:#B7F9BB;width:2em;height:auto;}
.agegate {background-image:url('../images/are-you-of-age.webp');background-size:auto;background-repeat:no-repeat;background-position:center;}


/* Hangover Lander */
#hangover.fw-media {align-items: center;min-height:600px;}
#hangover-lander #hiw h2 {color:var(--brand);text-align:center;}
#hangover-lander #hiw .btn {display: flex;margin: 35px auto 0;}
#whyswitch {position:relative;}
#whyswitch h2 {background: var(--bg);color: var(--paper);padding: 20px;display: inline-flex;line-height: 1;}
#whyswitch img{object-fit: cover;width: 50%;position: absolute;top: 0;left: 0;}
#whyswitch .stack + div {margin-left: -38px;z-index: 10;}
#hangover-lander .agegate {background-image:none;background-color: #1d1105;padding:40px 0}
.instore {background-image:url('../images/in-store-bg.webp');background-size:auto;background-repeat:no-repeat;background-position:center;}
.instore .container {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 72px 0;}
.instore .main-logo {max-width: 400px;}
.instore h2 {margin-bottom:0;}
.instore h2, .instore .small {display: inline;padding: 10px;background: #000000;}
.comparrison h2 {display: inline-block;padding: 10px;background: #000000;margin-bottom:40px;}
.comparrison table.comparison-table {margin: 0 auto;text-align: left;max-width: 740px;width: 100%;font-size:18px;}
.comparrison table.comparison-table thead tr th {color: #636563;}
.comparrison table.comparison-table tbody tr th {background:#000;}
.comparrison table.comparison-table th, .comparrison table.comparison-table td {padding: 4px 20px;}
#hangover-lander #reviews {background-image:url('../images/hangover-reviews-bg.webp');background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--paper);}
#hangover-lander #reviews .review-stars {display: flex;max-width: 200px;margin: 0 0 10px;justify-content: flex-start;}
#hangover-lander #reviews .review-stars svg {fill: #B7F9BB;width: 1.5em;height: auto;}
#hangover-lander .reviews-swiper .swiper-pagination-bullet {background: var(--bg);opacity: .5;}
#hangover-lander .review {background:transparent;text-align:left;color:var(--bg);border:none;}
#hangover-lander #reviews h2 {color:var(--bg);}
#hangover-lander .reviews-swiper {
    padding: 40px !important;
}
.hangover-slider .review__meta strong {
    padding: 5px;
    color: var(--paper);
    background-color: var(--bg);
}
.reviews-swiper.hangover-slider .swiper-slide {display: flex;}
/* Force the review card to fill (and not exceed) the slide */
.reviews-swiper.hangover-slider .review {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;           /* important: no side margins here */
}
.hangover-slider .swiper-slide {}
#hangover-lander .footer .main-logo{max-width:320px;}
#hangover-lander .footer {padding: 36px 30px;}

/* Giveaway Lander */
#giveaway .main-logo {max-width:400px;}
#giveaway img.tickets {margin: 0 auto 40px;}
#giveaway .hero__kicker span {color:var(--brand);}
#giveaway h1 {font-size: clamp(28px, 6vw, 54px);}
#giveaway .hero p {margin:1rem 0 .5rem;}
#giveaway .hero p + p{margin:0rem 0 1rem;}
#giveaway-lander #hiw .container {text-align: center;}
#giveaway-lander #hiw .container h2{color:var(--brand);font-size:108px;margin-bottom:20px;}
#giveaway-lander #hiw .container a {color:var(--brand)}
#double {background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(../images/entries-bg.webp);}
#double h3 {background: var(--bg);color: var(--paper);padding: 20px;display: inline-flex;line-height: 1;}
#double .card {background:transparent;box-shadow:none;}
#double img {box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);height:auto}
#double .entry-wrap {background-color: var(--paper);padding:20px;}
#double .card .entry-wrap p{color:var(--bg);}
#giveaway-lander .footer .main-logo{max-width:320px;}
#giveaway-lander .footer {padding: 36px 30px;}



/* Reviews */
.reviews{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.review{background:#16120f;border:1px solid rgba(255,255,255,.08);padding:18px;min-height: 131px;}
.review__meta{display:flex;align-items:center;gap:10px;margin-top:10px}
.review__avatar{width:44px;height:44px;background:#333;display:none;}

/* Age Gate */
.agegate{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:80px 0}
.agegate .container{display:grid;gap:18px;place-items:center;text-align:center}

/* Start Delivery */
#startdelivery {background-image:url('../images/start-order-bg.webp');background-size:auto;background-repeat:no-repeat;background-position:right center;padding:35px 0;background-color: #1d1205;}
#startdelivery .stack + div {justify-content: flex-end;display: flex;}

/* Footer */
.footer{padding:36px 0;color:var(--ink-dim);font-size:.92rem;text-align:center;border-top:1px solid rgba(255,255,255,.08)}

/* Simple in-view animation hook */
[data-inview]{opacity:0;transform:translateY(26px);transition:opacity .5s ease-out,transform .5s ease-out}
[data-inview].is-inview{opacity:1;transform:translateY(0)}

/* Swiper tweaks (if used later) */
.reviews-swiper{padding:40px!important}
.reviews-swiper .swiper-pagination-bullet{background:var(--brand);opacity:.5}
.reviews-swiper .swiper-pagination-bullet-active{opacity:1}

/* Responsive */
@media (max-width:900px){
  :root{--gutter:18px}
  .main-logo{max-width: 400px;}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .fw-media{min-height:66vh;align-items: flex-start;}
  h1.hero__kicker{margin-top: 65px;}
  .hero__sub {font-size:18px;}
  #wedeliver {background-position: -10px -510px;}
  #hiw {background-position: right -120px;}
  .agegate .flex, #giveaway .flex{flex-direction: column;}
  #startdelivery {margin-top: 24px;}
  #startdelivery .stack + div {justify-content: flex-start;}

  #hangover h1.hero__kicker {margin-top:0;}
  #whyswitch {padding:72px 30px;background}
  .comparrison table.comparison-table {font-size:12px;}
  .comparrison table.comparison-table th, .comparrison table.comparison-table td {padding: 4px 10px;}
  section#whyswitch .stack {display: none;}
  #whyswitch .stack + div {margin-left:0}
  section#whyswitch .container {padding: 0;}
  .instore .container {padding: 0 30px;}
  #giveaway img.tickets {height:auto;}
  #giveaway-lander #hiw .container h2 {font-size:52px;}
	#giveaway-lander .card {padding:24px;}
}