/* ============================================================
   Tanline — theme.css
   Interaction, animation, layout & component CSS.
   Section layout is authored inline in the templates (mirroring
   the source design); this file holds everything that can't be
   inline: pseudo-states, keyframes, container queries, the cart
   drawer, buttons, the product CTA, and WooCommerce styling.
   ============================================================ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);background:var(--tl-butter-wash);color:var(--text-strong)}
img{max-width:100%}
a{color:inherit}

/* ---- App shell / container query context ---- */
.tl-root{
  container-type:inline-size;
  container-name:page;
  font-family:var(--font-body);
  background:var(--tl-butter-wash);
  color:var(--text-strong);
  min-height:100vh;
  overflow-x:clip;
}

/* ---- Buttons (port of the DS Button component) ---- */
.tl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;line-height:1;white-space:nowrap;
  border:1.5px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out),transform .12s var(--ease-out),box-shadow .2s var(--ease-out);
}
.tl-btn:active{transform:scale(.97)}
.tl-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tl-btn--primary{background:var(--color-brand);color:var(--color-on-brand);box-shadow:var(--shadow-brand)}
.tl-btn--primary:hover{background:var(--color-brand-hover)}
.tl-btn--secondary{background:var(--color-accent);color:var(--color-on-accent)}
.tl-btn--secondary:hover{background:var(--color-accent-hover)}
.tl-btn--outline{background:transparent;border-color:var(--tl-ink);color:var(--tl-ink)}
.tl-btn--outline:hover{background:var(--tl-ink);color:var(--tl-lychee)}
.tl-btn--sm{height:40px;padding:0 18px;font-size:14px}
.tl-btn--md{height:48px;padding:0 24px;font-size:15px}
.tl-btn--lg{height:56px;padding:0 30px;font-size:16px}
.tl-btn--block{width:100%}
/* contextual button skins from the design */
.tl-btn--crew{background:var(--tl-butter);color:var(--tl-dragonfruit);box-shadow:none}
.tl-btn--crew:hover{background:#F7D65E}
.tl-btn--lookbook{background:transparent;border-color:var(--tl-dragonfruit);color:var(--tl-dragonfruit)}
.tl-btn--lookbook:hover{background:var(--tl-dragonfruit);color:#fff}
.tl-btn--preorder{background:var(--tl-papaya);color:#fff;box-shadow:none}
.tl-btn--preorder:hover{background:#DD5F2C}

/* ---- Links ---- */
.tl-link{transition:color .2s}
.tl-link:hover{color:var(--color-brand)!important}

/* ---- Category tiles ---- */
.tl-cat:hover .tl-cat-img{transform:scale(1.05)}

/* ---- Product cards ---- */
.tl-card{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.tl-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(94,67,40,.18)}
.tl-card:hover .tl-card-img{transform:scale(1.04)}

/* ---- Product CTA (qty stepper + add to cart) ---- */
.pcta-step{
  width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--text-strong);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:19px;line-height:1;
  font-family:var(--font-body);transition:background .16s ease,transform .12s ease;
}
.pcta-step:hover{background:var(--tl-dragonfruit);color:#fff}
.pcta-step:active{transform:scale(.9)}
.pcta-step:disabled{opacity:.35;cursor:not-allowed}

/* ---- Polaroid hero ---- */
.tl-pol{transition:transform .45s cubic-bezier(.25,.8,.35,1),box-shadow .45s cubic-bezier(.25,.8,.35,1)}
.tl-pol:hover{transform:translateY(-7px) rotate(var(--r)) scale(1.025)!important;z-index:20!important;box-shadow:0 24px 48px rgba(94,67,40,.26)!important}
@keyframes pol-in{from{opacity:0;transform:translateY(30px) rotate(0deg) scale(.92)}to{opacity:1;transform:translateY(0) rotate(var(--r)) scale(1)}}
.tl-pol{animation:pol-in .75s cubic-bezier(.22,1,.36,1) backwards}
.tl-pol:nth-child(1){animation-delay:.1s}
.tl-pol:nth-child(2){animation-delay:.22s}
.tl-pol:nth-child(3){animation-delay:.34s}
@media (prefers-reduced-motion:reduce){.tl-pol{animation:none}}

/* ---- Instagram marquee ---- */
@keyframes ig-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ig-track{animation:ig-scroll 48s linear infinite}
.ig-marquee:hover .ig-track{animation-play-state:paused}
.ig-tile{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ig-tile:hover{transform:scale(1.03)}
.ig-tile:hover .ig-cap{opacity:1}
.ig-tile:hover .ig-grad{opacity:0}
@media (prefers-reduced-motion:reduce){.ig-track{animation:none}}

/* ---- Header ---- */
#tl-header{transition:box-shadow .25s ease}
#tl-headinner{transition:height .25s ease}
#tl-logo{transition:height .25s ease}
.tl-burger{display:none}

/* ---- Currency selector ---- */
.cur-item:hover{background:var(--tl-butter-wash)}
.tl-cur-desktop{display:inline-flex}

/* ---- Overlay stacking ----
   Header 30, cart drawer 150/151, back-in-stock modal 200. Everything that
   covers the page has to clear WooCommerce's product-gallery zoom trigger,
   which sits at z-index 99 — below that and the magnifier floats over the
   drawer scrim and the modal panel. */

/* ---- Cart drawer ---- */
.tl-scrim{position:fixed;inset:0;background:rgba(30,26,23,.42);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease;z-index:150}
.tl-scrim.open{opacity:1;visibility:visible}
.tl-drawer{position:fixed;top:0;right:0;height:100%;width:392px;max-width:90vw;background:var(--tl-lychee,#FEF0DD);box-shadow:-18px 0 50px rgba(94,67,40,.24);transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);z-index:151;display:flex;flex-direction:column}
.tl-drawer.open{transform:translateX(0)}
.tl-cart-x:hover{background:var(--tl-butter-wash)}
.tl-cart-remove:hover{color:var(--tl-dragonfruit)!important}
.tl-cart-count{opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s var(--ease-bounce)}
.tl-cart-count.is-visible{opacity:1;transform:scale(1)}

/* ---- Responsive (container queries on .tl-root) ---- */
@container page (max-width:900px){
  .tl-hero{grid-template-columns:1fr!important;gap:34px!important;padding:40px 28px 34px!important}
  .tl-hero h1{font-size:50px!important}
  .tl-grid-4{grid-template-columns:repeat(2,1fr)!important}
  .tl-2col{grid-template-columns:1fr!important}
  .tl-foot{grid-template-columns:1fr!important;gap:32px!important}
  .tl-root h2{font-size:34px!important}
  .trust-strip{gap:14px 30px!important;padding:16px 24px!important}
  .tl-diary-pad{padding:44px!important}
  .tl-story-pad{padding:44px!important}
}
@container page (max-width:820px){ .tl-nav{display:none!important} .tl-burger{display:inline-flex!important} .tl-cur-desktop{display:none!important} }
@container page (min-width:821px){ .tl-mobile-menu{display:none!important} }
@container page (max-width:560px){
  #tl-headinner{height:64px!important;padding:0 16px!important;grid-template-columns:1fr auto 1fr!important}
  #tl-logo{height:52px!important}
  .tl-nav{display:none!important}
  .tl-burger{display:inline-flex!important}
  .tl-hero{padding:26px 20px 26px!important;gap:26px!important}
  .tl-hero h1{font-size:39px!important}
  .tl-hero p{font-size:16px!important}
  .tl-grid-4{grid-template-columns:1fr!important;gap:16px!important}
  .tl-foot-nav{grid-template-columns:1fr 1fr!important;gap:22px!important}
  .tl-diary-pad{padding:34px 26px!important}
  .tl-story-pad{padding:34px 26px!important}
  .tl-root h2{font-size:29px!important;line-height:1.08!important}
  .tl-newsletter{padding:40px 24px!important}
}

/* ---- Menu reset (wp_nav_menu ul) ---- */
.tl-menu{list-style:none;margin:0;padding:0;display:flex;gap:26px}
.tl-menu a{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--tl-ink-soft);text-decoration:none;letter-spacing:.01em;transition:color .2s}
.tl-menu a:hover{color:var(--color-brand)}
.tl-mobile-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-mobile-nav a{font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--tl-ink);text-decoration:none;padding:14px 4px;border-bottom:1px solid var(--border-hairline);display:block}
.tl-foot-col{list-style:none;margin:0;padding:0}
.tl-foot-col a{display:block;font-family:var(--font-body);font-size:14px;color:var(--tl-dragonfruit);opacity:.78;text-decoration:none;padding:5px 0}
.tl-foot-col a:hover{opacity:1}

/* ---- WooCommerce light styling on Tanline palette ---- */
.woocommerce-store-notice,.woocommerce .button,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--color-brand);color:var(--color-on-brand);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:700;border:0;padding:.7em 1.4em;transition:background .2s;
}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--color-brand-hover);color:var(--color-on-brand)}
.woocommerce .price,.woocommerce ul.products li.product .price{color:var(--text-strong);font-weight:700}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title{font-family:var(--font-display);font-weight:700;color:var(--text-strong)}
/* ---- Store notices ---- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--tl-aquamarine-wash)!important;
  border:1.5px solid var(--border-hairline)!important;
  border-radius:var(--radius-lg);
  font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--text-body);
  padding:18px 22px 18px 54px!important;margin:0 0 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap
}
/* Woo positions its tick glyph absolutely; keep that but recolour and re-place. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{
  color:var(--tl-aquamarine);left:22px;top:50%;transform:translateY(-50%)
}
.woocommerce-error{background:var(--tl-dragonfruit-wash)!important}
.woocommerce-error::before{color:var(--tl-dragonfruit)}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;flex:none}

/* ---- Product loop cards (shop, category archives, related products) ---- */
/* overflow:visible so the sale seal can hang off the card corner. */
.woocommerce ul.products li.product{display:flex;flex-direction:column;text-align:left;position:relative;overflow:visible}
.woocommerce ul.products li.product a.woocommerce-loop-product__link{overflow:visible}
.woocommerce ul.products li.product a.woocommerce-loop-product__link{display:flex;flex-direction:column}
.woocommerce ul.products li.product img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius-lg);margin:0 0 14px;display:block
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.15;
  letter-spacing:-.01em;color:var(--text-strong);padding:0;margin:0 0 6px
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--text-strong);margin:0 0 12px
}
.woocommerce ul.products li.product .price del{opacity:.55;font-weight:400;margin-right:6px}
.woocommerce ul.products li.product .price ins{text-decoration:none}
/* The stepper CTA sits at the card foot regardless of title length. */
.woocommerce ul.products li.product .tl-pcta{margin-top:auto}
/* WooCommerce injects a "View cart" link beside the button after an AJAX add.
   The cart drawer already opens on add, so it's redundant and it breaks the
   card's layout by sitting inline next to the CTA. */
