/*
Theme Name: Gifts of Thailand
Theme URI: https://giftsofthailand.com
Description: Light, high-conversion child theme for Gifts of Thailand. Bright editorial storefront tuned for social-referral traffic: fast first paint, obvious trust signals, thumb-friendly mobile checkout.
Author: Gifts of Thailand
Template: hello-elementor
Version: 1.0.0
Text Domain: got
*/

/* ==========================================================================
   1. Design tokens
   Single source of truth. Elementor Global Colors are mapped onto these in
   functions.php so the visual editor and hand-written CSS never drift apart.
   ========================================================================== */
:root{
  --got-ink:#1A1D1A;          /* primary text */
  --got-ink-soft:#5C625B;     /* secondary text */
  --got-ink-faint:#8A908A;    /* meta, captions */
  --got-bg:#FFFFFF;
  --got-surface:#FAF8F4;      /* warm off-white section band */
  --got-surface-2:#F3EFE8;
  --got-line:#E7E1D8;         /* hairline borders */

  --got-jade:#14724F;         /* brand primary */
  --got-jade-dark:#0E5539;
  --got-jade-tint:#E8F2ED;
  --got-gold:#C08A2E;         /* premium accent */
  --got-gold-tint:#FBF3E4;
  --got-fresh:#2E7D32;        /* in-stock / freshness */
  --got-urgent:#B3402F;       /* cut-off timers, low stock */

  --got-radius:14px;
  --got-radius-sm:9px;
  --got-shadow:0 1px 2px rgba(26,29,26,.04), 0 8px 24px -12px rgba(26,29,26,.14);
  --got-shadow-lift:0 2px 4px rgba(26,29,26,.05), 0 18px 40px -16px rgba(26,29,26,.22);

  --got-font:"Inter","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --got-font-display:"Fraunces","Noto Serif Thai",Georgia,serif;
  --got-maxw:1200px;
}

/* Storefront is deliberately light-only. The brief calls for a bright, airy
   shop; honouring prefers-color-scheme here would invert product photography
   backgrounds and destroy the freshness cue that drives these purchases. */
html{color-scheme:light}

/* ==========================================================================
   2. Base
   ========================================================================== */
body{
  font-family:var(--got-font);
  color:var(--got-ink);
  background:var(--got-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.got-display{font-family:var(--got-font-display);font-weight:600;letter-spacing:-.015em;color:var(--got-ink)}
h1{line-height:1.08}
h2{line-height:1.15}
a{color:var(--got-jade);text-underline-offset:3px}
a:hover{color:var(--got-jade-dark)}
img{height:auto}

/* Respect the OS setting rather than animating regardless. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Keyboard focus must stay visible; Elementor's resets tend to kill it. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--got-jade);outline-offset:2px;border-radius:4px;
}

/* ==========================================================================
   3. Buttons

   Elementor puts a widget's custom classes on the WRAPPER div, not on the
   <a class="elementor-button"> it renders inside. So every rule here is
   written twice: once for a bare anchor (shortcode output, WooCommerce) and
   once scoped through the wrapper. Dropping the second form silently reverts
   every Elementor button to the default skin.
   ========================================================================== */
.got-btn:not(.elementor-widget),
.got-btn.elementor-widget .elementor-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--got-font);font-weight:600;font-size:1rem;line-height:1.2;
  padding:.95em 1.9em;border:0;border-radius:999px;cursor:pointer;
  background:var(--got-jade);color:#fff;text-decoration:none;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  box-shadow:0 6px 18px -8px rgba(20,114,79,.55);
}
.got-btn:not(.elementor-widget):hover,
.got-btn.elementor-widget .elementor-button:hover,
.got-btn.elementor-widget .elementor-button:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover{
  background:var(--got-jade-dark);color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 26px -10px rgba(20,114,79,.6);
}
.got-btn:not(.elementor-widget):active,
.got-btn.elementor-widget .elementor-button:active{transform:translateY(0)}

/* Elementor wraps the anchor in a block-level wrapper that would stretch the
   pill across the column; shrink it back to its content. */
.got-btn.elementor-widget .elementor-button-wrapper{display:inline-block}

.got-btn--lg:not(.elementor-widget),
.got-btn--lg.elementor-widget .elementor-button{font-size:1.08rem;padding:1.1em 2.3em;width:100%;max-width:420px}

