/* ============================================================
   GMS Custom Styles
   ============================================================ */

/* --- Design Tokens --- */
:root {
  --gms-red: #E63946;
  --gms-red-dark: #C5303C;
  --gms-ink: #1A1A1A;
  --gms-title: #242424;
  --gms-text: #555;
  --gms-bg: #FFF;
  --gms-bg-soft: #F7F7F7;
  --gms-line: #ECECEC;
  --gms-radius: 10px;
  --gms-radius-sm: 6px;
  --gms-shadow: 0 4px 16px rgba(0,0,0,.08);
  --gms-ease: 200ms cubic-bezier(.4,0,.2,1);
}

/* ==========================================================
   1. DISCOUNT POPUP
   ========================================================== */
.gms-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.gms-popup-overlay.gms-visible {
  opacity: 1;
  visibility: visible;
}
.gms-popup {
  background: var(--gms-bg);
  border-radius: var(--gms-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  max-width: 420px;
  width: 90%;
  padding: 40px 32px 32px;
  text-align: center;
  position: relative;
  transform: translateY(20px) scale(.96);
  transition: transform .3s ease;
  font-family: 'Lexend Deca', sans-serif;
}
.gms-popup-overlay.gms-visible .gms-popup {
  transform: translateY(0) scale(1);
}
.gms-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--gms-text);
  line-height: 1;
  padding: 4px;
  transition: color var(--gms-ease);
}
.gms-popup-close:hover { color: var(--gms-ink); }
.gms-popup-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.gms-popup h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--gms-title);
  margin: 0 0 8px;
}
.gms-popup p {
  font-size: 14px;
  color: var(--gms-text);
  margin: 0 0 20px;
  line-height: 1.5;
}
.gms-coupon-code {
  display: inline-block;
  background: var(--gms-bg-soft);
  border: 2px dashed var(--gms-red);
  border-radius: var(--gms-radius-sm);
  padding: 10px 24px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gms-red);
  margin-bottom: 20px;
  user-select: all;
}
.gms-popup-cta {
  display: inline-block;
  background: var(--gms-red);
  color: #FFF !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: var(--gms-radius-sm);
  text-decoration: none;
  transition: background var(--gms-ease);
  letter-spacing: .5px;
}
.gms-popup-cta:hover {
  background: var(--gms-red-dark);
}

/* ==========================================================
   2. DIRECT MESSAGE BUTTON
   ========================================================== */
.gms-dm-wrap {
  position: fixed;
  bottom: 64px;
  right: 24px;
  z-index: 9999;
  font-family: 'Lexend Deca', sans-serif;
}
.gms-dm-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gms-red);
  color: #FFF;
  border: none;
  cursor: pointer;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(230,57,70,.35);
  transition: background var(--gms-ease), transform var(--gms-ease);
  position: relative;
  z-index: 2;
}
.gms-dm-toggle:hover {
  background: var(--gms-red-dark);
  transform: scale(1.07);
}
.gms-dm-toggle svg {
  width: 26px;
  height: 26px;
  fill: #FFF;
  transition: transform .25s ease;
}
.gms-dm-wrap.gms-dm-open .gms-dm-toggle svg {
  transform: rotate(45deg);
}
.gms-dm-links {
  position: absolute;
  bottom: 68px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.gms-dm-wrap.gms-dm-open .gms-dm-links {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.gms-dm-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gms-bg);
  border-radius: 28px;
  padding: 10px 18px 10px 12px;
  box-shadow: var(--gms-shadow);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--gms-ink);
  white-space: nowrap;
  transition: box-shadow var(--gms-ease), transform var(--gms-ease);
}
.gms-dm-links a:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.gms-dm-links a svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ==========================================================
   3. COLOR COMBINATION FIX — white text on red buttons
   ========================================================== */
.btn-color-primary,
.single_add_to_cart_button,
.button.add_to_cart_button,
.add-to-cart-loop,
.checkout-button,
.woocommerce .button.alt,
.woocommerce .button.checkout,
[class*="btn-color-primary"],
.wp-block-wd-button.btn-color-primary,
a.wp-block-wd-button.btn-color-primary {
  --btn-accented-color: #FFF !important;
  --btn-accented-color-hover: #FFF !important;
  color: #FFF !important;
  background-color: var(--gms-red) !important;
  --btn-accented-bgcolor: var(--gms-red) !important;
}
.btn-color-primary:hover,
.single_add_to_cart_button:hover,
.button.add_to_cart_button:hover,
.add-to-cart-loop:hover,
.checkout-button:hover,
.woocommerce .button.alt:hover,
.woocommerce .button.checkout:hover,
[class*="btn-color-primary"]:hover,
a.wp-block-wd-button.btn-color-primary:hover {
  background-color: var(--gms-red-dark) !important;
  --btn-accented-bgcolor-hover: var(--gms-red-dark) !important;
  color: #FFF !important;
}

/* Sale price color */
.price ins .amount,
.price > .amount {
  color: var(--gms-red);
}

/* On-sale label */
.onsale.product-label {
  background-color: var(--gms-red) !important;
  color: #FFF !important;
}

/* Product badges */
.product-label.new {
  background-color: #2f8f4e !important;
  color: #FFF !important;
}
.product-label.bestseller {
  background-color: #c98a1d !important;
  color: #FFF !important;
}
.product-label.limited {
  background-color: #c9401d !important;
  color: #FFF !important;
}

/* Stock status — small colored pill badge */
.wd-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.5;
}
.wd-stock-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.wd-stock-status.in-stock {
  background: #E4F5EA;
  color: #2f8f4e;
}
.wd-stock-status.low-stock {
  background: #FDECDA;
  color: #B4690E;
}
.wd-stock-status.out-of-stock {
  background: #ECE7E7;
  color: #8A7A7A;
}

/* ==========================================================
   QUICK VIEW MODAL
   ========================================================== */
