/* ============================================================
   Shop design system — extends assets/css/style.css tokens
   (--color-main, --color-secondary, --font-heading, --font-body)
   across: header icons, wishlist, WooCommerce shop/product/cart/
   checkout/my-account, and the Side Cart Woocommerce plugin.
   ============================================================ */

/* ===== HEADER ICONS (replaces the old En/Hi/Gu switcher) ===== */
.header-icons {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

.header-icon-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-main);
  transition: color 0.3s ease;
}

.header-icon-link:hover {
  color: var(--color-secondary);
}

.header-icon-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 18px;
  text-align: center;
}

.header-icon-count.is-empty {
  opacity: 0;
}

/* Same show/hide split the old lang-switcher used, so only one
   icon group is ever visible at a time (fixes duplicate icons). */
@media (min-width: 1025px) {
  .mobile-icons { display: none; }
}
@media (max-width: 1024px) {
  .desktop-icons { display: none; }
  .mobile-icons {
    margin-top: var(--gap-m);
    display: flex;
    justify-content: center;
  }
}

/* ===== WISHLIST HEART BUTTON on product cards / single product ===== */
.sdw-wishlist-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid rgba(58, 28, 1, 0.1);
  border-radius: 50%;
  color: var(--color-main);
  cursor: pointer;
  transition: 0.3s ease;
}

.sdw-wishlist-btn:hover { color: var(--color-secondary); }

.sdw-wishlist-btn.is-active {
  color: var(--color-white);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.sdw-wishlist-btn.is-active svg { fill: currentColor; }

.sdw-wishlist-btn.is-loading { opacity: 0.5; pointer-events: none; }

.woocommerce ul.products li.product { position: relative; }

.sdw-wishlist-empty {
  text-align: center;
  padding: var(--gap-l) 0;
  color: var(--color-main);
  opacity: 0.7;
}

/* ===== WOOCOMMERCE GLOBAL ===== */
.woocommerce, .woocommerce-page {
  font-family: var(--font-body);
  color: var(--color-main);
}

.woocommerce h1, .woocommerce h2, .woocommerce h3 {
  font-family: var(--font-heading);
  color: var(--color-main);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-Button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-radius: 0;
  border: none;
  padding: 15px 40px;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-Button:hover {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* On submit, WC briefly sets the native disabled attribute while the
   form posts — the browser's own default disabled styling (washed-
   out/grayed background, dimmed text) took over for that instant
   since nothing here overrode it, reading as the button's color
   "flickering away and back". Keeping it branded through that
   moment instead. */
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce-Button:disabled {
  opacity: 1;
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-radius: 0;
  border: none;
  padding: 15px 40px !important;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  text-align: center;
  cursor: not-allowed;
}

/* Add to Cart click feedback: while WooCommerce's AJAX request is
   in flight the button gets a .loading class — show a small custom
   spinner right next to its text (flex + gap, so it always sits
   immediately after the label instead of pinned to the button's
   far edge) instead of WC's default icon/dimming. Once added, WC
   swaps in its own checkmark icon (.added state) — untouched, only
   .loading is re-skinned here. */
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading,
.woocommerce ul.products li.product .button.loading {
  opacity: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

/* ::after (not ::before) so the spinner renders after the text
   content in source order — i.e. to its right, not its left.
   WooCommerce's own default spinner icon is position:absolute
   (pinned to the button's far edge via top/right) — we were only
   overriding content/animation, so our circle kept THAT absolute
   position. Force it back into normal inline flow so flex+gap can
   actually place it right next to the text. */
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after {
  content: '' !important;
  display: block !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: sdwSpin 0.6s linear infinite !important;
}

.woocommerce a.button.loading::before,
.woocommerce button.button.loading::before {
  content: none !important;
  display: none !important;
}

@keyframes sdwSpin {
  to { transform: rotate(360deg); }
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--color-main);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--color-secondary);
}

.woocommerce span.price, .woocommerce-Price-amount {
  color: var(--color-secondary);
  font-weight: var(--fw-semibold);
}

.woocommerce mark.count { color: var(--color-secondary); background: none; }

/* Sitewide base border + focus state for every classic (non-block)
   text input/select/textarea — login, register, my-account, address
   forms, quantity box, etc. The checkout BLOCK has its own matching
   rule further down (different markup/classes entirely), but every
   plain WC form was left to the browser's default blue focus ring,
   which is why borders looked inconsistent from page to page: same
   base color everywhere, but only some pages killed the blue focus
   glow and swapped in our own. */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-content);
  background: var(--color-white);
}

/* select still showed the browser's own native widget border/chrome
   on top of the CSS border above — appearance wasn't reset, so the
   OS-drawn control was still rendering underneath, reading as a
   thicker/darker outline than the plain inputs next to it. Removing
   native appearance means the native dropdown arrow disappears too,
   so it's replaced with a plain CSS chevron. */
.woocommerce select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233a1c01' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}

/* Country/State fields aren't plain <select> elements at all — WC
   swaps them for Select2, a JS widget that hides the real <select>
   and renders its own separate .select2-container UI on top. None of
   the border/font/appearance rules above ever touched it, since
   visually it's a completely different set of elements with their
   own default styles (gray #aaa border, 4px radius, fixed 28px
   height) baked into select2.css. */
.woocommerce .select2-container--default .select2-selection--single {
  height: auto;
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
  background: var(--color-white);
  padding: 12px 14px;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-body);
  font-size: var(--fs-content);
  color: var(--color-main);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 10px;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--color-main) transparent transparent transparent;
}

.woocommerce .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: none;
}

.woocommerce .select2-dropdown {
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
  font-family: var(--font-body);
}

.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-secondary);
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="search"]:focus,
.woocommerce input.input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--color-secondary);
}

/* ===== PAGE WRAP =====
   functions.php now outputs <section class="section"><div class="container">
   around all WooCommerce content — same nesting the static HTML
   pages use — so .section already handles the vertical padding.
   The breadcrumb + title banner above it reuses the site's own
   .breadcrumb-nav / .page-hero classes (already in style.css). */

/* .page-hero-content defines its own max-width/padding (a clamp())
   instead of using the shared .container class, so its left edge
   didn't line up with the product grid below it. Force it to use
   the exact same box model as .container so everything lines up. */
.page-hero-content {
  max-width: var(--container-width);
  padding: 0 var(--gap-s);
}

/* Our generic ".woocommerce h1 { color: var(--color-main) }" rule
   (added for regular page titles) has the same specificity as
   ".page-hero h1 { color: white }" from style.css and loads later,
   so it was winning and turning the hero title dark-on-dark and
   unreadable. Force it back to white with higher specificity. */
.woocommerce .page-hero h1 {
  color: var(--color-white);
}

.woocommerce .page-hero p {
  color: rgba(255, 255, 255, 0.85);
}

/* Sorting dropdown and result count are removed server-side; this
   is just a safety net in case either ever reappears. */
.woocommerce-ordering,
.woocommerce-result-count,
.woocommerce-products-header { display: none !important; }

/* ===== SHOP / ARCHIVE =====
   WooCommerce core CSS floats li.product with a fixed width % for
   its own .columns-N grid system. That fights our display:grid and
   is what produced narrow cards with huge gaps — so every child
   rule below is neutralized (float/width/margin) with !important,
   letting our grid fully own the layout. Applies to related/
   upsell product lists too, since they reuse the same ul.products
   markup. */
.woocommerce ul.products,
.woocommerce ul.products[class*="columns-"] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-m);
  list-style: none;
  margin: 0 !important;
  padding: 0;
}

/* WooCommerce's own clearfix puts content on ::before/::after for
   its float-based layout — under display:grid those pseudo-elements
   become real (invisible) grid items and eat a whole column. */
.woocommerce .products ul::before,
.woocommerce .products ul::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

/* One flex "gap" drives all vertical spacing between img/title/
   price/button — individual children don't carry their own
   top/bottom margins, so nothing doubles up or drifts. */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  background: #fdfaf7;
  border: 1px solid rgba(58, 28, 1, 0.05);
  padding: 0 0 var(--gap-s);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