.got-btn--ghost:not(.elementor-widget),
.got-btn--ghost.elementor-widget .elementor-button{
  background:transparent;color:var(--got-jade);border:1.5px solid var(--got-line);box-shadow:none;
}
.got-btn--ghost:not(.elementor-widget):hover,
.got-btn--ghost.elementor-widget .elementor-button:hover,
.got-btn--ghost.elementor-widget .elementor-button:focus{
  background:var(--got-jade-tint);color:var(--got-jade-dark);border-color:var(--got-jade);box-shadow:none;
}

.got-btn--gold:not(.elementor-widget),
.got-btn--gold.elementor-widget .elementor-button{background:var(--got-gold);box-shadow:0 6px 18px -8px rgba(192,138,46,.6)}
.got-btn--gold:not(.elementor-widget):hover,
.got-btn--gold.elementor-widget .elementor-button:hover{background:#A5741F;color:#fff}

/* Ghost buttons sitting on the dark closing band need light, not jade. */
.got-btn--on-dark.elementor-widget .elementor-button{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);box-shadow:none;
}
.got-btn--on-dark.elementor-widget .elementor-button:hover{
  background:rgba(255,255,255,.12);color:#fff;border-color:#fff;
}

/* ==========================================================================
   3b. Hero legibility scrim

   The hero art carries its subject on the right. Without a fade the headline
   sits directly on top of the durian and the sub-line becomes unreadable at
   1440px, which is exactly the width most desktop traffic arrives at.
   ========================================================================== */
.got-hero{position:relative;isolation:isolate}
.got-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,
    #fff 0%, rgba(255,255,255,.98) 32%, rgba(255,255,255,.88) 44%,
    rgba(255,255,255,.45) 58%, rgba(255,255,255,0) 74%);
}
.got-hero > .e-con-inner,
.got-hero > .elementor-element{position:relative;z-index:1}
@media (max-width:1024px){
  .got-hero::after{
    background:linear-gradient(180deg,
      #fff 0%, rgba(255,255,255,.97) 30%, rgba(255,255,255,.86) 44%,
      rgba(255,255,255,.40) 60%, rgba(255,255,255,0) 80%);
  }
}
/* On a phone the art sits behind the copy rather than beside it, so the top of
   the band has to be effectively opaque or the headline is unreadable. */
@media (max-width:767px){
  .got-hero::after{
    background:linear-gradient(180deg,
      #fff 0%, #fff 54%, rgba(255,255,255,.90) 64%, rgba(255,255,255,.45) 74%,
      rgba(255,255,255,0) 88%);
  }
}

/* ==========================================================================
   4. Trust strip / badges  (shortcode: [got_trust])
   ========================================================================== */
.got-trust{
  display:grid;gap:1px;background:var(--got-line);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  border:1px solid var(--got-line);border-radius:var(--got-radius);overflow:hidden;
}
.got-trust__item{background:var(--got-bg);padding:1.35rem 1.25rem;display:flex;gap:.85rem;align-items:flex-start}
.got-trust__icon{flex:0 0 auto;width:26px;height:26px;color:var(--got-jade)}
.got-trust__t{font-weight:650;font-size:.95rem;margin:0 0 .18rem}
.got-trust__d{font-size:.83rem;color:var(--got-ink-soft);margin:0;line-height:1.5}

/* ==========================================================================
   5. Freshness / urgency cues  (shortcodes: [got_cutoff], [got_stock])
   ========================================================================== */
.got-cutoff{
  display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  background:var(--got-gold-tint);border:1px solid #EBD9AE;
  color:#6E4E12;border-radius:var(--got-radius-sm);
  padding:.7rem 1.05rem;font-size:.9rem;font-weight:550;
}
.got-cutoff__dot{width:8px;height:8px;border-radius:50%;background:var(--got-urgent);flex:0 0 auto;animation:got-pulse 2s ease-in-out infinite}
@keyframes got-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.got-cutoff__clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--got-urgent)}

.got-stock{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--got-fresh)}
.got-stock::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--got-fresh);box-shadow:0 0 0 4px rgba(46,125,50,.14)}