.gms-quick-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.gms-quick-view-overlay.gms-visible {
  opacity: 1;
  visibility: visible;
}
.gms-quick-view {
  background: var(--gms-bg);
  border-radius: var(--gms-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  max-width: 720px;
  width: 92%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  transform: translateY(20px) scale(.96);
  transition: transform .3s ease;
  font-family: 'Lexend Deca', sans-serif;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.gms-quick-view-overlay.gms-visible .gms-quick-view {
  transform: translateY(0) scale(1);
}
.gms-quick-view-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--gms-text);
  line-height: 1;
  padding: 4px;
  transition: color var(--gms-ease);
}
.gms-quick-view-close:hover { color: var(--gms-ink); }
.gms-quick-view-image {
  flex: 1 1 240px;
  max-width: 280px;
}
.gms-quick-view-image img {
  width: 100%;
  height: auto;
  border-radius: var(--gms-radius-sm);
  object-fit: cover;
}
.gms-quick-view-body {
  flex: 1 1 320px;
  min-width: 240px;
}
.gms-quick-view-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gms-title);
  margin: 0 0 8px;
}
.gms-quick-view-body .price {
  display: block;
  margin: 8px 0;
  font-size: 18px;
}
.gms-quick-view-body p.gms-quick-view-desc {
  font-size: 14px;
  color: var(--gms-text);
  line-height: 1.5;
  margin: 12px 0;
}
.gms-quick-view-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gms-quick-view-body .gms-quick-view-badges .product-label {
  position: static;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* ==========================================================
   4. PRICE FILTER (range slider)
   ========================================================== */
.gms-price-filter {
  font-family: 'Lexend Deca', sans-serif;
  padding: 20px 24px;
  background: var(--gms-bg);
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-radius);
  margin-bottom: 24px;
  box-shadow: var(--gms-shadow);
}
.gms-price-filter h4 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gms-title);
}
.gms-price-filter-sliders {
  position: relative;
  height: 6px;
  margin: 20px 0 16px;
}
.gms-price-filter-track {
  position: absolute;
  height: 6px;
  width: 100%;
  background: var(--gms-line);
  border-radius: 3px;
}
.gms-price-filter-range {
  position: absolute;
  height: 6px;
  background: var(--gms-red);
  border-radius: 3px;
}
.gms-price-filter input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  width: 100%;
  height: 6px;
  background: transparent;
  pointer-events: none;
  margin: 0;
  top: 0;
}
.gms-price-filter input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gms-red);
  border: 3px solid #FFF;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  pointer-events: all;
  position: relative;
  z-index: 2;
}
.gms-price-filter input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gms-red);
  border: 3px solid #FFF;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  pointer-events: all;
}
.gms-price-filter-values {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--gms-title);
}

/* ==========================================================
   6 / 8d. SMOOTH HOVER TRANSITIONS
   ========================================================== */
a,
button,
.btn,
.wd-action-btn,
input[type="submit"] {
  transition: color var(--gms-ease), background-color var(--gms-ease),
              border-color var(--gms-ease), box-shadow var(--gms-ease),
              transform var(--gms-ease), opacity var(--gms-ease);
}

/* Product card lift + shadow */
.wd-product.product-grid-item .wd-product-wrapper {
  transition: transform var(--gms-ease), box-shadow var(--gms-ease);
}
.wd-product.product-grid-item:hover .wd-product-wrapper {
  transform: translateY(-4px);
  box-shadow: var(--gms-shadow);
}

/* Image zoom on hover */
.wd-product-thumb {
  position: relative !important;
  overflow: hidden;
}
.wd-product-thumb > a.wd-product-img-link {
  display: block;
  aspect-ratio: 263 / 300;
  overflow: hidden;
}
.wd-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gms-ease);
}
.wd-product.product-grid-item:hover .wd-product-thumb > a > img {
  transform: scale(1.05);
}

/* Product card badge → single hanging gold ribbon, top-right corner
   (all applicable badges stack as lines inside one ribbon) */
.gms-ribbon {
  position: absolute;
  top: 0;
  right: 16px;
  z-index: 5;
  width: 72px;
}
.gms-ribbon-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px 18px;
  background: linear-gradient(180deg, #F3E4B8, #C9A24B 55%, #8A6C2E);
  color: #FFFDF5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
}
.gms-ribbon-inner span {
  display: block;
}
/* Sold-out badge reuses the ribbon shape but in neutral dark tones —
   a gold "promo" gradient reads as celebratory, which is wrong for
   "this item is unavailable". */
