/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Scroll-in animations
   Apply `.animate` + one modifier to any element. JS adds `.is-visible`
   when the element scrolls into view.
   Optional: --animate-delay, --animate-duration on the element.
   ========================================================================== */

.animate {
  --animate-duration: 0.7s;
  --animate-delay: 0s;
  --animate-distance: 40px;
  transition:
    opacity var(--animate-duration) ease var(--animate-delay),
    transform var(--animate-duration) ease var(--animate-delay);
}

/* Only hide when JS is available. Prevents stuck-hidden elements in the
   Bricks builder canvas or when scripts fail to load. */
.js-animate .animate {
  opacity: 0;
  will-change: opacity, transform;
}

.js-animate .animate--fade-up {
  transform: translateY(var(--animate-distance));
}
.js-animate .animate--fade-down {
  transform: translateY(calc(var(--animate-distance) * -1));
}
.js-animate .animate--fade-left {
  transform: translateX(var(--animate-distance));
}
.js-animate .animate--fade-right {
  transform: translateX(calc(var(--animate-distance) * -1));
}
.js-animate .animate--zoom {
  transform: scale(0.92);
}
.js-animate .animate--zoom-out {
  transform: scale(1.08);
}

.animate.is-visible {
  opacity: 1;
  transform: none;
}

/* Optional delay helpers for staggering siblings */
.animate--d1 {
  --animate-delay: 0.1s;
}
.animate--d2 {
  --animate-delay: 0.2s;
}
.animate--d3 {
  --animate-delay: 0.3s;
}
.animate--d4 {
  --animate-delay: 0.4s;
}
.animate--d5 {
  --animate-delay: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  .animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Monthly Sale slider — content is global (ACF Options Page).
   Cream banner with eyebrow + serif heading + body + price + CTA + next
   arrow + numbered indicators. CSS custom properties expose every colour
   so the design can be retoned without touching markup.
   ========================================================================== */

.monthly-sale {
  --ms-bg: #f5efe0;
  --ms-text: #384033;
  --ms-eyebrow: #a87f5b;
  --ms-heading: #384033;
  --ms-arrow: #a87f5b;
  --ms-indicator-text: #2a2418;
  --ms-indicator-active: #e8d9b8;
  --ms-indicator-hover: rgba(168, 127, 91, 0.12);
  /* CTA colors are inherited from Bricks .bricks-background-primary —
     change them via Bricks Theme Styles, not here. */

  /* All sizes below use px / vw — the site sets html { font-size: 62.5% }
     so any rem values would silently shrink. Pixels keep this block
     visually consistent regardless of root font-size. */

  position: relative;
  padding: 60px 80px;
  background: var(--ms-bg);
  color: var(--ms-text);
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}

.monthly-sale__track {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

/* One slide visible at a time; fade-in via keyframes when .is-active is set */
.monthly-sale__slide {
  display: none;
  animation: monthly-sale-fade 0.45s ease both;
}
.monthly-sale__slide.is-active {
  display: block;
}

@keyframes monthly-sale-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.monthly-sale__eyebrow {
  margin: 0 0 32px;
  font-size: 20px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ms-eyebrow);
}

.monthly-sale__heading {
  margin-bottom: 2rem;
}

.monthly-sale__description {
  max-width: 56ch;
  margin: 0 auto 36px;
  font-size: 16px;
  line-height: 1.65;
}

.monthly-sale__price {
  margin: 0 0 4px;
  font-size: 17px;
  color: #40584e;
}

.monthly-sale__price-note {
  margin: 0 0 32px;
  font-size: 16px;
  opacity: 0.75;
}

/* CTA visual styling comes from Bricks (.bricks-button.bricks-background-primary).
   This class is kept as a layout hook only. font-size is reset because the
   .monthly-sale wrapper sets a local 16px baseline; without this the CTA
   would render 1px larger than every other primary button on the site. */
.monthly-sale__cta {
  display: inline-block;
  font-size: 15px;
}

/* Right-edge next arrow, vertically centred on the slider area */
.monthly-sale__next {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ms-arrow);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}
.monthly-sale__next:hover,
.monthly-sale__next:focus-visible {
  background: var(--ms-indicator-hover);
}
.monthly-sale__next svg {
  width: 30px;
  height: 30px;
}

.monthly-sale__indicators {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 70px;
}