/* WooCommerce nests the image, title, rating AND price all inside
   one <a class="woocommerce-loop-product__link"> — only that link
   and the Add to Cart button are actual direct children of
   li.product. So the gap above only ever separated the link block
   from the button; img/title/price inside the link had no gap
   between them at all. Give the link the same flex+gap treatment. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.35;
  padding: 0 var(--gap-s);
  margin: 0;
}

.woocommerce ul.products li.product .price {
  padding: 0 var(--gap-s);
  display: block;
  margin: 0;
  font-size: 1.2rem;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
}

.woocommerce ul.products li.product .button {
  margin: auto 0 0;
  width: calc(100% - 2 * var(--gap-s));
  align-self: center;
  display: block;
}

.woocommerce ul.products li.product .added_to_cart {
  display: block;
  text-align: center;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-secondary);
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .woocommerce ul.products,
  .woocommerce ul.products[class*="columns-"] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce ul.products[class*="columns-"] { gap: var(--gap-s); }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem;
  }

  .sdw-load-more-wrap { width: 100%; }
  .sdw-load-more { width: 100%; }

  .breadcrumb-nav { padding: 10px 0; }
  .breadcrumb { font-size: 0.8rem; }
}

/* ===== LOAD MORE (replaces default numbered pagination) ===== */
.woocommerce nav.woocommerce-pagination { display: none; }

.sdw-load-more-wrap {
  text-align: center;
  margin: var(--gap-m) 0 0;
}

.sdw-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  padding: 15px 40px;
}

.sdw-load-more.is-loading {
  opacity: 0.85;
  pointer-events: none;
}

.sdw-load-more.is-loading::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: sdwSpin 0.6s linear infinite;
}

/* Cards appended by Load More fade/slide up in instead of just
   popping into place. */
.sdw-fade-up {
  animation: sdwFadeUp 0.5s ease both;
}

@keyframes sdwFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* .section's shared top/bottom padding (60-100px, same value used on
   every page) left too much empty space above the breadcrumb on the
   product page specifically — cut just the top side, scoped to
   single-product only so the shop archive and other pages keep their
   normal spacing. */
.single-product .section.sdw-shop-wrap {
  padding-top: 70px;
}

@media (max-width: 1024px) {
  .single-product .section.sdw-shop-wrap {
    padding-top: 20px;
  }
}

/* ===== SINGLE PRODUCT =====
   Gallery: WooCommerce's own bundled flexslider (theme support
   re-enabled in functions.php) instead of a hand-rolled slider —
   after several rounds of a custom one hitting edge cases (half-
   slides, height-sync bugs), this uses the mature, already-loaded
   library flexslider is exactly built for this pattern. Below
   targets its REAL generated markup, confirmed from the actual
   rendered page source, not guessed:
     .woocommerce-product-gallery         → grid container (thumb
                                             rail | main image)
     .woocommerce-product-gallery__trigger→ popup-view icon
     .flex-viewport                       → main image window
     .woocommerce-product-gallery__wrapper→ the sliding track inside
                                             it (flexslider sets its
                                             own inline width/
                                             transform — untouched)
     .flex-control-nav.flex-control-thumbs→ thumbnail rail (flex-
                                             slider adds/removes
                                             .flex-active on the
                                             current thumb itself)
     .flex-direction-nav                  → prev/next arrows on the
                                             main image (enabled via
                                             the carousel_options
                                             filter in functions.php) */
.sdw-product-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-l);
  align-items: start;
  margin-bottom: var(--gap-l);
}

@media (max-width: 900px) {
  .sdw-product-main {
    /* minmax(0, 1fr), not bare 1fr — a bare 1fr track won't shrink
       below its content's intrinsic width, which is what was pushing
       the whole page wider than the viewport on mobile. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-m);
  }
}

.sdw-product-gallery-col {
  position: relative;
}

/* WC's own core CSS (woocommerce-layout.css) targets the "images"
   class — which happens to be one of the classes WC puts directly on
   .woocommerce-product-gallery itself — with float:left;width:48%,
   and .summary with float:right;width:48%. Both fire INSIDE our grid
   cells, shrinking each column and floating them apart instead of
   filling the grid track. Reset both back to normal, full-width grid
   items. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary.entry-summary {
  float: none !important;
  width: 100% !important;
  clear: none !important;
}

.woocommerce div.product .woocommerce-product-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}

/* WC core targets this exact element by its "images" class instead —
   .woocommerce div.product div.images{margin-bottom:2em} — which is
   one element more specific than the selector above, so it kept
   winning and adding back a bottom gap regardless of the margin:0
   set there. */
.woocommerce div.product div.images {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .woocommerce div.product .woocommerce-product-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

.flex-viewport {
  grid-column: 2;
  grid-row: 1;
  max-height: 560px;
  border: 1px solid rgba(58, 28, 1, 0.08);
  background: #fdfaf7;
}

@media (max-width: 600px) {
  .flex-viewport {
    grid-column: 1;
  }
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Popup / view-fullscreen trigger (top-right of the main image) —
   WC injects the icon as a raw 🔍 emoji image, which clashes with
   the site's own line-icon set everywhere else; swap it for the same
   stroke-style magnifying glass used across the rest of the theme. */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid rgba(58, 28, 1, 0.1);
  border-radius: 50%;
  color: var(--color-main);
  transition: 0.3s ease;
}

.woocommerce-product-gallery__trigger:hover {
  color: var(--color-secondary);
}

.woocommerce-product-gallery__trigger img {
  display: none;
}

.woocommerce-product-gallery__trigger::before {
  content: '';
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Thumbnail rail — flexslider's own <ol>, left of the main image on
   desktop, a horizontal row below it on mobile. Clicking any
   thumbnail is flexslider's native behaviour (it moves the main
   slide AND updates .flex-active on the clicked thumb) — no JS of
   ours involved, which is exactly the point of switching to it. */
/* .woocommerce div.product div.images .flex-control-thumbs{overflow:
   hidden;...} is WC's own core rule for this exact element, more
   specific than a plain .flex-control-thumbs selector — it would
   have silently blocked the overflow-y:auto scroll below, so this
   is written at matching specificity to actually take effect. */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 560px;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
}

.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 600px) {
  .woocommerce div.product div.images .flex-control-nav.flex-control-thumbs {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    margin-top: 12px;
  }
}

/* WC's own core CSS
   (.woocommerce div.product div.images .flex-control-thumbs li) sets
   width:25%;float:left — that's MORE specific than a plain
   .flex-control-thumbs li selector, so it was winning and squeezing
   4 tiny thumbnails per "row" into our 84px column instead of one
   72px thumbnail per row. Matching its exact selector (+ !important)
   is what it actually takes to override it — this was the real cause
   of the thumbnails rendering as ~20px slivers. */
.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100% !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  .woocommerce div.product div.images .flex-control-thumbs li {
    /* Exactly 4 thumbnails visible per screen-width, regardless of
       device size — 3 gaps of 10px between the 4 items, so each one
       is (100% - 30px) / 4 wide. A 5th+ thumbnail sits just off the
       right edge, reachable by swiping the row. */
    width: calc((100% - 30px) / 4) !important;
  }
}

/* Same specificity problem on the thumbnail images themselves — WC
   dims every non-active thumbnail to opacity:.5, which read as
   "half missing" on top of the sizing bug. */
.woocommerce div.product div.images .flex-control-thumbs li img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgba(58, 28, 1, 0.12);
  cursor: pointer;
  opacity: 1 !important;
  margin: 0 !important;
  transition: border-color 0.25s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  border-color: var(--color-secondary);
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 1px var(--color-secondary);
}

/* Prev/next arrows on the main image — same grid cell as
   .flex-viewport (2,1) so they sit centred over it, not over the
   thumbnail rail. pointer-events:none on the <ul> lets clicks on the
   image itself pass through everywhere except the two buttons. */
.flex-direction-nav {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

@media (max-width: 600px) {
  .flex-direction-nav {
    grid-column: 1;
  }
}

.flex-direction-nav li {
  margin: 0;
}

.flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid rgba(58, 28, 1, 0.1);
  border-radius: 50%;
  color: var(--color-main);
  font-size: 0;
  pointer-events: auto;
  transition: 0.25s ease;
}

.flex-direction-nav a:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.flex-direction-nav a.disabled {
  opacity: 0;
  pointer-events: none;
}