/* ==========================================================================
   6. Product cards (shop + related)
   ========================================================================== */
.woocommerce ul.products li.product{
  background:var(--got-bg);border:1px solid var(--got-line);border-radius:var(--got-radius);
  padding:0 0 1.15rem;overflow:hidden;text-align:left;
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.woocommerce ul.products li.product:hover{box-shadow:var(--got-shadow-lift);transform:translateY(-3px);border-color:#D9D1C4}
.woocommerce ul.products li.product a img{margin:0 0 1rem;border-radius:0;aspect-ratio:1/1;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--got-font);font-size:1rem!important;font-weight:600;padding:0 1.15rem;margin:0 0 .35rem;line-height:1.35;
}
.woocommerce ul.products li.product .price{
  display:block;padding:0 1.15rem;color:var(--got-ink);font-size:1.05rem;font-weight:700;font-family:var(--got-font);
}
.woocommerce ul.products li.product .price del{color:var(--got-ink-faint);font-weight:400;font-size:.9em;margin-right:.4em}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--got-urgent)}
.woocommerce ul.products li.product .button{margin:.9rem 1.15rem 0;font-size:.9rem;padding:.75em 1.4em}
.woocommerce span.onsale{
  background:var(--got-urgent);color:#fff;border-radius:999px;font-weight:650;font-size:.72rem;
  letter-spacing:.03em;text-transform:uppercase;padding:.42em 1em;min-height:0;min-width:0;line-height:1;top:14px;left:14px;right:auto;margin:0;
}

/* ==========================================================================
   7. Single product — hero landing layout
   ========================================================================== */
.woocommerce div.product .product_title{font-family:var(--got-font-display);font-size:clamp(1.9rem,4vw,2.9rem);margin:0 0 .6rem}
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--got-ink);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;font-family:var(--got-font)}
.woocommerce div.product p.price del{color:var(--got-ink-faint);font-weight:400;font-size:.62em}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--got-urgent)}
.woocommerce div.product form.cart{margin-top:1.5rem}
.woocommerce div.product form.cart div.quantity{margin-right:.75rem}
.woocommerce .quantity input.qty{
  height:52px;width:78px;border:1.5px solid var(--got-line);border-radius:999px;
  text-align:center;font-weight:600;font-size:1rem;background:var(--got-bg);
}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 1.5rem;border:0;border-bottom:1px solid var(--got-line)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;margin:0 1.75rem 0 0;padding:0 0 .85rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--got-font);font-weight:600;color:var(--got-ink-soft);padding:0;font-size:1rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--got-ink);box-shadow:inset 0 -2px 0 var(--got-jade)}

/* Sticky mobile buy bar — the single biggest conversion lever for social
   traffic, which lands mid-page from a link and never scrolls back up. */
.got-buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:940;display:none;
  gap:.9rem;align-items:center;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--got-line);box-shadow:0 -6px 24px -12px rgba(26,29,26,.28);
}
.got-buybar__meta{flex:1 1 auto;min-width:0}
.got-buybar__name{font-size:.82rem;color:var(--got-ink-soft);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.got-buybar__price{font-size:1.05rem;font-weight:700;margin:0;line-height:1.2}
.got-buybar .got-btn{flex:0 0 auto;padding:.85em 1.6em}
@media (max-width:880px){ body.single-product .got-buybar{display:flex} body.single-product{padding-bottom:76px} }

/* ==========================================================================
   8. FAQ accordion (native <details>, zero JS)
   ========================================================================== */
.got-faq{border:1px solid var(--got-line);border-radius:var(--got-radius);overflow:hidden;background:var(--got-bg)}
.got-faq details{border-bottom:1px solid var(--got-line)}
.got-faq details:last-child{border-bottom:0}
.got-faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 3rem 1.15rem 1.35rem;position:relative;
  font-weight:600;font-size:1.02rem;color:var(--got-ink);
}
.got-faq summary::-webkit-details-marker{display:none}
.got-faq summary::after{
  content:"";position:absolute;right:1.35rem;top:50%;width:10px;height:10px;
  border-right:2px solid var(--got-ink-soft);border-bottom:2px solid var(--got-ink-soft);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.got-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.got-faq summary:hover{background:var(--got-surface)}
.got-faq__a{padding:0 1.35rem 1.3rem;color:var(--got-ink-soft);line-height:1.65;font-size:.96rem;margin:0}
.got-faq__a p:last-child{margin-bottom:0}

/* ==========================================================================
   9. Legal / long-form document pages
   ========================================================================== */
.got-legal{max-width:760px;margin-inline:auto;font-size:1.02rem;line-height:1.75;color:var(--got-ink-soft)}
.got-legal h2{font-size:1.5rem;margin:2.6rem 0 .8rem;color:var(--got-ink)}
.got-legal h3{font-family:var(--got-font);font-size:1.08rem;margin:1.8rem 0 .5rem;color:var(--got-ink)}
.got-legal ul,.got-legal ol{padding-left:1.3rem;margin:.7rem 0 1.2rem}
.got-legal li{margin:.42rem 0}
.got-legal table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.94rem}
.got-legal th,.got-legal td{border:1px solid var(--got-line);padding:.7rem .85rem;text-align:left;vertical-align:top}
.got-legal th{background:var(--got-surface);font-weight:650;color:var(--got-ink)}
.got-legal__meta{font-size:.88rem;color:var(--got-ink-faint);border-left:3px solid var(--got-jade);padding-left:1rem;margin-bottom:2.2rem}

