/** Shopify CDN: Minification failed

Line 2178:0 Unexpected "}"
Line 2249:0 Unexpected "}"

**/
/* ==========================================================================
   custom.styles.css
   Description: Global design tokens, resets, and utility classes for Zigma Store
   Author: Leo Liquid / Horizon Builder Squad
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   MENU HIGHLIGHT — "sale" e "kits" links coloridos
   Escopo restrito ao HEADER (exclui footer explicitamente)
   -------------------------------------------------------------------------- */

header a[href*="sale" i]:where([class*="nav"], [class*="menu"], [class*="link"]):not([class*="footer" i] *),
header [class*="nav"]:not([class*="footer" i]) a[href*="sale" i],
header [class*="menu"]:not([class*="footer" i]) a[href*="sale" i] {
  color: #800020 !important;
  font-weight: 700 !important;
}

header a[href*="kits" i]:where([class*="nav"], [class*="menu"], [class*="link"]):not([class*="footer" i] *),
header [class*="nav"]:not([class*="footer" i]) a[href*="kits" i],
header [class*="menu"]:not([class*="footer" i]) a[href*="kits" i] {
  color: #1A1D29 !important;
  font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Primary -- Moody Blues */
  --color-primary:           #7B4A43;
  --color-primary-hover:     #683E38;
  --color-secondary:         #B97868;
  --color-accent:            #C7A66A;

  /* Warm neutrals */
  --color-warm-1:            #B97868;
  --color-warm-2:            #C7A66A;
  --color-warm-3:            #7B4A43;

  /* Text */
  --color-text-primary:      #2A2523;
  --color-text-secondary:    #5F5551;
  --color-text-muted:        #8A7C76;
  --color-text-inverse:      #FFFFFF;

  /* Backgrounds */
  --color-bg:                #FFFFFF;
  --color-bg-alt:            #F5EFE8;
  --color-bg-dark:           #2A2523;
  --color-bg-warm:           #F4E8E4;

  /* Borders */
  --color-border:            #E9DFDA;
  --color-border-strong:     #DDD1CA;

  /* States */
  --color-error:             #B54848;
  --color-error-bg:          #FFF1F1;
  --color-success:           #477A5A;
  --color-success-bg:        #EEF7F1;
  --color-warning:           #D97706;

  /* Badges & promotion */
  --color-sale:              #7B4A43;
  --color-cashback:          #477A5A;
  
--color-frete-progress:    #B97868;

  /* ===== Paleta semântica Julia Campos (guia) ===== */
  --jc-color-primary: #7B4A43;
  --jc-color-primary-hover: #683E38;
  --jc-color-primary-active: #57332E;
  --jc-color-secondary: #B97868;
  --jc-color-secondary-hover: #A66759;
  --jc-color-accent: #C7A66A;
  --jc-color-background: #FFFFFF;
  --jc-color-background-soft: #F5EFE8;
  --jc-color-background-product: #FBF8F5;
  --jc-color-background-rose: #F4E8E4;
  --jc-color-text: #2A2523;
  --jc-color-text-secondary: #5F5551;
  --jc-color-text-muted: #8A7C76;
  --jc-color-text-disabled: #AFA29C;
  --jc-color-border: #DDD1CA;
  --jc-color-border-soft: #E9DFDA;
  --jc-color-disabled-background: #D8CBC5;
  --jc-color-success: #477A5A;
  --jc-color-success-background: #EEF7F1;
  --jc-color-error: #B54848;
  --jc-color-error-background: #FFF1F1;
  --jc-color-white: #FFFFFF;

  /* Typography — Cormorant Garamond (titulos serifada) + Poppins (textos sans) */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body:    'Poppins', sans-serif;

  /* Type scale -- Major Third (1.250) */
  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    2rem;
  --text-4xl:    2.5rem;
  --text-5xl:    3.5rem;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Line-height */
  --leading-tight:  1.2;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  /* Letter-spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.08em;
  --tracking-logo:      0.15em;

  /* Spacing -- 4px base */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Section padding */
  --section-py-mobile:  var(--space-12);
  --section-py-desktop: var(--space-20);

  /* Container */
  --container-max:        1280px;
  --container-padding:    var(--space-4);
  --container-padding-lg: var(--space-8);

  /* Grid */
  --grid-gap:    var(--space-4);
  --grid-gap-lg: var(--space-6);

  /* Transitions */
  --transition-fast:    150ms;
  --transition-base:    250ms;
  --transition-slow:    400ms;
  --transition-reveal:  600ms;

  /* Easing */
  --ease-out-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:      cubic-bezier(0.42, 0, 0.58, 1);
  --ease-reveal:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. MINIMAL RESET (scoped to custom sections)
   -------------------------------------------------------------------------- */

[class*="custom-"] *,
[class*="custom-"] *::before,
[class*="custom-"] *::after {
  box-sizing: border-box;
}

[class*="custom-"] img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   3. CONTAINER QUERY BASE
   -------------------------------------------------------------------------- */

.custom-section {
  container-type: inline-size;
  container-name: section;
}

/* --------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */

.custom-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

@container section (min-width: 1024px) {
  .custom-container {
    padding-inline: var(--container-padding-lg);
  }
}

.custom-section-padding {
  padding-block: var(--section-py-mobile);
}

@container section (min-width: 768px) {
  .custom-section-padding {
    padding-block: var(--section-py-desktop);
  }
}

/* When a section declares custom spacing variables, its own CSS handles
   all padding/margin — disable the default utility classes to avoid
   double-spacing. The section container still keeps max-width + centering. */
.custom-section[style*="--section-pt"] .custom-section-padding {
  padding-block: 0;
}
.custom-section[style*="--section-px"] .custom-container {
  padding-inline: 0;
}

/* Grid system */
.custom-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

@container section (min-width: 768px) {
  .custom-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .custom-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .custom-grid { gap: var(--grid-gap-lg); }
}

@container section (min-width: 1024px) {
  .custom-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */

.custom-heading {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.custom-heading--display {
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.custom-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

@container section (min-width: 768px) {
  .custom-section-title {
    font-size: var(--text-3xl);
  }
}

.custom-section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--leading-base);
  margin: 0;
}

.custom-body-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-base);
  color: var(--color-text-primary);
}

.custom-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   6. BUTTON COMPONENTS
   -------------------------------------------------------------------------- */

.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast) ease,
              color var(--transition-fast) ease;
}

.custom-btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.custom-btn-primary:hover   { background: var(--color-primary-hover); }
.custom-btn-primary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.custom-btn-primary:active  { transform: scale(0.98); }
.custom-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.custom-btn-secondary {
  background: var(--color-warm-1);
  color: var(--color-primary);
}
.custom-btn-secondary:hover { background: var(--color-warm-3); color: var(--color-text-inverse); }
.custom-btn-secondary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.custom-btn-ghost {
  background: transparent;
  color: var(--color-text-inverse);
  border: 1px solid var(--color-text-inverse);
}
.custom-btn-ghost:hover { background: var(--color-text-inverse); color: var(--color-primary); }

/* --------------------------------------------------------------------------
   7. FORM COMPONENTS
   -------------------------------------------------------------------------- */

.custom-input {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast) ease;
}
.custom-input::placeholder { color: var(--color-text-muted); }
.custom-input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgba(26,29,41,0.08); }
.custom-input--error { border-color: var(--color-error); }

/* --------------------------------------------------------------------------
   8. PRODUCT CARD — v2 (matches Ankor Design reference)
   All text centered. Installment + color count below price.
   -------------------------------------------------------------------------- */

.custom-pcard {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-align: center;
  min-width: 0;
  max-width: 100%;
}