.flex-direction-nav a::before {
  content: '';
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.flex-direction-nav .flex-prev {
  left: 14px;
}

.flex-direction-nav .flex-prev::before {
  transform: rotate(-90deg);
}

.flex-direction-nav .flex-next {
  right: 14px;
}

.flex-direction-nav .flex-next::before {
  transform: rotate(90deg);
}

/* ----- Summary column ----- */
.woocommerce div.product .summary.entry-summary {
  padding-top: 4px;
}

.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  color: var(--color-main);
  margin: 0 0 var(--gap-xs);
  line-height: 1.25;
}

.woocommerce div.product .woocommerce-product-rating {
  margin-bottom: var(--gap-s);
}

.woocommerce div.product .star-rating span::before {
  color: var(--color-secondary);
}

.woocommerce div.product .summary p.price {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 1.6rem;
  color: var(--color-secondary);
  margin: 0 0 var(--gap-s);
}

.woocommerce div.product .summary p.price del {
  font-weight: var(--fw-regular);
  opacity: 0.5;
  color: var(--color-main);
  font-size: 1.1rem;
  margin-right: 8px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--color-main);
  opacity: 0.85;
  line-height: 1.75;
  margin-bottom: var(--gap-m);
}

.woocommerce div.product .woocommerce-product-details__short-description p {
  margin: 0 0 var(--gap-xs);
}

/* Quantity + Add to Cart + Wishlist row — the heart is hooked into
   the same <form class="cart"> right after the button (functions.php:
   woocommerce_after_add_to_cart_button), so it lands in this flex row
   for free. It reuses .sdw-wishlist-btn's shop-card circle look, just
   switched from absolute-over-image to sitting inline here. */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
  margin: var(--gap-m) 0;
}

/* WC's own clearfix pseudo-elements, meaningless now that this is a
   flex row instead of a floated layout. */
.woocommerce div.product form.cart::after,
.woocommerce div.product form.cart::before {
  display: none;
}

.woocommerce div.product .quantity {
  margin: 0;
}

/* Bordered -/+ stepper box (matches the same pattern used on the
   Cart page) instead of a bare number input with the browser's own
   spin arrows — sdw-qty-btn buttons are added by product-gallery.js,
   which also wraps the input in .sdw-qty-wrap. */
.woocommerce div.product .quantity.sdw-qty-wrap {
  display: inline-flex;
  align-items: stretch;
  height: 54px;
  border: 1px solid rgba(58, 28, 1, 0.15);
}

.woocommerce div.product .quantity.sdw-qty-wrap input.qty {
  border: none;
  border-left: 1px solid rgba(58, 28, 1, 0.1);
  border-right: 1px solid rgba(58, 28, 1, 0.1);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  height: 100%;
  width: 52px;
  text-align: center;
  background: var(--color-white);
  -moz-appearance: textfield;
}

.woocommerce div.product .quantity.sdw-qty-wrap input.qty::-webkit-inner-spin-button,
.woocommerce div.product .quantity.sdw-qty-wrap input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sdw-qty-btn {
  width: 38px;
  border: none;
  background: #fdfaf7;
  color: var(--color-main);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sdw-qty-btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.woocommerce div.product form.cart .button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
  border-radius: 0;
  height: 54px;
  padding: 0 40px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease;
}

.woocommerce div.product form.cart .button:hover {
  background-color: var(--color-main);
}

.woocommerce div.product form.cart .sdw-wishlist-btn {
  position: static;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  /* Square here only — the base .sdw-wishlist-btn rule (shop cards,
     etc.) stays circular everywhere else. */
  border-radius: 0;
}

@media (max-width: 480px) {
  .woocommerce div.product form.cart .button {
    flex: 1 1 auto;
  }
}

.woocommerce div.product .product_meta {
  margin: 0 !important;
  padding: 20px 0;
  border-top: 1px solid rgba(58, 28, 1, 0.08);
}

.woocommerce div.product .product_meta > span {
  display: block;
}

.woocommerce div.product .product_meta a {
  color: var(--color-secondary);
}

.sdw-payment-badge {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin: 0;
  border-top: 1px solid rgba(58, 28, 1, 0.08);
  padding-top: 20px;
}

.sdw-payment-badge__text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-main);
  opacity: 0.75;
  margin: 0;
}

.sdw-payment-badge__icons {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.sdw-payment-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(58, 28, 1, 0.12);
  border-radius: 4px;
  color: var(--color-main);
  background: #fdfaf7;
}

.sdw-payment-icon svg {
  width: 18px;
  height: 18px;
}

/* ----- Tabs (Description only for now — Reviews unset in
   functions.php) ----- */
/* Full-bleed section — breaks out of the page's centered content
   container so the background spans the entire viewport width, with
   the actual content pulled back in to the site's normal container
   width so it still lines up with everything above it. */
.woocommerce-tabs {
  margin-top: var(--gap-m);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  background: #fdfaf7;
  padding: var(--gap-l) 0;
}

/* Only one tab exists (Reviews is unset in functions.php) — a tab
   switcher with a single tab isn't a real switcher, and styling that
   lone tab button kept colliding with WC core's own ::before/::after
   decorations for its classic curved-tab shape (a full-width divider
   line plus corner notches baked into the markup, independent of any
   border property). Dropping the tab nav entirely instead: the panel
   below prints its own "Description" heading (WC does this by
   default), which now does the job the tab label used to. */
.woocommerce-tabs ul.tabs {
  display: none;
}

/* WC core has a MORE specific rule for this exact element —
   .woocommerce div.product .woocommerce-tabs .panel{margin:0 0
   2em;padding:0} — which was quietly winning over the plainer
   selector below regardless of source order, killing margin:auto
   (so the content never centered) and the horizontal padding. */
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gap-s);
  color: var(--color-main);
  font-size: 1rem;
  line-height: 1.8;
}

/* WC prints the panel's own "Description" heading first — styled as
   the section title (accent color + a short underline) instead of
   matching the site's generic page-heading scale, which read as
   oversized and disconnected from the body text at this width. */
.woocommerce-tabs .panel h2:first-of-type {
  margin: 0 0 var(--gap-s);
  padding-bottom: var(--gap-xs);
  border-bottom: 2px solid var(--color-secondary);
  display: inline-block;
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
}

.woocommerce-tabs .panel h2:not(:first-of-type) {
  font-size: 1.3rem;
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  margin: var(--gap-m) 0 var(--gap-xs);
}

.woocommerce-tabs .panel h3 {
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  margin: var(--gap-s) 0 var(--gap-xs);
}

.woocommerce-tabs .panel p {
  margin: 0 0 var(--gap-s);
}

.woocommerce-tabs .panel ul {
  list-style: disc;
  margin: 0 0 var(--gap-s);
  padding-left: 1.3em;
}

.woocommerce-tabs .panel ol {
  list-style: decimal;
  margin: 0 0 var(--gap-s);
  padding-left: 1.3em;
}

.woocommerce-tabs .panel a {
  color: var(--color-secondary);
  text-decoration: underline;
}

.woocommerce-tabs .panel li {
  margin-bottom: 6px;
}

.woocommerce-tabs .panel > *:last-child {
  margin-bottom: 0;
}


/* ----- Related / upsell products ----- */
.related.products > h2,
.upsells.products > h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--color-main);
  margin: var(--gap-l) 0 var(--gap-m);
}

/* ===== CART PAGE ===== */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap-l);
  align-items: start;
}

.woocommerce-cart form.woocommerce-cart-form {
  grid-column: 1;
  /* lets the table scroll sideways on narrow screens instead of
     squashing every column unreadably */
  overflow-x: auto;
}

.woocommerce-cart .cart-collaterals {
  grid-column: 2;
}

@media (max-width: 900px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-cart form.woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals { grid-column: 1; }
}

.woocommerce-cart table.shop_table {
  border: 1px solid rgba(58, 28, 1, 0.08);
  border-collapse: collapse;
  min-width: 560px;
}

.woocommerce-cart table.shop_table th {
  font-family: var(--font-heading);
  background: #fdfaf7;
  color: var(--color-main);
  padding: var(--gap-s);
  white-space: nowrap;
}

.woocommerce-cart table.shop_table td {
  padding: var(--gap-s);
  border-top: 1px solid rgba(58, 28, 1, 0.08);
}

.woocommerce-cart table.shop_table td.product-quantity input.qty {
  width: 60px;
  height: 44px;
  text-align: center;
  border: 1px solid rgba(58, 28, 1, 0.15);
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background: #fdfaf7;
  border: 1px solid rgba(58, 28, 1, 0.05);
  padding: var(--gap-m);
  width: 100%;
  float: none;
}