.monthly-sale__indicator {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: white;
  color: #855a3f;
  font-family: "cabrito-didone-extended";
  font-size: 26px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.monthly-sale__indicator.is-active {
  background: var(--ms-indicator-active);
}
.monthly-sale__indicator:not(.is-active):hover,
.monthly-sale__indicator:focus-visible {
  background: var(--ms-indicator-hover);
}

/* Compact layout on small screens */
@media (max-width: 720px) {
  .monthly-sale {
    padding: 56px 24px 48px;
  }
  .monthly-sale__next {
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .monthly-sale__eyebrow {
    font-size: 15px;
  }
  .monthly-sale__heading {
    font-size: clamp(28px, 7vw, 42px);
  }
}

/* Builder-only hint when the slider is inactive */
.monthly-sale--inactive {
  outline: 2px dashed #c99;
  outline-offset: 4px;
}
.monthly-sale__notice {
  margin: 0 auto 24px;
  padding: 12px 16px;
  background: #fff3f3;
  border-left: 3px solid #c00;
  color: #800;
  font-size: 14px;
  text-align: left;
  max-width: 760px;
}
.monthly-sale__notice a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   Featured Products grid — 4 picked products, linked cards.
   White card with contained product image, centered text using the site's
   body font (inherited from <body> = Bricks theme style).
   Layout: 4 columns on desktop, 2 on tablet, 1 on mobile.
   Pixels (not rem) for the same 62.5% root reason as Monthly Sale.
   ========================================================================== */

.featured-products {
  --fp-text: #2a2418;
  --fp-price: #2a2418;
  --fp-card-bg: #ffffff;
  --fp-gap: 32px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fp-gap);
  color: var(--fp-text);
  font-family: inherit; /* Bricks body font (Poppins) */
  font-size: 16px;
  line-height: 1.5;
}

.featured-products__card {
  display: flex;
  flex-direction: column;
  background: var(--fp-card-bg);
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: transform 0.25s ease;
}
.featured-products__card:hover {
  transform: translateY(-4px);
}

.featured-products__image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fp-card-bg);
  overflow: hidden;
}
/* Absolute positioning + object-fit:contain keeps every card image square
   regardless of source dimensions. With flex+max-height, portrait sources
   (e.g. 768×1152) overflow the aspect-ratio container. */
.featured-products__image img {
  position: absolute;
  inset: 24px;
  display: block;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
  transition: transform 0.5s ease;
}
.featured-products__card:hover .featured-products__image img {
  transform: scale(1.03);
}

.featured-products__meta {
  padding: 8px 16px 24px;
}

.featured-products__brand {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: inherit;
}

.featured-products__name {
  margin: 0 0 24px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

.featured-products__price {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--fp-price);
}
.featured-products__price del {
  margin-right: 8px;
  opacity: 0.55;
}
.featured-products__price ins {
  text-decoration: none;
}

@media (max-width: 1023px) {
  .featured-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --fp-gap: 24px;
  }
}

@media (max-width: 599px) {
  .featured-products {
    grid-template-columns: 1fr;
    --fp-gap: 20px;
  }
}

/* ==========================================================================
   Gallery Slider — one image at a time, white chevron arrows at the edges.
   ========================================================================== */

.gallery-slider {
  --gs-arrow: #ffffff;
  --gs-arrow-hover: rgba(255, 255, 255, 0.7);
  --gs-arrow-offset: 16px;
  --gs-ratio: 3 / 2; /* desktop: landscape */

  position: relative;
  overflow: hidden;
}

/* Slides sit in a horizontal flex row; JS translates the track to slide. */
.gallery-slider__track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.gallery-slider__slide {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Fixed aspect-ratio + cover = every image renders the exact same size. */
.gallery-slider__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--gs-ratio);
  object-fit: cover;
}

.gallery-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--gs-arrow);
  /* Keep white chevrons legible over light photos */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.gallery-slider__nav:hover {
  color: var(--gs-arrow-hover);
}
.gallery-slider__nav--prev {
  left: var(--gs-arrow-offset);
}
.gallery-slider__nav--next {
  right: var(--gs-arrow-offset);
}
.gallery-slider__nav svg {
  width: 43px;
  height: 43px;
}

@media (max-width: 767px) {
  .gallery-slider {
    --gs-ratio: 4 / 5; /* mobile: portrait */
  }
}