.woocommerce ul.products li.product a.added_to_cart{display:none!important}

/* ---- Single product ---- */
/* Images and summary are floated, so the related grid needs to clear them —
   without this "Related products" rides up alongside the hero image. */
.woocommerce div.product::after{content:"";display:table;clear:both}
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.products{clear:both;padding-top:24px}
.woocommerce div.product div.images{width:44%}
.woocommerce div.product div.summary{width:52%}
.woocommerce div.product div.images img{border-radius:var(--radius-lg)}
.woocommerce div.product .product_title{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--text-strong)}
/* Price in the same ink as the loop cards rather than Woo's olive green. */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--font-body);font-weight:700;font-size:22px;color:var(--text-strong)
}
.woocommerce div.product p.price del{opacity:.5;font-weight:400;color:var(--text-muted);margin-right:8px}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--text-strong)}
.woocommerce div.product .related.products > h2{
  font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.02em;
  color:var(--text-strong);margin:0 0 22px
}

/* ---- Size picker ----
   Replaces the default variation dropdown. The <select> stays in the DOM,
   hidden, because WooCommerce's variation script reads and writes it. */
.woocommerce div.product form.variations_form table.variations{display:none}
.tl-sizes{margin:0 0 22px;width:100%}
.tl-sizes-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.tl-sizes-label{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)
}
.tl-sizes-none{font-family:var(--font-body);font-size:13px;color:var(--tl-dragonfruit);font-weight:600}
.tl-sizes-list{display:flex;flex-wrap:wrap;gap:10px}