/* Wide content must scroll inside its own box, never the page body. */
.got-legal .got-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==========================================================================
   10. Order tracking form
   ========================================================================== */
.got-track{max-width:560px;margin-inline:auto;background:var(--got-bg);border:1px solid var(--got-line);border-radius:var(--got-radius);padding:2rem;box-shadow:var(--got-shadow)}
.got-track label{display:block;font-weight:600;font-size:.9rem;margin:0 0 .4rem}
.got-track input[type=text],.got-track input[type=email]{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--got-line);border-radius:var(--got-radius-sm);
  font-size:1rem;font-family:var(--got-font);background:var(--got-bg);margin-bottom:1.1rem;
}
.got-track input:focus{border-color:var(--got-jade);outline:none}
.got-track__hint{font-size:.85rem;color:var(--got-ink-faint);margin:-.7rem 0 1.2rem}

/* ==========================================================================
   11. Cookie consent banner
   ========================================================================== */
.got-cookie{
  position:fixed;z-index:960;left:1rem;right:1rem;bottom:1rem;max-width:640px;margin-inline:auto;
  background:var(--got-bg);border:1px solid var(--got-line);border-radius:var(--got-radius);
  box-shadow:var(--got-shadow-lift);padding:1.3rem 1.4rem;
  display:none;gap:1rem;align-items:center;flex-wrap:wrap;
}
.got-cookie[data-show="1"]{display:flex;animation:got-rise .35s ease both}
@keyframes got-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.got-cookie__txt{flex:1 1 260px;font-size:.9rem;line-height:1.55;color:var(--got-ink-soft);margin:0}
.got-cookie__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.got-cookie .got-btn{padding:.7em 1.4em;font-size:.9rem}
@media (max-width:880px){ body.single-product .got-cookie{bottom:88px} }

/* Preferences modal */
.got-modal{position:fixed;inset:0;z-index:980;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(26,29,26,.45)}
.got-modal[data-show="1"]{display:flex}
.got-modal__box{background:var(--got-bg);border-radius:var(--got-radius);max-width:520px;width:100%;max-height:85vh;overflow-y:auto;padding:1.8rem;box-shadow:var(--got-shadow-lift)}
.got-modal__box h2{font-size:1.35rem;margin:0 0 .6rem}
.got-switch{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 0;border-top:1px solid var(--got-line)}
.got-switch__t{font-weight:600;font-size:.95rem;margin:0 0 .2rem}
.got-switch__d{font-size:.85rem;color:var(--got-ink-soft);margin:0;line-height:1.5}
.got-switch input{margin-top:.3rem;width:18px;height:18px;accent-color:var(--got-jade);flex:0 0 auto}

/* ==========================================================================
   12. Utility
   ========================================================================== */
.got-band{background:var(--got-surface)}
.screen-reader-text,.got-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.got-skip{position:absolute;left:-9999px}
.got-skip:focus{left:1rem;top:1rem;z-index:1000;background:var(--got-bg);padding:.7rem 1.1rem;border-radius:8px;box-shadow:var(--got-shadow)}