.custom-pcard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1 !important;
  width: 100%;
}

.custom-pcard__img,
.custom-pcard__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.custom-pcard__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.custom-pcard:hover .custom-pcard__img--primary {
  transform: scale(1.03);
}

.custom-pcard:hover .custom-pcard__img--hover {
  opacity: 1;
  transform: scale(1.03);
}

/* Badges */
.custom-pcard__badge {
  position: absolute;
  top: var(--space-3, 12px);
  left: var(--space-3, 12px);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  z-index: 2;
  line-height: 1.4;
}

.custom-pcard__badge--soldout {
  background: #CC0000;
  color: #FFFFFF;
}

/* Sold-out card: desaturate image + subtle opacity */
.custom-pcard--soldout .custom-pcard__img--primary {
  filter: grayscale(100%);
  opacity: 0.6;
}

.custom-pcard--soldout .custom-pcard__img--hover {
  filter: grayscale(100%);
}

.custom-pcard--soldout .custom-pcard__info {
  opacity: 0.5;
}

.custom-pcard--soldout:hover .custom-pcard__img--primary {
  filter: grayscale(0%);
  opacity: 0;
}

.custom-pcard--soldout:hover .custom-pcard__img--hover {
  filter: grayscale(0%);
  opacity: 1;
}

.custom-pcard__badge--sale {
  background: var(--color-sale, #DC2626);
  color: #FFFFFF;
}

/* Info block — all centered */
.custom-pcard__info {
  padding: var(--space-4, 16px) var(--space-2, 8px) var(--space-2, 8px);
  text-align: center;
}

.custom-pcard__title {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.3vw, 1.0625rem);
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-primary, #1A1D29);
  margin: 0 0 var(--space-2, 8px) 0;
  line-height: var(--leading-tight, 1.25);
}

.custom-pcard__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 var(--space-2, 8px) 0;
}