.tl-size{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:92px;padding:11px 14px;cursor:pointer;
  background:var(--surface-card);
  border:1.5px solid var(--border-hairline);border-radius:16px;
  font-family:var(--font-body);transition:border-color .18s ease,background .18s ease,transform .18s ease
}
.tl-size:hover:not([disabled]){border-color:var(--tl-aquamarine);transform:translateY(-2px)}
.tl-size-name{font-size:15.5px;font-weight:700;color:var(--text-strong);line-height:1.1}
.tl-size-stock{font-size:12px;color:var(--text-muted);line-height:1.1}

.tl-size.is-selected{
  border-color:var(--tl-aquamarine);background:var(--tl-aquamarine-wash);
  box-shadow:0 0 0 1.5px var(--tl-aquamarine) inset
}
/* Only the scarce states carry a label, so sizes with plenty of stock show
   just the name and the row stays quiet. */
.tl-size--last .tl-size-stock{color:var(--tl-dragonfruit);font-weight:700}
.tl-size--low .tl-size-stock{color:var(--tl-papaya);font-weight:700}

/* Sold out stays clickable — the click opens the notify form. */
.tl-size--out{background:transparent;border-style:dashed}
.tl-size--out .tl-size-name{text-decoration:line-through;color:var(--text-muted)}
.tl-size--out .tl-size-stock{color:var(--tl-aquamarine);font-weight:700;text-decoration:underline}
.tl-size--out:hover:not([disabled]){border-color:var(--tl-aquamarine);border-style:solid}

