/* ==========================================================================
   PDP (single product) — reskins WooCommerce's native gallery/variation/tabs/
   review markup to match the brand. Only enqueued on is_product() templates.
   ========================================================================== */

/* Content-forward, not photo-forward: the info column is now the WIDER,
   dominant side. The image sits in a capped, framed card instead of
   stretching edge-to-edge — a single photo no longer reads as "giant".
   .pdp-grid is a plain <div>, not a <section>, so it never inherited the
   sitewide edge padding/max-width every other section gets automatically —
   that's the real reason the gallery was running flush to the browser edge. */
.pdp-grid{
  /* Was `0.8fr 1.2fr` — a ratio-based track gives the image column a share
     of the FULL available width, but .gallery below is hard-capped at
     360px and doesn't stretch to fill it. On anything wider than ~1200px
     that track was well over 360px, so the info column (which starts at
     the end of the TRACK, not at the end of the visibly-capped photo) sat
     stranded a few hundred px to the right of the actual image — reading
     as a big uncentered dead gap between photo and title/price.
     Second pass: making the content column `1fr` fixed the gap right after
     the photo, but on wide screens `1fr` still stretches that track to
     whatever's left of the (up to 1440px) container — title/price/
     description are short lines, so they just sat pinned to ITS left edge
     with a second dead zone after them, and the whole two-column block hugs
     the page's left side (grid's default `justify-content:start` packs
     tracks to the start instead of centering them). Capping both tracks to
     real content widths and centering the pair as one unit (instead of
     stretching one side to eat the leftover space) is what actually fixes
     "conteúdo jogado pra esquerda" instead of just moving where the dead
     space sits. */
  display:grid; grid-template-columns: minmax(0, 360px) minmax(0, 540px); justify-content:center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  margin: 1rem auto 0; align-items: start;
  max-width: 1440px; padding: 0 var(--edge);
}
@media (max-width: 900px){
  /* Explicit rows, not left to implicit auto-flow: the gallery's real height
     includes flexslider's own oversized (2000px+ wide) inline-styled slide
     track, and even though .gallery's overflow:hidden clips it visually,
     that width was still throwing off the grid's own row-sizing pass enough
     for .pdp-info to start before .gallery actually ended — the price/title
     visibly overlapping the thumbnail row. */
  .pdp-grid{ grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 1.3rem; }
  .gallery{ grid-row: 1; }
  .pdp-info{ grid-row: 2; }
}

/* overflow:hidden here (not on .woocommerce-product-gallery__wrapper — see
   below) is what actually keeps this column visually capped at 360px. */
.gallery{ align-self: start; position: relative; max-width: 360px; overflow:hidden; border-radius:14px; }
.gallery--sticky{ position: sticky; top: calc(6.6rem + 1.5rem); }
.woocommerce-product-gallery{ position: relative; display:flex; flex-direction:row-reverse; gap:0.7rem; }
/* Deliberately NOT constraining this element's own width, and NOT using
   aspect-ratio on it. With more than one photo, flexslider sets an inline
   width on THIS exact element equal to slideCount × slideWidth — it's the
   sliding track, not a single-image box — and calculates every slide
   transition's pixel offset from that measurement. Forcing the width back
   down via CSS (even !important) leaves that cached measurement stale:
   flexslider still moves the track by the OLD (much larger) per-slide
   distance, so past the first photo the visible window lands on empty
   space between slides instead of the next image — a real break in the
   existing thumbnail-click navigation, not just our new arrows. Fixing the
   height with a plain value (not derived from this element's own width)
   and clipping horizontal+vertical overflow on the PARENT (.gallery, which
   flexslider never touches) gets the same capped, cropped-photo look
   without fighting the slider's own math at all. */
