/*
Theme Name: Cinderella Picks
Description: Custom botanical storefront based on the approved Cinderella Picks design.
Version: 0.1.0
Text Domain: cinderella-picks
*/

    :root {
      --green: #173f28;
      --green-2: #29593a;
      --gold: #cc8308;
      --orange: #e66f00;
      --cream: #fbf8f1;
      --ink: #15261d;
      --muted: #546158;
      --line: #e7d6ad;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: #fff; }
    body { margin: 0; color: var(--ink); background: #fff; font-family: Arial, Helvetica, sans-serif; }
    button, input { font: inherit; }
    a { color: inherit; }
    img { max-width: 100%; }

    .site-shell { width: 100%; overflow: hidden; background: #fff; }
    .products-stage { position: relative; isolation: isolate; }

    .site-header {
      position: relative;
      z-index: 20;
      display: grid;
      grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
      align-items: center;
      min-height: clamp(118px, 10.5vw, 175px);
      padding: 10px clamp(28px, 4vw, 78px);
      background: rgba(255,255,255,.96);
    }
    .wordmark { display: inline-flex; flex-direction: column; width: fit-content; text-decoration: none; }
    .wordmark strong { color: var(--green); font: italic 700 clamp(16px, 1.4vw, 26px)/.9 Georgia, serif; }
    .wordmark span { margin-top: 7px; color: var(--gold); font-size: clamp(5px, .42vw, 8px); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }

    .main-nav { display: flex; align-items: center; gap: clamp(22px, 3.2vw, 62px); }
    .main-nav a, .nav-button { border: 0; padding: 9px 0; color: #1f2e26; background: none; font-size: 18px; font-weight: 700; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
    .main-nav a:hover, .nav-button:hover { color: var(--gold); }
    .shop-wrap { position: relative; }
    .shop-menu {
      position: absolute; top: calc(100% + 12px); left: 50%; width: 220px; padding: 10px;
      border: 1px solid #ead8b4; border-radius: 10px; background: #fff; box-shadow: 0 18px 55px rgba(27,52,35,.15);
      opacity: 0; transform: translate(-50%, -5px); pointer-events: none; transition: .18s ease;
    }
    .shop-menu.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
    .shop-menu a { display: block; padding: 10px 12px; border-radius: 7px; color: var(--green); font-size: 16px; text-transform: none; }
    .shop-menu a:hover { background: #f7f0e1; }

    .header-center { position: absolute; left: 50%; top: 4px; z-index: 2; width: clamp(88px, 8.8vw, 150px); height: clamp(108px, 10vw, 165px); transform: translateX(-50%); }
    .header-center img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(83,62,21,.08)); }
    .main-nav .logo-gap { width: clamp(80px, 9vw, 150px); pointer-events: none; }

    .header-actions { display: flex; justify-content: flex-end; align-items: center; gap: clamp(14px, 1.5vw, 28px); }
    .icon-button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 0; color: #34493e; background: none; cursor: pointer; }
    .icon-button:hover { color: var(--gold); }
    .icon-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .cart-count { position: absolute; right: -3px; top: 0; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: var(--gold); font-size: 9px; font-weight: 700; }

    .product-section {
      position: relative;
      min-height: clamp(650px, 61vw, 1120px);
      border-top: 1px solid rgba(225,219,205,.55);
      background: linear-gradient(90deg, #fbf7ef 0%, #fcf9f3 48%, rgba(254,252,248,.93) 58%, #fff 72%, #fff 100%);
    }
    .hero { border-top: 0; min-height: clamp(690px, 64vw, 1180px); background: linear-gradient(90deg, #fffefa 0%, #fffdf8 48%, rgba(255,254,251,.92) 59%, #fff 73%, #fff 100%); }
    .molasses { background: linear-gradient(90deg, #fbf7ef 0%, #fdfaf4 50%, rgba(255,253,249,.93) 60%, #fff 74%, #fff 100%); }
    .olive { background: linear-gradient(90deg, #fcf8ef 0%, #fdfaf5 49%, rgba(255,253,248,.93) 60%, #fff 74%, #fff 100%); }
    .frozen { min-height: clamp(680px, 59vw, 1100px); background: linear-gradient(90deg, #fffaf1 0%, #fffdf8 50%, rgba(255,254,251,.94) 60%, #fff 74%, #fff 100%); }

    .copy {
      position: relative; z-index: 8; width: 34%; min-width: 430px;
      padding: clamp(80px, 10vw, 180px) 0 60px clamp(32px, 4.8vw, 94px);
    }
    .hero .copy { padding-top: clamp(70px, 8vw, 145px); }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px; min-height: 35px; padding: 8px 17px;
      border: 1px solid #d9b977; border-radius: 999px; color: #b77510; background: rgba(255,255,255,.82);
      font-size: clamp(8px, .58vw, 11px); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    }
    .eyebrow::before, .eyebrow::after { content: ""; width: 11px; height: 1px; background: currentColor; }
    h1, h2 { margin: 35px 0 25px; color: var(--green); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.035em; }
    h1 { font-size: clamp(52px, 5.2vw, 100px); line-height: .99; }
    h2 { font-size: clamp(43px, 4.2vw, 82px); line-height: 1.08; }
    .copy > p { max-width: 510px; margin: 0; color: #29382f; font-size: clamp(15px, 1.05vw, 20px); line-height: 1.85; }

    .features { display: grid; grid-template-columns: repeat(4, minmax(75px, 1fr)); gap: 18px; max-width: 650px; margin-top: 48px; }
    .feature { text-align: center; color: #27362e; font-size: clamp(9px, .65vw, 12px); line-height: 1.45; }
    .feature-icon { display: grid; place-items: center; width: 51px; height: 51px; margin: 0 auto 11px; border: 1.4px solid currentColor; border-radius: 50%; color: #a97620; }
    .feature-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
    .molasses .feature-icon { color: var(--green); }
    .olive .feature-icon { color: #6f7d47; }
    .frozen .feature-icon { color: var(--orange); }

    .cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 43px; padding: 18px 30px; border-radius: 4px; color: #fff; background: var(--gold); box-shadow: 0 8px 20px rgba(197,122,5,.13); font-size: 18px; font-weight: 800; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; }
    .cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
    .molasses .cta { background: var(--green); }
    .olive .cta { background: #6f853d; }
    .frozen .cta { background: var(--orange); }

    .section-pattern {
      position: absolute;
      z-index: 1;
      left: 22%;
      top: 0;
      width: 43%;
      height: 100%;
      object-fit: cover;
      mix-blend-mode: multiply;
      opacity: .31;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
    }
    .molasses .section-pattern { opacity: .12; }
    .olive .section-pattern { opacity: .36; }
    .frozen .section-pattern { opacity: .13; }

    .botanical { position: absolute; z-index: 2; object-fit: contain; mix-blend-mode: multiply; }
    .hero .botanical { left: 35%; top: 15%; width: clamp(260px, 25vw, 495px); height: 80%; opacity: .84; }
    .molasses .botanical { left: 33%; top: 4%; width: clamp(270px, 27vw, 535px); height: 92%; opacity: .80; }
    .olive .botanical { left: 39%; top: 12%; width: clamp(180px, 17vw, 340px); height: auto; max-height: 76%; object-position: center; opacity: .91; }

    /* Honey pour video — owns the page's full right section, replacing the DOM drip
       AND the bottom product arrangement (desktop). The column is taller than the
       viewport, so at page top only the clip's upper part shows (dripper entering);
       scroll translates it up, revealing the pour and finally the clip's own products
       at the stage bottom. Pinned manually (fixed while .products-stage spans the
       viewport, parked absolute at its bottom after) because .site-shell's
       overflow:hidden breaks position:sticky. Playback: auto-plays 0→4s on load,
       then scroll scrubs 4s→end. Left-edge mask melts the clip's white studio bg
       into the sections' cream→white gradients. Mobile displays the clip in normal flow above the content. */
    /* No edge mask: the clip now has a pure-white #FFFFFF background matching the page,
       so it blends seamlessly with no fade to ghost the dripper or products. */
    .pour-col { position: absolute; z-index: 2; top: 0; right: 0; width: 28vw;
      aspect-ratio: 9 / 16; /* JS overwrites from the clip's real dimensions */
      pointer-events: none; will-change: transform; background: #fff; }
    .pour-col.pinned { position: fixed; }
    .pour-col.done { top: auto; bottom: 0; }
    /* white bg on the media too: the video sits on its own GPU layer (will-change),
       filling a fractional-height box, so its bottom edge would otherwise antialias
       against a black/transparent backing and show a thin dark line — white makes that
       edge blend into the page (all white here) instead. */
    /* clip-path shaves the bottom 2px: the video's GPU layer antialiases its bottom
       edge into a thin dark fringe that #fff behind can't cover; clipping it off reveals
       the white column bg instead. ponytail: 1px would do on most displays, 2px covers HiDPI. */
    .pour-poster { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; background: #fff; clip-path: inset(0 0 2px 0); }
    .pour-video { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: contain; object-position: center top; background: #fff; clip-path: inset(0 0 2px 0); opacity: 0; transition: opacity .4s ease; }
    .pour-video.ready { opacity: 1; }

    @media (min-width: 1101px) { .product-group { display: none; } } /* clip's own products replace it */

    /* right-anchored in vw (same unit as the video column) so the gap to the clip's
       products stays constant across screen sizes — its width scales with height, so a
       left:% would drift into the products on some aspects. */
    .frozen-hero { position: absolute; z-index: 3; right: 29vw; left: auto; bottom: 2%; height: 70%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(40,38,20,.16)); }
    .product-group { position: absolute; z-index: 9; right: 0; bottom: 0; width: 36%; height: auto; object-fit: contain; object-position: right bottom; }

    .promise { padding: clamp(55px, 5.5vw, 105px) clamp(32px, 4vw, 76px); background: #fff; }
    .promise-card { padding: clamp(32px, 3.2vw, 60px); border: 2px solid #ead3a0; border-radius: 19px; text-align: center; background: linear-gradient(90deg, #fffdf9, #fff); }
    .promise h2 { margin: 0; font-size: clamp(34px, 3.1vw, 60px); }
    .promise p { margin: 16px 0 38px; color: #46534b; font-size: clamp(13px, .95vw, 18px); line-height: 1.7; }
    .values-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; max-width: 1320px; margin: auto; }
    .value { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 70px; padding: 0 20px; border-left: 1px solid #e7dfd0; color: #25382c; text-align: left; font-size: 18px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
    .value:first-child { border-left: 0; }
    .value svg { flex: 0 0 auto; width: 38px; height: 38px; fill: none; stroke: #b87b1d; stroke-width: 1.4; }

    .newsletter { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; min-height: 215px; padding: 28px clamp(35px, 5vw, 95px); color: #fff; background: linear-gradient(105deg, #123d26, #174a2d 65%, #0c321e); }
    .newsletter-copy { display: flex; align-items: center; gap: 30px; }
    .newsletter-logo { width: 95px; height: 110px; object-fit: contain; }
    .newsletter h2 { margin: 0; color: #fff; font-size: clamp(30px, 2.65vw, 52px); line-height: 1.15; }
    .newsletter-form { display: grid; grid-template-columns: 1fr auto; height: 60px; overflow: hidden; border-radius: 5px; background: #fff; }
    .newsletter-form input { min-width: 0; border: 0; outline: 0; padding: 0 24px; color: #304038; font-size: 14px; }
    .newsletter-form button { min-width: 150px; border: 0; color: #fff; background: var(--gold); font-size: 13px; font-weight: 800; cursor: pointer; }

    .site-footer { padding: 32px clamp(34px, 5vw, 96px) 25px; background: #fbfaf7; }
    .footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .footer-top { padding-bottom: 26px; border-bottom: 1px solid #ddd9cf; }
    .footer-links, .social-links, .legal-links { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(18px, 2.1vw, 40px); }
    .footer-links a, .footer-links button, .legal-links a { border: 0; padding: 0; color: #29372f; background: none; font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; cursor: pointer; }
    .footer-links a:hover, .footer-links button:hover { color: var(--gold); }
    .social-links a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #87948b; border-radius: 50%; color: #345443; font-size: 13px; font-weight: 800; text-decoration: none; }
    .footer-bottom { padding-top: 22px; color: #556159; font-size: 11px; }
    .legal-links a { font-size: 11px; font-weight: 400; text-transform: none; }

    .scrim { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(5,24,14,.48); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
    .scrim.is-open { opacity: 1; pointer-events: auto; }
    .dialog { width: min(92vw, 540px); padding: 30px; border: 1px solid #ead5ab; border-radius: 15px; background: #fffdf8; box-shadow: 0 25px 80px rgba(0,0,0,.24); transform: translateY(9px); transition: transform .18s ease; }
    .scrim.is-open .dialog { transform: translateY(0); }
    .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .dialog h2 { margin: 0; font-size: 31px; }
    .dialog p { color: #5a655f; font-size: 14px; line-height: 1.6; }
    .close-dialog { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--green); background: #f2ead9; font-size: 22px; cursor: pointer; }
    .dialog-form { display: flex; gap: 10px; margin-top: 22px; }
    .dialog-form input { flex: 1; min-width: 0; padding: 14px; border: 1px solid #ddd2bd; border-radius: 7px; }
    .dialog-form button, .primary-action { border: 0; border-radius: 7px; padding: 14px 20px; color: #fff; background: var(--gold); font-weight: 700; cursor: pointer; }
    .drawer-wrap { place-items: stretch end; padding: 0; }
    .drawer { width: min(92vw, 430px); height: 100%; padding: 32px; background: #fffdf8; box-shadow: -20px 0 60px rgba(0,0,0,.2); transform: translateX(100%); transition: transform .22s ease; }
    .scrim.is-open .drawer { transform: translateX(0); }
    .cart-empty { margin: 26px 0; padding: 45px 0; border-block: 1px solid #e8dfd0; text-align: center; }
    .cart-empty strong { display: block; color: var(--green); font: 400 25px Georgia, serif; }
    .cart-empty span { display: block; margin-top: 9px; color: #68726c; font-size: 14px; }
    .toast { position: fixed; z-index: 200; left: 50%; bottom: 28px; max-width: calc(100vw - 34px); padding: 13px 20px; border-radius: 999px; color: #fff; background: var(--green); box-shadow: 0 12px 35px rgba(0,0,0,.2); font-size: 14px; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: .18s ease; }
    .toast.is-open { opacity: 1; transform: translate(-50%,0); }

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

    /* language toggle + Arabic (text blocks flip to RTL; the right-side liquid
       animation is intentionally left in place per current design) */
    .lang-toggle { min-width: 40px; padding: 0 11px; height: 34px; border: 1.5px solid var(--green); border-radius: 999px; color: var(--green); background: none; font-size: 12px; font-weight: 800; cursor: pointer; }
    .lang-toggle:hover { color: #fff; background: var(--green); }
    body.lang-ar { font-family: 'Tajawal', Arial, Helvetica, sans-serif; }
    body.lang-ar h1, body.lang-ar h2, body.lang-ar .wordmark strong, body.lang-ar .cart-empty strong { font-family: 'Cairo', Georgia, serif; font-style: normal; letter-spacing: 0; }
    body.lang-ar .copy, body.lang-ar .main-nav, body.lang-ar .shop-menu, body.lang-ar .features,
    body.lang-ar .promise-card, body.lang-ar .values-row, body.lang-ar .newsletter-copy,
    body.lang-ar .footer-links, body.lang-ar .footer-bottom, body.lang-ar .dialog { direction: rtl; }
    body.lang-ar .copy, body.lang-ar .promise-card, body.lang-ar .dialog { text-align: right; }
    body.lang-ar .eyebrow { letter-spacing: 0; }
    body.lang-ar .value { text-align: right; }
    body.lang-ar .cta .arrow, body.lang-ar .nav-button .caret { display: inline-block; transform: scaleX(-1); }

    @media (max-width: 1100px) {
      .site-header { grid-template-columns: 1fr auto; }
      .main-nav { display: none; }
      .header-center { left: 50%; }
      .copy { width: 44%; min-width: 0; }
      .features { grid-template-columns: repeat(2, 1fr); max-width: 310px; }
      .newsletter { grid-template-columns: 1fr; gap: 28px; }
    }

    @media (max-width: 720px) {
      .site-header { min-height: 105px; padding: 8px 18px; }
      .wordmark { display: none; }
      .header-center { left: 20px; width: 78px; height: 94px; transform: none; }
      .header-actions { grid-column: 2; }
      .product-section { min-height: 920px; }
      .copy { width: 100%; padding: 74px 24px 40px; }
      .copy > p { max-width: 82%; }
      h1 { font-size: 52px; }
      h2 { font-size: 43px; }
      .features { max-width: 370px; }
      .botanical { left: 19%!important; top: 45%!important; width: 46%!important; height: 52%!important; opacity: .65; }
      .olive .botanical { left: 30%!important; top: 48%!important; width: 34%!important; height: auto!important; max-height: 45%; opacity: .78; }
      .frozen-hero { right: auto; left: 8%; height: 52%; width: auto; }
      .product-group { width: 56%; height: auto; }
      .values-row { grid-template-columns: 1fr 1fr; }
      .value { border: 0; justify-content: flex-start; }
      .value:last-child { grid-column: 1 / -1; justify-content: center; }
      .newsletter { padding: 35px 24px; }
      .newsletter-logo { display: none; }
      .newsletter-form { grid-template-columns: 1fr; height: auto; }
      .newsletter-form input, .newsletter-form button { min-height: 54px; }
      .footer-top, .footer-bottom { align-items: flex-start; flex-direction: column; }
    }
  
/* New square pour video — preserve original tall scrolling stage */
.pour-col {
    width: 28vw;
    aspect-ratio: 3 / 16;
    overflow: visible;
}

.pour-video {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
    top: 0;
    bottom: auto;
}


/* Final square-video correction */
.pour-video {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: fill;
    object-position: center;
}



/* nav centering + submenu size */
@media (min-width: 1101px){
  .main-nav{
    width: 100%;
    justify-content: center;
    margin: 0 auto;
  }
}

.shop-menu a{
  font-size: 16px;
}

/* Final desktop header alignment */
@media (min-width:1101px){

  .site-header{
    position:relative;
  }

  .header-center{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }

  .main-nav{
    width:auto !important;
    margin:0 !important;
    justify-content:flex-start !important;
  }

  .shop-menu a{
    font-size:16px !important;
  }
}

@media (min-width:1101px){
  .header-center{
    left: calc(50% - 40px) !important;
  }
}

/* Mobile pour: increase vertical length only */
@media (max-width:1100px){
  .pour-col{
    aspect-ratio:9 / 20 !important;
  }
}

@media (max-width:1100px){
  .pour-col{
    aspect-ratio:3 / 20 !important;
  }
}

@media (max-width:1100px){
  .pour-col{
    aspect-ratio:3 / 24 !important;
  }
}