/* ---- Back-in-stock modal ---- */
body.tl-notify-open{overflow:hidden}
.tl-notify{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.tl-notify[hidden]{display:none}
.tl-notify-scrim{position:absolute;inset:0;background:rgba(30,26,23,.42);backdrop-filter:blur(3px)}
.tl-notify-panel{
  position:relative;width:100%;max-width:440px;
  background:var(--surface-card);border:1.5px solid var(--border-hairline);
  border-radius:var(--radius-xl);box-shadow:0 26px 60px rgba(94,67,40,.28);
  padding:36px 34px 34px;max-height:90vh;overflow-y:auto
}
.tl-notify-x{
  position:absolute;top:14px;right:14px;width:38px;height:38px;
  border:0;background:transparent;border-radius:50%;cursor:pointer;
  color:var(--tl-ink-soft);display:flex;align-items:center;justify-content:center;transition:background .16s ease
}
.tl-notify-x:hover{background:var(--tl-butter-wash)}
.tl-notify-eyebrow{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-brand)
}
.tl-notify-title{
  font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1.08;
  letter-spacing:-.02em;color:var(--text-strong);margin:8px 0 10px
}
.tl-notify-sub{font-family:var(--font-body);font-size:15.5px;line-height:1.6;color:var(--tl-ink-soft);margin:0 0 14px}
.tl-notify-size{
  display:inline-flex;align-items:center;margin:0 0 18px;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--tl-butter);color:var(--tl-ink);padding:6px 13px;border-radius:999px
}
.tl-notify-size:empty{display:none}
/* Product and size ride along as CF7 text fields; they are filled by script. */
.tl-notify-context{display:none}
.tl-notify-missing{font-family:var(--font-body);font-size:14px;color:var(--text-muted);margin:0}

.tl-notify-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:16px 0 6px}
.tl-notify-done[hidden]{display:none}
.tl-notify-tick{
  width:62px;height:62px;border-radius:50%;background:var(--tl-aquamarine-wash);
  display:flex;align-items:center;justify-content:center;color:var(--tl-aquamarine)
}
.tl-notify-done-title{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--text-strong);margin:0}
.tl-notify-done-text{font-family:var(--font-body);font-size:15.5px;line-height:1.6;color:var(--tl-ink-soft);margin:0;max-width:30ch}
.tl-notify-done-sign{font-family:var(--font-hand);font-size:21px;color:var(--tl-papaya)}

@container page (max-width:560px){
  .tl-notify-panel{padding:28px 22px 26px}
  .tl-notify-title{font-size:27px}
}

/* Quantity stepper around WooCommerce's own qty input. */
.woocommerce div.product form.cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.woocommerce div.product form.cart .quantity{margin:0;float:none}
/* Woo floats the add-to-cart button left, which put it before the stepper
   despite the DOM order being the other way round. */
.woocommerce div.product form.cart .button{float:none}
.woocommerce div.product .woocommerce-variation-add-to-cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.woocommerce div.product form.variations_form{display:block}
.woocommerce div.product .woocommerce-variation{margin-bottom:14px}
.woocommerce div.product .woocommerce-variation-price .price{font-size:20px}
.tl-qty{
  display:inline-flex;align-items:center;
  border:1.5px solid var(--border-hairline);border-radius:999px;
  background:var(--surface-card);padding:3px
}
.tl-qty-btn{
  width:34px;height:34px;border:0;background:transparent;border-radius:50%;cursor:pointer;
  font-family:var(--font-body);font-size:17px;font-weight:700;color:var(--tl-ink-soft);
  display:inline-flex;align-items:center;justify-content:center;transition:background .16s ease
}
.tl-qty-btn:hover{background:var(--tl-butter-wash)}
.tl-qty input.qty{
  width:44px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;
  text-align:center;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--text-strong);
  -moz-appearance:textfield;appearance:textfield
}
.tl-qty input.qty::-webkit-outer-spin-button,
.tl-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--font-body);font-size:13.5px;color:var(--text-muted);margin:0 0 18px
}
.woocommerce .woocommerce-breadcrumb a{color:var(--tl-ink-soft)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--color-brand)}

/* ---- Sale badge ----
   A scalloped seal rather than a plain circle. The wave is an SVG mask so the
   colour stays a token; the arcs are semicircular bulges on a 12-point circle. */