/* ==========================================================================
   13. Contact form
   ========================================================================== */
.got-form{display:grid;gap:1.15rem;background:var(--got-bg);border:1px solid var(--got-line);border-radius:var(--got-radius);padding:2rem;box-shadow:var(--got-shadow)}
.got-form__row{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr}
@media (max-width:640px){.got-form__row{grid-template-columns:1fr}.got-form{padding:1.4rem}}
.got-form__field{display:grid;gap:.4rem;min-width:0}
.got-form label{font-weight:600;font-size:.9rem;color:var(--got-ink)}
.got-form__opt{font-weight:400;color:var(--got-ink-faint);font-size:.82rem}
.got-form input[type=text],
.got-form input[type=email],
.got-form select,
.got-form textarea{
  width:100%;padding:.82rem 1rem;border:1.5px solid var(--got-line);border-radius:var(--got-radius-sm);
  font-size:1rem;font-family:var(--got-font);color:var(--got-ink);background:var(--got-bg);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.got-form textarea{resize:vertical;min-height:130px;line-height:1.6}
.got-form :is(input,select,textarea):focus{
  border-color:var(--got-jade);outline:none;box-shadow:0 0 0 3px var(--got-jade-tint);
}
.got-form__consent{font-size:.85rem;color:var(--got-ink-faint);line-height:1.55;margin:0}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.got-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.got-note{border-radius:var(--got-radius-sm);padding:1rem 1.15rem;font-size:.95rem;line-height:1.6;margin:0 0 1.2rem}
.got-note--ok{background:var(--got-jade-tint);border:1px solid #BFDCCF;color:#0E5539}
.got-note--err{background:#FCEDEA;border:1px solid #F0C8C0;color:#8C2F21}

/* ==========================================================================
   14. Header & footer (Elementor Theme Builder templates)
   ========================================================================== */
.got-header{position:sticky;top:0;z-index:900;backdrop-filter:saturate(1.4) blur(10px)}
.got-logo .elementor-heading-title{font-family:var(--got-font-display);letter-spacing:-.02em}
.got-logo a{color:var(--got-ink)!important;text-decoration:none}

/* Elementor's nav-menu skin is overridden here so the header matches the
   storefront rather than the plugin default. */
.got-nav .elementor-nav-menu a{
  font-family:var(--got-font);font-weight:550;font-size:.95rem;color:var(--got-ink-soft);
  padding:.55rem .85rem;border-radius:8px;transition:color .15s ease,background .15s ease;
}
.got-nav .elementor-nav-menu a:hover,
.got-nav .elementor-nav-menu a.elementor-item-active{color:var(--got-jade);background:var(--got-jade-tint)}
.got-nav .elementor-nav-menu--dropdown a{color:var(--got-ink);padding:.85rem 1.1rem;border-radius:0}

.got-footer a{color:var(--got-ink-soft);text-decoration:none}
.got-footer a:hover{color:var(--got-jade);text-decoration:underline}
.got-footer__col-title{font-family:var(--got-font);font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--got-ink-faint);margin:0 0 .9rem}
.got-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:.94rem}


/* ==========================================================================
   15. WooCommerce colour variables

   Woo ships its own purple (--wc-primary #7f54b3) and applies it through
   `.button.alt`, which outranks the plain `.button` rules in section 3. The
   single add-to-cart button is the highest-value control on the site, so it
   has to be the brand colour, not the plugin default.
   ========================================================================== */
:root,
.woocommerce,
.wc-block-components-button{
  --wc-primary:#14724F;
  --wc-primary-text:#FFFFFF;
  --wc-secondary:#FAF8F4;
  --wc-secondary-text:#1A1D1A;
  --wc-highlight:#14724F;
  --wc-highlight-text:#FFFFFF;
  --wc-content-bg:#FFFFFF;
  --wc-form-color-background:#FFFFFF;
  --wc-form-border-color:#E7E1D8;
  --wc-green:#2E7D32;
  --wc-red:#B3402F;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce div.product form.cart button.button,
.woocommerce div.product form.cart .single_add_to_cart_button{
  background:var(--got-jade);color:#fff;border:0;border-radius:999px;
  font-family:var(--got-font);font-weight:600;
  box-shadow:0 6px 18px -8px rgba(20,114,79,.55);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce div.product form.cart button.button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover{
  background:var(--got-jade-dark);color:#fff;
}
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled{background:var(--got-ink-faint);box-shadow:none}

/* Variation selectors on the cash bouquet. */
.woocommerce div.product form.cart .variations{border:0;margin-bottom:1rem}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{padding:.35rem 0;border:0}
.woocommerce div.product form.cart .variations label{font-weight:600;font-size:.92rem;color:var(--got-ink)}
.woocommerce div.product form.cart .variations select{
  padding:.75rem 2.4rem .75rem 1rem;border:1.5px solid var(--got-line);
  border-radius:var(--got-radius-sm);font-family:var(--got-font);font-size:1rem;
  background:var(--got-bg);min-width:220px;
}
.woocommerce div.product form.cart .reset_variations{font-size:.85rem;color:var(--got-ink-faint)}

/* Notices should read as ours, not as the plugin default. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--got-jade);background:var(--got-surface);
  border-radius:var(--got-radius-sm);font-size:.95rem;
}
.woocommerce-error{border-top-color:var(--got-urgent)}

/* Woo prints SKU and Category as adjacent spans with no separator. */
.woocommerce div.product .product_meta > span{display:block;margin-bottom:.3rem}
.woocommerce div.product .product_meta{font-size:.86rem;color:var(--got-ink-faint)}
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as{margin-right:0}

/* Product gallery: match the card radius used everywhere else. */
.woocommerce div.product div.images img{border-radius:var(--got-radius)}
.woocommerce div.product div.images .flex-control-thumbs img{border-radius:8px}


/* ==========================================================================
   16. Header responsive behaviour
   ========================================================================== */

/* The announcement bar is three phrases with dot separators. On a phone all
   three cannot fit on one line, and letting them wrap pushed the logo and the
   hamburger down two extra rows. Drop the third phrase and shorten the second
   rather than wrapping. */
.got-announce{position:relative;z-index:2}
.got-announce__row{
  display:flex;gap:1.4rem;justify-content:center;align-items:center;
  flex-wrap:nowrap;font-size:.84rem;font-weight:550;letter-spacing:.01em;color:#fff;
}
.got-announce__sep{opacity:.4}
.got-announce__short{display:none}
@media (max-width:860px){
  .got-announce__row{gap:.6rem;font-size:.72rem}
  .got-announce__hide-sm{display:none}
  .got-announce__long{display:none}
  .got-announce__short{display:inline}
}

/* Keep the header on one line on small screens: brand, hamburger, actions.
   Without this the three flex children keep their percentage widths, wrap, and
   the header becomes three stacked rows. */
@media (max-width:1024px){
  /* A boxed container puts its children inside .e-con-inner rather than
     directly under itself, so both levels have to be addressed. */
  .got-header__row,
  .got-header__row > .e-con-inner{flex-wrap:nowrap!important;gap:10px!important}
  .got-header__row > .e-con,
  .got-header__row > .e-con-inner > .e-con{width:auto!important;flex:0 0 auto!important}
  .got-header__row > .e-con:first-child,
  .got-header__row > .e-con-inner > .e-con:first-child{flex:1 1 auto!important;min-width:0}
  /* The Shop button is redundant next to the cart on a phone. */
  .got-header__row .got-btn{display:none}
}
@media (max-width:420px){
  .got-logo .elementor-heading-title{font-size:1.05rem}
}

/* Elementor's dropdown panel is positioned against the nav widget. In this
   header the widget sits in a narrow flex column, which would make the panel
   narrow too — pin it to the full header width instead. */
@media (max-width:1024px){
  .got-header .got-nav .elementor-nav-menu--dropdown{
    position:absolute;left:0;right:0;top:100%;width:100%;
    border-top:1px solid var(--got-line);
    box-shadow:0 18px 40px -18px rgba(26,29,26,.28);
    background:var(--got-bg);
  }
  .got-header .got-nav .elementor-menu-toggle{
    background:transparent;border:1px solid var(--got-line);border-radius:10px;
    width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  }
  .got-header .got-nav .elementor-nav-menu--dropdown a{
    font-size:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--got-line);
  }
}