.woocommerce-cart .cart_totals h2 {
  font-size: var(--fs-h3);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  text-align: center;
}

/* ===== CART / CHECKOUT BLOCKS =====
   This site's Cart (and likely Checkout) page uses the newer
   WooCommerce Cart/Checkout block — not the classic [woocommerce_cart]
   shortcode table the rules above target. Totally different markup
   (.wc-block-cart / .wc-block-components-*), which is why none of
   the classic CSS above was taking effect. Class names below were
   confirmed against the actual installed WooCommerce 10.9.4 plugin's
   own cart.css/checkout.css. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
  font-family: var(--font-body);
  color: var(--color-main);
}

.wc-block-cart__totals-title,
.wc-block-components-totals-item__label,
.wc-block-checkout__title {
  font-family: var(--font-heading);
  color: var(--color-main);
  font-size: 1rem !important;
  font-weight: var(--fw-regular) !important;
}

/* Catches every totals row's right-hand value — whether it's a
   price ("₹168.00") or plain text ("Free") — so both render with
   the same font/size instead of only the money-amount spans being
   styled and plain text like "Free" falling back to WC's default. */
.wc-block-components-totals-item__value {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: 1.05rem !important;
  color: var(--color-main);
}

/* .wc-block-cart-items is a <table>, and WooCommerce's own core CSS
   forces "background:none!important" directly on that table — so
   the card styling has to go on its actual Gutenberg block wrapper
   instead, not the table itself. Same idea on the totals side: the
   card belongs on the outer "Order Summary" block, not on
   .wc-block-components-totals-wrapper (that class wraps each
   individual row — coupon/shipping/total — which is what was
   producing three separate disconnected boxes instead of one card). */
.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-order-summary-block {
  background: #fdfaf7;
  border: 1px solid rgba(58, 28, 1, 0.05);
  padding: var(--gap-m);
}

/* WC's own CSS puts a separate, differently-colored border-bottom
   directly on the order-summary block (plus a margin-bottom) — that
   fought with our own all-sides card border and was the mismatched
   line you saw near the top of the totals card. Make that edge
   match the rest of the card instead of standing out. */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
  border-bottom: 1px solid rgba(58, 28, 1, 0.05) !important;
  margin-bottom: 0 !important;
}

.wc-block-cart-items {
  background: none !important;
}

.wc-block-cart__sidebar {
  padding: 0;
}

.wc-block-cart-items__header {
  font-family: var(--font-heading);
  border-bottom: 1px solid rgba(58, 28, 1, 0.1);
  padding-bottom: var(--gap-xs);
}

.wc-block-cart-items__row {
  padding: var(--gap-s) 0;
}

/* Rows inside the totals card read as a clean list — no separate
   box per row, just a divider between them. */
.wc-block-components-totals-wrapper {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Every regular row (Free shipping, taxes, etc.) gets the same
   thin divider — the grand-total row's own gold accent border
   (set further down) replaces this rather than stacking with it. */
.wc-block-components-totals-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(58, 28, 1, 0.08);
}

.wc-block-components-totals-footer-item {
  border-bottom: none !important;
}

/* No border of its own — the coupon row already gets the same
   divider every other totals-item gets (below), so this used to
   double up into two visible lines stacked close together. */
.wc-block-components-panel {
  background: none;
  border: none !important;
  padding: 0;
  margin-bottom: 0;
}

/* Divider moved to the top of this row (see the compound
   .wc-block-components-totals-coupon.wc-block-components-panel
   rule further down) — no bottom border/spacing here anymore, or
   it would show on both edges at once. */
.wc-block-components-totals-coupon {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.wc-block-components-product-name {
  font-family: var(--font-heading);
  color: var(--color-main);
}

.wc-block-components-product-price,
.wc-block-components-formatted-money-amount {
  color: var(--color-secondary);
  font-weight: var(--fw-semibold) !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
}

.wc-block-cart-items__row .wc-block-components-formatted-money-amount {
  font-size: 1.1rem !important;
}

.wc-block-components-quantity-selector {
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
}

/* Primary action buttons: Proceed to Checkout, Place Order, Apply
   coupon. Deliberately scoped away from the quantity +/- buttons
   and remove-item link, which use their own separate classes. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button,
a.wc-block-components-button.wp-element-button,
button.wc-block-components-button.wp-element-button {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border-radius: 0 !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-totals-coupon__button:hover,
a.wc-block-components-button.wp-element-button:hover,
button.wc-block-components-button.wp-element-button:hover {
  background-color: var(--color-main) !important;
  color: var(--color-white) !important;
}

.wc-block-components-panel__button {
  font-family: var(--font-body);
  color: var(--color-main);
}

/* ---- Typography / component polish pass ---- */

.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-order-summary-block {
  padding: var(--gap-l);
}

/* Marcellus (the heading font) is only loaded at its normal weight
   — asking for 600 forced the browser to fake-bold it, which is
   what made "Cart totals" render as a chunky, mismatched sans-serif
   instead of the same elegant serif used everywhere else. */
.wc-block-cart__totals-title {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-regular) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 0 0 var(--gap-s) 0 !important;
  margin: 0 !important;
}

/* Both columns default to equal-height (flex stretch), which is
   what left a large empty gap under a short item list next to a
   taller totals card. Let each size to its own content instead. */
.wc-block-components-sidebar-layout {
  align-items: flex-start;
  flex-wrap: nowrap !important;
}

/* WC already spaces the two columns with a % padding-right on
   .wc-block-components-main sized to exactly fit inside 100% width
   alongside the sidebar. Adding a flex `gap` on top of that (tried
   last round) pushed the total past 100% and made the sidebar wrap
   onto its own line below instead of sitting beside the item list.
   Widen that existing padding instead — it's inside the same 65%
   box (border-box), so it can't overflow the layout. */
.wc-block-components-main {
  padding-right: var(--gap-l) !important;
  box-sizing: border-box;
}

/* The long product description reads as clutter in a cart line —
   name, price, qty and subtotal are all that's needed here. */
.wc-block-components-product-metadata__description {
  display: none;
}

/* "Product / Total" column headers get a quieter, more deliberate
   treatment instead of just looking like plain body text. */
.wc-block-cart-items__header th {
  text-transform: uppercase;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em;
  color: var(--color-main);
  opacity: 0.65;
  font-weight: var(--fw-medium) !important;
  font-family: var(--font-body) !important;
}

.wc-block-components-product-name {
  font-family: var(--font-heading) !important;
  font-size: 1.3rem !important;
}

/* Bigger, bordered product thumbnail instead of a small bare image.
   Only forcing width let the height stay whatever the image's own
   aspect ratio produced, which is why it still read as small/short
   — force a real square box and have the photo fill it. */
.wc-block-cart-item__image {
  width: 120px !important;
  flex: 0 0 120px !important;
}

.wc-block-cart-item__image a,
.wc-block-cart-item__image img {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover;
  border: 1px solid rgba(58, 28, 1, 0.08);
}

/* Title / price / qty stack — WC's own default gap here is a bare
   4px, which is what made it feel cramped and inconsistent next to
   everything else. */
.wc-block-cart-item__wrap {
  gap: var(--gap-xs) !important;
}

/* Quantity stepper — a real bordered control instead of the bare
   default, with a hover state on the +/- buttons. */
.wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  height: 42px;
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
  overflow: hidden;
}

.wc-block-components-quantity-selector__button {
  background: #fdfaf7;
  border: none;
  width: 34px;
  color: var(--color-main);
  font-size: 1.1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-block-components-quantity-selector__button:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.wc-block-components-quantity-selector__input {
  border: none;
  border-left: 1px solid rgba(58, 28, 1, 0.1);
  border-right: 1px solid rgba(58, 28, 1, 0.1);
  width: 42px;
  text-align: center;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--color-main);
}

.wc-block-cart-item__remove-link {
  color: var(--color-main);
  opacity: 0.6;
  transition: 0.2s ease;
}

.wc-block-cart-item__remove-link:hover {
  color: #b3261e;
  opacity: 1;
}

/* Coupon field + address/text inputs — match the border style used
   on every other input across the site. */