.woocommerce span.onsale{
  background:var(--tl-papaya)!important;color:#fff!important;
  min-width:0;width:68px;height:68px;padding:0!important;
  margin:0!important;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:14px;font-weight:700;line-height:1;
  letter-spacing:.02em;text-transform:lowercase;
  border-radius:0!important;box-shadow:none;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M92.0,50.0A10.9,10.9 0 0,1 86.4,71.0A10.9,10.9 0 0,1 71.0,86.4A10.9,10.9 0 0,1 50.0,92.0A10.9,10.9 0 0,1 29.0,86.4A10.9,10.9 0 0,1 13.6,71.0A10.9,10.9 0 0,1 8.0,50.0A10.9,10.9 0 0,1 13.6,29.0A10.9,10.9 0 0,1 29.0,13.6A10.9,10.9 0 0,1 50.0,8.0A10.9,10.9 0 0,1 71.0,13.6A10.9,10.9 0 0,1 86.4,29.0A10.9,10.9 0 0,1 92.0,50.0Z' fill='%23fff'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M92.0,50.0A10.9,10.9 0 0,1 86.4,71.0A10.9,10.9 0 0,1 71.0,86.4A10.9,10.9 0 0,1 50.0,92.0A10.9,10.9 0 0,1 29.0,86.4A10.9,10.9 0 0,1 13.6,71.0A10.9,10.9 0 0,1 8.0,50.0A10.9,10.9 0 0,1 13.6,29.0A10.9,10.9 0 0,1 29.0,13.6A10.9,10.9 0 0,1 50.0,8.0A10.9,10.9 0 0,1 71.0,13.6A10.9,10.9 0 0,1 86.4,29.0A10.9,10.9 0 0,1 92.0,50.0Z' fill='%23fff'/></svg>") center/contain no-repeat
}
/* Positioning needs to outrank Woo's own `ul.products li.product .onsale`.
   The seal hangs off the card corner rather than sitting inside it. */
.woocommerce ul.products li.product span.onsale{top:-16px;right:-16px;left:auto;bottom:auto}
/* Larger on the product page, where the image is much bigger. */
.woocommerce div.product span.onsale{
  width:96px;height:96px;font-size:18px;top:-18px;left:-18px;right:auto;bottom:auto
}
.tl-shop-wrap{max-width:1280px;margin:0 auto;padding:48px 32px}
.tl-shop-wrap h1.page-title,.tl-shop-wrap .woocommerce-products-header__title{
  font-family:var(--font-display);font-weight:700;font-size:44px;letter-spacing:-.02em;color:var(--text-strong)
}

/* ---- Order received / order details ----
   Also covers the same markup under My account → Orders. */

/* The overview is a <ul>, so it inherits the browser's 40px list indent and
   sits further right than the heading and paragraph above it. Laid out as a
   wrapping row of stacked label/value pairs instead of floated list items,
   which is what caused the ragged second line. */
.woocommerce-order-overview,
.woocommerce ul.order_details,
ul.woocommerce-order-overview{
  list-style:none;margin:0 0 44px;padding:0!important;
  display:flex;flex-wrap:wrap;gap:20px 44px
}
/* WooCommerce clearfixes this list with ::before/::after. Making it a flex
   container turns those into zero-width flex items, and the column gap then
   pushes the first real item 44px right — which is what made the row look
   indented rather than left-aligned with the text above it. */
.woocommerce-order-overview::before,
.woocommerce-order-overview::after{display:none!important;content:none!important}
.woocommerce-order-overview li{
  display:flex;flex-direction:column;gap:5px;
  margin:0!important;padding:0!important;border:0!important;
  font-family:var(--font-body);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted)
}
.woocommerce-order-overview li strong{
  font-family:var(--font-body);font-size:17px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--text-strong)
}

/* Section headings in the display face rather than heavy Inter. */
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2,
.woocommerce-order h2{
  font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.1;
  letter-spacing:-.01em;color:var(--text-strong);margin:0 0 20px
}

/* Order table: roomier rows, lighter weights. */
.woocommerce-table--order-details{
  border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
  border-collapse:separate;border-spacing:0;overflow:hidden;width:100%
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td{
  padding:16px 20px!important;font-family:var(--font-body);font-size:15.5px;
  border-left:0!important;border-right:0!important
}
.woocommerce-table--order-details thead th{
  font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)
}
.woocommerce-table--order-details tbody td{font-weight:400;color:var(--text-body)}
.woocommerce-table--order-details tfoot th{font-weight:500;color:var(--text-body)}
.woocommerce-table--order-details tfoot td{font-weight:600;color:var(--text-strong)}