.gms-ribbon.gms-ribbon-soldout .gms-ribbon-inner {
  background: linear-gradient(180deg, #6b6b6b, #3a3a3a 55%, #1f1f1f);
}

/* Visually-hidden accessible label (icon-only buttons still announce
   their purpose to screen readers even though the text is hidden) */
.wd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Quick view / wishlist — small circular icon buttons overlaid on the
   image, revealed on hover on desktop. No hover on touch devices, so
   always show them there instead.

   base.css (Woodmart, loads successfully) sets --wd-btn-icon on
   .wd-quick-view-icon/.wd-wishlist-icon and renders it as icon-font
   glyph content on .wd-action-icon:before — that was rendering
   alongside our own inline SVGs (a real duplicate-icon bug, confirmed
   by screenshot), so it's explicitly suppressed below.

   Position/size are !important-guarded: nothing in currently-loaded
   CSS targets .wd-buttons/.wd-pos-r-t/.wd-add-btn-replace, but the
   product-loop files that normally would (woo-mod-loop-prod-add-btn-
   replace.css etc.) are one path-fix away from loading, and this
   guarantees the layout can't be pulled out of normal/absolute flow
   if that ever changes. */
.wd-buttons.wd-pos-r-t {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 10px !important;
  bottom: 10px !important;
  width: auto !important;
  height: auto !important;
  z-index: 6;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--gms-ease), transform var(--gms-ease);
  pointer-events: none;
}
.wd-product.product-grid-item:hover .wd-buttons.wd-pos-r-t {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.wd-buttons.wd-pos-r-t .wd-action-btn {
  pointer-events: auto;
  width: auto !important;
  height: auto !important;
}
.wd-buttons.wd-pos-r-t .wd-action-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  background: #FFF;
  color: var(--gms-ink);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  transition: background var(--gms-ease), color var(--gms-ease), transform var(--gms-ease);
}
.wd-buttons.wd-pos-r-t .wd-action-btn a:hover {
  background: var(--gms-red);
  color: #FFF;
  transform: translateY(-2px);
}
.wd-buttons.wd-pos-r-t .wd-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Suppress the icon-font glyph — our inline SVG is the only icon. */
.wd-buttons.wd-pos-r-t .wd-action-icon:before {
  content: none !important;
}
@media (max-width: 1024px) {
  /* No hover on touch devices — keep these always visible instead of hidden behind a hover that can't happen. */
  .wd-buttons.wd-pos-r-t {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Product card text — left-aligned instead of the theme's centered
   default (drives title/price/stock via the --text-align variable
   the theme already reads in .wd-product { text-align: var(...) }). */
.wd-product {
  --text-align: left;
}

/* Add to cart — full-width solid button with icon */
.wd-add-btn.wd-add-btn-replace {
  position: static !important;
  margin-top: 10px;
}
.wd-add-btn.wd-add-btn-replace .wd-action-icon:before {
  content: none !important;
}
.wd-add-btn.wd-add-btn-replace .button.add_to_cart_button,
.wd-add-btn.wd-add-btn-replace .add-to-cart-loop {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 6px 14px;
  border-radius: var(--gms-radius-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.4;
}
.wd-add-btn.wd-add-btn-replace .wd-action-icon {
  display: inline-flex;
  align-items: center;
}
.wd-add-btn.wd-add-btn-replace .button.wd-disabled {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--gms-radius-sm);
  font-size: 13px;
  font-weight: 700;
  background: var(--gms-bg-soft) !important;
  color: var(--gms-text) !important;
  cursor: not-allowed;
}

/* Hover image swap — crossfade to the product's second gallery image */
.wd-product-img-hover.hover-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--gms-ease);
  pointer-events: none;
}
.wd-product-img-hover.hover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gms-ease);
}
.wd-product.product-grid-item:hover .wd-product-img-hover.hover-img {
  opacity: 1;
}
.wd-product.product-grid-item:hover .wd-product-img-hover.hover-img img {
  transform: scale(1.05);
}

/* Category card hover */
.wd-cat .wd-cat-inner {
  transition: transform var(--gms-ease), box-shadow var(--gms-ease);
}
.wd-cat:hover .wd-cat-inner {
  transform: translateY(-4px);
  box-shadow: var(--gms-shadow);
}

/* Wishlist button — filled heart + checkmark badge once added */
.wd-wishlist-btn .wd-action-icon:before,
.wd-wishlist-btn .wd-action-icon svg {
  transition: color .2s ease, transform .2s ease;
}
.wd-wishlist-btn.wd-active .wd-action-icon:before,
.wd-wishlist-btn.wd-active .wd-action-icon svg {
  color: var(--wd-primary-color, #e63946);
  transform: scale(1.15);
}
.wd-wishlist-btn.wd-active .wd-action-icon svg {
  fill: currentColor;
}
.wd-wishlist-btn.wd-active .wd-check-icon {
  display: flex !important;
}

/* The wishlist page's own leftover theme CSS force-hides/disables .wd-wishlist-btn
   inside its product grid (it originally used a separate remove-checkbox UI instead).
   We reuse the same heart button as the remove action there, so re-enable it. */
#gmsWishlistGrid .wd-wishlist-btn {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================
   7. SLIDER AUTOPLAY — CSS for fade transitions
   ========================================================== */
.wd-slider .wd-carousel-wrap {
  display: block !important;
  position: relative;
}
.wd-slider .wd-carousel-wrap .wd-slide {
  opacity: 0;
  transition: opacity .7s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  flex-shrink: 0;
}
.wd-slider .wd-carousel-wrap .wd-slide.gms-slide-active {
  opacity: 1;
  position: relative;
  z-index: 1;
}
/* Woodmart's own fade CSS (el-slider-block.css) sets pointer-events:none
   on every .wd-carousel-item once .wd-fade is active, re-enabling it only
   for .wd-carousel-item.wd-active — a class our JS never applies (it uses
   .gms-slide-active instead). Without this override, the CTA link (and
   anything else) inside the hero slide is permanently unclickable. */
.wd-carousel.wd-fade > .wd-carousel-wrap > .wd-carousel-item.gms-slide-active {
  pointer-events: auto;
}

/* Hero slide — background image + centered text overlay.
   No Woodmart slider CSS actually loads here, so this is fully custom. */
.wd-slide {
  position: relative;
  border-radius: var(--gms-radius);
  overflow: hidden;
}
.wd-slide-bg.wd-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wd-slide-bg.wd-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Richer, more editorial look than the flat source photo. */
  filter: saturate(1.12) contrast(1.06);
  transform: scale(1.06);
}
/* Slow "Ken Burns" zoom while a slide is active — a static photo reads
   much less alive than one with continuous subtle motion. Duration is
   longer than the 5s autoplay interval (GMS_CONFIG.sliderInterval) so
   it's still gently moving when the next slide crossfades in, never
   visibly resetting/snapping back. */
.gms-slide-active .wd-slide-bg.wd-fill img {
  animation: gmsHeroZoom 8s ease-out forwards;
}
@keyframes gmsHeroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .gms-slide-active .wd-slide-bg.wd-fill img {
    animation: none;
    transform: scale(1);
  }
}
/* Fallback background for the rare case where even the product-photo
   fallback in the controller finds nothing resolvable — a styled
   gradient instead of a blank box. */
.gms-slide-fallback-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3B2F17, #8A6C2E 55%, #C9A24B);
}
/* Gradient scrim so text stays legible over any photo, and gives the
   banner more visual depth than a flat image. */