.woocommerce-product-gallery__wrapper{
  flex:1; min-width:0; height: clamp(280px, 45vw, 450px);
  box-shadow: 0 12px 30px -12px rgba(23,20,15,0.25);
  /* flexslider slides this track via an inline `transform: translateX()`
     computed from ITS OWN cached per-slide width — a value that goes stale
     (and desyncs from the track's own total width) the moment anything
     outside flexslider's control reflows the container, which our layout
     does constantly (thumbnail column width, sticky positioning, even
     scrollbar-driven viewport width changes). Confirmed live: after our CSS
     applies, the track's total width and its own translateX step were
     computed from two DIFFERENT slide-width numbers, so clicking past slide
     1 lands the visible window on the wrong, cropped fraction of the next
     photo instead of centering it. Neutralizing the transform and instead
     toggling plain display:none/block per slide below sidesteps flexslider's
     sliding-track math entirely — correctness no longer depends on any of
     its internal measurements being self-consistent.
  */
  transform: none !important;
  width: 100% !important;
  position: relative;
}
/* !important, scoped to just the actual product photo (.wp-post-image) —
   NOT the broader ".woocommerce-product-gallery img", which also matches
   the tiny zoom-trigger magnifier icon and the invisible .zoomImg (that one
   needs its own large inline-styled dimensions for the pan effect; forcing
   it to 100% earlier is what blew the magnifier icon up to fill the frame).
   WooCommerce's own core stylesheet ships
   ".woocommerce div.product div.images img{ height:auto; ... }" — three
   classes deep, more specific than our un-scoped rule used to be — so it
   was winning the height property specifically, leaving the image
   auto-height'd to its own source aspect ratio instead of filling the 4:5
   box. Whichever photo isn't natively 4:5 (most of the placeholders aren't)
   was left with visible empty space under it, inside the same
   rounded/shadowed card, reading as a broken layout. */
/* The real reason height:100% wasn't resolving even with !important: the
   photo sits inside a plain <a> (WooCommerce's own lightbox-trigger link)
   with no explicit sizing, default display:inline — an inline box has no
   definite height, so a percentage height on its child computes as "auto"
   per spec, not an actual value. .wrapper has a real height (aspect-ratio),
   but that height was never reaching the <img> through the inline <a> in
   between. Making every link/box in that chain block + 100% carries the
   wrapper's height all the way down to the image. */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a{ display:block; width:100% !important; height:100%; }
/* .wp-post-image only lands on the FEATURED photo — WordPress adds that
   class itself via get_the_post_thumbnail(), but the other gallery photos
   are plain wp_get_attachment_image() calls with no such class, so scoping
   to it (as this used to) only ever styled slide 1; slides 2+ fell through
   to WooCommerce's own bare ".woocommerce img{ height:auto }" the whole
   time, which is why only the first photo ever filled the frame correctly.
   "> a > img" reaches every real photo regardless of that class while still
   skipping the sibling .zoomImg (a direct child of .woocommerce-product-
   gallery__image, not inside its <a>) and the separate zoom-trigger icon
   (lives outside .woocommerce-product-gallery__image entirely). */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
/* Each slide is flexslider's own per-slide track item — it sets an inline
   width on these (see the wrapper comment above) so ours needs !important to
   win. Only .flex-active-slide (the class flexslider already toggles on
   thumbnail/arrow clicks) stays visible; every other slide is fully removed
   from layout instead of sitting off-canvas at some drifting transform
   offset. */
/* width/height need !important too, not just display: WooCommerce core ships
   ".images .woocommerce-product-gallery__image:nth-child(n+2){ width:25% }"
   (its own pre-JS fallback grid) and flexslider sets an inline px width on
   top of that — between the two, the slide div's real box was landing
   somewhere neither 25% nor our intended 100%, which left percentage-height
   on the <img> inside resolving against an inconsistent box instead of a
   clean 100%. */