/* Address block. Woo has used a couple of wrappers over the years, so both. */
.woocommerce-customer-details{margin-top:44px}
.woocommerce-customer-details address,
.woocommerce-order address{
  font-family:var(--font-body);font-style:normal;font-size:16px;line-height:1.95;
  color:var(--text-body);padding:24px 26px;
  border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
  background:var(--surface-card)
}
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email{margin:16px 0 0;display:flex;align-items:center;gap:10px}

/* generic page content */
.tl-page{max-width:820px;margin:0 auto;padding:56px 32px}
.tl-page h1{font-family:var(--font-display);font-weight:700;font-size:44px;letter-spacing:-.02em;margin:0 0 .4em}
.tl-page a{color:var(--color-brand)}

/* ---- About template ---- */
/* WYSIWYG bodies: ACF emits <p>, so style the wrapper rather than the field. */
.ab-mission-body{font-family:var(--font-body);font-size:20px;line-height:1.65;color:var(--tl-ink-soft);max-width:62ch;text-wrap:pretty}
.ab-bali-body{font-family:var(--font-body);font-size:17.5px;line-height:1.65;color:var(--tl-ink-soft);max-width:48ch;text-wrap:pretty}
.ab-mission-body p,.ab-bali-body p{margin:0 0 1em}
.ab-mission-body p:last-child,.ab-bali-body p:last-child{margin-bottom:0}

/* Zigzag rows alternate sides; only meaningful once they sit side by side. */
@container page (min-width:901px){ .zz-rev .zz-media{order:2} }

@container page (max-width:900px){
  .ab-hero-copy{padding:34px 28px 38px!important}
  .ab-hero-copy h1{font-size:48px!important}
  .ab-hero-media{height:400px!important}
  .zz-row{grid-template-columns:1fr!important;gap:26px!important}
  .zz-media{height:380px!important}
  .ab-mission{padding:64px 28px!important}
  .ab-mission-body{font-size:19px!important}
  .ab-bali{grid-template-columns:1fr!important;gap:30px!important;padding:48px 30px!important}
  .ab-bali-media{height:340px!important}
  .ab-values{grid-template-columns:1fr 1fr!important}
  .ab-root h2{font-size:34px!important}
}
@container page (max-width:560px){
  .ab-wrap{padding-left:20px!important;padding-right:20px!important}
  .ab-hero-copy{padding:26px 20px 30px!important}
  .ab-hero-copy h1{font-size:38px!important}
  .ab-hero-media{height:300px!important}
  .zz-media{height:300px!important}
  .ab-mission{padding:52px 22px!important}
  .ab-mission-body{font-size:17.5px!important}
  .ab-bali{padding:36px 22px!important}
  .ab-values{grid-template-columns:1fr!important}
  .ab-root h2{font-size:29px!important;line-height:1.08!important}
}

/* ---- Sustainability template ---- */
/* Shares .ab-root, .ab-wrap and the .zz-* zigzag rules with About. */
.su-body{font-family:var(--font-body);font-size:17.5px;line-height:1.65;color:var(--tl-ink-soft);max-width:46ch;text-wrap:pretty}
.su-body p{margin:0 0 1em}
.su-body p:last-child{margin-bottom:0}

@container page (max-width:900px){
  .su-hero{grid-template-columns:1fr!important;gap:30px!important}
  .su-hero h1{font-size:46px!important}
  .su-hero-media{height:400px!important}
  .su-grid{grid-template-columns:1fr 1fr!important}
  .su-band{padding:48px 30px!important}
  /* Stacked steps: point the arrows down the column instead of across. */
  .su-road{flex-direction:column!important}
  .su-road-arrow{transform:rotate(90deg)}
}
@container page (max-width:560px){
  .su-hero h1{font-size:37px!important}
  .su-hero-media{height:300px!important}
  .su-grid{grid-template-columns:1fr!important}
  .su-band{padding:34px 22px!important}
}

/* ---- Contact template ---- */
/* Styles Contact Form 7's output. CF7 wraps each field in a
   .wpcf7-form-control-wrap span, which has to become a block or the label
   column collapses. */