@media (max-width: 599px) {
  .gallery-slider__nav {
    width: 53px;
    height: 53px;
  }
  .gallery-slider__nav svg {
    width: 35px;
    height: 35px;
  }
}

/* ==========================================================================
   Product Grid — heading + body + 5-card asymmetric magazine grid.
   Card 1: 1 col, Card 2: 2 cols, Cards 3–5: 1 col each.
   Card 1's aspect-ratio sets the row 1 height; card 2 stretches to match.
   ========================================================================== */

.product-grid {
  --pg-card-text: #ffffff;
  --pg-cta-bg: #f5efe0;
  --pg-cta-text: #2a2418;
  --pg-gradient: linear-gradient(
    0deg,
    rgba(56, 64, 51, 0.9) 0%,
    rgba(56, 64, 51, 0) 50%
  );
  --pg-gap: 16px;
  --pg-card-aspect: 1 / 1; /* 25% shorter than the original 3/4 portrait */
  --pg-heading-font: var(
    --ms-heading-font,
    Georgia,
    "Cormorant Garamond",
    serif
  );

  /* Always full width. Heading + body are intentionally left unstyled so they
     inherit the site's theme styles (h2 + paragraph); no font/colour set here
     either, so nothing cascades into them. */
  width: 100%;
}

.product-grid__header {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* exact gap between element heading and body text */
  margin: 0 0 48px;
}
/* Neutralise the theme's default block margins on the heading/body so the flex
   gap above is the only spacing between them (keeps it an exact 2rem). Only
   spacing is touched here — typography is still left to the theme. */
.product-grid__header > * {
  margin-block: 0;
}

/* Heading (.product-grid__title) is an <h2> and is intentionally unstyled —
   it inherits the theme's h2 styles. */

/* Body text: unstyled except for a readable max line length. */
.product-grid__lead {
  max-width: 90ch;
}

.product-grid__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pg-gap);
}

.product-grid__card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--pg-card-aspect);
  background: #1a1a1a;
  color: var(--pg-card-text);
  text-decoration: none;
}
/* Card 2 spans two columns; aspect-ratio stretches to match card 1's row height. */
.product-grid__card:nth-child(2) {
  grid-column: span 2;
  aspect-ratio: auto;
}

/* Alternate instance (every 2nd Product Grid on a page): the wide card drops
   from the first row to the start of the SECOND row, so stacked grids don't
   repeat. Row 1 is three single cards; row 2 = wide card (cols 1–2) + single;
   everything after continues 3 per row:
     [1][1][1]
     [2 2 ][1]
     [1][1][1] ...
   Card 2 reverts to a normal single cell; card 4 becomes the wide one. */
.product-grid--alt .product-grid__card:nth-child(2) {
  grid-column: auto;
  aspect-ratio: var(--pg-card-aspect);
}
.product-grid--alt .product-grid__card:nth-child(4) {
  grid-column: span 2;
  aspect-ratio: auto;
}
/* Edge case: with exactly 4 products the alt wide card (#4) is alone on its
   row with no single card beside it to anchor the height — aspect-ratio:auto
   would collapse it to 0. Give it an explicit 2:1 ratio when it's the last
   card so it stays visible. (≥5 products: #5 fills the row and anchors it.) */
.product-grid--alt .product-grid__card:nth-child(4):last-child {
  aspect-ratio: 2 / 1;
}

.product-grid__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-grid__card:hover .product-grid__img {
  transform: scale(1.03);
}

.product-grid__overlay {
  position: absolute;
  inset: 0; /* full-card gradient layer over the image (per Bricks JSON) */
  padding: 32px;
  background: var(--pg-gradient);
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* keep title/price/CTA anchored to the bottom */
  gap: 16px;
  pointer-events: none;
}