.wd-slide-bg.wd-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.55) 100%);
}
.wd-slide-container {
  position: relative;
  z-index: 1;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 10px;
}
.wd-slide-container .wp-block-wd-title.title {
  color: #FFFDF5;
  font-size: 2.2em;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  max-width: 640px;
}
.wd-slide-container p.wp-block-wd-paragraph {
  color: rgba(255,253,245,.92);
  font-size: 1.05em;
  font-weight: 500;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
  max-width: 560px;
}
.gms-hero-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 24px;
  border-radius: 999px;
  background: #FFFDF5;
  color: var(--gms-ink) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background var(--gms-ease), color var(--gms-ease), transform var(--gms-ease);
}
.gms-hero-slide-cta svg {
  transition: transform var(--gms-ease);
}
.gms-hero-slide-cta:hover {
  background: var(--gms-red);
  color: #FFF !important;
  transform: translateY(-2px);
}
.gms-hero-slide-cta:hover svg {
  transform: translateX(3px);
}
@media (max-width: 768.98px) {
  .wd-slide-container {
    min-height: 340px;
    padding: 24px 20px;
  }
  .wd-slide-container .wp-block-wd-title.title {
    font-size: 1.6em;
  }
}

/* ==========================================================
   10. PRODUCT GALLERY — CSS for main-image swap on thumb click
   ========================================================== */
.wd-single-gallery .wd-gallery-images .wd-carousel-wrap {
  display: block !important;
  position: relative;
}
.wd-single-gallery .wd-gallery-images .wd-carousel-item {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  display: block !important;
  pointer-events: none;
}
.wd-single-gallery .wd-gallery-images .wd-carousel-item.gms-gallery-active {
  opacity: 1;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.wd-single-gallery .wd-gallery-thumb .wd-carousel-item.gms-active-thumb {
  outline: 2px solid var(--gms-primary, #333);
  outline-offset: -2px;
}

/* Slider prev/next buttons */
.gms-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: background var(--gms-ease), transform var(--gms-ease);
  font-size: 0;
  padding: 0;
}
.gms-slider-nav:hover {
  background: #FFF;
  transform: translateY(-50%) scale(1.08);
}
.gms-slider-nav::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--gms-ink);
  border-right: 2px solid var(--gms-ink);
}
.gms-slider-prev { left: 16px; }
.gms-slider-prev::after { transform: rotate(-135deg); margin-left: 3px; }
.gms-slider-next { right: 16px; }
.gms-slider-next::after { transform: rotate(45deg); margin-right: 3px; }

/* ==========================================================
   8a. LOADING SKELETON
   ========================================================== */
.gms-skeleton {
  position: relative;
  overflow: hidden;
}
.gms-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: gms-shimmer 1.5s infinite ease-in-out;
  z-index: 5;
  border-radius: inherit;
}
.gms-skeleton.gms-loaded::after {
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
@keyframes gms-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================
   8b. EMPTY STATE
   ========================================================== */
.gms-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  font-family: 'Lexend Deca', sans-serif;
  grid-column: 1 / -1;
  width: 100%;
}
.gms-empty-state.gms-visible {
  display: flex;
}
.gms-empty-state-icon {
  font-size: 52px;
  margin-bottom: 16px;
  opacity: .7;
}
.gms-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--gms-title);
  margin: 0 0 6px;
}
.gms-empty-state p {
  font-size: 14px;
  color: var(--gms-text);
  margin: 0;
}

/* ==========================================================
   5. NAVBAR DROPDOWN ARROWS — injected arrow styling
   ========================================================== */

/* Keep the link + injected arrow on one horizontal line */
.wd-nav-header > li.menu-item-has-children {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Suppress the theme's native icon-font caret (woodmart-font, glyph \f129).
   That font isn't loaded on this site, so the browser renders the raw
   private-use-area codepoint as a stray glyph next to our injected
   .gms-dropdown-arrow — the "broken icon" under Shop/Footwear/etc. */
.wd-nav > li:is(.wd-has-children, .menu-item-has-children) > a::after,
.wd-dropdown-menu .menu-item-has-children > a::after {
  content: none !important;
}

.gms-dropdown-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin-left: 2px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform var(--gms-ease);
  border: none;
  background: none;
  padding: 0;
}
.gms-dropdown-arrow::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}
.gms-dropdown-arrow.gms-arrow-open {
  transform: rotate(180deg);
}

/* Desktop: force-show dropdown when hovered/arrow-toggled. Scoped to
   .gms-dropdown-open alone (not just .menu-item-has-children) so this
   also covers the my-account dropdown, which shares the same
   .wd-event-hover + .wd-dropdown pattern but isn't a nav menu item. */
.gms-dropdown-open > .wd-dropdown-menu,
.gms-dropdown-open > .wd-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* ==========================================================
   8e. SIDEBAR WIDGET PADDING
   ========================================================== */

/* Each sidebar widget gets card-like padding, border, and spacing */
.wd-sidebar .wd-widget,
.wd-sidebar .widget_block {
  padding: 20px 20px 18px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--gms-line) !important;
  border-radius: var(--gms-radius) !important;
  background: var(--gms-bg) !important;
}

/* Widget titles spacing */
.wd-sidebar .widget-title {
  padding-bottom: 12px;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--gms-line);
  font-size: 15px !important;
}

/* List items inside filters */
.wd-sidebar .wd-filter-wrapper ul li,
.wd-sidebar .widget ul li {
  padding: 4px 0;
}

/* Search input inside Franchise filter */
.wd-sidebar .wd-filter-search input {
  padding: 8px 12px !important;
  border-radius: var(--gms-radius-sm) !important;
}

/* Custom price filter — remove double border since it already has card style */
.gms-price-filter {
  border-radius: var(--gms-radius) !important;
  margin-bottom: 16px !important;
}

/* ==========================================================
   9. DESIGN CONSISTENCY
   ========================================================== */

/* 9a. One font family */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, input, textarea, select, button,
.wd-entities-title,
.price,
.btn {
  font-family: 'Lexend Deca', sans-serif;
}

/* 9b. Consistent button style */
.btn,
.button,
input[type="submit"],
.single_add_to_cart_button,
.add-to-cart-loop,
.checkout-button {
  font-weight: 600;
  letter-spacing: .3px;
}