.custom-pcard__price--current {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: var(--weight-bold, 700);
  color: var(--color-text-primary, #1A1D29);
  letter-spacing: -0.01em;
}

.custom-pcard__price--onsale {
  color: var(--color-sale, #DC2626);
}

.custom-pcard__price--compare {
  text-decoration: line-through;
  color: var(--color-text-muted, #8E8F96);
  font-weight: var(--weight-regular, 400);
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
}

.custom-pcard__installment {
  font-size: clamp(0.7rem, 0.9vw, 0.8125rem);
  color: var(--color-text-secondary, #5A5C66);
  margin: 0 0 var(--space-1, 4px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

.custom-pcard__installment i {
  font-size: 0.85em;
  opacity: 0.7;
}

.custom-pcard__pix {
  font-size: clamp(0.7rem, 0.9vw, 0.8125rem);
  color: #2a9d6e;
  margin: 0 0 var(--space-1, 4px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

.custom-pcard__pix i {
  font-size: 0.85em;
}

.custom-pcard__colors {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #8E8F96);
  margin: 0;
}

/* --------------------------------------------------------------------------
   8a-2. COLLECTION PAGE — grid fix + compact card overrides
   Fixes: right-column overflow, text clipping
   -------------------------------------------------------------------------- */

/* Grid containment — add inline padding so cards don't touch viewport edges */
@media screen and (max-width: 749px) {
  .template-collection .product-grid {
    padding-inline: var(--page-margin, 16px);
    box-sizing: border-box;
    max-width: 100%;
  }
}

.template-collection .product-grid__item {
  min-width: 0;
  overflow: hidden;
}

/* Card must fill the grid cell, never exceed it */
.template-collection .custom-pcard {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cards com mesma altura: o <li> do grid estica na linha e o card preenche 100%.
   O height:auto cancela o "fit-content" do layout organic, que impedia esticar. */
.template-collection .product-grid__item {
  display: flex;
  flex-direction: column;
  height: auto !important;
}
.template-collection .product-grid__item > .custom-pcard {
  height: 100%;
  flex: 1 1 auto;
}

.template-collection .custom-pcard__media {
  width: 100%;
  flex-shrink: 0;
}

/* Compact info — allow text to wrap/truncate inside grid cells */
.template-collection .custom-pcard__info {
  padding: 8px 4px 6px;
  overflow: hidden;
}

.template-collection .custom-pcard__title {
  font-size: 0.78rem;
  margin-bottom: 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.template-collection .custom-pcard__price {
  gap: 4px;
  margin-bottom: 3px;
  flex-wrap: wrap;
  justify-content: center;
}

.template-collection .custom-pcard__price--current {
  font-size: 0.9rem;
}

.template-collection .custom-pcard__price--compare {
  font-size: 0.72rem;
}

/* Override white-space: nowrap — must wrap inside narrow collection cells */
.template-collection .custom-pcard__installment,
.template-collection .custom-pcard__pix {
  font-size: 0.62rem;
  gap: 2px;
  margin-bottom: 2px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-collection .custom-pcard__colors {
  font-size: 0.62rem;
}

/* --------------------------------------------------------------------------
   8b. PRODUCT GRID — carousel on overflow, centered
   Used by collection-tabs and collection-featured
   -------------------------------------------------------------------------- */

.custom-product-scroll {
  display: flex;
  gap: var(--space-4, 16px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: var(--space-2, 8px);
  /* height stays auto — adapts to tallest card */
}

.custom-product-scroll::-webkit-scrollbar {
  display: none;
}

.custom-product-scroll > .custom-pcard {
  flex: 0 0 72%;
  min-width: 0;
}

/* Tablet: 2.5 cards visible */
@container (min-width: 600px) {
  .custom-product-scroll > .custom-pcard {
    flex: 0 0 44%;
  }
}

/* Desktop: horizontal scroll */
@container (min-width: 900px) {
  .custom-product-scroll > .custom-pcard {
    flex: 0 0 calc(33.333% - var(--space-4, 16px));
  }
}

@container (min-width: 1100px) {
  .custom-product-scroll[data-cols="4"] > .custom-pcard {
    flex: 0 0 calc(25% - var(--space-4, 16px));
  }
}

.custom-product-scroll[data-scroll-desktop="true"] {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

/* Scroll arrow buttons */
.custom-scroll-wrapper {
  position: relative;
}
.custom-scroll-arrow {
  position: absolute;
  top: 35%;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  color: #1A1D29;
  font-size: 1.25rem;
}
.custom-scroll-arrow:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.custom-scroll-arrow--prev { left: -8px; }
.custom-scroll-arrow--next { right: -8px; }
@container (max-width: 599px) {
  .custom-scroll-arrow { display: none; }
}

/* Keep backward compat for old class names */
.custom-product-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   9. SWATCH & SIZE COMPONENTS
   -------------------------------------------------------------------------- */

.custom-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast) ease;
  padding: 0;
}
.custom-swatch:hover    { border-color: var(--color-border-strong); }
.custom-swatch--selected { border-color: var(--color-primary); }
.custom-swatch--disabled { opacity: 0.3; cursor: not-allowed; }

.custom-size-btn {
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast) ease,
              border-color var(--transition-fast) ease,
              color var(--transition-fast) ease;
}
.custom-size-btn:hover { border-color: var(--color-primary); }
.custom-size-btn--selected { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
.custom-size-btn--disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }

/* --------------------------------------------------------------------------
   10. ACCORDION (FAQ) -- grid-template-rows animation
   -------------------------------------------------------------------------- */

.custom-accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.custom-accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.custom-accordion__icon {
  font-size: var(--text-lg);
  transition: transform var(--transition-base) var(--ease-out-smooth);
  flex-shrink: 0;
  margin-left: var(--space-4);
}

.custom-accordion__header[aria-expanded="true"] .custom-accordion__icon {
  transform: rotate(45deg);
}

.custom-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow) var(--ease-out-smooth);
}

.custom-accordion__body > div {
  overflow: hidden;
}

.custom-accordion__header[aria-expanded="true"] + .custom-accordion__body {
  grid-template-rows: 1fr;
}

.custom-accordion__content {
  padding: 0 0 var(--space-4) 0;
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   11. TOAST NOTIFICATION
   -------------------------------------------------------------------------- */

.custom-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 300ms var(--ease-reveal), opacity 300ms ease;
  background: var(--color-success);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.custom-toast--visible {
  transform: translateY(0);
  opacity: 1;
}

.custom-toast--error {
  background: var(--color-error);
}

/* --------------------------------------------------------------------------
   12. UTILITY CLASSES
   -------------------------------------------------------------------------- */

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

.custom-text-center { text-align: center; }
.custom-text-left   { text-align: left; }
.custom-text-right  { text-align: right; }

.custom-flex { display: flex; }
.custom-flex-center { display: flex; align-items: center; justify-content: center; }
.custom-flex-between { display: flex; align-items: center; justify-content: space-between; }
.custom-flex-wrap { flex-wrap: wrap; }
.custom-gap-1 { gap: var(--space-1); }
.custom-gap-2 { gap: var(--space-2); }
.custom-gap-3 { gap: var(--space-3); }
.custom-gap-4 { gap: var(--space-4); }

/* --------------------------------------------------------------------------
   13. SCROLLBAR (carousel helper)
   -------------------------------------------------------------------------- */

.custom-scroll-x {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.custom-scroll-x::-webkit-scrollbar {
  display: none;
}

.custom-scroll-x > * {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   13b. GLOBAL RESPONSIVE FIXES
   -------------------------------------------------------------------------- */

/* Prevent horizontal overflow on all sections */
.custom-section {
  overflow-x: clip;
}

/* Safe area padding for notched devices */
@supports (padding: env(safe-area-inset-left)) {
  .custom-container {
    padding-left: max(var(--container-padding), env(safe-area-inset-left));
    padding-right: max(var(--container-padding), env(safe-area-inset-right));
  }
}

/* Buttons: touch target minimum 44px */
.custom-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Global section titles — responsive sizing */
.custom-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--leading-tight);
}

.custom-section-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0 0;
  line-height: var(--leading-base);
}

/* Product scroll — responsive padding so first/last cards aren't cut */
.custom-product-scroll {
  padding-inline: var(--container-padding, 16px);
}

@container (min-width: 900px) {
  .custom-product-scroll {
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   14. HEADER OVERRIDES (transparent mode for hero)
   -------------------------------------------------------------------------- */

.custom-header--transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background-color var(--transition-base) ease,
              box-shadow var(--transition-base) ease;
}

.custom-header--solid {
  background: var(--color-bg-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

/* Header padding — prevent icons from sticking to edges */
@media screen and (min-width: 750px) {
  #header-component .header__columns {
    padding-inline: 24px !important;
  }
}

@media screen and (min-width: 1200px) {
  #header-component .header__columns {
    padding-inline: 40px !important;
  }
}

/* ================================================
   PÁGINA DE PRODUTO — Galeria de mídia
   Limita altura da imagem sem cortar
   ================================================ */
@media screen and (min-width: 750px) {
  .template-product .product-media-container {
    --media-preview-ratio: 4/5 !important;
  }

  .template-product .product-media-container img,
  .template-product .product-media-container video {
    object-fit: contain !important;
    object-position: center top !important;
    background-color: #fff;
  }
}

/* ==========================================================================
   15. CART RECOMMENDATIONS — "Você também pode gostar" (drawer + página /cart)
   Estilo compacto: carrossel horizontal. Os produtos do carrinho seguem em foco.
   ========================================================================== */

.cart-reco { --reco-border: var(--color-border, #E5E2DC); box-sizing: border-box; }
.cart-reco * { box-sizing: border-box; }

.cart-reco__heading {
  font-family: var(--font-body, inherit);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-foreground, #1A1D29); margin: 0 0 10px 0;
}

/* A lista vira carrossel horizontal em todos os contextos */
.cart-reco__list {
  display: flex; flex-direction: row; gap: 12px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.cart-reco__list::-webkit-scrollbar { display: none; }

/* Card compacto: imagem em cima, info embaixo */
.cart-reco__card { flex: 0 0 128px; display: flex; flex-direction: column; gap: 6px; }
.cart-reco__media {
  width: 100%; display: block; border-radius: 4px; overflow: hidden;
  background: var(--color-bg-alt, #f5f3ef);
}
.cart-reco__media img {
  width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center top; display: block;
}
.cart-reco__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-reco__title {
  font-size: 0.75rem; line-height: 1.25; font-weight: 500;
  color: var(--color-foreground, #1A1D29); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cart-reco__title:hover { text-decoration: underline; }
.cart-reco__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 0.75rem; }
.cart-reco__price-current,
.cart-reco__price-sale { font-weight: 700; color: var(--color-foreground, #1A1D29); }
.cart-reco__price-sale { color: var(--color-sale, #DC2626); }
.cart-reco__price-compare { color: var(--color-text-muted, #8E8F96); font-size: 0.6875rem; }

/* Mini-seletor de tamanho */
.cart-reco__variants { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 2px; }
.cart-reco__variants[hidden] { display: none; }
.cart-reco__variant-btn {
  min-height: 28px; padding: 3px 8px; border: 1px solid var(--reco-border);
  background: var(--color-background, #fff); color: var(--color-foreground, #1A1D29);
  font-size: 0.7rem; font-weight: 500; cursor: pointer; border-radius: 4px; line-height: 1;
}
.cart-reco__variant-btn:hover { border-color: var(--color-foreground, #1A1D29); }
.cart-reco__variant-btn[disabled] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* Botão Adicionar compacto */
.cart-reco__add {
  margin-top: 2px; width: 100%; min-height: 32px; padding: 6px 8px;
  border: 1px solid var(--color-foreground, #1A1D29);
  background: var(--color-background, #fff); color: var(--color-foreground, #1A1D29);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer; border-radius: 40px;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.cart-reco__add:hover:not([disabled]) { background: var(--color-foreground, #1A1D29); color: var(--color-background, #fff); }
.cart-reco__add[disabled] { opacity: .4; cursor: not-allowed; }
.cart-reco__add.is-loading { opacity: .6; pointer-events: none; }

/* A coluna lateral antiga nunca aparece */
/* SIDE: coluna esquerda no drawer — SÓ desktop (igual ao print) */
.cart-reco--side { display: none; }

@media screen and (min-width: 750px) {
  /* Alarga o drawer e cria 2 colunas quando há recomendação */
  .cart-drawer__dialog.cart-drawer--has-reco { width: calc(var(--sidebar-width) + 320px); max-width: 96vw; }
  .cart-drawer--has-reco .cart-drawer__inner {
    display: flex !important;
    flex-direction: row !important;
    height: 100%;
  }
  .cart-drawer--has-reco .cart-drawer__inner > cart-items-component {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  }
  /* A coluna lateral (lista vertical de cards horizontais) */
  .cart-drawer--has-reco .cart-reco--side {
    display: flex; flex-direction: column;
    flex: 0 0 300px; width: 300px; height: 100%;
    overflow-y: auto;
    padding: var(--padding-2xl, 32px) 24px;
    border-right: 1px solid var(--reco-border);
    background: var(--color-background, #fff);
  }
  .cart-reco--side .cart-reco__arrow { display: none !important; }
  .cart-reco--side .cart-reco__list {
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 18px;
  }
  .cart-reco--side .cart-reco__card {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    gap: 12px;
    align-items: flex-start;
  }
  .cart-reco--side .cart-reco__media { flex: 0 0 72px; width: 72px; }
  .cart-reco--side .cart-reco__info { flex: 1 1 auto; min-width: 0; }
  .cart-reco--side .cart-reco__title { font-size: 0.8125rem; -webkit-line-clamp: 2; }
  .cart-reco--side .cart-reco__price { font-size: 0.875rem; }
  /* No desktop a recomendação vai pra coluna lateral; some com o carrossel de baixo */
  .cart-reco--inline { display: none !important; }
}

/* DRAWER: faixa compacta abaixo dos produtos, em TODAS as telas.
   Rola JUNTO com os itens (está dentro de .cart-drawer__items). */
.cart-reco--inline {
  display: block;
  margin-top: 12px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--reco-border);
}
.cart-reco--inline .cart-reco__heading { font-size: 0.75rem; margin-bottom: 8px; }
/* Cards do drawer: imagem e preço maiores, mantendo legível sem competir com o carrinho */
.cart-reco--inline .cart-reco__card { flex: 0 0 132px; gap: 6px; }
.cart-reco--inline .cart-reco__media img { aspect-ratio: 1 / 1; }
.cart-reco--inline .cart-reco__title { font-size: 0.8125rem; -webkit-line-clamp: 2; }
.cart-reco--inline .cart-reco__price { font-size: 0.9375rem; }
.cart-reco--inline .cart-reco__add { min-height: 32px; font-size: 0.6875rem; padding: 6px 8px; }
.cart-reco--inline .cart-reco__variant-btn { min-height: 26px; font-size: 0.6875rem; padding: 3px 8px; }

/* PÁGINA /cart: faixa abaixo dos itens */
.cart-reco--page {
  display: block; grid-column: 1 / -1;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--reco-border);
}
.cart-reco--page .cart-reco__heading { font-size: 0.9375rem; margin-bottom: 16px; }
.cart-reco--page .cart-reco__card { flex-basis: 160px; }
@media screen and (min-width: 750px) {
  .cart-reco--page .cart-reco__card { flex-basis: 190px; }
}

/* ==========================================================================
   16. FREE SHIPPING BAR — barra de progresso de frete grátis
   Renderizada por snippets/free-shipping-bar.liquid (drawer + página /cart)
   ========================================================================== */

.free-ship {
  padding: 14px var(--page-margin, 16px);
  box-sizing: border-box;
}

.free-ship--drawer {
  border-bottom: 1px solid var(--color-border, #E5E2DC);
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.free-ship--page {
  grid-column: 1 / -1;
  padding-inline: 0;
  margin-bottom: 8px;
}

.free-ship__msg {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px 0;
  color: var(--color-foreground, #1A1D29);
}

.free-ship--reached .free-ship__msg {
  font-weight: 700;
}

.free-ship__track {
  width: 100%;
  height: 10px;
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

.free-ship__fill {
  height: 100%;
  min-width: 2px;
  border-radius: 40px;
  background: var(--free-ship-bar, #1A1D29);
  transition: width 0.4s ease;
}

/* --------------------------------------------------------------------------
   CART RECO — setas do carrossel (desktop). No mobile o swipe já funciona.
   -------------------------------------------------------------------------- */
.cart-reco__carousel { position: relative; }

.cart-reco__arrow { display: none; }

@media screen and (min-width: 750px) {
  .cart-reco__arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-background, #fff);
    color: var(--color-foreground, #1A1D29);
    border: 1px solid var(--color-border, #E5E2DC);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .cart-reco__carousel:hover .cart-reco__arrow { opacity: 1; }
  .cart-reco__arrow:hover { background: var(--color-foreground, #1A1D29); color: var(--color-background, #fff); }
  .cart-reco__arrow--prev { left: 0; }
  .cart-reco__arrow--next { right: 0; }
  .cart-reco__arrow svg { display: block; }
}

/* --------------------------------------------------------------------------
   CARRINHO — mostrar o preço só embaixo (esconde o da direita) e aumentar a fonte
   -------------------------------------------------------------------------- */

/* Colapsa a coluna de preço da direita (para não sobrar espaço vazio) */
.cart-items__table-row { --cart-item-price-width: 0px !important; }

/* Esconde o preço do canto direito (o que vinha com "BRL") */
.cart-items__price { display: none !important; }

/* Preço de baixo: um pouco maior e com destaque.
   !important porque o tema tem regra mais específica (.cart-drawer ...). */
.cart-items__unit-price-wrapper,
.cart-items__unit-price-wrapper > div,
.cart-items__unit-price-wrapper span {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
}
.cart-items__unit-price-wrapper .compare-at-price {
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   CARRINHO — mostrar o NOME da opção junto do valor (ex.: "Numeração: P")
   O tema esconde o nome com .visually-hidden; aqui a gente revela.
   -------------------------------------------------------------------------- */
.cart-items__variant dt.visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  font-weight: 600;
}

/* ==========================================================================
   17. PÁGINA DE PRODUTO — galeria mais compacta no MOBILE
   Foto principal em 4/5 (sem cortar) + miniaturas coladas na foto.
   ========================================================================== */
@media screen and (max-width: 749px) {
  /* Foto principal: proporção 4/5, imagem inteira (sem corte), responsiva */
  .template-product .product-media-container {
    --media-preview-ratio: 4/5 !important;
  }
  .template-product .product-media-container img,
  .template-product .product-media-container video {
    object-fit: contain !important;
    object-position: center center !important;
    background-color: #fff;
  }

  /* Cola as miniaturas na foto — remove o espaço grande acima/abaixo delas */
  .template-product .slideshow-controls__thumbnails {
    padding-block: 4px !important;
  }
  .template-product .media-gallery__mobile-controls {
    margin-block-start: 0 !important;
  }
}

/* ==========================================================================
   18. BLOCOS BR (PIX/parcelas e cashback) — maiores e mais legíveis no MOBILE
   ========================================================================== */
@media screen and (max-width: 749px) {
  /* Linha de parcelamento */
  .product-pix-badge { font-size: 1rem !important; gap: 10px !important; }
  .product-pix-badge__installments { font-size: 1rem !important; gap: 8px !important; }

  /* Selo do PIX */
  .product-pix-badge__pix-tag {
    font-size: 0.9375rem !important;
    padding: 10px 16px !important;
    gap: 8px !important;
  }

  /* Selo de cashback */
  .product-cashback__tag {
    font-size: 0.9375rem !important;
    padding: 10px 16px !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   19. FOOTER — tamanho dos textos configurável pelo editor
   Usa as vars --footer-heading-size / --footer-text-size (definidas em custom-footer)
   ========================================================================== */
.custom-footer__heading {
  font-size: var(--footer-heading-size, 0.75rem) !important;
}
.custom-footer__list li,
.custom-footer__list li a,
.custom-footer__link,
.custom-footer__text,
.custom-footer__payments-title,
.custom-footer__policies,
.custom-footer__policies a,
.custom-footer__copyright,
.custom-footer__copyright p {
  font-size: var(--footer-text-size, 0.875rem) !important;
}

/* ==========================================================================
   20. CASHBACK NO CARRINHO — centralizado no resumo (drawer + página)
   ========================================================================== */
.cart-cashback {
  justify-content: center;
  margin: 4px 0 12px;
}
.cart-cashback .product-cashback__tag {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   21. BARRA DE ANÚNCIOS FIXA JUNTO COM O HEADER
   O tema deixa só a .header-section grudada (#header-group vira display:contents).
   Aqui a gente gruda o GRUPO inteiro (barra de anúncios + header) como uma peça só.
   ========================================================================== */
/* Só em páginas SEM cabeçalho transparente (exclui a home, que sobrepõe o hero) */
#header-group:has(#header-component[sticky]):not(:has(#header-component[transparent])) {
  display: block;
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky);
}

/* O header interno não precisa mais grudar sozinho (evita conflito/sobreposição) */
.header-section:has(> #header-component[sticky]):not(:has(> #header-component[transparent])) {
  position: static !important;
  top: auto !important;
}

/* ==========================================================================
   FOOTER — cor dos links e do ícone social configurável pelo editor
   ========================================================================== */
.custom-footer__link,
.custom-footer__link--highlight {
  color: var(--footer-link-color, #ffffff) !important;
}
.custom-footer__social-circle {
  color: var(--footer-social-color, #ffffff) !important;
  border-color: var(--footer-social-color, rgba(255, 255, 255, 0.3)) !important;
}

/* ==========================================================================
   22. COLEÇÃO COM ABAS — cores dos textos do card, editáveis SÓ nesta seção
   Variáveis definidas no editor (custom-collection-tabs). Fallback = cor atual.
   ========================================================================== */
.custom-collection-tabs .custom-pcard__title {
  color: var(--pcard-title-color, var(--color-text-primary, #1A1D29));
}
/* Preço atual (não promo) */
.custom-collection-tabs .custom-pcard__price--current {
  color: var(--pcard-price-color, var(--color-text-primary, #1A1D29));
}
/* Preço promocional (quando em oferta) — mais específico p/ vencer o atual */
.custom-collection-tabs .custom-pcard__price--current.custom-pcard__price--onsale {
  color: var(--pcard-price-color, var(--color-sale, #DC2626));
}
/* Preço normal riscado */
.custom-collection-tabs .custom-pcard__price--compare {
  color: var(--pcard-compare-color, var(--color-text-muted, #8E8F96));
}
/* Parcelamento */
.custom-collection-tabs .custom-pcard__installment {
  color: var(--pcard-installment-color, var(--color-text-secondary, #5A5C66));
}
/* PIX */
.custom-collection-tabs .custom-pcard__pix {
  color: var(--pcard-pix-color, #2a9d6e);
}

/* COLEÇÃO COM ABAS — cor do selo de desconto (-39%), editável só nesta seção */
.custom-collection-tabs .custom-pcard__badge--sale {
  background: var(--pcard-badge-bg, var(--color-sale, #DC2626));
  color: var(--pcard-badge-text, #FFFFFF);
}

/* ==========================================================================
   23. CARDS DE PRODUTO — cores globais via variáveis (recomendações, abas, etc.)
   Controladas em Configurações do tema > "Cores dos Cards de Produto".
   A "Coleção com Abas" pode sobrescrever por seção (mesmas variáveis).
   ========================================================================== */
.custom-pcard__title { color: var(--pcard-title-color, var(--color-text-primary, #1A1D29)); }
.custom-pcard__price--current { color: var(--pcard-price-color, var(--color-text-primary, #1A1D29)); }
.custom-pcard__price--current.custom-pcard__price--onsale { color: var(--pcard-price-color, var(--color-sale, #DC2626)); }
.custom-pcard__price--compare { color: var(--pcard-compare-color, var(--color-text-muted, #8E8F96)); }
.custom-pcard__installment { color: var(--pcard-installment-color, var(--color-text-secondary, #5A5C66)); }
.custom-pcard__pix { color: var(--pcard-pix-color, #2a9d6e); }
.custom-pcard__badge--sale { background: var(--pcard-badge-bg, var(--color-sale, #DC2626)); color: var(--pcard-badge-text, #FFFFFF); }

/* ==========================================================================
   24. MENU DRAWER — visual elegante/feminino (mobile + desktop)
   ========================================================================== */
.menu-drawer__navigation { padding-inline: 6px; }

/* Cada item: respiro + separador fininho */
.menu-drawer__menu-item--mainlist,
.menu-drawer .menu-drawer__menu-item {
  padding-block: 17px !important;
  border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

/* Texto: fino, espaçado, elegante */
.menu-drawer__menu-item-text {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgb(var(--color-foreground-rgb) / 0.9) !important;
}

/* Hover: toque de cor quente + leve deslize */
.menu-drawer .menu-drawer__menu-item:hover .menu-drawer__menu-item-text,
.menu-drawer .menu-drawer__menu-item:focus-visible .menu-drawer__menu-item-text {
  color: var(--color-warm-1, #C4A882) !important;
}
.menu-drawer .menu-drawer__menu-item:hover { padding-left: 6px !important; }

/* Página atual em destaque suave */
.menu-drawer__menu-item[aria-current] .menu-drawer__menu-item-text,
.menu-drawer__menu-item--active .menu-drawer__menu-item-text {
  color: var(--color-warm-1, #C4A882) !important;
}

/* Ícone "+" do submenu mais discreto */
.menu-drawer .icon-plus { opacity: 0.45; }

/* ==========================================================================
   26. PÁGINA DE PRODUTO (desktop) — enquadrar a imagem com o título
   A imagem deixa de esticar até o topo e alinha com o título ao lado.
   ========================================================================== */
@media screen and (min-width: 750px) {
  .template-product .product-information__media {
    align-self: start !important;   /* não estica até o topo */
    margin-block-start: 48px;       /* desce a imagem pra alinhar com o título */
  }
  .template-product .product-media-container,
  .template-product .product-media-container img,
  .template-product .product-media-container video {
    max-height: 620px;              /* limita a altura pra ficar enquadrada */
  }
}

/* ==========================================================================
   27. TÍTULOS ELEGANTES — Cormorant Garamond (serifada) nos títulos de seção e rodapé
   ========================================================================== */
.custom-section-title,
.custom-footer__heading {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* ==========================================================================
   28. MENU DRAWER — estilo "referência" (categorias com foto + submenu com bolinhas)
   ========================================================================== */
/* Foto redonda ao lado dos itens (modo "Imagens de coleção") */
.menu-drawer__link-image,
.menu-drawer .menu-drawer__menu-item img {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: 0 0 46px !important;
  margin-right: 14px;
}

/* Submenu (filhos): bolinha antes do texto, caixa mista mais delicada */
.menu-drawer__menu-item--child {
  position: relative;
  padding-left: 24px !important;
  font-family: var(--font-body--family, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: rgb(var(--color-foreground-rgb) / 0.75) !important;
}
.menu-drawer__menu-item--child::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-warm-1, #C4A882);
}
.menu-drawer__menu-item--child:hover .menu-drawer__menu-item-text,
.menu-drawer__menu-item--child[aria-current] .menu-drawer__menu-item-text {
  color: var(--color-warm-1, #C4A882) !important;
}

/* Divisórias discretas entre os itens do submenu */
.menu-drawer__menu--childlist .menu-drawer__list-item {
  border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.06);
}
.menu-drawer__menu--childlist .menu-drawer__list-item:last-child {
  border-bottom: none;
}

/* Ícone "+" do acordeão mais fino/discreto */
.menu-drawer .icon-plus svg { stroke-width: 1.2; }
.menu-drawer .icon-plus { opacity: 0.5; }

/* Categoria aberta: leve destaque de fundo */
.menu-drawer details[open] > .menu-drawer__menu-item--mainlist {
  background: rgb(var(--color-foreground-rgb) / 0.03);
}

/* MENU DRAWER — submenu em caixa mista + coluna única (mais parecido com a referência) */
.menu-drawer__menu-item--child .menu-drawer__menu-item-text {
  text-transform: none !important;
}
.menu-drawer__menu--childlist,
.menu-drawer__menu--childlist.menu-drawer__menu--grid {
  display: block !important;
}

/* ==========================================================================
   29. MENU DRAWER — rodapé: banner de cupom + WhatsApp + Conta/Favoritos
   ========================================================================== */
.menu-drawer__footer-zg {
  padding: 12px var(--menu-horizontal-gap, 16px) 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cartões de cupom / WhatsApp */
.menu-drawer__promo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.10);
  border-radius: 14px;
  background: rgb(var(--color-foreground-rgb) / 0.02);
  text-decoration: none;
  color: rgb(var(--color-foreground-rgb));
  transition: background-color 0.15s ease;
}
.menu-drawer__promo:hover { background: rgb(var(--color-foreground-rgb) / 0.05); }

.menu-drawer__promo-icon {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-warm-1, #C4A882);
  color: #fff;
  font-size: 1rem;
}
.menu-drawer__promo-icon--whats { background: #25D366; }

.menu-drawer__promo-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.menu-drawer__promo-text strong {
  font-size: 0.9rem; font-weight: 600; line-height: 1.25;
  color: rgb(var(--color-foreground-rgb));
}
.menu-drawer__promo-text span {
  font-size: 0.78rem; color: rgb(var(--color-foreground-rgb) / 0.55); line-height: 1.3;
}
.menu-drawer__promo-arrow { font-size: 1.4rem; color: rgb(var(--color-foreground-rgb) / 0.35); }

/* Barra de baixo: Conta | Favoritos */
.menu-drawer__bottombar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 6px;
  border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.10);
}
.menu-drawer__bottombar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  text-decoration: none;
  color: rgb(var(--color-foreground-rgb));
}
.menu-drawer__bottombar-link:first-child {
  border-right: 1px solid rgb(var(--color-foreground-rgb) / 0.10);
}
.menu-drawer__bottombar-link i { font-size: 1.15rem; color: rgb(var(--color-foreground-rgb) / 0.7); }
.menu-drawer__bottombar-link span { display: flex; flex-direction: column; line-height: 1.2; }
.menu-drawer__bottombar-link strong { font-size: 0.85rem; font-weight: 600; }
.menu-drawer__bottombar-link small { font-size: 0.72rem; color: rgb(var(--color-foreground-rgb) / 0.55); }
.menu-drawer__bottombar-link:hover strong { color: var(--color-warm-1, #C4A882); }

/* MENU DRAWER — foto redonda na categoria principal + alinhamento */
.menu-drawer__cat-image {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: 0 0 46px !important;
  margin-right: 14px;
}
.menu-drawer__menu-item--mainlist {
  display: flex !important;
  align-items: center !important;
}
.menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text {
  flex: 1 1 auto;
}

/* ==========================================================================
   30. WISHLIST — coração nos cards + página de favoritos
   ========================================================================== */
.custom-pcard { position: relative; }
.zg-wish {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: rgb(var(--color-foreground-rgb, 26 29 41));
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, color 0.15s ease;
}
.zg-wish:hover { transform: scale(1.08); }
.zg-wish i { font-size: 0.95rem; }
.zg-wish.is-active { color: var(--color-sale, #DC2626); }

/* Página de favoritos */
.zg-fav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
}
@media screen and (min-width: 750px) {
  .zg-fav-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
.zg-fav-card { position: relative; text-align: center; }
.zg-fav-card__media { display: block; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; background: #f4f4f4; }
.zg-fav-card__media img { width: 100%; height: 100%; object-fit: contain; }
.zg-fav-remove {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: var(--color-sale, #DC2626);
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.zg-fav-card__info { padding: 10px 4px; }
.zg-fav-card__title {
  display: block; font-size: 0.85rem; color: var(--color-text-primary, #1A1D29);
  text-decoration: none; line-height: 1.3; margin-bottom: 4px;
}
.zg-fav-card__price { font-weight: 700; font-size: 0.95rem; color: var(--color-text-primary, #1A1D29); }
.zg-fav-empty { text-align: center; color: var(--color-text-secondary, #5A5C66); padding: 40px 20px; font-size: 0.95rem; }

/* ==========================================================================
   31. CARD DE PRODUTO — layout "referência" (esquerda, estrelas, swatches, selo)
   ========================================================================== */
.custom-pcard--ref { text-align: left; }
.custom-pcard--ref .custom-pcard__info { text-align: left; padding: 12px 2px 6px; }
.custom-pcard--ref .custom-pcard__title {
  font-size: 0.85rem; line-height: 1.3; font-weight: 500; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.2em; margin: 0 0 6px 0;
}

/* Estrelas + avaliações */
.custom-pcard__rating { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 0; }
.custom-pcard__stars { position: relative; display: inline-block; font-size: 0.8rem; line-height: 1; color: #DDD1CA; letter-spacing: 1px; }
.custom-pcard__stars::before { content: "★★★★★"; }
.custom-pcard__stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--color-accent, #C7A66A); }
.custom-pcard__stars-fill::before { content: "★★★★★"; }
.custom-pcard__rating-count { font-size: 0.72rem; color: var(--color-text-muted, #8E8F96); }

/* Preço/parcelamento à esquerda */
.custom-pcard--ref .custom-pcard__price { justify-content: flex-start; }
.custom-pcard--ref .custom-pcard__installment,
.custom-pcard--ref .custom-pcard__pix {
  justify-content: flex-start; white-space: normal; font-size: 0.75rem;
}
.custom-pcard--ref .custom-pcard__installment { color: var(--color-text-secondary, #5A5C66); }

/* Swatches de cor */
.custom-pcard__swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.custom-pcard__swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  background-size: cover; background-position: center; flex-shrink: 0;
}
/* Bolinha mostrando a foto da variante — um pouco maior e fundo branco */
.custom-pcard__swatch--photo {
  width: 26px; height: 26px;
  background-color: #fff; background-size: cover; background-position: center;
}
.custom-pcard__swatch-more {
  font-size: 0.7rem; color: var(--color-text-muted, #8E8F96);
  margin-left: 2px; padding: 2px 8px;
  border: 1px solid var(--color-border, #E5E2DC); border-radius: 20px;
}

/* Selo "Mais vendido" */
.custom-pcard__badge--best { background: var(--color-warm-3, #8B6F47); color: #fff; }
/* Se tiver "Mais vendido" e desconto ao mesmo tempo, empilha */
.custom-pcard__badge--best ~ .custom-pcard__badge--sale { top: 42px; }

/* Cards: preencher o quadrado 1:1 (ideal p/ maquiagem) */
.custom-pcard__img,
.custom-pcard__media img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ==========================================================================
   32. CARD DE PRODUTO — formato "bloco" (fundo editável + imagem compacta)
   ========================================================================== */
.custom-pcard--ref {
  background: var(--pcard-block-bg, #F7F2EF);
  border-radius: 16px;
  padding: 12px 12px 14px;
  overflow: hidden;
}
.custom-pcard--ref .custom-pcard__media {
  border-radius: 10px;
  background: #FBF8F5;
}
/* Selos/coração acompanham o padding do bloco */
.custom-pcard--ref .custom-pcard__badge { top: 8px; left: 8px; }
.custom-pcard--ref .zg-wish { top: 8px; right: 8px; }

/* ==========================================================================
   33. PALETA JC — card: borda + hover conforme guia
   ========================================================================== */
.custom-pcard--ref { border: 1px solid var(--color-border, #E9DFDA); }
.custom-pcard--ref:hover { border-color: var(--color-warm-1, #B97868); box-shadow: 0 8px 24px rgba(42, 37, 35, 0.08); }
/* Selo "Mais vendido" e desconto = rosa fechado (já via tokens, reforço) */
.custom-pcard__badge--best { background: var(--color-primary, #7B4A43); color: #fff; }
.custom-pcard__badge--sale { background: var(--color-sale, #7B4A43); color: #fff; }

/* ==========================================================================
   34. CABEÇALHO DESKTOP — layout Julia Campos
   Só afeta telas ≥ 750px. O mobile (hambúrguer) permanece intacto.
   Depende de: sections/header.liquid (menu-style='menu' + render categorias)
   e snippets/custom-header-categories.liquid.
   ========================================================================== */

/* Botão de categorias escondido por padrão (mobile) */
.jc-cats { display: none; }

@media screen and (min-width: 750px) {

  /* ---------- LINHA 1: busca como barra larga ---------- */
  #header-component .header__row--top .header__column--right {
    gap: 16px;
    flex: 1;
    align-items: center;
  }
  #header-component .header__row--top .search-action {
    flex: 1 1 auto;
    max-width: 620px;
    margin-inline: auto;
  }
  #header-component .header__row--top .search-action button {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    min-height: 46px;
    padding: 0 46px 0 18px;
    border: 1px solid var(--color-border, #E9DFDA);
    border-radius: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235F5551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 16px center;
    background-size: 20px 20px;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
  }
  #header-component .header__row--top .search-action button:hover {
    border-color: var(--color-secondary, #B97868);
    background-color: #fff;
  }
  /* esconde o texto/ícone padrão do tema dentro do botão */
  #header-component .header__row--top .search-action button > span { display: none; }
  /* placeholder no estilo da referência */
  #header-component .header__row--top .search-action button::after {
    content: "O que você procura hoje?";
    color: var(--color-text-muted, #8A7C76);
    font-size: 0.9rem;
    font-weight: 400;
  }

  /* Ações (conta, favoritos, sacola, carrinho) não esticam */
  #header-component .header__row--top .header__column--right header-actions {
    flex: 0 0 auto;
  }

  /* ---------- LINHA 2: categorias + menu horizontal ---------- */
  #header-component .header__row--bottom .header__column--left {
    gap: 20px;
    align-items: center;
  }

  .jc-cats {
    display: block;
    position: relative;
  }
  .jc-cats__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 10px 2px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary, #2A2523);
    white-space: nowrap;
  }
  .jc-cats__icon {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    width: 16px;
  }
  .jc-cats__icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
  }
  .jc-cats__caret {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
  }
  .jc-cats__btn:hover { color: var(--color-secondary, #B97868); }
  .jc-cats:hover .jc-cats__caret,
  .jc-cats:focus-within .jc-cats__caret { transform: rotate(180deg); }

  .jc-cats__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--color-border, #E9DFDA);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(42, 37, 35, 0.12);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }
  .jc-cats:hover .jc-cats__panel,
  .jc-cats:focus-within .jc-cats__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .jc-cats__list { margin: 0; padding: 0; }
  .jc-cats__item {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--color-text-primary, #2A2523);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.3;
  }
  .jc-cats__item:hover {
    background: var(--color-bg-alt, #F5EFE8);
    color: var(--color-primary, #7B4A43);
  }
  .jc-cats__item--all {
    font-weight: 600;
    color: var(--color-primary, #7B4A43);
    margin-top: 4px;
    border-top: 1px solid var(--color-border, #E9DFDA);
    border-radius: 0 0 8px 8px;
  }

  /* ---------- "Ofertas" destacado em rosa ---------- */
  #header-component .menu-list__link[href*="ofertas" i] {
    color: var(--color-primary, #7B4A43);
    font-weight: 600;
  }
  #header-component .menu-list:where(:has(.menu-list__list-item:hover)) .menu-list__link[href*="ofertas" i] {
    color: var(--color-primary, #7B4A43);
  }
}

/* ==========================================================================
   35. CABEÇALHO — segunda linha do menu + separador (referência Julia Campos)
   Requer no editor: Cabeçalho > Menu > Linha = Inferior.
   ========================================================================== */
@media screen and (min-width: 750px) {
  /* linha fina separando a busca (linha 1) do menu (linha 2) */
  #header-component .header__row--bottom { border-top: 1px solid var(--color-border, #E9DFDA); }

  /* respiro entre "Todas as categorias" e os links do menu */
  #header-component .header__row--bottom .header__column--left { gap: 18px; }

  /* separador vertical depois de "Todas as categorias" (como na referência) */
  #header-component .header__row--bottom .jc-cats {
    border-right: 1px solid var(--color-border, #E9DFDA);
    padding-right: 18px;
  }
  /* a barra de baixo com um respiro vertical mais elegante */
  #header-component .header__row--bottom .header__columns { --header-padding: 10px; }
}

/* ==========================================================================
   36. CABEÇALHO — ações com ícone + texto + Favoritos (referência)
   Requer no editor: Cabeçalho > Utilidades > "Estilo de exibição das ações" = Texto.
   Mobile intacto: Favoritos só aparece no desktop (o mobile usa a gaveta).
   ========================================================================== */
.jc-fav { display: none; }

@media screen and (min-width: 750px) {
  /* Modo texto: reexibe o ícone junto do texto (o tema esconde o ícone no desktop) */
  .header-actions--text .header-actions__action .svg-wrapper.desktop\:hidden,
  .header-actions--text .account-button span[slot="signed-out-avatar"].desktop\:hidden {
    display: inline-flex !important;
  }
  /* Ícone + texto lado a lado */
  .header-actions--text .header-actions__action,
  .header-actions--text .cart-drawer,
  .header-actions--text .account-button shopify-account {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }
  .header-actions--text .header-actions__cart-icon--text { gap: 7px; }

  /* Favoritos */
  .jc-fav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--hdr-icon-color, var(--color-foreground));
  }
  .jc-fav__icon svg { width: 22px; height: 22px; display: block; }
  .jc-fav:hover { color: var(--color-primary, #7B4A43); }
  .jc-fav__count { font-size: 0.85rem; color: var(--color-text-muted, #8A7C76); }
}

/* ==========================================================================
   37. CABEÇALHO — busca centralizada + ordem/alinhamento das ações (final)
   ========================================================================== */
@media screen and (min-width: 750px) {
  /* Linha 1 em 3 colunas: logo | busca (centro real) | ações */
  #header-component .header__row--top .header__columns {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 600px) 1fr;
    grid-template-areas: 'logo search actions';
    align-items: center;
    gap: 24px;
  }
  #header-component .header__row--top .header__column--left,
  #header-component .header__row--top .header__column--right { display: contents; }
  #header-component .header__row--top .header-logo { grid-area: logo; justify-self: start; }
  #header-component .header__row--top .search-action { grid-area: search; max-width: none; margin: 0; }
  #header-component .header__row--top header-actions { grid-area: actions; justify-self: end; gap: 22px; }
  #header-component .header__row--top .header__column--right > script { display: none; }

  /* Conta: ícone à esquerda, alinhado, com espaço */
  .header-actions--text .account-button,
  .header-actions--text .account-button shopify-account { display: inline-flex; align-items: center; }
  .header-actions--text .account-button [slot="signed-out-avatar"] { display: inline-flex; align-items: center; }
  .header-actions--text .account-button__text { order: 2; margin-left: 8px; line-height: 1; }

  /* Carrinho: ícone à esquerda */
  .header-actions--text .header-actions__cart-icon--text { gap: 8px; align-items: center; }
  .header-actions--text .header-actions__cart-icon--text .svg-wrapper { order: -1; }
}

/* 37b. Conta — impede o componente da Shopify de espremer o ícone */
@media screen and (min-width: 750px) {
  .header-actions--text .account-button [slot="signed-out-avatar"] { flex: 0 0 auto; }
  .header-actions--text .account-button__icon { flex: 0 0 auto; width: 20px; height: 22px; min-width: 20px; }
}

/* ==========================================================================
   38. MENU CATEGORIAS — ponte invisível: painel não fecha ao mover o mouse
   Cobre o vão de ~8px entre o botão e o painel, mantendo o hover contínuo.
   ========================================================================== */
@media screen and (min-width: 750px) {
  .jc-cats__panel::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
  }
}

/* ==========================================================================
   39. MEGA-MENU NATIVO — ponte de hover maior (subcategorias)
   O submenu (clip-path) começa exatamente na base da barra do menu; a "ponte"
   nativa do item terminava no mesmo ponto (sem sobreposição), fechando o menu
   ao descer o mouse. Aqui aumentamos a ponte para sobrepor o submenu.
   ========================================================================== */
@media screen and (min-width: 750px) {
  #header-component .header__row--bottom .menu-list__list-item:not([slot='overflow'])::after {
    height: calc(var(--header-padding, 10px) + 12px);
    margin-bottom: calc(-1 * (var(--header-padding, 10px) + 12px));
  }
}

/* ==========================================================================
   40. MEGA-MENU — ponte de hover (não fecha ao descer pras subcategorias)
   O elemento .jc-bridge é criado pelo script em header.liquid como filho de
   cada item com submenu. Fica no vão entre o item e as subcategorias; enquanto
   o mouse passa por ele o item segue "hovered", então o tema mantém aberto.
   Só é clicável quando o item está sob o mouse, então não bloqueia nada.
   ========================================================================== */
@media screen and (min-width: 750px) {
  #header-component .menu-list__list-item > .jc-bridge {
    position: absolute;
    /* O offsetParent é a linha do cabeçalho (fundo ~10px abaixo do link),
       então subimos a ponte para cobrir o vão REAL entre o link e o submenu. */
    top: calc(100% - var(--header-padding, 10px) - 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(var(--header-padding, 10px) + 6px);
    pointer-events: none;
    z-index: 5;
  }
  #header-component .menu-list__list-item:hover > .jc-bridge {
    pointer-events: auto;
  }
}

/* ==========================================================================
   41. MENU DESKTOP — mesma fonte/design do menu mobile
   Itens principais: Kanit (heading), peso 300, UPPERCASE, espaçado (= menu mobile).
   Subitens (mega-menu): fonte de corpo + bolinha rosé antes do texto (= submenu mobile).
   ========================================================================== */
@media screen and (min-width: 750px) {
  #header-component .menu-list__link-title,
  #header-component .jc-cats__label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }
  #header-component .mega-menu__link {
    position: relative;
    padding-left: 18px !important;
    font-family: var(--font-body--family, sans-serif) !important;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }
  #header-component .mega-menu__link::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-warm-1, #B97868);
  }
}

/* ==========================================================================
   42. CARDS DE PRODUTO — imagem 1:1 (quadrada) em TODAS as coleções
   Força a proporção quadrada nos cards nativos (card-gallery), independente
   da configuração "image_ratio" do bloco. Não afeta a imagem da PÁGINA de
   produto (essa usa .product-media-container fora de .card-gallery).
   ========================================================================== */
.card-gallery {
  --gallery-aspect-ratio: 1 / 1 !important;
}
.card-gallery .product-media-container {
  aspect-ratio: 1 / 1 !important;
}
.card-gallery .product-media-container img,
.card-gallery .product-media-container video,
.card-gallery .product-media-container svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ==========================================================================
   43. FONTES — títulos de seções secundárias em Cormorant (serifada)
   Sobrepõe o 'Kanit' fixo dessas seções (Sobre nós, Vídeos, Políticas, Rastreio).
   ========================================================================== */
.custom-about__title,
.custom-about__section-title,
.custom-about__guarantee-title,
.custom-about__contact-title,
.custom-lifestyle__title,
.custom-lifestyle__overlay-text,
.custom-policy__title,
.custom-policy__body h2,
.custom-policy__body h3,
.custom-policy__contact-title,
.custom-tracking__title,
.custom-tracking__how-title,
.custom-tracking__help-title,
.custom-tracking-carrier__name {
  font-family: 'Cormorant Garamond', serif !important;
}

/* ==========================================================================
   44. COLEÇÃO COM ABAS — layout GRADE (coluna) vs carrossel (stack)
   "Grade" = produtos quebram em linhas (grid). "Carrossel" = fila que rola (padrão).
   ========================================================================== */
.custom-product-scroll[data-layout="coluna"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow-x: visible;
  padding-bottom: 0;
  padding-inline: 0;
}
}
.custom-product-scroll[data-layout="coluna"] > .custom-pcard {
  flex: unset;
  width: auto;
  min-width: 0;
}
@container (min-width: 600px) {
  .custom-product-scroll[data-layout="coluna"] { grid-template-columns: repeat(3, 1fr); }
}
@container (min-width: 900px) {
  .custom-product-scroll[data-layout="coluna"] { grid-template-columns: repeat(3, 1fr); }
  .custom-product-scroll[data-layout="coluna"][data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .custom-product-scroll[data-layout="coluna"][data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}
/* Modo grade: esconde as setas do carrossel */
.custom-scroll-wrapper:has(.custom-product-scroll[data-layout="coluna"]) .custom-scroll-arrow {
  display: none;
}
/* ==========================================================================
   CABEÇALHO TRANSPARENTE (HOME) — visual limpo estilo overlay
   ========================================================================== */

/* Remove linhas divisórias e caixa da logo quando o cabeçalho está sobreposto */
.header[transparent] .header__row--top,
.header[transparent] .header__row--top .header__columns,
.header[transparent] .header__row--bottom {
  border-bottom: 0 !important;
}
.header[transparent] .header-logo,
.header[transparent] .header-logo img {
  background: transparent !important;
  box-shadow: none !important;
}

/* Botão/barra de PESQUISA transparente (só enquanto sobreposto ao banner) */
.header[transparent]:not([data-sticky-state='active']) [aria-label="Pesquisa"],
.header[transparent]:not([data-sticky-state='active']) [aria-label="Pesquisa"]::after,
.header[transparent]:not([data-sticky-state='active']) [aria-label="Pesquisa"] > * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.header[transparent]:not([data-sticky-state='active']) [aria-label="Pesquisa"] {
  border-color: rgba(0, 0, 0, 0.28) !important;
}
/* Força a cor do texto/placeholder e do contorno da busca no header transparente */
.header[transparent]:not([data-sticky-state='active']) [aria-label="Pesquisa"],
.header[transparent]:not([data-sticky-state='active']) [aria-label="Pesquisa"] * {
  color: #3c3228 !important;
  -webkit-text-fill-color: #3c3228 !important;
  border-color: rgba(60, 50, 40, 0.6) !important;
  opacity: 1 !important;
}
.header[transparent]:not([data-sticky-state='active']) [aria-label="Pesquisa"] svg,
.header[transparent]:not([data-sticky-state='active']) [aria-label="Pesquisa"] svg * {
  color: #3c3228 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}/* ==========================================================================
   45. CABEÇALHO — remover as linhas divisórias (Gracie)
   Cole este bloco no FINAL do arquivo assets/custom.styles.css
   Remove: linha preta sob a logo/busca, linha entre as fileiras
   e linha de baixo do header (desktop e mobile).
   ========================================================================== */
#header-component .header__row,
#header-component .header__row--top,
#header-component .header__row--bottom,
#header-component .header__row .header__columns {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
}