.product-grid__name {
  margin: 0;
  font-family: var(--pg-heading-font);
  font-size: clamp(22px, 1.8vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  color: inherit;
  /* Keep title readable even on busy bright photos */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.product-grid__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-grid__price {
  font-family: inherit;
  font-size: 16px;
  color: inherit;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  font-weight: 700;
}

.product-grid__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--pg-cta-bg);
  color: var(--pg-cta-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  /* Card wraps everything in <a>, so the pill is decorative */
  pointer-events: none;
}

@media (max-width: 1023px) {
  .product-grid__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Both wide cards (normal row-1 card #2, alt row-2 card #4, incl. the lone
     4-product case) revert to single cells; uniform card aspect across the grid.
     The :last-child selector is repeated to match the desktop rule's specificity
     so this override wins at tablet width. */
  .product-grid__card:nth-child(2),
  .product-grid--alt .product-grid__card:nth-child(4),
  .product-grid--alt .product-grid__card:nth-child(4):last-child {
    grid-column: auto;
    aspect-ratio: var(--pg-card-aspect);
  }
  .product-grid__overlay {
    padding: 24px;
  }
}

@media (max-width: 599px) {
  .product-grid__items {
    grid-template-columns: 1fr;
  }
  .product-grid__header {
    margin-bottom: 32px;
  }
  .product-grid__overlay {
    padding: 20px;
    gap: 12px;
  }
  .product-grid__cta {
    padding: 8px 18px;
    font-size: 13px;
  }
}

/* ==========================================================================
   Product Info Columns — two-column modular section (single product page).
   Left col = heading + text. Right col = optional heading/text + accordions.
   Transparent by design: the Bricks Section it sits in supplies the cream
   background, matching the rest of the page. Pixels (not rem) for the same
   62.5% root reason as the blocks above.
   ========================================================================== */

.product-cols {
  --pc-text: #2a2418;
  --pc-heading: #2a2418;
  --pc-rule: #fff;
  --pc-gap: 96px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pc-gap);
  align-items: start;
  color: var(--pc-text);
  font-size: 16px;
  line-height: 1.65;
}

.product-cols__heading {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pc-heading);
}

/* Rich-text body: collapse the editor's outer margins, keep inner rhythm. */
.product-cols__text {
  max-width: 60ch;
}
.product-cols__text > :first-child {
  margin-top: 0;
}
.product-cols__text > :last-child {
  margin-bottom: 0;
}
.product-cols__text p {
  margin: 0 0 1em;
}

/* Accordions: a stack of rule-separated rows with a chevron that flips open.
   No top rule on the group — the first item has no line above it; each item
   carries a bottom rule (including the last), matching the design. */
.product-cols__item {
  border-bottom: 1px solid var(--pc-rule);
}

.product-cols__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--pc-heading);
}

.product-cols__chevron {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease;
}
.product-cols__item.is-open .product-cols__chevron {
  transform: rotate(180deg);
}

/* Smooth height via grid-template-rows 0fr → 1fr. Only the enhanced (JS-on)
   group collapses; without JS every panel stays open so content is reachable. */
.product-cols__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}
/* The clip element must have NO padding of its own: with overflow:hidden it
   clips to its padding box, so any padding here stays visible when the row
   collapses to 0fr and leaks the first line of text. All inner spacing lives
   on .product-cols__panel-content instead. */
.product-cols__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.product-cols__accordions.is-enhanced .product-cols__panel {
  grid-template-rows: 0fr;
}

.product-cols__accordions.is-enhanced {
  margin-top: 5rem;
}

.product-cols__accordions.is-enhanced
  .product-cols__item.is-open
  .product-cols__panel {
  grid-template-rows: 1fr;
}
.product-cols__panel-content {
  padding-bottom: 24px;
}
.product-cols__panel-content > :first-child {
  margin-top: 0;
}
.product-cols__panel-content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .product-cols {
    grid-template-columns: 1fr;
    --pc-gap: 48px;
  }
}

/* ==========================================================================
   Product Review — one centered customer testimonial (single product page).
   Eyebrow + large serif quote + small note. Transparent: the Bricks Section
   supplies the cream background.
   ========================================================================== */

.product-review {
  --pr-eyebrow: #384033;
  --pr-quote: #384033;
  --pr-note: #6f7158;

  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.product-review__eyebrow {
  margin: 0 0 48px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pr-eyebrow);
}

/* Quote uses the Bricks theme heading font (cabrito-didone-extended — what a
   bare heading renders with). The border/padding/margin resets remove the
   theme's default <blockquote> left bar so it reads as a centered testimonial. */
.product-review__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "cabrito-didone-extended", Georgia, "Cormorant Garamond", serif;
  font-size: clamp(24px, 2.6vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--pr-quote);
}

.product-review__note {
  margin: 40px 0 0;
  font-size: 14px;
  color: var(--pr-note);
}