/* 9c. Border radius consistency */
.wd-product-wrapper,
.wd-cat-inner,
.category-grid-item,
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.widget,
.wd-sidebar .widget_block {
  border-radius: var(--gms-radius) !important;
}
.btn,
.button,
input[type="submit"],
.single_add_to_cart_button,
.add-to-cart-loop,
.checkout-button,
.gms-popup-cta,
.onsale.product-label {
  border-radius: var(--gms-radius-sm) !important;
}

/* 9d. Consistent card shadow */
.wd-product-wrapper,
.wd-cat-inner,
.widget,
.wd-sidebar .widget_block {
  box-shadow: var(--gms-shadow);
}

/* Overflow hidden for image zoom containment */
.wd-product-thumb,
.wd-cat-thumb {
  overflow: hidden;
  border-radius: var(--gms-radius) var(--gms-radius) 0 0;
}

/* ============================================================
   10. SEARCH SUGGESTIONS DROPDOWN
   ============================================================ */
.gms-search-heading {
  padding: 10px 15px 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}
.gms-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gms-search-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  text-decoration: none;
  color: inherit;
}
.gms-search-item a:hover {
  background: rgba(0, 0, 0, .04);
}
.gms-search-item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--gms-radius-sm, 6px);
  flex-shrink: 0;
}
.gms-search-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gms-search-item-title {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gms-search-item-price {
  font-size: 13px;
  opacity: .7;
}
.gms-search-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 15px 12px;
}
.gms-search-term {
  background: var(--gms-bg-soft);
  border: 1px solid var(--gms-line);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  color: var(--gms-title);
  cursor: pointer;
  transition: background var(--gms-ease), border-color var(--gms-ease);
}
.gms-search-term:hover {
  background: var(--gms-line);
  border-color: var(--gms-text);
}
.gms-search-empty {
  padding: 15px;
  opacity: .6;
  font-size: 14px;
}

/* ============================================================
   11. HOMEPAGE VISUAL HIERARCHY
   ============================================================ */
.gms-section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gms-red);
  margin-bottom: 6px;
}
.gms-heading-tier-1.wp-block-wd-title.title {
  font-size: 2.4em !important;
  font-weight: 800 !important;
}
.gms-heading-tier-2.wp-block-wd-title.title {
  font-size: 1.9em !important;
  font-weight: 700 !important;
}
/* Narrow phones (320-360px) — 1.9em still wraps the title, forcing
   the "view more" arrow onto its own line below it. */
@media (max-width: 380px) {
  .gms-heading-tier-1.wp-block-wd-title.title {
    font-size: 1.8em !important;
  }
  .gms-heading-tier-2.wp-block-wd-title.title {
    font-size: 1.4em !important;
  }
}
.gms-section-priority-2 {
  background: var(--gms-bg-soft);
  border-radius: var(--gms-radius);
  padding: 28px 24px;
  margin: 24px 0;
}
/* Mobile-only "view more" arrow next to the section title — hidden on
   desktop, where the "View more" button (in the same header row) is
   the primary way to reach all products. */
.gms-mobile-more-arrow {
  display: none;
  vertical-align: middle;
  margin-inline-start: 4px;
  color: inherit;
}

/* ============================================================
   12. MOBILE — reduce homepage length / tighten spacing
   ============================================================ */
@media (max-width: 768.98px) {
  .wd-hide-mobile-insta {
    display: none !important;
  }
  .wd-trust-strip,
  .wd-home-reviews,
  .wd-deals-banner,
  .wd-newsletter-section {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .wd-deals-banner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Product-carousel sections (Best Sellers, Special Sections) had
     their own 24px side padding stacked on top of <main>'s container
     padding, squeezing the cards into a narrow column on phones. */
  .gms-section-priority-2 {
    padding-left: 0;
    padding-right: 0;
  }
  /* Narrow mobile cards (2-col grid) don't leave room for an
     icon + "Add to Cart" label — icon only, centered, on phones. */
  .wd-add-btn.wd-add-btn-replace .button.add_to_cart_button,
  .wd-add-btn.wd-add-btn-replace .add-to-cart-loop {
    flex-direction: row;
    padding: 6px 8px;
  }
  .wd-add-btn.wd-add-btn-replace .wd-action-text {
    display: none;
  }
  /* "View more" button removed on mobile — replaced by the small
     arrow icon next to the section title (.gms-mobile-more-arrow). */
  .wd-fedb8996 > .wp-block-wd-button {
    display: none;
  }
  .gms-mobile-more-arrow {
    display: inline-flex;
  }
}

/* ==========================================================
   13. FOOTER TRUST / PAYMENT BADGES
   ========================================================== */
.gms-trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 16px 0;
  margin: 8px 0;
  border-top: 1px solid var(--gms-line);
  border-bottom: 1px solid var(--gms-line);
}
.gms-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--gms-bg-soft);
  color: var(--gms-text);
  font-size: 12px;
  font-weight: 600;
}
.gms-trust-badge svg {
  flex-shrink: 0;
  color: #8A6C2E;
}
/* Real bKash/Nagad marks — full color, unlike the monochrome outline
   icons used for the other badges, since they're recognizable brand
   logos rather than generic pictograms. */
.gms-trust-badge img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}
.gms-trust-badge-secure {
  background: #F3E4B8;
  color: #3B2F17;
}
.gms-trust-badge-secure svg {
  color: #8A6C2E;
}

/* ==========================================================
   13b. HEADER — MOBILE LOGO SIZE
   ========================================================== */
@media (max-width: 1024px) {
  .whb-mobile-center .site-logo img {
    transform: scale(2.1) !important;
  }
}

/* ==========================================================
   14. HEADER — NAV UNDERLINE
   ========================================================== */
.wd-header-main-nav .menu-item > a {
  position: relative;
}
.wd-header-main-nav .menu-item > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--gms-red);
  transition: width var(--gms-ease);
}
.wd-header-main-nav .menu-item:hover > a::after,
.wd-header-main-nav .menu-item.current-menu-item > a::after {
  width: 100%;
}

/* ==========================================================
   15. HERO — CTA BUTTON + TRUST ROW + SLIDER FRAME
   ========================================================== */
