/* CA'DORE child theme -- WooCommerce-specific CSS ("bridge" layer).
   Product-loop (Shop + classic archive), WC-Blocks product grid (Home),
   single-product, checkout, and Popout Cart visual refinements.

   NOTE on scope: the live Cart page (/cesta/) now runs on the
   WooCommerce Cart *block* (wp:woocommerce/cart), not the classic
   [woocommerce_cart] shortcode template. The CSS that used to target
   the classic cart markup (.cart_totals, table.shop_table,
   .wc-proceed-to-checkout, .kadence-woo-cart-form-wrap, etc. -- both
   here and in the Kadence Additional CSS field) matched nothing and
   has been removed as dead code. The Cart block currently has NO
   CA'DORE editorial styling and renders with Kadence/WooCommerce
   defaults -- there is no approved mockup for it in Drive, so new
   styling hasn't been improvised here. Flagged as a follow-up needing
   a design decision. Checkout (/checkout/) is still the classic
   shortcode template and keeps its styling below. */

/* ===================================================================
   SHOP GRID / PRODUCT CARDS (classic loop -- Shop archive, used on /loja/)
   =================================================================== */
.woocommerce ul.products.content-wrap.product-archive {
  gap: 2.5rem 1.75rem;
}

.woocommerce ul.products li.product,
.woocommerce ul.products li.product.entry {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-image-link {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: #F2F0DA;
}

.woocommerce ul.products li.product .woocommerce-loop-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-image-link img {
  transform: scale(1.045);
}

.woocommerce ul.products li.product .product-details {
  padding-top: 0.9rem;
  background: transparent;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "BROLIMO", serif;
  text-transform: lowercase;
  font-size: 1.25rem;
  color: #535443;
  margin: 0 0 0.35rem;
}

.woocommerce ul.products li.product .price {
  font-family: "Creato Display", sans-serif;
  font-size: 0.9rem;
  color: #141410;
  opacity: 0.85;
}

.woocommerce ul.products li.product .star-rating,
.woocommerce .star-rating {
  display: none !important;
}

.woocommerce ul.products li.product .product-action-wrap {
  margin-top: 0.75rem;
}

.woocommerce ul.products li.product .button.add_to_cart_button {
  /* This anchor has no explicit "display" set anywhere upstream (WooCommerce's
     own stylesheet doesn't set one either), so it renders as the browser
     default "inline". An inline box's vertical padding is painted but is
     NOT counted when the surrounding block (.product-action-wrap) sizes
     itself -- so product-action-wrap collapsed to roughly the line-height
     alone (~31px) while the button's actual painted box (padding included)
     needed ~34px, and the card's own overflow:hidden then clipped that
     extra couple of px off the button, cutting into "Ver opções" in
     Related Products (Loja has the identical defect, just more slack
     above it so it wasn't as visible). inline-flex makes the button a
     proper box for layout purposes so its full padded height is counted. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(83, 84, 67, 0.4);
  color: #535443;
  border-radius: 0;
  font-family: var(--font-uppercase);
  font-size: 0.68rem;
  letter-spacing: var(--ls-uppercase);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover {
  background: #535443;
  color: #fff;
}

/* Loja intro/filter section rhythm */
.woocommerce-products-header,
.woocommerce .products.content-wrap.product-archive {
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ===================================================================
   PRODUCT CARDS -- WooCommerce Blocks version (WC "Product Collection"
   block, used for Home "Em destaque"). Same canonical CA'DORE
   ProductCard as the classic loop above: 1:1 image, Brolimo lowercase
   title at 1.25rem, same price treatment -- kept as one visual card
   across Home and Loja rather than two diverging implementations.
   =================================================================== */
ul.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(1.25rem, 2.5vw, 2.5rem) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-items: stretch !important;
}

ul.wc-block-product-template > li.wc-block-product,
.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-collection .wc-block-product {
  display: flex !important;
  flex-direction: column !important;
  gap: .9rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

.wc-block-components-product-image,
ul.wc-block-product-template .wc-block-components-product-image {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 2px !important;
  background: #F2F0DA !important;
}
.wc-block-components-product-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.wp-block-post-title a,
.wc-block-components-product-title,
ul.wc-block-product-template .wp-block-post-title {
  font-family: "BROLIMO", serif !important;
  text-transform: lowercase;
  color: #535443 !important;
  font-size: 1.25rem !important;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.wc-block-components-product-price,
ul.wc-block-product-template .wc-block-components-product-price {
  font-family: "Creato Display", sans-serif;
  font-size: 0.9rem;
  color: #141410;
  opacity: 0.85;
  text-align: left !important;
  justify-content: flex-start !important;
}

.wc-block-components-product-button .wp-block-button__link {
  background: transparent !important;
  border: 1px solid rgba(83, 84, 67, 0.4) !important;
  color: #535443 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wc-block-components-product-button .wp-block-button__link:hover {
  background: #535443 !important;
  color: #fff !important;
}

/* Home "Em destaque" hides the add-to-cart button on the card (matches
   the classic Loja loop, which shows it only via product-action-wrap
   on hover through Kadence's own "action-visible" archive setting). */
ul.wc-block-product-template .wp-block-button {
  display: none !important;
}

/* ===================================================================
   SINGLE PRODUCT
   =================================================================== */
body.single-product div.product {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

body.single-product div.product .woocommerce-product-gallery {
  grid-column: 1;
  /* WooCommerce's own woocommerce.css still applies its legacy float-based
     layout rule ("div.images { float:left; width:48% }") meant for the old
     non-grid single-product template. Our grid layout above never overrode
     that width, so the gallery box (and the whole flexslider inside it)
     renders at ~48% of an already-narrow context instead of filling its
     grid column -- making the product photography look small instead of
     dominant. Neutralising the legacy float/width here lets the gallery
     fill its column; flexslider recalculates its slide-track width against
     this corrected box size at page load, so the native gallery keeps
     working exactly as before, just larger. */
  float: none !important;
  width: 100% !important;
}

body.single-product div.product .summary.entry-summary {
  grid-column: 2;
  float: none;
  width: auto;
  margin: 0;
}

body.single-product div.product .product_title {
  font-family: "BROLIMO", serif !important;
  text-transform: lowercase !important;
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  line-height: 1.05 !important;
  color: #535443 !important;
  margin-bottom: 0.5rem;
}

body.single-product div.product .woocommerce-product-details__short-description {
  /* Same body-copy opacity as the Description tab panel below
     (.entry-content p / #tab-description p) -- was 0.75, a slightly
     different value than the rest of the page's descriptive text. */
  color: rgba(20, 20, 16, 0.85);
  margin-bottom: 1.25rem;
}

body.single-product div.product .price {
  font-size: 1.35rem;
  color: #141410;
  margin-bottom: 1.25rem;
  display: block;
}

body.single-product div.product table.variations {
  width: 100%;
  margin-bottom: 1.5rem;
}

body.single-product div.product table.variations td.label {
  font-family: var(--font-uppercase);
  font-size: 0.7rem;
  letter-spacing: var(--ls-uppercase-wide);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  color: rgba(20, 20, 16, 0.55);
  padding-bottom: 0.5rem;
}

body.single-product div.product table.variations select {
  width: 100%;
  border: none;
  border-bottom: 1px solid #DBD9C2;
  border-radius: 0;
  background: transparent;
  padding: 0.65rem 0;
  font-size: 1rem;
}

body.single-product div.product .single_add_to_cart_button {
  background: #141410 !important;
  border: none !important;
  color: #F2F0DA !important;
  border-radius: 0 !important;
  padding: 1rem 2.5rem !important;
  font-family: var(--font-uppercase) !important;
  font-size: 0.72rem !important;
  letter-spacing: var(--ls-uppercase) !important;
  text-transform: uppercase !important;
  width: 100%;
  /* Kadence's own woocommerce.css sets height:40px + line-height:40px on this
     button; combined with box-sizing:border-box, that fixed height can't fit
     our 1rem/2.5rem padding plus the line-height, so the label overflows and
     appears clipped. Override both so the button grows to fit its content. */
  height: auto !important;
  line-height: normal !important;
}

body.single-product div.product .single_add_to_cart_button:hover {
  background: #535443 !important;
}

body.single-product div.product .quantity input.qty {
  border: 1px solid #DBD9C2;
  border-radius: 0;
  background: transparent;
  height: 100%;
  text-align: center;
}

body.single-product div.product .woocommerce-tabs,
body.single-product div.product .related.products {
  grid-column: 1 / -1;
  margin-top: 3rem;
}

/* ===================================================================
   SINGLE PRODUCT -- typography/colour mapping to canonical tokens.
   Kadence's own woocommerce.min.css hardcodes its native global-palette
   CSS vars on these three elements (tab links: --global-palette5 #5c5c52
   with font-weight:bold; active tab: --global-palette4 #2a2a24;
   product_meta spans: --global-palette6 #8a8a7e) -- three different
   greys, none of them the rgba(20,20,16,X) scale the rest of the site
   uses for muted/secondary text. Mapped to the existing tokens below;
   Kadence's own layout/background/border-bottom for the active tab
   indicator is left untouched, only colour + font are corrected. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: rgba(20, 20, 16, 0.55);
  font-family: var(--font-uppercase);
  font-weight: 400;
  letter-spacing: var(--ls-uppercase-tight);
  text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #141410;
}
.woocommerce div.product .product_meta > span {
  color: rgba(20, 20, 16, 0.55);
  font-family: "Creato Display", sans-serif;
  font-weight: 400;
}
.woocommerce div.product .product_meta > span a {
  color: #535443;
}

@media (max-width: 900px) {
  body.single-product div.product {
    grid-template-columns: 1fr;
  }
  body.single-product div.product .woocommerce-product-gallery,
  body.single-product div.product .summary.entry-summary {
    grid-column: 1;
  }
}

/* ===================================================================
   RELATED PRODUCTS -- lightweight scroll-snap carousel.
   WooCommerce's own related-products query and markup (ul.products
   li.product, the exact same classic-loop ProductCard used on /loja/)
   are completely untouched -- this only changes the *container* from
   Kadence's native CSS grid (grid-cols/grid-lg-col-4 etc.) to a
   horizontal scroll track, and adds two nav buttons (built by cadore.js,
   desktop only) that scroll it by one card. No cards are rebuilt and
   nothing is hardcoded: the number/order of related products is still
   whatever WooCommerce's query returns.
   =================================================================== */
.related.products {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
}
.related.products h2 {
  grid-column: 1;
  grid-row: 1;
}
.related.products ul.products {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 1.75rem;
  padding-bottom: 0.25rem;
}
.related.products ul.products::-webkit-scrollbar {
  display: none;
}
.related.products ul.products li.product {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: calc((100% - 3 * 1.75rem) / 4);
}

@media (max-width: 780px) {
  .related.products ul.products {
    gap: 1rem;
  }
  .related.products ul.products li.product {
    width: 82%;
  }
}

/* Nav buttons: injected by cadore.js as a sibling of the <h2>, desktop
   only -- mobile relies on native touch swipe, per the approved spec. */
.cadore-related-nav {
  display: none;
}
@media (min-width: 781px) {
  .cadore-related-nav {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    gap: 0.5rem;
  }
}
.cadore-related-nav button {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(83, 84, 67, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #535443;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.cadore-related-nav button:hover:not(:disabled) {
  background: #535443;
  color: #fff;
  border-color: #535443;
}
.cadore-related-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ===================================================================
   SINGLE PRODUCT -- variation pill UI (progressive enhancement over
   the real <select> elements via cadore.js; select stays functional
   for WooCommerce's own variation-matching script, just visually
   swapped for pill buttons matching the approved design).
   =================================================================== */
body.single-product div.product table.variations .cadore-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;
}

.cadore-variation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cadore-variation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.6em 1.1em;
  background: transparent;
  border: 1px solid rgba(83, 84, 67, 0.35);
  border-radius: 2px;
  font-family: var(--font-uppercase);
  font-size: 0.78rem;
  letter-spacing: var(--ls-uppercase-tight);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  color: #535443;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Kadence's own global button styles (theme.json colour palette, output as
   an inline <style> block) target any button/.wp-element-button element
   with a dark background on :hover/:focus/:active. This pill is a real
   <button>, so it inherits that rule; our own hover/active rules only ever
   overrode border-color/color, never background, so Kadence's dark hover
   fill always won for that one property. That's what made a hovered pill
   -- and, worse, a just-clicked pill that keeps :focus after the click --
   render as a solid black box with unreadable text. Explicitly resetting
   background on every one of these states closes that gap. */
.cadore-variation-pill:hover,
.cadore-variation-pill:focus,
.cadore-variation-pill.is-active {
  background: transparent;
  border-color: #141410;
  color: #141410;
}

.cadore-variation-pill.is-active {
  font-weight: 600;
}

.cadore-variation-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

body.single-product div.product table.variations tr {
  display: block;
  margin-bottom: 1.25rem;
}

body.single-product div.product table.variations td.value {
  padding: 0;
}

body.single-product div.product .price {
  display: inline-block;
  margin-right: 0.75rem;
}

body.single-product div.product .cadore-price-unit {
  display: inline-block;
  font-family: var(--font-uppercase);
  font-size: 0.7rem;
  letter-spacing: var(--ls-uppercase);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  color: rgba(20, 20, 16, 0.5);
  vertical-align: middle;
}

/* ===================================================================
   POPOUT MINI-CART DRAWER (Kadence header cart, #cart-drawer) -- this
   is the header quick-view drawer, distinct from the /cesta/ Cart
   block page above.
   =================================================================== */
#cart-drawer .woocommerce-mini-cart-item,
#cart-drawer .widget_shopping_cart_content a.remove {
  color: #141410;
}

#cart-drawer .button.checkout,
#cart-drawer .checkout-button {
  background: #141410 !important;
  border-radius: 0 !important;
  color: #F2F0DA !important;
}

/* ===================================================================
   WOOCOMMERCE CHECKOUT (/checkout/) -- still the classic shortcode
   template (confirmed live: #place_order, wc_payment_methods,
   select2-container, woocommerce-checkout-review-order-table all
   present). Editorial styling for fields, select2 country dropdown,
   payment method list, and the place-order button.
   =================================================================== */

.select2-container--default .select2-selection--single {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #DBD9C2 !important;
  border-radius: 0 !important;
  height: auto !important;
  padding: 0.85rem 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  color: #141410 !important;
  line-height: 1.4 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
  border-bottom-color: #535443 !important;
}
.select2-dropdown {
  border-color: #DBD9C2 !important;
  border-radius: 2px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #97A085 !important;
}

/* Payment method list */
ul.wc_payment_methods {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border: 1px solid #DBD9C2;
  border-radius: 2px;
  overflow: hidden;
}
ul.wc_payment_methods li.wc_payment_method {
  background: transparent !important;
  border-bottom: 1px solid #DBD9C2;
  padding: 1rem 1.25rem;
}
ul.wc_payment_methods li.wc_payment_method:last-child {
  border-bottom: none;
}
ul.wc_payment_methods li.wc_payment_method label {
  color: #141410;
  font-size: 0.9375rem;
  background: transparent !important;
}
ul.wc_payment_methods li.wc_payment_method input[type="radio"] {
  accent-color: #535443;
  margin-right: 0.6rem;
}
ul.wc_payment_methods .payment_box {
  background: #F2F0DA !important;
  border-radius: 2px;
  font-size: 0.875rem;
  color: rgba(20, 20, 16, 0.75);
  line-height: 1.7;
}
ul.wc_payment_methods .payment_box::before {
  border-color: transparent transparent #F2F0DA !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
  border-collapse: collapse;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border-color: #DBD9C2 !important;
}
.woocommerce-checkout-review-order-table .product-name,
.woocommerce-checkout-review-order-table .product-total {
  font-size: 0.9375rem;
}

/* Place order button -- match other dark/transactional CTAs */
#place_order {
  background: #141410 !important;
  border: 1px solid #141410 !important;
  color: #F2F0DA !important;
  border-radius: 0 !important;
  padding: 1rem 2rem !important;
  font-size: 0.72rem !important;
  letter-spacing: var(--ls-uppercase) !important;
  line-height: var(--lh-uppercase) !important;
  text-transform: uppercase !important;
  font-family: var(--font-uppercase) !important;
  transition: background 200ms ease, border-color 200ms ease;
}
#place_order:hover {
  background: #535443 !important;
  border-color: #535443 !important;
}

/* WooCommerce notices (success/info/error) -- quieter, on-brand borders */
.woocommerce-message,
.woocommerce-info {
  border-top-color: #97A085 !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: #97A085 !important;
}
.woocommerce-error {
  border-top-color: #b82105 !important;
}