.wc-block-components-text-input input,
.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon__form input {
  border: 1px solid rgba(58, 28, 1, 0.15) !important;
  border-radius: 0 !important;
  height: 48px !important;
  font-family: var(--font-body) !important;
  background: var(--color-white) !important;
}

.wc-block-components-totals-coupon__button {
  height: 48px !important;
}

/* The final total gets real visual weight — an accent top border
   and a noticeably larger price — instead of blending into the
   other rows. */
.wc-block-components-totals-footer-item {
  border-top: 2px solid var(--color-secondary) !important;
  padding-top: var(--gap-s) !important;
  margin-top: 4px !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 1.05rem;
  /* fw-regular, not semibold — this label inherits the Marcellus
     heading font, which only has a normal weight; anything heavier
     gets synthetically (and badly) faked bold by the browser. */
  font-weight: var(--fw-regular);
}

.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
  font-size: 1.35rem !important;
  font-weight: var(--fw-semibold) !important;
}

@media (max-width: 600px) {
  .wp-block-woocommerce-cart-items-block,
  .wp-block-woocommerce-cart-order-summary-block {
    padding: var(--gap-m);
  }
}

/* ===== CHECKOUT PAGE ===== */

/* The Razorpay gateway's own "receipt" page (shown after placing an
   order that needs manual payment confirmation) prints these two
   buttons with plain IDs and no class at all — none of the site's
   .woocommerce button.button styling could ever reach them, so they
   rendered as bare, unstyled browser buttons. */
#btn-razorpay {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
  border-radius: 0;
  padding: 15px 40px;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#btn-razorpay:hover {
  background-color: var(--color-main);
}

#btn-razorpay-cancel {
  background: none;
  color: var(--color-main);
  border: 1px solid rgba(58, 28, 1, 0.2);
  border-radius: 0;
  padding: 15px 40px;
  margin-left: var(--gap-xs);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#btn-razorpay-cancel:hover {
  background-color: rgba(58, 28, 1, 0.05);
}

#msg-razorpay-success {
  background-color: #fdfaf7 !important;
  color: var(--color-main) !important;
  border-top-color: var(--color-secondary) !important;
  font-family: var(--font-body);
}

/* The pay-for-order "receipt" page (order_details list + "Thank you,
   click below to pay" + the two buttons above) sat flush left, at
   the very top of a huge otherwise-empty page, with the default
   .section 60-100px top padding on top of an already-tall hero
   banner — cut that padding here (same pattern as the single-product
   page) and give the actual content its own centered, bordered card
   like every other WC form on this site (login, reset-password,
   etc.) instead of bare unstyled text floating in whitespace. */
/* Scoped to .woocommerce-order-pay specifically (WC's own distinct
   body class for this exact "pay for an existing order" receipt
   state), NOT the shared .woocommerce-checkout class — that class is
   also present on the normal billing/payment checkout form, which is
   a completely different layout on the same page slug. Using the
   broader class here would have also squeezed the regular checkout
   form's spacing and applied these p/ul rules there too; the two
   states needed to stay fully independent. */
/* Main checkout form (billing/shipping + order review) — explicitly
   :not(.woocommerce-order-pay) so this can never overlap with the
   receipt-page rule below, even though both share .woocommerce-checkout. */
.woocommerce-checkout:not(.woocommerce-order-pay):not(.woocommerce-order-received) .section.sdw-shop-wrap {
  padding-top: 50px;
  padding-bottom: 50px;
}

@media (max-width: 1024px) {
  .woocommerce-checkout:not(.woocommerce-order-pay):not(.woocommerce-order-received) .section.sdw-shop-wrap {
    padding-top: 0;
    padding-bottom: 10px;
  }
}

.woocommerce-order-pay .section.sdw-shop-wrap {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

@media (max-width: 1024px) {
  .woocommerce-order-pay .section.sdw-shop-wrap {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }
}

.woocommerce-order-pay .woocommerce > ul.order_details {
  max-width: 700px;
  margin: 0 auto var(--gap-s);
  border: 1px solid rgba(58, 28, 1, 0.15);
  padding: var(--gap-xs) var(--gap-s);
  list-style: none;
}

.woocommerce-order-pay .woocommerce > ul.order_details li {
  font-family: var(--font-body);
}

.woocommerce-order-pay .woocommerce > p {
  max-width: 600px;
  margin: 0 auto var(--gap-xs);
  text-align: center;
}

.woocommerce-order-pay .woocommerce > p:has(#btn-razorpay) {
  max-width: 600px;
  margin: var(--gap-xs) auto 0;
  text-align: center;
}

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap-l);
  align-items: start;
}

.woocommerce-checkout form.checkout > #customer_details {
  grid-column: 1;
}

.woocommerce-checkout form.checkout > #order_review,
.woocommerce-checkout form.checkout > .woocommerce-checkout-review-order {
  grid-column: 2;
}

@media (max-width: 900px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > #order_review,
  .woocommerce-checkout form.checkout > .woocommerce-checkout-review-order {
    grid-column: 1;
  }
}

.woocommerce-checkout .col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m);
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  flex: 1 1 260px;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: #fdfaf7;
  border: 1px solid rgba(58, 28, 1, 0.05);
  padding: var(--gap-m);
}

.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea {
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--font-body);
  background: var(--color-white);
  width: 100%;
}

.woocommerce-checkout #order_review table.shop_table {
  border: 1px solid rgba(58, 28, 1, 0.08);
  min-width: 0;
}

.woocommerce-checkout #place_order {
  width: 100%;
}

/* ===== CHECKOUT BLOCK =====
   Checkout uses the same WooCommerce Checkout block architecture as
   the Cart block above (.wc-block-components-sidebar-layout already
   handles the two-column split via the shared Cart/Checkout rules
   earlier in this file). Class names confirmed against the actual
   installed WooCommerce 10.9.4 plugin's own checkout.css. */
/* WC's own default gives this block a rounded 5px border regardless
   — !important to actually kill it, and less padding than before
   (var(--gap-l) read as way too much empty air around the content). */
.wp-block-woocommerce-checkout-fields-block,
.wp-block-woocommerce-checkout-order-summary-block {
  background: #fdfaf7;
  border: none !important;
  border-radius: 0 !important;
  /* !important: WC's own mobile @container rule
     (.wc-block-components-sidebar-layout .wc-block-components-main)
     is a higher-specificity compound selector that zeroes this same
     padding out below ~699px, which is why Contact
     information/Shipping address were touching the screen edge. */
  padding: var(--gap-m) !important;
}

/* WC adds its own 16px left/right padding on every coupon/totals
   row on top of the card's own padding above — doubling the inset
   and pushing everything inward. Remove it since the card already
   provides that spacing. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The actual "Order summary" heading — a different, more specific
   class than .wc-block-checkout__title, which is why it was still
   showing WC's own 22px/weight-500 default (and, on our Marcellus
   font which only has a normal weight, rendering as fake-bold). */
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-regular) !important;
  margin: 0 0 var(--gap-s) 0 !important;
  color: var(--color-main);
}

/* WooCommerce also renders a second, near-identical "Order summary"
   card directly above the Place Order button — WC's own CSS hides
   it above 700px via a @container query, but nothing hides it on
   mobile, so the collapsible one at the top (styled above) and this
   one both show at once. Drop this duplicate entirely; the one at
   the top already covers every screen size on its own. */
.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
  display: none !important;
}

/* Below ~699px WC turns the sidebar's "Order summary" heading into a
   collapsible accordion — border-framed, clickable, with a running
   total + chevron, content hidden until tapped open. That's WC's own
   @container rule, not ours, and it's what made mobile look
   different from desktop (space/border/font all changed). Force the
   plain, always-expanded desktop treatment at every width instead —
   heading only, no chrome, content always visible. */
.wc-block-components-checkout-order-summary__title,
.wc-block-components-checkout-order-summary__title.is-open,
.wc-block-components-checkout-order-summary__title:focus,
.wc-block-components-checkout-order-summary__title:focus-visible {
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  cursor: default !important;
  outline: none !important;
  box-shadow: none !important;
}

.wc-block-components-checkout-order-summary__title-icon,
.wc-block-components-checkout-order-summary__title-price {
  display: none !important;
}

.wc-block-components-checkout-order-summary__content,
.wc-block-components-checkout-order-summary__content.is-open {
  display: block !important;
  border-bottom: none !important;
}