.gms-hero-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.gms-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gms-red);
  color: #FFF !important;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background var(--gms-ease), transform var(--gms-ease);
}
.gms-hero-cta:hover {
  background: var(--gms-red-dark);
  color: #FFF !important;
}
.gms-hero-cta svg {
  transition: transform var(--gms-ease);
}
.gms-hero-cta:hover svg {
  transform: translateX(3px);
}
.gms-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gms-text);
}
.gms-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gms-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gms-red);
  flex-shrink: 0;
}
/* Full-width breakout: the hero slider sits inside <main class="...
   container">, which caps width to the site's max content width. This
   breaks it out to span the full viewport regardless of that
   ancestor, using the standard 50%-offset + negative-margin technique.
   No rounded corners/shadow once it's edge-to-edge — those read as a
   floating card, which contradicts a full-bleed banner. */
.wd-slider.wd-carousel-container {
  overflow: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}
body {
  overflow-x: hidden;
}
@media (max-width: 768.98px) {
  .gms-hero-cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ==========================================================
   16. HOMEPAGE USP / TRUST STRIP
   ========================================================== */
.gms-usp-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 28px 0;
  margin: 20px 0;
  border-top: 1px solid var(--gms-line);
  border-bottom: 1px solid var(--gms-line);
}
.gms-usp-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gms-usp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(230, 57, 70, .08);
  color: var(--gms-red);
  flex-shrink: 0;
}
.gms-usp-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gms-title);
}
.gms-usp-text span {
  display: block;
  font-size: 12px;
  color: var(--gms-text);
  font-weight: 400;
}
@media (max-width: 1024px) {
  .gms-usp-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile only — desktop (4-col) and tablet (2-col grid, above) stay
   untouched. Below 576px this used to just stack into a plain 1-column
   list (each item full-width, no visual separation) — replaced with a
   horizontal swipeable row of actual cards instead. */
@media (max-width: 576px) {
  .gms-usp-strip {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y;
    gap: 12px;
    padding: 20px 4px;
    margin: 16px 0;
  }
  .gms-usp-item {
    flex: 0 0 76%;
    scroll-snap-align: start;
    background: var(--gms-bg);
    border: 1px solid var(--gms-line);
    border-radius: var(--gms-radius);
    box-shadow: var(--gms-shadow);
    padding: 16px;
  }
}

/* ==========================================================
   16b. HOMEPAGE PRODUCT CAROUSELS — MOBILE SLIDER
   ========================================================== */
/* Shared by Best Sellers, Special Sections (New Arrival, Best Seller,
   Flash Sale, etc. — up to 8 products each) and Featured Products, all
   of which use the exact same .wd-products-element carousel markup.
   Same root cause as the "Shop by Category" fix above: the theme's
   carousel needs Swiper JS to reposition .wd-carousel-wrap and reveal
   items past the first --wd-col, and that init never reliably fires on
   this build — so on mobile (--wd-col-sm:2) only the first 2 products
   were reachable, the rest silently clipped by overflow-x:clip
   (lib-swiper.css). A plain scroll-snap row sidesteps that dependency;
   desktop/tablet grids are untouched. */
@media (max-width: 768.98px) {
  .wd-products-element .wd-carousel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y;
  }
  .wd-products-element .wd-carousel-wrap {
    transform: none !important;
    align-items: stretch;
  }
  .wd-products-element .wd-carousel-item {
    scroll-snap-align: start;
  }
  .wd-products-element .wd-nav-arrows {
    display: none;
  }
}

/* ==========================================================
   17. PRODUCT CARD — INFO SECTION SPACING
   ========================================================== */
/* .product-element-bottom (title/rating/price/stock/add-to-cart) had
   zero padding and no explicit stacking from any loaded CSS — .price
   and .wd-stock-status are plain inline elements by default, so
   without this they can visually run together instead of forming a
   clean vertical rhythm. Add to Cart now lives here too (moved out of
   the image thumb, where it used to render above the title/price —
   customers were seeing a buy button before the product name or
   price). */
.product-element-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px 16px;
}
.product-element-bottom .wd-entities-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  /* Woodmart's own woo-opt-title-limit-predefined.css clamps titles to
     1 line via a `title-line-one` ancestor class + max-height:calc(1 *
     line-height) + overflow:hidden — with no ellipsis and white-space
     left as "normal", any title that wraps (e.g. "Suede Loafers") gets
     its second line silently cut off instead of shown or truncated.
     Force a proper 2-line clamp instead so full/short titles both
     render correctly and card heights stay aligned across a row. */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden;
  max-height: none !important;
  white-space: normal;
  min-height: 2.6em;
}
.product-element-bottom .price {
  display: block;
  font-size: 16px;
  font-weight: 700;
}
.product-element-bottom .wd-add-btn.wd-add-btn-replace {
  width: 100%;
  margin-top: 4px;
}

/* ==========================================================
   18. MOBILE BOTTOM TOOLBAR — CLEARANCE
   ========================================================== */
/* opt-bottom-toolbar.css renders a fixed 55px-tall bar (Menu/Cart/
   Wishlist/Account) at the bottom of the viewport below 1025px, but
   nothing in the theme reserves that space in the page's own layout —
   so whatever content naturally lands at the bottom of the scrollable
   area (the product page's Add to Cart button, the homepage USP strip,
   footer content) ends up rendered underneath it and becomes unreadable
   / unclickable. Reserve matching space so everything can scroll clear. */
@media (max-width: 1024.98px) {
  body {
    padding-bottom: 70px;
  }
}

/* ==========================================================
   19. FOOTER — DARK BRANDED REDESIGN
   ========================================================== */
/* The theme applies padding-block:40px (top AND bottom) to every
   page's <main>. The homepage already zeroes the top half inline
   (it opens with a full-bleed hero), but nothing zeroed the bottom
   half, so every page — including pages without that inline
   override — got a fixed 40px dead gap before the footer's own
   top border/padding kicks in. */