@media (max-width: 599px) {
  .product-review__eyebrow {
    margin-bottom: 28px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Hoitoaika — the {hoitoaika} dynamic data tag (treatment duration shown
   beside the price). The tag renderer wraps the output as
   .hoitoaika > .hoitoaika__label + value; only the label is emphasised.
   ========================================================================== */

.hoitoaika__label {
  font-weight: 500;
}

/* ==========================================================================
   Product Categories — a row of category buttons. Reuses Bricks' button shape
   + typography (.bricks-button); only the colours are overridden: white
   background, --primary text (falls back to the brand green).
   ========================================================================== */

.product-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 0,2,0 specificity so these win over Bricks' .bricks-button (0,1,0) colours
   regardless of stylesheet order. */
.product-cats .product-cats__button {
  background-color: #fff;
  color: var(--primary, #384033);
  border: 1px solid var(--primary, #384033);
}
.product-cats .product-cats__button:hover,
.product-cats .product-cats__button:focus-visible {
  background-color: var(--primary, #384033);
  color: #fff;
}

/* Active category (its archive is being viewed) = filled primary button. */
.product-cats .product-cats__button.is-active {
  background-color: var(--primary, #384033);
  color: #fff;
}

/* ==========================================================================
   Fixed-header offset for WooCommerce Cart & Checkout.
   The Bricks header (#brx-header) is position:fixed — ~199px tall on desktop,
   ~182px on mobile — so the default Cart/Checkout page content slides under it.
   Push the content wrapper (#brx-content) down by the header height on just
   those two pages. Values are rounded up from the measured header so the
   content always clears it.
   ========================================================================== */

.woocommerce-cart #brx-content,
.woocommerce-checkout #brx-content {
  padding-top: 200px;
}

@media (max-width: 767px) {
  .woocommerce-cart #brx-content,
  .woocommerce-checkout #brx-content {
    padding-top: 184px;
  }
}

/* ==========================================================================
   WooCommerce action buttons → Bricks primary button look (dark-green #384033
   pill, white text, 0.5px tracking — copied from .bricks-button.bricks-
   background-primary). Covers the classic mini-cart buttons (Näytä ostoskori /
   Kassa) and the block-based Cart & Checkout main CTAs. !important is used
   because the WooCommerce Blocks CTA styles are specific and late-loaded.
   ========================================================================== */

.woocommerce .widget_shopping_cart .buttons a.button,
.woocommerce.widget_shopping_cart .buttons a.button,
.woocommerce-mini-cart__buttons a.button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--primary, #384033) !important;
  color: #fff !important;
  border: 1px solid var(--primary, #384033) !important;
  border-radius: 9999px !important;
  padding: 7px 30px !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.5px;
  text-transform: none;
  text-decoration: none;
  box-shadow: none !important;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

/* Block buttons wrap their label in a span — keep it white too. */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button
  .wc-block-components-button__text {
  color: #fff !important;
}

/* Hover (Bricks' exact primary hover isn't exposed in CSS; subtle darken). */
.woocommerce .widget_shopping_cart .buttons a.button:hover,
.woocommerce.widget_shopping_cart .buttons a.button:hover,
.woocommerce-mini-cart__buttons a.button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: #2c3329 !important;
  color: #fff !important;
}

/* ==========================================================================
   Product Gallery Slider — the gallery-slider restyled for product images:
   the whole image contained on white, with subtle grey chevrons at the edges
   (image-#9 look). Reuses the .gallery-slider mechanics + JS.
   ========================================================================== */

.gallery-slider--product {
  --gs-ratio: 4 / 3; /* landscape box; the product is centred within it */
  --gs-arrow-offset: 12px;
  background: #fff;
}

/* Show the whole product (not cropped) on a white field. */
.gallery-slider--product .gallery-slider__img {
  object-fit: contain;
  background: #fff;
}

/* White chevrons (base colour kept) with the Adobe XD treatment:
   box-shadow 0 0 2px #00000076 → drop-shadow on the chevron shape, and a 2px
   stroke (XD: border 2px solid #fff). The shadow is what makes the white
   arrows read against the white background. */
.gallery-slider--product .gallery-slider__nav {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.46));
}
.gallery-slider--product .gallery-slider__nav svg {
  width: 34px;
  height: 34px;
  stroke-width: 2;
}

@media (max-width: 767px) {
  .gallery-slider--product {
    --gs-ratio: 1 / 1;
  }
}