.wc-block-components-checkout-step {
  border: none;
}

/* The numbered-step connector line reads as clutter — drop it. */
.wc-block-components-checkout-step__content:before {
  border-left: none !important;
}

.wc-block-components-checkout-step__title {
  font-family: var(--font-heading) !important;
  font-size: 1.2rem !important;
  font-weight: var(--fw-regular) !important;
  color: var(--color-main);
}

/* Inputs: WC's default is a heavier Material-style outline — swap
   it for the same thin, square-cornered line used on every other
   input across the site. Covers every text/select/textarea in the
   checkout, not just the ones inside the billing/shipping address
   form (order-note textarea, coupon field, etc. all matched too). */
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-checkout select,
.wc-block-checkout textarea,
.wc-block-components-address-form select,
.wc-block-components-address-form textarea,
.wc-blocks-components-select__select,
.wc-block-components-country-input .components-combobox-control__input,
.wc-block-components-state-input .components-combobox-control__input {
  border: 1px solid rgba(58, 28, 1, 0.15) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  background: var(--color-white) !important;
}

/* Floating field labels ("Email address", "First name"...) and the
   select-box labels ("Country/Region", "State") default to WC's own
   16px/13px — a size or two too large next to the rest of the form.
   The active/filled state already shrinks the text-input label via
   its own `scale(0.82)` transform, so lowering this base size keeps
   that proportion instead of fighting it. */
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
}

/* Kill the browser/WC default blue focus ring — replace it with
   just our own border color change, no outline or glow. */
.wc-block-checkout input:focus,
.wc-block-checkout select:focus,
.wc-block-checkout textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-address-form select:focus,
.wc-block-components-address-form textarea:focus,
.wc-block-components-country-input .components-combobox-control__input:focus,
.wc-block-components-state-input .components-combobox-control__input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-secondary) !important;
}

/* WC gives the Terms+Place Order actions block a flat 36px
   margin-bottom unconditionally (no media query) — remove it on
   every screen size. */
.wc-block-checkout__actions.wp-block-woocommerce-checkout-actions-block {
  margin-bottom: 0 !important;
}

.wc-block-checkout__shipping-method-option,
.wc-block-components-radio-control__input {
  border-color: rgba(58, 28, 1, 0.15) !important;
}

/* A little less top/bottom air inside each shipping-method option
   box — reduced, not stripped out. */
.wc-block-checkout__shipping-method-option {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Product names read oversized inside the compact order-summary
   sidebar specifically (the larger size is correct on the actual
   Cart page's item rows — this only tones it down here). */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
  font-size: 0.95rem !important;
}

/* The unit price under the product name was bigger than the title
   above it — shrink it to match instead of standing out. The real
   class here is __individual-prices (order-summary-item specific),
   not the generic .wc-block-components-product-price used
   elsewhere — that's why the earlier attempt didn't take. */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__individual-prices .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-price,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-metadata .wc-block-components-formatted-money-amount {
  font-size: 0.9rem !important;
}

/* Hide the per-line total (qty × price) shown top-right of each
   row — only the unit price under the name should be visible. */
.wc-block-components-order-summary-item__total-price {
  display: none !important;
}

/* Place Order — matches the height/weight of every other primary
   button on the site instead of WC's own default sizing. */
.wc-block-components-checkout-place-order-button {
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 40px !important;
  font-size: 1rem !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
}

@media (max-width: 600px) {
  .wp-block-woocommerce-checkout-fields-block,
  .wp-block-woocommerce-checkout-order-summary-block {
    padding: var(--gap-m);
  }
}

/* ===== MY ACCOUNT =====
   WooCommerce's my-account.php template has NO wrapping element
   around nav + content — they're plain siblings, styled by WC core
   itself with float:left/right + %-widths. There's no shared grid/flex
   parent to target, so the 2-column layout has to be built the same
   way WC already does it: float the two siblings directly, with a
   clearfix on their actual parent (.sdw-shop-main) so it doesn't
   collapse to zero height around them. */
.woocommerce-account .sdw-shop-main::after {
  content: "";
  display: table;
  clear: both;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  float: left;
  width: 240px;
  background: #fdfaf7;
  border: 1px solid rgba(58, 28, 1, 0.05);
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: right;
  width: calc(100% - 240px - var(--gap-l));
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    margin-top: var(--gap-m);
  }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid rgba(58, 28, 1, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 14px 20px;
  font-family: var(--font-heading);
  color: var(--color-main);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--color-secondary);
}

.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
.woocommerce-account .woocommerce-MyAccount-content form select,
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text,
.woocommerce form.woocommerce-ResetPassword input.input-text,
.woocommerce form.woocommerce-EditAccountForm input.input-text {
  width: 100%;
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--font-body);
  background: #fff;
}

/* Address list: WC prints the section heading as an <h2> (not h3 —
   the selector below never actually matched it) immediately followed
   by the "Edit"/"Add" link with no layout between them, so they ran
   together on one line with no visual separation.

   WC core also sets ::before/::after on this exact element as a
   float-based clearfix (content:" ";display:table, for its own
   default h3{float:left}/.edit{float:right} layout) — switching this
   to flexbox left those two generated boxes as extra flex items
   inside the row instead. table-display content stretches to its own
   default row height, taller than the text next to it, which is what
   read as a plain white block above the address (the parent's cream
   background doesn't extend there because this header has never had
   its own background — that pseudo-element box was just tall enough
   to visually read as one). Killing the pseudo-elements removes it. */
.woocommerce-account .addresses .woocommerce-Address-title,
.woocommerce-account .addresses .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  margin: 0;
  padding: 0 0 var(--gap-xs);
  background: transparent;
  border-bottom: 1px solid rgba(58, 28, 1, 0.08);
}

.woocommerce-account .addresses .woocommerce-Address-title::before,
.woocommerce-account .addresses .woocommerce-Address-title::after,
.woocommerce-account .addresses .title::before,
.woocommerce-account .addresses .title::after {
  content: none;
  display: none;
}

.woocommerce-account .addresses .woocommerce-Address-title h2,
.woocommerce-account .addresses .title h2 {
  float: none;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
  margin: 0;
}

.woocommerce-account .addresses .woocommerce-Address-title a.edit,
.woocommerce-account .addresses .title a.edit {
  float: none;
  flex-shrink: 0;
  display: inline-block;
  background-color: var(--color-secondary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 0;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: background-color 0.3s ease;
}

.woocommerce-account .addresses .woocommerce-Address-title a.edit:hover,
.woocommerce-account .addresses .title a.edit:hover {
  background-color: var(--color-main);
}

/* ----- Edit account: "Password change" fieldset ----- */
.woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 0;
  margin: var(--gap-m) 0 0;
}

.woocommerce-EditAccountForm fieldset legend {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
  color: var(--color-main);
  padding: 0;
  margin-bottom: var(--gap-s);
}

/* ----- Dashboard greeting / address / account-details content ----- */
.woocommerce-account .woocommerce-MyAccount-content p {
  line-height: 1.8;
  margin: 0 0 var(--gap-s);
}

/* :not(.button) — without it, this matched the order-actions "View"
   button too (same specificity as .woocommerce a.button, but this
   rule loads later in the file so it was winning), turning its text
   the same orange as its own background and making it look blank. */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--color-secondary);
}

/* ----- Login / Register / Lost password / Reset password forms -----
   All share the same field markup (.form-row > label + input.input-
   text), so one set of rules covers login, register, my-account >
   account-details, and both password-reset screens. */
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  color: var(--color-main);
}

.woocommerce form .form-row .required {
  color: var(--color-secondary);
  text-decoration: none;
}

.woocommerce form .form-row {
  margin-bottom: var(--gap-s);
}

/* Login + Register side by side (WC wraps both in .col2-set when
   registration is enabled). display:block here means the actual
   side-by-side split comes entirely from WC core's own
   float:left/right;width:48% on .col-1/.col-2 (woocommerce-layout.css)
   — since gap has no effect without a flex/grid parent, the visible
   gap between the two columns is WC's own leftover ~4% (100-48-48),
   not something set here. On mobile that float needs to be
   explicitly undone (float doesn't respond to flex-direction, since
   there's no flex parent), or the two columns stay squeezed
   side-by-side wrap the wrong way. */