.wd-content-layout {
  padding-bottom: 0;
}
.wd-footer.footer-container {
  position: relative;
  background: var(--gms-ink) !important;
  color: rgba(255, 255, 255, .68);
  overflow: hidden;
}
.wd-footer.footer-container::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--gms-red), #C9A24B 55%, var(--gms-red));
}
.wd-footer .wd-35aff150 img {
  filter: brightness(0) invert(1) !important;
  opacity: .95;
}
.wd-footer .wd-5f577beb {
  color: rgba(255, 255, 255, .55) !important;
  max-width: 300px;
  line-height: 1.6;
}
.wd-footer .wp-block-wd-title.title {
  color: #FFF !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wd-footer .wd-toggle-icon {
  fill: rgba(255, 255, 255, .5) !important;
}
.wd-footer .sub-sub-menu > li > a {
  color: rgba(255, 255, 255, .62) !important;
  transition: color var(--gms-ease), padding-left var(--gms-ease);
}
.wd-footer .sub-sub-menu > li > a:hover {
  color: #C9A24B !important;
  padding-left: 4px;
}
.wd-footer .wd-list-content,
.wd-footer .wd-list-content a {
  color: rgba(255, 255, 255, .62) !important;
  transition: color var(--gms-ease);
}
.wd-footer .wd-list-content a:hover {
  color: #C9A24B !important;
}
.wd-footer .wd-a75bb30e .wd-icon img {
  filter: brightness(0) invert(1);
  opacity: .8;
}
.wd-footer .wp-block-wd-container.wd-7c5e9f7c {
  border-color: rgba(255, 255, 255, .12) !important;
}
.wd-footer .wd-aae3cee5 {
  color: rgba(255, 255, 255, .5) !important;
}
.wd-footer .wd-aae3cee5 a {
  color: #FFF !important;
  font-weight: 700;
}
.wd-footer .gms-trust-badges {
  border-color: rgba(255, 255, 255, .12);
}
.wd-footer .gms-trust-badge {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
}
.wd-footer .gms-trust-badge svg {
  color: #C9A24B;
}
.wd-footer .gms-trust-badge-secure {
  background: rgba(201, 162, 75, .2);
  color: #F3E4B8;
}
.wd-footer .gms-trust-badge-secure svg {
  color: #C9A24B;
}

/* ==========================================================
   20. HEADER — SIMPLE DROPDOWN MENU (Shop / Footwear / Special Sections)
   ========================================================== */
/* A single, plain vertical list per nav item — not a multi-column mega
   panel. Opens purely on :hover via the theme's own .wd-event-hover
   rule in base.css (li.wd-event-hover:hover > .wd-dropdown); nothing
   here touches that trigger, only the panel's look. */
.gms-simple-dropdown {
  width: 250px !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .06) !important;
  border: 1px solid rgba(0, 0, 0, .06);
  padding: 12px !important;
}
.gms-simple-dropdown-list,
.gms-simple-dropdown-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gms-simple-dropdown-list > li > a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gms-ink) !important;
  white-space: normal;
  transition: color var(--gms-ease), background var(--gms-ease);
}
.gms-simple-dropdown-list > li > a:hover {
  color: var(--gms-red) !important;
  background: rgba(230, 57, 70, .07);
}

/* Grandchildren (rare — only when a child category has its own further
   sub-categories) — indented under their parent link, same simple
   single-column list treatment, just smaller/lighter. */
.gms-simple-dropdown-sublist {
  margin: 2px 0 8px 14px;
}
.gms-simple-dropdown-sublist > li > a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gms-text) !important;
  transition: color var(--gms-ease), background var(--gms-ease);
}
.gms-simple-dropdown-sublist > li > a:hover {
  color: var(--gms-red) !important;
  background: rgba(230, 57, 70, .06);
}

/* ==========================================================
   21. INFO PAGES — Privacy/Refund/Terms/FAQ/Track Order
   ========================================================== */
/* .breadcrumb + .page-header are shared markup across all 5 info
   pages (privacy-policy, refund-policy, terms-conditions, faq,
   track-order) — previously completely unstyled: no banner, no
   readable content width, browser-default bullets. */
.breadcrumb {
  padding: 14px 0;
  font-size: 13px;
  color: var(--gms-text);
  border-bottom: 1px solid var(--gms-line);
}
.breadcrumb a {
  color: var(--gms-text);
  text-decoration: none;
  transition: color var(--gms-ease);
}
.breadcrumb a:hover {
  color: var(--gms-red);
}
.breadcrumb i {
  font-size: 10px;
  margin: 0 8px;
  color: var(--gms-line);
  vertical-align: middle;
}
.breadcrumb span {
  color: var(--gms-title);
  font-weight: 600;
}

.page-header {
  position: relative;
  padding: 56px 24px;
  text-align: center;
  color: #FFFDF5;
  background: linear-gradient(135deg, var(--gms-ink), #3B2F17 65%, #8A6C2E);
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gms-red), #C9A24B 55%, var(--gms-red));
  opacity: .9;
  height: 4px;
}
.page-header h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-size: 2em;
  font-weight: 800;
  color: #FFFDF5;
}
.page-header h1 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  font-size: .5em;
  color: #C9A24B;
}
.page-header p {
  margin: 12px 0 0;
  font-size: 1.05em;
  color: rgba(255, 255, 255, .68);
}

.policy-section {
  padding: 48px 24px 32px;
  background: var(--gms-bg-soft);
}
.policy-card {
  max-width: 820px;
  margin: 0 auto;
  background: #FFF;
  border-radius: var(--gms-radius);
  box-shadow: var(--gms-shadow);
  padding: 40px 48px;
}
@media (max-width: 576px) {
  .policy-card {
    padding: 28px 22px;
  }
}
.policy-date {
  display: inline-block;
  margin: 0 0 24px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--gms-bg-soft);
  color: var(--gms-text);
  font-size: 12.5px;
  font-weight: 600;
}

/* Rich-text content from the admin CMS (Page model) — generic tag
   styling scoped to this wrapper only. */