.woocommerce-product-gallery__image{ position:absolute; inset:0; width:100% !important; height:100% !important; display:none !important; }
.woocommerce-product-gallery__image.flex-active-slide{ position:relative; display:block !important; }
/* Single-photo products never get a .flex-active-slide class at all —
   flexslider only tags an "active" slide once it actually initializes,
   which it skips entirely when there's nothing to slide between (1 photo).
   Without this, the base rule above left that lone photo permanently
   display:none. :only-child scopes this purely to the single-photo case —
   in a real multi-photo gallery no slide is ever an only-child, so this
   never fights the .flex-active-slide toggling above. */
.woocommerce-product-gallery__image:only-child{ position:relative; display:block !important; }
.flex-control-thumbs{
  flex:0 0 4.4rem; display:flex; flex-direction:column; gap:0.5rem; list-style:none; margin:0; padding:0;
  max-height: 26rem; overflow-y:auto; scrollbar-width:none;
}
.flex-control-thumbs::-webkit-scrollbar{ display:none; }
.flex-control-thumbs li{ flex:none; }
.flex-control-thumbs img{
  width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius:8px; cursor:pointer; opacity:0.55;
  border:1px solid var(--line); transition:opacity .2s ease, border-color .2s ease;
}
.flex-control-thumbs img.flex-active{ opacity:1; border-color:var(--ink); }

/* ---------- prev/next arrows on the main image (thumbnail-only navigation
   otherwise, easy to miss that you even can move between photos) ----------
   These render as plain siblings of WooCommerce's own dynamically-built
   gallery markup (no clean way to print straight inside it from a template),
   so they anchor against .gallery's full box, not just the photo — which is
   still fine for "next" (the image is flex:1, the last/rightmost item in the
   row-reverse layout, so its right edge already IS .gallery's right edge)
   but not for "prev": .gallery's own left edge is the THUMBNAIL column's
   edge, offset from the image's actual left edge by that column's width.
   (Tried moving these into the wrapper via JS instead — it desyncs
   flexslider's own slide-width math and blows the whole gallery up to
   several times its size, so this stays a pure-CSS position fix.) */