@media (max-width: 768px) {
  .woocommerce-account .col2-set .col-1,
  .woocommerce-account .col2-set .col-2 {
    float: none;
    width: 100%;
  }

  .woocommerce-account .col2-set .col-2 {
    margin-top: var(--gap-m);
  }
}

.woocommerce-account .col2-set h2,
.woocommerce form.woocommerce-ResetPassword h2,
.woocommerce-account .woocommerce-MyAccount-content form h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  color: var(--color-main);
  margin: 0 0 var(--gap-s);
}

/* WC core's default form.login/form.register box: a gray, rounded,
   2em-margined border (#cfc8d8, 5px radius) that didn't match the
   site's square, thin, brand-colored boxes used everywhere else. */
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
  box-shadow: none;
  padding: var(--gap-m);
  margin: 0;
}

/* Lost-password AND reset-password (set new password) share this
   exact same class — one card style covers both screens. */
.woocommerce form.woocommerce-ResetPassword {
  width: 100%;
  border: 1px solid rgba(58, 28, 1, 0.15);
  border-radius: 0;
  box-shadow: none;
  padding: var(--gap-m);
  margin: 0;
}

.woocommerce form.woocommerce-ResetPassword > p:first-child {
  margin-top: 0;
  line-height: 1.6;
}

.woocommerce form.woocommerce-ResetPassword .form-row {
  margin-bottom: var(--gap-s);
}

.woocommerce form.woocommerce-ResetPassword .woocommerce-Button {
  margin-top: var(--gap-xs);
}

/* WC core also floats the submit button
   (.woocommerce-form-login__submit{float:left}) with nothing to
   clear it — the <p class="form-row"> wrapping it (and the form
   itself) collapsed to the height of the non-floated checkbox label
   next to it, so "Lost your password?" (which comes right after in
   the markup) rendered as if it had spilled outside the border
   instead of sitting inside it. Un-floating the button and laying
   the row out with flex instead fixes both the visual order (DOM has
   checkbox before button) and the collapsed height. */
.woocommerce-form-login__submit {
  float: none !important;
  margin-right: 0 !important;
  display: block;
}

.woocommerce .col2-set::after,
.woocommerce .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce-page .col2-set::before {
  display: none;
}

.woocommerce-button.button.woocommerce-form-login__submit {
  display: block;
  margin-top: 20px;
}

.woocommerce form.login p.form-row:has(.woocommerce-form-login__rememberme) {
  display: block;
  gap: var(--gap-s);
}

.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit {
  margin-top: 20px;
}

/* Equal-height Login/Register boxes — scoped to :not(.addresses) so
   the Addresses list (which shares this same col2-set class) stays
   the plain display:block you asked for earlier; only login/register
   switch to flex here so both boxes stretch to match whichever one
   has more content. */
.woocommerce-account .col2-set:not(.addresses) {
  display: flex;
  align-items: stretch;
  gap: var(--gap-l);
}

.woocommerce-account .col2-set:not(.addresses) .col-1,
.woocommerce-account .col2-set:not(.addresses) .col-2 {
  float: none;
  width: 50%;
}

.woocommerce-account .col2-set:not(.addresses) form.login,
.woocommerce-account .col2-set:not(.addresses) form.register {
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .woocommerce-account .col2-set:not(.addresses) {
    flex-direction: column;
  }

  .woocommerce-account .col2-set:not(.addresses) .col-1,
  .woocommerce-account .col2-set:not(.addresses) .col-2 {
    width: 100%;
  }
}

.woocommerce-form-login__rememberme,
.woocommerce-form-register__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  cursor: pointer;
}

.woocommerce-form-login__rememberme input,
.woocommerce-form-register__rememberme input {
  width: auto;
}

.woocommerce a.lost_password,
.woocommerce .lost_password a {
  display: inline-block;
  margin-top: var(--gap-xs);
  color: var(--color-secondary);
  text-decoration: underline;
}

/* ----- Notices (login errors, "password reset email sent", etc.) -----
   WC core also sets its own border-top (purple by default, then green
   for .woocommerce-message / blue for .woocommerce-info specifically)
   — untouched by the rule below since it only ever set border-left,
   so those core colors were still showing up top, clashing with our
   own left accent. Zeroing border-top here removes them, keeping a
   single, consistent accent bar. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0 0 var(--gap-m);
  padding: 14px 20px;
  border-top: none;
  border-left: 3px solid var(--color-secondary);
  background: #fdfaf7;
  color: var(--color-main);
  font-family: var(--font-body);
  outline: none;
}

/* WordPress/WC gives this notice tabindex="-1" and JS-focuses it on
   page load so screen readers announce it — being programmatically
   focused triggers the browser's own default blue focus ring, which
   was never addressed since the earlier focus-reset rules only ever
   covered inputs/selects/textareas, not this element. */
.woocommerce-error:focus,
.woocommerce-message:focus,
.woocommerce-info:focus {
  outline: none;
  box-shadow: none;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  list-style: none;
}

.woocommerce-error {
  border-left-color: #b3261e;
  margin-bottom: 0;
}

/* WC core prints an icon glyph via ::before, absolutely positioned
   assuming the notice's own left padding reserves room for it
   (padding:1em 2em 1em 3.5em by default) — since the padding rule
   above replaced that with a plain 14px 20px on all sides, the icon
   now overlaps directly on top of the first word instead of sitting
   beside it. Removing it entirely (rather than trying to re-carve
   out matching padding) also gets rid of the icon-font-load fallback
   glyph that was rendering as a stray blue-bordered box. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  display: none;
}

.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
  float: none;
  display: inline-block;
  margin-top: var(--gap-xs);
}

@media (max-width: 480px) {
  .woocommerce-error .button,
  .woocommerce-message .button,
  .woocommerce-info .button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ----- Orders list + single order-detail tables -----
   Both share the shop_table base class, so shared spacing/border
   rules cover the orders list, the order-detail line-items table,
   and the totals rows underneath it. WC's default padding is quite
   tight (~9px), which read as cramped next to the rest of the
   account area's spacing. Also applies on the order-received
   "thank you" page — that page has its own body class
   (woocommerce-order-received), not woocommerce-account, so it's
   listed here explicitly rather than assumed covered. */
.woocommerce-account table.shop_table,
.woocommerce-order-received table.shop_table {
  border: 1px solid rgba(58, 28, 1, 0.1);
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td,
.woocommerce-order-received table.shop_table th,
.woocommerce-order-received table.shop_table td {
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid rgba(58, 28, 1, 0.08);
}

.woocommerce-account table.shop_table tr:last-child td,
.woocommerce-order-received table.shop_table tr:last-child td {
  border-bottom: none;
}

/* Orders list "Actions" cell: WC prints each action (Pay/View/
   Cancel) as a plain inline <a class="button">, one right after the
   other with no wrapper or gap in the markup — they rendered as one
   fused block instead of separate buttons. */
.woocommerce-account table.my_account_orders td.woocommerce-orders-table__cell-order-actions,
.woocommerce-account table.my_account_orders td.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.woocommerce-account table.shop_table th,
.woocommerce-order-received table.shop_table th {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
}

/* WC core sets margin-bottom:2em on .woocommerce-customer-details
   itself (not on any child), scoped to the order-received "thank
   you" page only — order-pay's own version of this row already has
   its own spacing rules, kept separate. */
.woocommerce-order-received .woocommerce-customer-details {
  margin-bottom: 0;
}

/* Space below the "Thank you for shopping with us..." message,
   before the order-info list starts. */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  margin: 0 0 var(--gap-m);
}

/* The Order number/Date/Email/Total/Payment method row prints as a
   bare <ul>. A grid/columns layout here kept breaking (long email
   addresses overflowed into the next column, "Payment method"'s
   value wrapped to two lines and threw the row height off) — a
   simple stacked list has no columns to overflow, so it can't break
   that way regardless of how long any one value is.

   IMPORTANT: this <ul> sits inside an extra <div class="woocommerce-
   order"> wrapper between .woocommerce and itself — an earlier rule
   used a direct-child (>) selector assuming it was one level down,
   which never matched anything because of that extra wrapper. Using
   a plain descendant selector instead (no >) so it matches
   regardless of the exact nesting depth. */
.woocommerce-order-received .woocommerce ul.order_details {
  background: #fdfaf7;
  border: 1px solid rgba(58, 28, 1, 0.15);
  margin: 0 0 var(--gap-m);
  padding: 0;
  list-style: none;
}