.co-fields{display:flex;flex-direction:column;gap:18px}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.co-label{display:flex;flex-direction:column;gap:7px}
.co-label-text{font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.co-label .wpcf7-form-control-wrap{display:block}

.co-field{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:15.5px;color:var(--tl-ink);background:var(--tl-butter-wash);border:1.5px solid var(--border-hairline);border-radius:16px;padding:13px 16px;outline:none;transition:border-color .2s}
.co-field:focus{border-color:var(--tl-aquamarine)}
select.co-field{cursor:pointer;appearance:none}
textarea.co-field{resize:vertical;line-height:1.55}

.co-submit{align-self:flex-start;border:0;border-radius:999px;background:var(--tl-dragonfruit);color:#fff;font-family:var(--font-body);font-size:15.5px;font-weight:700;padding:15px 32px;cursor:pointer;box-shadow:0 10px 24px rgba(226,76,113,.28);transition:background .2s}
.co-submit:hover{background:var(--color-brand-hover)}

.co-side-link:hover{color:var(--color-brand)!important}

/* Success panel, revealed by tanline.js on CF7's wpcf7mailsent event.
   Both rules are needed: an author `display` beats the [hidden] UA default,
   so the hidden state has to be declared explicitly. */
.co-success{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding:36px 8px}
.co-success[hidden],.co-form-wrap[hidden]{display:none}

/* ---- Home: Join the club ---- */
/* CF7 generates the input and the button, so the pill row that used to be
   inline styles on them lives here instead. */
.tl-club-form-wrap{width:100%;max-width:480px;margin-top:6px}
.tl-club-form-wrap .wpcf7-form-control-wrap{display:block;flex:1;min-width:0}
.tl-club-fields{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:flex-start}

.tl-club-field{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:15px;color:var(--tl-dragonfruit);background:var(--tl-white);border:1.5px solid rgba(30,26,23,.12);border-radius:999px;padding:14px 22px;outline:none;transition:border-color .2s}
.tl-club-field:focus{border-color:var(--tl-dragonfruit)}
.tl-club-field::placeholder{color:var(--tl-dragonfruit);opacity:.5}

.tl-club-submit{flex:0 0 auto;border:0;border-radius:999px;background:var(--tl-dragonfruit);color:var(--tl-butter);font-family:var(--font-body);font-size:15px;font-weight:700;padding:14px 30px;cursor:pointer;transition:background .2s}
.tl-club-submit:hover{background:var(--color-brand-hover)}

/* Confirmation, revealed by tanline.js on CF7's wpcf7mailsent event. As with
   .co-success, the hidden state has to be declared explicitly. */
.tl-club-success{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;padding:6px 8px 2px}
.tl-club-success[hidden],.tl-club-form-wrap[hidden]{display:none}

.tl-newsletter .wpcf7-response-output{font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--tl-dragonfruit);border:1.5px solid rgba(30,26,23,.12);border-radius:16px;padding:11px 16px;margin:14px 0 0}
.tl-newsletter .wpcf7-spinner{margin:0 0 0 12px}

/* CF7 validation + response messaging, on the Tanline palette. */
.wpcf7-not-valid-tip{font-family:var(--font-body);font-size:13px;color:var(--tl-dragonfruit);margin-top:5px}
.co-card .wpcf7-response-output{font-family:var(--font-body);font-size:14.5px;line-height:1.55;border:1.5px solid var(--border-hairline);border-radius:16px;padding:13px 16px;margin:18px 0 0}
.co-card .wpcf7-not-valid{border-color:var(--tl-dragonfruit)}
.co-card .wpcf7-spinner{margin:0 0 0 12px}

@container page (max-width:900px){
  .co-grid{grid-template-columns:1fr!important;gap:26px!important}
  .co-hero h1{font-size:46px!important}
  .co-row{grid-template-columns:1fr!important}
}
@container page (max-width:560px){
  .co-hero h1{font-size:37px!important}
  .co-card{padding:26px 22px!important}
}

/* ---- Journal ---- */
.jr-pill{
  display:inline-flex;align-items:center;
  font-family:var(--font-body);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:var(--tl-butter);color:var(--tl-ink)
}

.jr-card{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.jr-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(94,67,40,.18)}
.jr-card:hover .jr-card-title{color:var(--color-brand)}
.jr-card-title{transition:color .2s}
.jr-feat:hover .jr-feat-title{color:var(--color-brand)}

/* Entry body. Block-editor output, so style by element rather than class. */
.jr-body{font-family:var(--font-body);font-size:18px;line-height:1.75;color:var(--tl-ink-soft)}
.jr-body > *{margin:0 0 1.15em}
.jr-body > *:last-child{margin-bottom:0}
.jr-body h2,.jr-body h3{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  color:var(--text-strong);margin:1.8em 0 .5em;text-wrap:pretty
}
.jr-body h2{font-size:30px;line-height:1.12}
.jr-body h3{font-size:24px;line-height:1.15}
.jr-body a{color:var(--color-brand)}
.jr-body img{max-width:100%;height:auto;border-radius:var(--radius-lg);display:block}
.jr-body ul,.jr-body ol{padding-left:1.3em}
.jr-body li{margin-bottom:.4em}
/* Pull-quote, tinted with the entry's accent via the --jr-accent variable. */
.jr-body blockquote{
  border-left:3px solid var(--jr-accent,var(--tl-aquamarine));
  margin:1.8em 0;padding:2px 0 2px 22px;
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:26px;line-height:1.3;color:var(--text-strong)
}
.jr-body blockquote p{margin:0}

@container page (max-width:1100px){ .jr-grid{grid-template-columns:1fr 1fr!important} }
@container page (max-width:900px){
  .jr-feat{grid-template-columns:1fr!important;gap:26px!important}
  .jr-feat-media{height:360px!important}
  .jr-head h1{font-size:46px!important}
  .jr-single-head h1{font-size:40px!important}
  .jr-single-media{height:380px!important}
}
@container page (max-width:620px){
  .jr-grid{grid-template-columns:1fr!important}
  .jr-head h1{font-size:37px!important}
  .jr-feat-media{height:280px!important}
  .jr-feat-title{font-size:30px!important}
  .jr-single-head h1{font-size:32px!important}
  .jr-single-media{height:260px!important}
  .jr-body{font-size:17px}
  .jr-body h2{font-size:26px}
  .jr-body blockquote{font-size:22px}
}

/* ---- WooCommerce Cart & Checkout blocks ----
   Selectors taken from the hydrated block DOM on WooCommerce 10.9. The blocks
   ship fairly specific styles of their own, hence the !important on the
   properties they set directly. If a Woo update renames these classes the
   checkout falls back to stock styling rather than breaking. */

/* Step and section headings */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-cart__totals-title{
  font-family:var(--font-display)!important;font-weight:700;letter-spacing:-.01em;color:var(--text-strong)
}

/* Fields */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-textarea{
  font-family:var(--font-body);font-size:15.5px;color:var(--tl-ink);
  background:var(--tl-butter-wash)!important;
  border:1.5px solid var(--border-hairline)!important;
  border-radius:16px!important;
  transition:border-color .2s
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus{
  border-color:var(--tl-aquamarine)!important;box-shadow:none!important;outline:none
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label{font-family:var(--font-body);color:var(--text-muted)}

/* Primary actions: checkout's Place Order and the cart's Proceed button */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{
  background:var(--tl-dragonfruit)!important;color:#fff!important;
  border:0!important;border-radius:999px!important;
  font-family:var(--font-body)!important;font-weight:700;font-size:15.5px;
  box-shadow:0 10px 24px rgba(226,76,113,.28);
  transition:background .2s
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover{background:var(--color-brand-hover)!important}

/* Cart and checkout render through the generic page template, whose .tl-page
   is an 820px prose column — far too narrow for a two-column checkout. The
   order-received page shares the woocommerce-checkout body class but is a
   receipt, which reads better at the narrower measure, so it's excluded. */
.woocommerce-cart .tl-page,
.woocommerce-checkout:not(.woocommerce-order-received) .tl-page{max-width:1200px}

/* Order summary panel */
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar{
  background:var(--surface-card);
  border:1.5px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  overflow:hidden
}
/* The cart sidebar is only padded on the left by default, which leaves its
   contents flush against the card edge once it has a border. */
.wc-block-cart__sidebar{padding:24px!important}
/* The summary block draws its own 1px/5px-radius box inside our card, which
   reads as a doubled border. The card is the frame; this isn't needed. */
.wp-block-woocommerce-checkout-order-summary-block{border:0!important;border-radius:0!important}
.wc-block-components-totals-item{font-family:var(--font-body);color:var(--text-body)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--font-display);font-weight:700;color:var(--text-strong)
}

/* Payment method options.
   The blocks draw the option outline with an inset box-shadow rather than a
   border, so overriding border alone leaves a doubled ring. */
.wc-block-components-radio-control-accordion-option{
  border-radius:16px!important;
  box-shadow:0 0 0 1.5px var(--border-hairline) inset!important;
  background:var(--surface-card);
  overflow:hidden
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  box-shadow:0 0 0 1.5px var(--tl-aquamarine) inset!important;
  background:var(--tl-butter-wash)
}
.wc-block-components-radio-control__option{border:0!important;background:transparent}
/* Each option carries its own ring, so the group container and the payment
   fieldset must not draw one too — otherwise a second, paler rectangle appears
   around the whole set. WooPayments' card element adds its own wrapper here,
   so this covers border, shadow and background rather than guessing which. */
.wc-block-components-radio-control--highlight-checked,
.wc-block-checkout__payment-method,
.wp-block-woocommerce-checkout-payment-block{
  border:0!important;box-shadow:none!important;background:transparent!important
}

/* Links inside the blocks pick up the brand rather than the default blue */
.wc-block-components-checkout-step a,
.wc-block-components-order-summary a,
.wc-block-components-totals-coupon a{color:var(--color-brand)}