.pdp-gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:2.2rem; height:2.2rem; border-radius:50%; background:rgba(243,235,223,0.9); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
  transition: background-color .2s ease;
}
.pdp-gallery-nav:hover{ background:#F3EBDF; }
.pdp-gallery-nav.prev{ left: calc(4.4rem + 0.7rem + 0.6rem); }
.pdp-gallery-nav.next{ right:0.6rem; }
@media (max-width: 900px){
  /* mobile stacks the thumbnails above the image instead of beside it (see
     the existing .woocommerce-product-gallery flex-direction override), so
     .gallery's left edge is the image's left edge again there. */
  .pdp-gallery-nav.prev{ left:0.6rem; }
}

/* ---------- zoom trigger, restyled as an icon-button (not WooCommerce's
   default bare emoji glyph sitting loose on the photo) ----------
   This is WC's OWN <a class="woocommerce-product-gallery__trigger"> — its
   click handler (opens the zoomed/lightbox view) is wired up by WooCommerce's
   core JS the moment the page loads, so restyling it in place keeps that
   working with zero JS of our own, unlike building a separate fake button
   that would need to reimplement or forward the click. */
.woocommerce-product-gallery__trigger{
  position:absolute !important; top:0.7rem !important; right:0.7rem !important; left:auto !important; bottom:auto !important;
  z-index:4; width:2.2rem; height:2.2rem; border-radius:50%;
  background:rgba(243,235,223,0.9) !important; border:1px solid var(--line-strong);
  display:flex !important; align-items:center; justify-content:center;
  opacity:1 !important; transition: background-color .2s ease;
}
.woocommerce-product-gallery__trigger:hover{ background:#F3EBDF !important; }
/* WordPress auto-converts the 🔍 emoji WC prints as this link's text into an
   <img class="emoji"> — hide that default glyph and draw our own SVG magnifier
   instead, in currentColor, so it matches every other icon-button on the page
   instead of looking like a stray emoji floating on the photo. */
.woocommerce-product-gallery__trigger img{ display:none !important; }
.woocommerce-product-gallery__trigger::after{
  content:''; width:1.1rem; height:1.1rem; color: var(--ink);
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.2" y2="16.2"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.2" y2="16.2"/></svg>') center / contain no-repeat;
}

@media (max-width: 900px){
  /* relative, not static — .pdp-photo-count is an absolutely positioned
     child of .gallery and needs it to stay a positioned ancestor even once
     the sticky behavior itself is turned off. top:0 alongside it matters
     just as much: this only overrides .gallery--sticky's `position`, not
     its `top: calc(6.6rem + 1.5rem)` — left alone, that offset still nudges
     a merely-relative .gallery down by that same ~130px (it's a valid
     offset for any position other than static), which was silently
     shoving the whole gallery, thumbnail row included, down into the grid
     row .pdp-info already occupies — reading as the price/title overlapping
     the thumbnails. */
  .gallery{ position:relative; top:0; max-width: none; }
  /* No aspect-ratio here either — same flexslider width-vs-transform
     mismatch as the desktop rule above applies regardless of flex-direction. */
  .woocommerce-product-gallery__wrapper{ height: min(70vh, 90vw); }
  .woocommerce-product-gallery{ flex-direction:column; }
  .flex-control-thumbs{ flex-direction:row; max-height:none; overflow-x:auto; overflow-y:visible; margin-top:0.6rem; }
  .flex-control-thumbs li{ flex:0 0 3.4rem; }
}

/* ---------- photo counter (orientation cue — there's no visible prev/next
   nav, only thumbnails, so it's easy to lose track of how many shots there
   are) ---------- */
.pdp-photo-count{
  position:absolute; right:0.7rem; bottom:0.7rem; z-index:3;
  background: rgba(23,20,15,0.72); color:#F3EBDF; font-size:0.66rem; font-weight:600;
  letter-spacing:0.03em; padding:0.3rem 0.6rem; border-radius:999px; pointer-events:none;
  font-variant-numeric: tabular-nums;
}

/* ---------- summary column ---------- */
.pdp-info{ display:flex; flex-direction:column; gap:0.6rem; }
.pdp-eyebrow{ margin-bottom:0.2rem; }
.product_title{ font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight:600; line-height:1.15; letter-spacing:0.01em; margin-bottom:0.2rem; }
.woocommerce-product-rating{ display:flex; align-items:center; gap:0.5rem; }
.star-rating{ font-size: 0.85rem; }
.price{ font-size: 1.35rem; font-weight:600; font-variation-settings:'wght' 600; font-variant-numeric: tabular-nums; color: var(--ink); margin: 0.2rem 0; }
.price del{ color: var(--ink-mute); font-weight:300; font-size:0.7em; margin-right:0.6rem; }
.price ins{ text-decoration:none; }
.pdp-trust-line{ display:flex; flex-wrap:wrap; gap:0.35rem 0.9rem; font-size:0.76rem; color:var(--ink-soft); margin:0; }
.pdp-trust-line strong{ color:var(--ink); font-weight:600; }
.woocommerce-product-details__short-description{ color: var(--ink-soft); font-size:0.88rem; font-weight:400; font-variation-settings:'wght' 400; max-width:52ch; }
/* Full description, printed directly on the page instead of tucked into the
   accordion (see single-product.php + the woocommerce_product_tabs filter
   that drops the now-redundant "Descrição" tab) — plain flowing paragraphs,
   no card/border/toggle, matching how the reference PDPs (Armadillo,
   Kit & Ace) just let the description read as page copy. */
/* Now sits after the buy buttons/benefits (not between price and them) —
   it's long, and printing it first pushed the actual "add to cart" action
   further down the page than it needed to be. Still not in the accordion
   (stays scannable, per earlier direction), just lower priority in the
   page's reading order. The small label gives it a clear start now that
   it's no longer the very next thing after the price. */
.pdp-description-heading{
  font-size: var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute);
  margin: 1.8rem 0 0.8rem;
}
.pdp-description{ color: var(--ink-soft); font-size:0.88rem; line-height:1.7; max-width:48ch; }
.pdp-description p{ margin: 0 0 0.9rem; }
.pdp-description p:last-child{ margin-bottom:0; }
.pdp-divider{ height:1px; background:var(--line); margin: 0.4rem 0 0.2rem; }

/* ---------- variations (native select, brand-skinned) ----------
   WooCommerce's native markup is a <table><tr><th>label</th><td>swatches</td></tr></table>.
   Only forcing td to display:block (as before) still leaves th as a table-cell,
   so the label and swatches rendered as two side-by-side columns instead of
   stacking — every part of each row needs display:block for a true vertical stack. */
table.variations, table.variations tbody, table.variations tr, table.variations th, table.variations td{ display:block; width:100%; }
table.variations{ border:none; margin: 0.4rem 0; }
table.variations tr{ margin-bottom: 1rem; }
table.variations tr:last-child{ margin-bottom:0; }
table.variations th, table.variations td{ padding:0; text-align:left; }
table.variations label{ font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-mute); display:block; margin-bottom:0.5rem; }
table.variations select{
  width:100%; max-width: 300px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface);
  color:var(--ink); padding: 0.6rem 0.85rem; font-size:0.86rem; cursor:pointer;
}
.gyo-visually-hidden-select{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.var-swatches{ display:flex; flex-wrap:wrap; gap:0.55rem; }
.var-swatch{ cursor:pointer; transition: transform .15s ease, border-color .15s ease; }
.var-swatch-color{
  width:2rem; height:2rem; border-radius:50%; border:2px solid transparent;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.var-swatch-color.is-selected, .var-swatch-color:hover{ border-color:var(--ink); transform: scale(1.08); }
.var-swatch-size{
  min-width:2.5rem; padding:0.5rem 0.9rem; border-radius:999px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-size:0.78rem; font-weight:600;
}
.var-swatch-size.is-selected{ background:var(--ink); color:#F3EBDF; border-color:var(--ink); }
.var-swatch-size:hover{ border-color:var(--ink); }
.var-swatch.gyo-unavailable{ opacity:0.35; cursor:not-allowed; }
.woocommerce-variation-add-to-cart .reset_variations{ font-size:0.72rem; color:var(--ink-mute); text-decoration:underline; margin-left:0.6rem; }
.woocommerce-variation-price .price{ font-size:1.2rem; }
.woocommerce-variation-availability .stock{ font-size:0.8rem; color: var(--ink-soft); }

/* ---------- CEP widget (3rd-party plugin) — brand-sized override.
   The plugin's own CSS hardcodes size (height/font-size/width/padding) with
   !important on single-class selectors; colors come through fine via the
   inline styles we configure in inc/shipping-calc.php, but size needs an
   !important override of equal-or-higher specificity to reliably win
   regardless of stylesheet load order.
   The overlap bug: the plugin sets its OWN width on the <input> itself
   (220px) independent of its wrapper — we were only constraining the
   wrapper's max-width (160px), so the input rendered wider than the box
   that was supposed to contain it and visually ran into the button next to
   it. Every width has to be pinned explicitly, not just the wrapper's. The
   delivery-truck icon the plugin absolutely-positions inside the input is
   dropped entirely — it's redundant next to a field labelled "Insira seu
   CEP" and was part of what made the input read as broken. */
.pdp-info .woo-better-parent-container{ max-width: 260px; margin: 0; }
.pdp-info .woo-better-toggle-postcode-wrapper{ gap: 0.5rem; }
.pdp-info .woo-better-icon-current-style{ display:none !important; }
.pdp-info .woo-better-input-wrapper-current-style{ height: 2.2rem !important; width: 130px !important; max-width: 130px !important; }
.pdp-info .woo-better-input-current-style{
  height: 2.2rem !important; width: 130px !important; max-width: 130px !important; font-size: 0.76rem !important; padding: 0 0.7rem !important;
  font-family: var(--font-sans) !important;
}
.pdp-info .woo-better-button-current-style{
  height: 2.2rem !important; width: auto !important; padding: 0 0.9rem !important;
  font-size: 0.62rem !important; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  font-family: var(--font-sans) !important;
}

/* ---------- add to cart row ---------- */
.pdp-add-row{ display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; margin-top:0.5rem; }
form.cart{ display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; }
.quantity{ display:inline-flex; }
.quantity .qty{
  width: 3.2rem; text-align:center; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface);
  color:var(--ink); padding: 0.6rem 0.4rem; font-size:0.85rem;
}
/* WooCommerce core's own .button.alt selector includes a bare `button` element
   type (button.button.alt), which out-specifies a 3-class selector even when
   ours loads later — scoping to .pdp-add-row adds the extra class needed to
   reliably win, instead of reaching for !important. */
.pdp-add-row button.single_add_to_cart_button,
.pdp-add-row button.single_add_to_cart_button.button.alt{
  font-size: 0.66rem; font-weight:600; font-variation-settings:'wght' 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color:#F3EBDF; border:none; border-radius: 999px; padding: 0.68rem 1.4rem; cursor:pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.pdp-add-row button.single_add_to_cart_button:hover,
.pdp-add-row button.single_add_to_cart_button.button.alt:hover{ background:#2A241B; color:#F3EBDF; transform: translateY(-1px); }
.pdp-add-row button.single_add_to_cart_button.disabled,
.pdp-add-row button.single_add_to_cart_button.button.alt.disabled,
.pdp-add-row button.single_add_to_cart_button:disabled,
.pdp-add-row button.single_add_to_cart_button.button.alt:disabled{ background: var(--ink-mute); color:#F3EBDF; cursor:not-allowed; transform:none; }

/* Brief tactile confirmation on a successful add — brand stays monochrome
   (no green "success" color swap), just a small pulse + the label itself
   swapping to a checkmark for a moment (see product.js). */
@keyframes pdpAddedPulse{ 0%{ transform:scale(1); } 40%{ transform:scale(0.94); } 100%{ transform:scale(1); } }
.pdp-add-row button.single_add_to_cart_button.is-added{ animation: pdpAddedPulse .4s ease; }

/* ---------- comprar agora (buy now) ---------- */
.pdp-add-row .btn-buy-now{
  font-size: 0.66rem; font-weight:600; font-variation-settings:'wght' 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.68rem 1.4rem; cursor:pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.pdp-add-row .btn-buy-now:hover{ border-color: var(--ink); background: var(--ink); color:#F3EBDF; transform: translateY(-1px); }
.pdp-add-row .btn-buy-now.disabled,
.pdp-add-row .btn-buy-now:disabled{ color: var(--ink-mute); border-color: var(--line); cursor:not-allowed; transform:none; background:transparent; }

/* Two CTAs + qty + wishlist side by side no longer fit a phone width —
   stack the row and let both buttons go full-width so they stay easy to tap. */
@media (max-width: 640px){
  .pdp-add-row{ flex-direction:column; align-items:stretch; }
  form.cart{ flex-direction:column; align-items:stretch; }
  .quantity{ align-self:flex-start; }
  .pdp-add-row button.single_add_to_cart_button,
  .pdp-add-row button.single_add_to_cart_button.button.alt,
  .pdp-add-row .btn-buy-now{ width:100%; text-align:center; }
  .pdp-add-row .pdp-wish{ align-self:flex-start; }
}

/* ---------- trust icons ---------- */
.pdp-benefits{ display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:0.2rem; }
.pdp-benefits .benefit{ display:flex; align-items:center; gap:0.35rem; font-size:0.74rem; color:var(--ink-soft); }

/* ---------- description/care/shipping — real accordion, not tabs.
   The tab nav (ul.tabs) is hidden entirely; product.js turns each
   .woocommerce-Tabs-panel into a collapsible item using its tab's own
   label as the accordion header, so no content is duplicated. ---------- */
.pdp-accordion{ margin-top: 0.5rem; }
.woocommerce-tabs ul.tabs{ display:none; }
/* !important because WooCommerce's own tab-switching script keeps setting
   inline style="display:none" on every panel but the "active" one — it's
   built for a classic tab strip (one panel visible at a time), and product.js
   repurposes these panels into an always-present accordion instead. That
   inline style gets re-applied later than any JS timing fix we tried can
   reliably beat (looks tied to the window load event, not DOMContentLoaded),
   so only a stylesheet !important reliably outranks it regardless of when
   WooCommerce's script runs. Visibility of each panel's CONTENT is still
   fully controlled by our own .accordion-body max-height, not this. */
.woocommerce-tabs .woocommerce-Tabs-panel{
  display: block !important;
  border-top: 1px solid var(--line); padding: 0; color: var(--ink-soft); font-size:0.88rem;
  font-weight:400; font-variation-settings:'wght' 400;
}
.woocommerce-tabs .woocommerce-Tabs-panel:last-child{ border-bottom: 1px solid var(--line); }
.accordion-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none;
  cursor:pointer; padding: 0.9rem 0; font-size:0.8rem; font-weight:600; font-variation-settings:'wght' 600;
  color:var(--ink); text-align:left;
}
.accordion-toggle .accordion-icon{ transition: transform .2s ease; flex-shrink:0; }
.accordion-toggle.is-open .accordion-icon{ transform: rotate(45deg); }
.woocommerce-Tabs-panel .accordion-body{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.woocommerce-Tabs-panel .accordion-body-inner{ padding-bottom: 1.1rem; max-width:65ch; }
.woocommerce-Tabs-panel h2{ font-size:0.95rem; font-weight:400; letter-spacing:0.03em; margin-bottom:0.5rem; }

/* ---------- reviews (now just another accordion item, not a standalone
   section) — the accordion toggle already reads "Avaliações", so WooCommerce's
   own inner heading would just repeat it; hide it to avoid the duplicate title. ---------- */
.woocommerce-Tabs-panel #reviews .woocommerce-Reviews-title{ display:none; }
#reviews .commentlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.2rem; }
#reviews .comment_container{ border-bottom:1px solid var(--line); padding-bottom:1.2rem; }
#reviews .comment-text p.meta{ font-size:0.75rem; color:var(--ink-mute); margin-bottom:0.4rem; }
#reviews .description p{ color: var(--ink-soft); font-size:0.9rem; }
#review_form_wrapper{ margin-top:2rem; max-width:52ch; }
#respond .comment-form-rating select, #respond input[type="text"], #respond input[type="email"], #respond textarea{
  border:1px solid var(--line-strong); border-radius:8px; padding:0.6rem 0.8rem; background:var(--surface); width:100%; margin-top:0.3rem;
}
#respond .form-submit input{
  font-size: var(--fs-label); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; background: var(--ink);
  color:#F3EBDF; border:none; border-radius:999px; padding:0.8rem 1.8rem; cursor:pointer; margin-top:0.8rem;
}

/* Full-bleed strip, same treatment as .benefits/.newsletter elsewhere on the
   site — a rounded, inset "card" floating within the page margins was the
   actual cause of it reading as an unrelated white block; a flush strip with
   just a top border matches every other background-shift section already
   used sitewide. */
/* Same --bg as the rest of the PDP now, not --surface — the color shift
   itself (even as a flush, borderless strip) kept reading as a hard cut to
   the eye. A thin top border is enough of a break between "the product"
   and "you might also like" without introducing a second background tone
   for the page to visually reconcile. */
.related-section{
  max-width:none; margin:0; background: var(--bg);
  border-top: 1px solid var(--line); border-radius:0;
  padding: clamp(1.8rem, 4.5vw, 3rem) var(--edge);
}
.related-section .section-head,
.related-section .carousel-row{ max-width:1440px; margin-left:auto; margin-right:auto; }
.related-section .section-head{ margin-bottom: 1.6rem; }
/* Smaller cards than the Home carousels — this is a "you might also like"
   afterthought below the PDP, not a merchandising moment, so it shouldn't
   compete with the product itself. Scoped to .related-section so Home's
   carousels (sharing the same .simple-grid markup) are untouched. */
.related-section .simple-grid > *{ flex-basis: clamp(160px, 15vw, 200px); }

/* ---------- "vai bem com" corner popup — fires on a successful add-to-cart
   (see product.js), independent from the "Combine com" section below the
   fold. Sits opposite the cart drawer (which slides in from the right) and
   high enough off the bottom edge to clear the sticky add-to-cart bar if
   that's already showing, so the two never stack on top of each other. ---------- */
.pdp-suggest-popup{
  position:fixed; left:1.2rem; bottom:5.4rem; z-index:90; width: min(300px, calc(100vw - 2.4rem));
  background: var(--bg); border:1px solid var(--line-strong); border-radius:14px;
  box-shadow: 0 16px 40px -12px rgba(23,20,15,0.35); padding: 1rem 1.1rem 1.1rem;
  transform: translateY(0.8rem); opacity:0; pointer-events:none; transition: transform .3s ease, opacity .3s ease;
}
.pdp-suggest-popup.is-visible{ transform:none; opacity:1; pointer-events:auto; }
.pdp-suggest-close{
  position:absolute; top:0.4rem; right:0.5rem; background:none; border:none; cursor:pointer;
  font-size:1.3rem; line-height:1; color:var(--ink-mute); padding:0.3rem;
}
.pdp-suggest-close:hover{ color:var(--ink); }
.pdp-suggest-title{ font-size:0.66rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:0.7rem; }
.pdp-suggest-items{ display:flex; flex-direction:column; gap:0.7rem; }
.pdp-suggest-item{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--ink); }
.pdp-suggest-item img{ width:2.6rem; height:3.25rem; object-fit:cover; border-radius:6px; flex-shrink:0; }
.pdp-suggest-name{ display:block; font-family: var(--font-display); font-size:0.74rem; font-weight:400; text-transform:uppercase; letter-spacing:0.04em; }
.pdp-suggest-price{ display:block; font-size:0.74rem; color:var(--ink-mute); margin-top:0.1rem; }
@media (max-width:480px){ .pdp-suggest-popup{ left:0.8rem; right:0.8rem; bottom:5.6rem; width:auto; } }

/* ---------- sticky add-to-cart bar (shows once the real one scrolls out of view) ---------- */
.pdp-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:88;
  display:flex; align-items:center; gap:0.9rem; background:var(--bg); border-top:1px solid var(--line);
  padding: 0.7rem var(--edge); box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  transform: translateY(100%); transition: transform .25s ease;
}
.pdp-sticky-bar.is-visible{ transform: translateY(0); }
.pdp-sticky-bar img{ width:2.8rem; height:3.5rem; object-fit:cover; border-radius:6px; flex-shrink:0; }
.pdp-sticky-info{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pdp-sticky-name{ font-size:0.85rem; font-weight:600; font-variation-settings:'wght' 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdp-sticky-price{ font-size:0.8rem; color:var(--ink-mute); }
.pdp-sticky-bar .btn{ flex-shrink:0; padding:0.6rem 1.4rem; font-size:0.72rem; cursor:pointer; }
@media (max-width:480px){ .pdp-sticky-name{ display:none; } }