.woocommerce-order-received .woocommerce ul.order_details li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-m);
  float: none;
  border: none;
  border-bottom: 1px solid rgba(58, 28, 1, 0.1);
  padding: 14px var(--gap-m);
  margin: 0;
  font-family: var(--font-body);
  text-transform: none;
  font-size: 0.9rem;
  color: var(--color-main);
  opacity: 0.75;
}

.woocommerce-order-received .woocommerce ul.order_details li:last-child {
  border-bottom: none;
}

.woocommerce-order-received .woocommerce ul.order_details li strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--color-main);
  opacity: 1;
  text-align: right;
}

.woocommerce-order-details__title {
  font-family: var(--font-heading);
  color: var(--color-main);
  margin-bottom: var(--gap-s);
}

/* Order-view page's billing/shipping boxes use a completely different
   template (order-details-customer.php: .woocommerce-column /
   .woocommerce-column__title) from the my-account address list
   (.woocommerce-Address) above — a different set of classes that had
   no rules at all yet, not the same element reused. */
.woocommerce-column {
  box-sizing: border-box;
  box-shadow: none;
  border: 1px solid rgba(58, 28, 1, 0.1);
  background: #fdfaf7;
  padding: var(--gap-s);
}

.woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses {
  display: block;
}

/* margin-bottom removed here, scoped to the order-received page only
   — this exact class combination also appears on the order-pay
   receipt page, which keeps its own spacing untouched. */
.woocommerce-order-received .woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses {
  margin-bottom: 0;
}

/* Its children (.woocommerce-column) are still float:left/right;
   width:48% from WC core — display:block above has no clearfix of
   its own, so this wrapper collapsed to zero height and whatever
   came right after it (the footer) rendered overlapping the floated
   boxes instead of below them. */
.woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses::after {
  content: "";
  display: table;
  clear: both;
}

.woocommerce-column__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--gap-xs);
}

.woocommerce-column address {
  font-style: normal;
  line-height: 1.6;
}

.woocommerce .woocommerce-customer-details address {
  border: unset;
  padding: 0;
}

/* ----- Addresses list: give each address its own bordered card,
   matching the box the order-detail page already uses for billing/
   shipping — the my-account list version had no border at all. ----- */
/* Flex column with an explicit small gap between the title row and
   the address text — instead of margins stacked on each piece
   separately, which is what left a large, hard-to-account-for blank
   gap between them. Explicit box-shadow:none/height:auto since this
   element is also WC's own float:left;width:48% .col-1/.col-2 (same
   div, both classes) — ruling out any inherited box-shadow or height
   from that. */
.woocommerce-account .woocommerce-Address {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  height: auto;
  min-height: 0;
  box-shadow: none;
  border: 1px solid rgba(58, 28, 1, 0.1);
  background: #fdfaf7;
  padding: var(--gap-s);
}

.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  line-height: 1.6;
  margin: 0;
}

/* ----- Full mobile pass ----- */
@media (max-width: 768px) {
  .woocommerce-account .addresses.col2-set {
    display: block;
  }

  .woocommerce-account .addresses .col-1,
  .woocommerce-account .addresses .col-2 {
    width: 100%;
    margin-bottom: var(--gap-m);
  }

  .woocommerce-account table.shop_table th,
  .woocommerce-account table.shop_table td,
  .woocommerce-order-received table.shop_table th,
  .woocommerce-order-received table.shop_table td {
    padding: 12px 14px;
    font-size: 0.9rem;
  }

  .woocommerce-account table.shop_table_responsive tr {
    display: block;
  }
}

@media (max-width: 480px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: 12px 16px;
    font-size: 0.95rem;
  }

  .woocommerce-account .woocommerce-Address {
    padding: var(--gap-xs);
  }
}

/* ===== SIDE CART WOOCOMMERCE PLUGIN (xootix) ===== */
/* Hide the plugin's own floating basket button — our header cart
   icon (class xoo-wsc-cart-trigger) opens the drawer instead. You
   can also turn this off from the plugin's Style settings tab. */
.xoo-wsc-basket,
.xoo-wsc-basket[style*='block'] {
  display: none !important;
}

.xoo-wsc-markup, .xoo-wsc-markup * {
  font-family: var(--font-body);
}

.xoo-wsc-header {
  background: var(--color-main);
  color: var(--color-white);
}

.xoo-wsc-header .xoo-wsch-text,
.xoo-wsc-header svg,
.xoo-wsc-header path {
  color: var(--color-white);
  stroke: var(--color-white);
}

.xoo-wsc-product .woocommerce-Price-amount,
.xoo-wsc-ft-amt-total {
  color: var(--color-secondary);
}

/* Real classes rendered on the drawer's Continue/View Cart/Checkout
   buttons: xoo-wsc-ft-btn xoo-wsc-btn xoo-wsc-ft-btn-{continue|cart|checkout}
   The plugin's own admin-configured colors come from an inline
   <style> attached to its own stylesheet handle — sdw-woocommerce
   is registered depending on that handle (see functions.php) so it
   always prints after it, and !important covers the rest. */
.xoo-wsc-container a.xoo-wsc-ft-btn,
.xoo-wsc-container .xoo-wsc-btn,
.xoo-wsc-ft-btn-continue,
.xoo-wsc-ft-btn-cart,
.xoo-wsc-ft-btn-checkout {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.xoo-wsc-container a.xoo-wsc-ft-btn:hover,
.xoo-wsc-container .xoo-wsc-btn:hover,
.xoo-wsc-ft-btn-continue:hover,
.xoo-wsc-ft-btn-cart:hover,
.xoo-wsc-ft-btn-checkout:hover {
  background-color: var(--color-main) !important;
  color: var(--color-white) !important;
}

.xoo-wsc-ft-btn-checkout {
  background-color: var(--color-main) !important;
}

.xoo-wsc-ft-btn-checkout:hover {
  background-color: var(--color-secondary) !important;
}

.xoo-wsc-empty-cart a.xoo-wsc-btn {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

.xoo-wsc-product .xoo-wsc-smr-del svg,
.xoo-wsc-header svg path {
  stroke: currentColor;
}

/* Drop the extra drawer content the user doesn't want: the trust-
   badge row (Secure Checkout/Fast Shipping/Easy Returns), the
   "Shipping, taxes… calculated at checkout" footer text, the
   "Continue Shopping" button, the "View Cart" button (the Cart page
   itself is now skipped entirely — see functions.php), and the
   price shown inside Checkout. */
.xoo-wsc-info-cont,
.xoo-wsc-footer-txt,
.xoo-wsc-ft-btn-continue,
.xoo-wsc-ft-btn-cart {
  display: none !important;
}

.xoo-wsc-ft-btn-checkout .woocommerce-Price-amount {
  display: none !important;
}

/* Only "Checkout" remains (Continue/View Cart hidden above), so
   this is a single full-width column now — no more row-stacking
   concerns from the plugin's own dynamic grid setting. */
.xoo-wsc-ft-buttons-cont,
.xoo-wsc-container .xoo-wsc-ft-buttons-cont,
.xoo-wsc-footer .xoo-wsc-ft-buttons-cont {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.xoo-wsc-pattern-card,
.xoo-wsc-img-col img,
.xoo-wsc-img-col,
.xoo-wsc-sm-back-cont {
  border: none !important;
}

/* Coupon panel — the expand/collapse behaviour is React state, not
   CSS, so assets/js/checkout.js auto-clicks it open on load and
   keeps it open. Here we just make it look like a plain, permanent
   section instead of a clickable accordion (no chevron, no pointer
   cursor). */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  cursor: default !important;
  pointer-events: none !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button svg {
  display: none !important;
}

.wc-block-components-order-summary.is-large {
  padding: 0 !important;
}

/* Compound selector, not descendant — the real DOM has both
   classes on the SAME element (<div class="wc-block-components-
   totals-coupon wc-block-components-panel">), so the space-
   separated version never matched anything. Divider now sits above
   the coupon row (separating it from the product list) instead of
   below it. */
.wc-block-components-totals-coupon.wc-block-components-panel {
  margin: 0 !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(58, 28, 1, 0.08) !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block {
  border-top: unset !important;
}

/* ===== FOOTER ===== */
footer {
  padding-top: 50px;
}