.policy-content h2 {
  margin: 36px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gms-line);
  font-size: 1.3em;
  font-weight: 800;
  color: var(--gms-title);
}
.policy-content h2:first-child {
  margin-top: 0;
}
.policy-content h3 {
  margin: 22px 0 10px;
  font-size: 1.08em;
  font-weight: 700;
  color: var(--gms-title);
}
.policy-content p {
  margin: 0 0 14px;
  color: var(--gms-text);
  line-height: 1.75;
}
.policy-content ul,
.policy-content ol {
  margin: 0 0 18px;
  padding-left: 4px;
  list-style: none;
}
.policy-content ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: var(--gms-text);
  line-height: 1.6;
}
.policy-content ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gms-red);
}
.policy-content ol {
  counter-reset: gms-policy-ol;
  list-style: none;
}
.policy-content ol li {
  counter-increment: gms-policy-ol;
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  color: var(--gms-text);
  line-height: 1.6;
}
.policy-content ol li::before {
  content: counter(gms-policy-ol) '.';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #C9A24B;
}
.policy-content a {
  color: var(--gms-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policy-content a:hover {
  color: var(--gms-red-dark);
}
.policy-content strong {
  color: var(--gms-title);
}

/* ==========================================================
   21. PAGE TITLE BAR — white text on the red background
   ========================================================== */
/* .wd-page-title gets background-color:rgb(230,57,70) from an inline
   <style> block duplicated across ~12 pages (about, contact, cart,
   checkout, login, register, wishlist, dashboard, etc.), but none of
   them set a matching text color — the h1 and breadcrumb "current
   page" text fall back to the theme's default near-black, unreadable
   on red. One shared rule here fixes all of them. */
.wd-page-title .entry-title,
.wd-page-title .title {
  color: #fff;
}
.wd-page-title .wd-breadcrumbs {
  --wd-link-color: rgba(255, 255, 255, .75);
  --wd-link-color-hover: #fff;
  --wd-bcrumb-color-active: #fff;
  --wd-bcrumb-delim-color: rgba(255, 255, 255, .5);
}

/* ==========================================================
   22. CONTACT PAGE — MAP EMBED
   ========================================================== */
.gms-contact-map {
  margin: 28px 0;
  border-radius: var(--gms-radius);
  overflow: hidden;
  box-shadow: var(--gms-shadow);
  line-height: 0;
}
.gms-contact-map iframe {
  display: block;
}

/* ==========================================================
   23. NEWSLETTER SECTION — REDESIGN
   ========================================================== */
/* Previously flat theme defaults with zero custom styling: a plain
   grey box, a bare unstyled <input type="submit"> (no class at all,
   so it rendered as the browser's native grey system button — the
   biggest reason it looked unfinished). */
.wd-newsletter-section {
  padding: 56px 24px;
  border-radius: var(--gms-radius);
  background: linear-gradient(135deg, #FFF8ED, #FBEFE0 55%, #F7E4D0);
  text-align: center;
}
/* !important because .wd-block-image inherits --wd-width:100% from its
   .wp-block-wd-container ancestor (block-container.css) — without a
   hard override here the icon wrapper stretched to the section's full
   width, and with border-radius:50% on that wide-short box it rendered
   as a big pink ellipse smeared across the top instead of a badge. */
.wd-newsletter-section .wd-block-image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 auto;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(230, 57, 70, .1);
}
.wd-newsletter-section .wd-block-image img {
  width: 28px;
  height: 28px;
}
.wd-newsletter-section .title {
  font-size: 1.9em;
  font-weight: 800;
  color: var(--gms-title);
  margin: 0 0 10px;
}
.wd-newsletter-section p.wp-block-wd-paragraph {
  color: var(--gms-text);
  font-size: 15px;
  margin: 0 0 6px;
}
.wd-newsletter-section .wd-highlight {
  color: var(--gms-red);
  font-weight: 600;
}

#newsletter-form {
  margin-top: 26px;
}
#newsletter-form .wd-grid-f-stretch {
  display: flex;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  background: var(--gms-bg);
  border-radius: 999px;
  box-shadow: var(--gms-shadow);
  padding: 6px;
}
#newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 18px;
  font-size: 14px;
  background: transparent;
  color: var(--gms-ink);
}
#newsletter-form input[type="email"]:focus {
  outline: none;
}
#newsletter-form input[type="submit"] {
  flex-shrink: 0;
  border: none;
  border-radius: 999px !important;
  padding: 12px 28px;
  background: var(--gms-red);
  color: #FFF;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--gms-ease), transform var(--gms-ease);
}
#newsletter-form input[type="submit"]:hover {
  background: var(--gms-red-dark);
  transform: translateY(-1px);
}
@media (max-width: 576px) {
  .wd-newsletter-section {
    padding: 40px 20px;
  }
  #newsletter-form .wd-grid-f-stretch {
    flex-direction: column;
    border-radius: var(--gms-radius);
    padding: 8px;
    gap: 8px;
  }
  #newsletter-form input[type="email"],
  #newsletter-form input[type="submit"] {
    width: 100%;
    border-radius: var(--gms-radius-sm) !important;
  }
}

/* ==========================================================
   24. FOOTER — MOBILE: ALWAYS-OPEN SECTIONS + 2-COL LAYOUT
   ========================================================== */
/* Company/Info/Social Links use the theme's accordion-toggle block
   (block-toggle.css). Desktop/tablet already render them permanently
   open (wd-state-static-lg/md-sm hides the chevron and keeps content
   visible) — only the "sm" tier ships wd-state-closed-sm, collapsing
   each section behind a click. Force the same always-open behavior on
   mobile and drop the now-pointless chevron button. */
@media (max-width: 768.98px) {
  .wd-footer .wd-toggle-content {
    display: block !important;
  }
  .wd-footer .wd-toggle-content-inner {
    opacity: 1 !important;
  }
  .wd-footer .wd-toggle-head .wp-block-wd-icon.wd-toggle-icon {
    display: none !important;
  }
  .wd-footer .wd-toggle-head {
    cursor: default !important;
  }

  /* Company + Info side by side; the logo column and Social Links stay
     full-width, same as the theme's default mobile stacking. */
  .wd-footer .wp-block-wd-column.wd-aec94b59,
  .wd-footer .wp-block-wd-column.wd-4a52106e {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}