/* ══════════════════════════════════════════════════════════════════
   WhiteKurti — wk-fixes.css  (v26)
   Loaded LAST (after main.css and woocommerce.css) with a filemtime-
   based cache-busting version — see functions.php wk_asset_ver().
   Everything here targets one of four reported issues:
     1. Homepage hero carousel
     2. Header logo not clickable
     3. Testimonials carousel scrolling / blank space
     4. Product page layout, images, and buttons
   ══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. HEADER — single row, always: logo | center nav | icons.
   Rewritten (v27) to replace the old two-row layout (icons/logo on
   one line, a second full-width nav bar underneath it) which caused
   visible misalignment. Now every element is a direct grid child of
   .wk-header__inner, and mobile vs desktop just swap which grid
   areas are visible — no second row, no nested-container quirks.
   ──────────────────────────────────────────────────────────────── */
.wk-header__inner.wk-header__inner--row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "toggle brand actions";
  align-items: center;
  column-gap: 16px;
}
.wk-header__inner--row .wk-header__menu-toggle { grid-area: toggle; }
.wk-header__inner--row .wk-header__brand--row  { grid-area: brand; justify-self: start; }
.wk-header__inner--row .wk-header__nav         { grid-area: nav; display: none; }
.wk-header__inner--row .wk-header__actions     { grid-area: actions; justify-self: end; }

/* Overrides a legacy rule elsewhere that absolutely-centers .wk-header__brand
   with pointer-events:none (that old centered-logo pattern is gone now that
   the logo lives in-flow on the left of the grid). Using the compound
   .wk-header__brand.wk-header__brand--row selector so this wins regardless
   of stylesheet order. */
.wk-header__brand.wk-header__brand--row {
  position: static;
  left: auto;
  transform: none;
  pointer-events: auto;
}
.wk-header__brand--row,
.wk-header__brand--row a,
.wk-header__brand--row .wk-brand-name {
  display: flex;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}
.wk-header__actions { display: flex; align-items: center; gap: 4px; }
.wk-header__nav { min-width: 0; overflow: hidden; }
.wk-header__nav .wk-desktop-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.wk-header__nav .wk-desktop-nav__list > li > a {
  display: block;
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft, #555);
  position: relative;
}
.wk-header__nav .wk-desktop-nav__list > li > a:hover,
.wk-header__nav .wk-desktop-nav__list > li.current-menu-item > a {
  color: var(--ink, #111);
}

/* Desktop (≥1024px): logo left, nav takes the center, icons right —
   all in one row, matching the reference layout. */
@media (min-width: 1024px) {
  .wk-header__inner.wk-header__inner--row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav actions";
  }
  .wk-header__inner--row .wk-header__menu-toggle { display: none !important; }
  .wk-header__inner--row .wk-header__nav { grid-area: nav; display: block; }
}

/* ────────────────────────────────────────────────────────────────
   2. HERO CAROUSEL — guaranteed visible height/box even before
   images finish loading, so the section never collapses to 0px.
   ──────────────────────────────────────────────────────────────── */
.wk-herobanner {
  position: relative;
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  background: #f3f0ea;
}
@media (min-width: 768px) {
  .wk-herobanner { min-height: 560px; }
}
.wk-herobanner__track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}
.wk-herobanner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
  min-height: inherit;
}
.wk-herobanner__slide.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
  /* FIX (v28): without an explicit height, switching this slide to
     position:relative makes "inset:0" a no-op, so the slide shrinks to
     its own content height instead of filling .wk-herobanner__track.
     That left the section's cream/dark background exposed as a large
     blank strip below the image on mobile — this restores the fill. */
  height: 100%;
  min-height: inherit;
}
.wk-herobanner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.wk-herobanner__bg--fallback {
  background: linear-gradient(135deg, #efe9df, #d9cfc0);
}
.wk-herobanner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}
.wk-herobanner__body {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 24px;
  color: #fff;
  max-width: 640px;
}
@media (min-width: 768px) {
  .wk-herobanner__body { padding: 0 64px; }
}
.wk-herobanner__eyebrow {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  opacity: .9;
}
.wk-herobanner__heading {
  margin: 0;
  font-family: var(--font-display, serif);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.1;
}
.wk-herobanner__heading-line { display: block; }
.wk-herobanner__sub {
  margin: 0;
  font-size: 14px;
  max-width: 420px;
  opacity: .92;
}
.wk-herobanner__cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #111;
  padding: 12px 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity .2s;
}
.wk-herobanner__cta:hover { opacity: .85; }
.wk-herobanner__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wk-herobanner__nav--prev { left: 16px; }
.wk-herobanner__nav--next { right: 16px; }
.wk-herobanner__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.wk-herobanner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  padding: 0;
}
.wk-herobanner__dot.is-active { background: #fff; width: 22px; border-radius: 4px; }

/* FIX (v28): main.css already hides the prev/next arrow buttons on mobile
   (max-width:767px), but the unconditional ".wk-herobanner__nav { display:
   flex; ... }" rule above — loaded after main.css in this same file — was
   re-enabling them on every screen size, which is why the round arrow
   buttons kept showing up on phones. Restoring the mobile hide here, last,
   so it actually wins. Swipe still works for changing slides on touch. */
@media (max-width: 767px) {
  .wk-herobanner__nav { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   3. TESTIMONIALS — seamless auto-scrolling marquee.
   The PHP renders the card list twice back-to-back; animating the
   track to translateX(-50%) then snapping back to 0 loops perfectly
   because the second half is an identical copy of the first.
   ──────────────────────────────────────────────────────────────── */
.wk-testimonials-carousel.wk-testimonials-carousel--marquee {
  overflow: hidden;
  max-width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.wk-testimonials-track.wk-testimonials-track--marquee {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 16px 0 8px;
  overflow: visible;
  animation: wk-testimonials-marquee 42s linear infinite;
}
.wk-testimonials-track.wk-testimonials-track--marquee .wk-testimonial-card {
  flex: 0 0 340px;
  width: 340px;
}
@media (min-width: 768px) {
  .wk-testimonials-track.wk-testimonials-track--marquee .wk-testimonial-card {
    flex: 0 0 380px;
    width: 380px;
  }
}
@keyframes wk-testimonials-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause on hover (desktop) and while a finger is on it (touch) */
.wk-testimonials-carousel--marquee:hover .wk-testimonials-track--marquee,
.wk-testimonials-track--marquee.is-paused {
  animation-play-state: paused;
}
/* Respect reduced-motion preference: show a static row instead of animating */
@media (prefers-reduced-motion: reduce) {
  .wk-testimonials-track.wk-testimonials-track--marquee {
    animation: none;
    overflow-x: auto;
  }
}

/* ────────────────────────────────────────────────────────────────
   4. PRODUCT PAGE — guaranteed layout, image sizing, and button
   visibility regardless of any legacy conflicting rule elsewhere.
   ──────────────────────────────────────────────────────────────── */
.wk-pdp .wk-pdp__layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px;
  align-items: start;
}
@media (min-width: 768px) {
  .wk-pdp .wk-pdp__layout {
    grid-template-columns: 1fr 1fr !important;
    gap: 48px;
  }
}
@media (min-width: 1024px) {
  .wk-pdp .wk-pdp__layout {
    grid-template-columns: 1.2fr .8fr !important;
    gap: 56px;
  }
}
.wk-pdp .wk-pdp__gallery-wrap {
  display: flex;
  gap: 12px;
  min-width: 0;
}
.wk-pdp .wk-gallery-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 320px;
  background: #f4f2ee;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.wk-pdp .wk-gallery-img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
@media (min-width: 768px) {
  .wk-pdp .wk-gallery-img { aspect-ratio: auto; height: 620px; max-height: 70vh; }
}
.wk-pdp .wk-pdp__info {
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 1024px) {
  .wk-pdp .wk-pdp__info {
    position: sticky !important;
    top: calc(var(--header-h, 68px) + 20px);
    max-height: calc(100vh - var(--header-h, 68px) - 40px) !important;
    overflow-y: auto !important;
  }
}
.wk-pdp .wk-pdp__title { font-size: clamp(22px, 4vw, 34px); margin: 0; }
.wk-pdp .wk-pdp__price { display: flex; align-items: baseline; gap: 10px; }

/* Buttons: force visible + full width regardless of any legacy display/opacity rule */
.wk-pdp #wk-buy-now,
.wk-pdp #wk-atc-btn,
.wk-pdp .wk-btn--full {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
}
.wk-pdp .wk-btn--buy-now.wk-btn--primary {
  background: var(--ink, #111);
  color: #fff;
  border: 1px solid var(--ink, #111);
}
.wk-pdp .wk-btn--atc.wk-btn--outline {
  background: transparent;
  color: var(--ink, #111);
  border: 1px solid var(--ink, #111);
}

/* ────────────────────────────────────────────────────────────────
   SIZE / COLOUR PILL SELECTOR (v27) — this replaces several older,
   partially-conflicting rules (a fixed 46px circle from one rule, a
   42px-min-width rectangle from another, plus a one-off exception
   list for just "XXXL/4XL/5XL") which is exactly why buttons like
   S/M/L looked like different shapes/sizes than XL/XXL/6XL-10XL, and
   why the selected state's background lost to a later "background:
   #fff" rule leaving white-on-white text. Every rule below uses
   !important + is loaded last, so it is the single source of truth
   for every size button regardless of label length ("S" vs "10XL").
   ──────────────────────────────────────────────────────────────── */
.wk-pdp .wk-pdp__variations {
  display: block !important;
  margin-bottom: 4px;
}
.wk-pdp .wk-variation-group__options {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}
.wk-pdp .wk-var-opt,
.wk-pdp .wk-var-opt--size {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 46px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--line, #d1d5db) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #374151;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  box-sizing: border-box;
  transition: border-color .15s, background .15s, color .15s;
}
.wk-pdp .wk-var-opt:hover,
.wk-pdp .wk-var-opt--size:hover {
  border-color: var(--accent, #6B1E3E) !important;
  color: var(--accent, #6B1E3E);
  background: #fff !important;
}
/* Selected state — explicit background + text colour so it can never
   be silently overridden by a later "background:#fff" rule again. */
.wk-pdp .wk-var-opt.is-selected,
.wk-pdp .wk-var-opt--size.is-selected {
  border-color: var(--accent, #6B1E3E) !important;
  background: var(--accent, #6B1E3E) !important;
  color: #fff !important;
}
.wk-pdp .wk-var-opt.is-disabled,
.wk-pdp .wk-var-opt--size.is-disabled {
  opacity: .4 !important;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}
/* Colour swatches stay circular and unaffected by the size-pill rules above */
.wk-pdp .wk-var-opt--color {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 2px solid transparent !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.wk-pdp .wk-var-opt--color.is-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent, #6B1E3E) !important;
}
.wk-pdp .wk-btn--needs-selection {
  opacity: .55;
}

/* ── Extra-strength insurance copy of the rules above ──────────────
   Same declarations, but scoped through #wk-variations-wrap (an ID)
   as well as .wk-pdp. An ID selector out-specifies any purely
   class-based rule from anywhere else in the CSS, so even if a
   caching/minification plugin ever reorders stylesheets (some sort
   handles alphabetically, e.g. "wk-fixes" before "wk-woocommerce"),
   the size-pill visuals below still win. If you use a full-page
   cache or a CSS/JS "optimize" plugin (WP Rocket, Autoptimize, W3TC,
   etc.), please purge/regenerate its cache after updating the theme
   files — otherwise visitors' browsers may keep serving the old,
   cached CSS/JS. ── */
#wk-variations-wrap .wk-var-opt {
  width: auto !important;
  min-width: 46px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
#wk-variations-wrap .wk-var-opt--color {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
#wk-variations-wrap .wk-var-opt.is-selected {
  border-color: var(--accent, #6B1E3E) !important;
  background: var(--accent, #6B1E3E) !important;
  color: #fff !important;
}
#wk-variations-wrap .wk-var-opt--color.is-selected {
  background: none !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent, #6B1E3E) !important;
}

/* Gallery thumbnails column: keep it from collapsing to 0 width */
.wk-pdp .wk-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 72px;
  width: 72px;
}
/* FIX (v28): main.css correctly hides this desktop thumbnail column on
   mobile (".wk-gallery-thumbs { display:none }" inside a max-width:767px
   query), but the rule above — ".wk-pdp .wk-gallery-thumbs" — has higher
   specificity (two classes vs one), so it won on EVERY screen size
   regardless of load order, including mobile. Since ".wk-pdp__gallery-
   wrap" also switches to flex-direction:column on mobile, that orphaned
   72px-wide thumbnail strip rendered stacked ABOVE the main image instead
   of beside it — the small floating thumbnail seen at the top of the PDP
   on phones. Re-hiding it here, at the same (higher) specificity, fixes it. */
@media (max-width: 767px) {
  .wk-pdp .wk-gallery-thumbs { display: none !important; }
}

/* FIX (v28): defensive reset — guarantees nothing can paint a dark tint
   over the real product photos regardless of where a stray overlay rule
   might come from (a leftover scrim class, a lazy-load placeholder, etc).
   The gallery images should always render at full, untinted brightness. */
.wk-pdp .wk-gallery-slide::before,
.wk-pdp .wk-gallery-slide::after,
.wk-pdp .wk-gallery-main::before,
.wk-pdp .wk-gallery-main::after,
.wk-pdp .wk-gallery-track::before,
.wk-pdp .wk-gallery-track::after {
  content: none !important;
  display: none !important;
}
.wk-pdp .wk-gallery-img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
/* FIX v29: belt-and-braces for the one case a candidate image URL is
   still ever unreachable (e.g. attachment truly deleted) — the broken
   <img> box should read as an obvious light placeholder, never as a
   dark/black fill, regardless of what background colour it would
   otherwise inherit. */
.wk-pdp .wk-gallery-img,
.wk-pdp .wk-gallery-slide {
  background-color: var(--surface-2, #F5F1EC) !important;
  color: var(--ink-mute, #8A7A6A) !important;
}
.wk-pdp .wk-gallery-thumb {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line, #eee);
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #f4f2ee;
}
.wk-pdp .wk-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   Cart page — "Proceed to Checkout" button (v1.5)
   Match it to the PDP's outline "Add to Cart" button (white/cream
   background, accent-colour border + text) instead of the dark,
   low-contrast combination it was rendering with. main.css already
   carries a correct-looking rule for this, but it's easy for a
   caching/minification/CSS-optimize plugin (WP Rocket, Autoptimize,
   W3 Total Cache, etc.) to re-order or combine stylesheets and knock
   a plain class-based rule out of the cascade — the same reasoning
   already used for the size-pill fix above. Repeating it here, in
   the one stylesheet this theme always loads dead last, plus
   stacking `html body` on the front of the selector for extra
   specificity, means it wins regardless of what any such plugin does
   to file order. ══════════════════════════════════════════════════ */
html body .wc-proceed-to-checkout a.checkout-button,
html body .wc-proceed-to-checkout a.checkout-button.button,
html body .wc-proceed-to-checkout a.checkout-button.button.alt,
html body a.checkout-button.button.alt,
html body a.checkout-button.button,
html body a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background: var(--bg, #FDFCFA) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 14px 24px !important;
  border: 1.5px solid var(--accent, #6B1E3E) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: background .2s, color .2s;
}
html body .wc-proceed-to-checkout a.checkout-button:hover,
html body .wc-proceed-to-checkout a.checkout-button:focus,
html body .wc-proceed-to-checkout a.checkout-button:active,
html body a.checkout-button.button.alt:hover,
html body a.checkout-button.button.alt:focus,
html body a.checkout-button.button.alt:active,
html body a.checkout-button:hover,
html body a.checkout-button:focus,
html body a.checkout-button:active {
  background: var(--accent, #6B1E3E) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   Product grids rendered through WooCommerce's own default
   `.products` list wrapper (v1.6) — e.g. the "Recently Viewed",
   "On Sale", "Featured" and "Best Selling" Product widgets, and
   cross-sells on the cart page. The individual cards already go
   through this theme's wk_product_card() design (see
   content-product.php / content-widget-product.php), but the
   *wrapper* around them was never styled — it only had CSS for
   this theme's own custom .wk-products-grid div, so anywhere a
   plain WooCommerce `<ul class="products">` was used instead,
   cards fell back to bare/unstyled list items with no grid, no
   spacing, and default WooCommerce sale-badge/button colours.
   This makes that wrapper lay out exactly like the shop grid. */
.widget_products ul.product_list_widget,
.widget_top_rated_products ul.product_list_widget,
.widget_recently_viewed_products ul.product_list_widget,
.woocommerce ul.products,
.woocommerce div.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 640px) {
  .widget_products ul.product_list_widget,
  .widget_top_rated_products ul.product_list_widget,
  .widget_recently_viewed_products ul.product_list_widget,
  .woocommerce ul.products,
  .woocommerce div.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px 16px !important;
  }
}
@media (min-width: 1024px) {
  .widget_products ul.product_list_widget,
  .widget_top_rated_products ul.product_list_widget,
  .widget_recently_viewed_products ul.product_list_widget,
  .woocommerce ul.products,
  .woocommerce div.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px 20px !important;
  }
}
.wk-widget-product-item,
.woocommerce ul.products li.product,
.woocommerce div.products li.product {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

/* ══════════════════════════════════════════════════════════════
   v1.7 — PDP MOBILE COMPACT LAYOUT + STICKY ADD-TO-CART FOOTER
   Goal: fit the photo, title, price, size selector and a buy button
   within roughly one mobile screen, matching the tighter reference
   layout supplied (Libas-style app). Everything below is scoped to
   max-width:767px so desktop/tablet are untouched.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .wk-pdp { padding: 12px 0 96px; } /* extra bottom room for the sticky ATC bar */
  .wk-pdp .wk-pdp__layout { gap: 14px; }
  .wk-pdp .wk-pdp__gallery-wrap { margin: 0 -16px 0; }
  .wk-pdp .wk-gallery-img { aspect-ratio: 4 / 5; }

  /* Tighter vertical rhythm through the info column */
  .wk-pdp .wk-pdp__info { gap: 8px !important; padding-bottom: 0 !important; }
  .wk-pdp .wk-pdp__category { margin-bottom: 2px; font-size: 10px; }
  .wk-pdp .wk-pdp__title { font-size: 19px !important; line-height: 1.2; margin: 0; }
  .wk-pdp .wk-pdp__rating { margin: 0; }
  .wk-pdp .wk-pdp__price { font-size: 17px; margin: 0; }
  .wk-pdp .wk-pdp__taxes { margin: 0 0 2px; font-size: 10px; }
  .wk-pdp .wk-pdp__variations { margin-bottom: 2px; }
  .wk-pdp .wk-variation-group__options { gap: 8px; }
  .wk-pdp .wk-var-opt,
  .wk-pdp .wk-var-opt--size { height: 38px !important; min-width: 40px !important; padding: 0 10px !important; font-size: 12px; }

  /* Buy Now + Add to Cart side-by-side instead of stacked — halves the
     vertical space these two full-width buttons used to take up. */
  .wk-pdp .wk-pdp__buttons-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .wk-pdp .wk-pdp__buttons-row .wk-btn--full {
    width: 100%;
    padding: 12px 8px;
    font-size: 11.5px;
  }
  .wk-pdp .wk-pdp__buttons-row .wk-out-of-stock { grid-column: 1 / -1; }

  /* Wishlist: a small inline pill instead of a full extra row */
  .wk-pdp .wk-pdp__wishlist { margin: 2px 0 6px; }
  .wk-pdp .wk-pdp__wishlist .wk-wl-btn {
    width: auto !important;
    display: inline-flex !important;
    padding: 6px 14px !important;
  }

  .wk-pdp .wk-pdp__short-desc { font-size: 12.5px; margin: 4px 0; }
  .wk-pdp .wk-pdp__trust { gap: 6px 10px; font-size: 10.5px; margin: 8px 0; }
  .wk-pdp .wk-pdp__pincode { margin: 8px 0 !important; padding: 10px !important; }
  .wk-pdp .wk-accordion summary,
  .wk-pdp .wk-accordion__head { padding: 11px 0 !important; }
}

/* ── Sticky "Add to Cart" footer — sits ABOVE the home/shop/cart/orders/
   account bottom nav bar, never on top of / hidden behind it (v1.7).
   Previously both .wk-sticky-atc and .wk-bottom-nav resolved to
   "bottom:0" with the same effective z-index (150), so on a product
   page they occupied the exact same strip of screen and the bottom nav
   simply painted over the Add to Cart bar because it comes later in the
   document. Lifting the sticky bar by the bottom nav's height fixes it. */
.wk-sticky-atc {
  bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 250 !important;
  padding: 10px 14px !important;
}
.wk-bottom-nav { z-index: 240 !important; }
@media (min-width: 768px) {
  .wk-sticky-atc { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   v1.7 — SITE-WIDE MOBILE MARGIN / OVERFLOW FIXES
   Cart, Checkout and My Account pages each stack more than one
   container's worth of padding (this template's own wrapper plus
   WooCommerce's own woocommerce_before/after_main_content wrapper),
   producing a much bigger top gap than intended, and a couple of
   fixed pixel widths (the cart totals box, the coupon input) don't
   shrink on narrow screens, pushing content past the right edge
   instead of respecting the page's side margins.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .woocommerce-cart .wk-woo-main,
  .woocommerce-checkout .wk-woo-main,
  .woocommerce-account .wk-woo-main {
    padding: 16px 0 40px !important;
  }
  .wk-cart-page {
    padding: 0 16px 32px !important;
    gap: 24px !important;
  }
  .wk-cart-title { font-size: 24px; margin-bottom: 14px; }

  /* Fixed 380px box → fluid, so it can never overflow a narrow viewport */
  .wk-cart-collaterals {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 20px !important;
  }
  .wk-coupon { flex-wrap: wrap; }
  .wk-coupon .wk-input { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  .wk-cart-actions-row td { flex-wrap: wrap; gap: 8px; }

  /* Auth (Sign In / Create Account) card */
  .wk-auth-page { padding: 20px 16px !important; margin: 0 !important; min-height: 0 !important; }
  .wk-auth-card { padding: 24px 18px !important; }

  /* Generic WP page wrapper (About/Contact/etc.) — tighten top space too */
  .wk-page-content { padding: 24px 0 48px !important; }
  .wk-page-title { margin-bottom: 16px !important; padding-bottom: 10px !important; }
}

/* Belt-and-braces: keep every page's content within the viewport width,
   regardless of which container/box a plugin or a future edit adds.
   NOTE: .wk-page-content keeps its own 800px reading-width (set in
   main.css) — this only caps it so it can never exceed the viewport,
   it should not stretch it wider than intended on desktop. */
.wk-woo-main,
.wk-cart-page,
.wk-auth-page {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.wk-page-content {
  max-width: min(800px, 100%);
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════
   v1.7 — Cart page title (defensive visibility)
   The template already prints an <h1 class="wk-page-title wk-cart-title">
   "My Cart", but if a caching layer is still serving an older compiled
   version of the template, force it visible/on-top so the fix takes
   effect the moment the cache is cleared.
   ══════════════════════════════════════════════════════════════ */
.wk-cart-page .wk-cart-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   v1.7 — PDP gallery: rating badge + wishlist/share overlay icons
   ══════════════════════════════════════════════════════════════ */
.wk-gallery-rating-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.92);
  color: var(--ink, #120F0C);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  text-decoration: none;
  line-height: 1;
}
.wk-gallery-rating-badge svg { fill: var(--accent, #6B1E3E); stroke: var(--accent, #6B1E3E); flex-shrink: 0; }
.wk-gallery-rating-badge em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-mute, #8A7A6A);
  margin-left: 1px;
}
.wk-gallery-actions {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wk-gallery-actions__wishlist .wk-wl-btn,
.wk-gallery-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  border: none;
  color: var(--ink, #120F0C);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  padding: 0;
  transition: color .15s, transform .15s;
}
.wk-gallery-actions__wishlist .wk-wl-btn:hover,
.wk-gallery-share-btn:hover { transform: scale(1.06); }
/* The canonical wk_wishlist_button() markup includes a text label meant
   for inline placement elsewhere in the theme — hide the label here so it
   renders as a clean icon-only square matching the Share button beside it. */
.wk-gallery-actions__wishlist .wk-wl-btn .wk-wl-label { display: none; }
.wk-gallery-actions__wishlist .wk-wl-btn.is-in-wishlist,
.wk-gallery-actions__wishlist .wk-wl-btn.is-wished {
  color: var(--accent, #6B1E3E);
}
.wk-gallery-actions__wishlist .wk-wl-btn.is-in-wishlist svg,
.wk-gallery-actions__wishlist .wk-wl-btn.is-wished svg {
  fill: var(--accent, #6B1E3E);
}
/* Keep the rating badge (bottom-left) clear of this same edge-margin fix */
.wk-gallery-rating-badge { left: 14px; bottom: 14px; }


/* ══════════════════════════════════════════════════════════════
   v1.7 — Compact "mini trust strip" under price (5-Day Return / COD / Quality)
   ══════════════════════════════════════════════════════════════ */
.wk-pdp__mini-trust {
  display: flex;
  align-items: center;
  background: var(--surface-2, #F5F1EC);
  border: .5px solid var(--line, #E2DBD2);
  border-radius: 6px;
  padding: 12px 10px;
  gap: 6px;
}
.wk-pdp__mini-trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  min-width: 0;
  color: var(--ink-soft, #3E3028);
}
.wk-pdp__mini-trust-item svg { color: var(--accent, #6B1E3E); flex-shrink: 0; }
.wk-pdp__mini-trust-item span {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}
.wk-pdp__mini-trust-sep {
  width: .5px;
  align-self: stretch;
  background: var(--line, #E2DBD2);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   v1.7 — Desktop-only inline buttons row; mobile uses the sticky
   footer instead, so the two never appear on screen together.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .wk-pdp .wk-pdp__buttons-row { display: none !important; }
}
@media (min-width: 768px) {
  .wk-sticky-atc { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   v1.7 — Sticky footer: Add to Cart + Buy Now side by side (mobile)
   Replaces the old single-button bar. Uses the theme's existing
   button colours (accent border/outline + solid ink/accent fill) so it
   matches the rest of the site rather than introducing new colours.
   ══════════════════════════════════════════════════════════════ */
.wk-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #FDFCFA);
  border-top: .5px solid var(--line, #E2DBD2);
  box-shadow: 0 -8px 30px rgba(0,0,0,.1);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.wk-sticky-atc.is-visible { transform: translateY(0); }
.wk-sticky-atc__btn {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  box-sizing: border-box;
}
.wk-sticky-atc__btn--outline {
  background: var(--bg, #FDFCFA);
  color: var(--ink, #120F0C);
  border: 1.5px solid var(--ink, #120F0C);
}
.wk-sticky-atc__btn--solid {
  background: var(--ink, #120F0C);
  color: var(--bg, #FDFCFA);
  border: 1.5px solid var(--ink, #120F0C);
}
.wk-out-of-stock--sticky {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-mute, #8A7A6A);
  padding: 13px 0;
}

/* ══════════════════════════════════════════════════════════════
   v1.7 — Size Selection Modal (Add to Cart / Buy Now without a size)
   ══════════════════════════════════════════════════════════════ */
.wk-size-modal { position: fixed; inset: 0; z-index: 900; }
.wk-size-modal[hidden] { display: none; }
.wk-size-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.wk-size-modal__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  border-radius: 14px 14px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0,0,0,.2);
  animation: wkSizeModalUp .25s cubic-bezier(.32,.72,0,1);
}
@media (min-width: 768px) {
  .wk-size-modal__sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 420px;
    max-width: calc(100vw - 40px);
    border-radius: 12px;
  }
}
@keyframes wkSizeModalUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.wk-size-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wk-size-modal__head h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  margin: 0;
  color: var(--ink, #120F0C);
}
.wk-size-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft, #3E3028);
  padding: 4px;
  line-height: 0;
}
.wk-size-modal__product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: .5px solid var(--line, #E2DBD2);
}
.wk-size-modal__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2, #F5F1EC);
}
.wk-size-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-size-modal__product-info { min-width: 0; }
.wk-size-modal__product-info strong {
  display: block;
  font-size: 14px;
  color: var(--ink, #120F0C);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-size-modal__price { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.wk-size-modal__price-was { text-decoration: line-through; color: var(--ink-mute, #8A7A6A); font-size: 12px; }
.wk-size-modal__groups { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.wk-size-modal__group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute, #8A7A6A);
  margin-bottom: 10px;
  display: block;
}
.wk-size-modal__group-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Modal pills reuse the exact same visual language as the main size/colour
   pills (see the .wk-var-opt rules above) so they look identical. */
.wk-size-modal .wk-var-opt {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 44px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1.5px solid var(--line, #d1d5db) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #374151;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  box-sizing: border-box;
}
.wk-size-modal .wk-var-opt.is-selected {
  border-color: var(--accent, #6B1E3E) !important;
  background: var(--accent, #6B1E3E) !important;
  color: #fff !important;
}
.wk-size-modal .wk-var-opt--color {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 2px solid transparent !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.wk-size-modal .wk-var-opt--color.is-selected {
  background: none !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent, #6B1E3E) !important;
}
#wk-size-modal-continue {
  width: 100%;
}
#wk-size-modal-continue[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
body.wk-size-modal-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   v1.7 — Compact Reviews section (see inc/reviews-admin.php)
   Rewritten for a smaller footprint — slimmer summary card, tag-style
   category chips, a "Real Photos" strip with a "+N More" tile, and
   truncated review text with a Read More toggle — instead of the
   old, much taller layout.
   ══════════════════════════════════════════════════════════════ */
.wk-reviews-section.wk-reviews-section--compact {
  padding: 28px 0 20px;
  max-width: 640px;
}
.wk-reviews-section--compact .wk-reviews-header { margin-bottom: 14px; }
.wk-reviews-section--compact .wk-reviews-title {
  font-size: clamp(18px,3.4vw,22px);
  margin-bottom: 0;
}
.wk-reviews-section--compact .wk-reviews-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface-2, #F5F1EC);
  border: none;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 6px;
}
.wk-reviews-section--compact .wk-reviews-score {
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  min-width: unset;
  flex-shrink: 0;
}
.wk-reviews-section--compact .wk-reviews-score__number {
  font-size: 30px;
  font-weight: 600;
  font-family: var(--font-body);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.wk-reviews-score__star { color: var(--accent, #6B1E3E); font-size: 16px; }
.wk-reviews-section--compact .wk-reviews-score__count {
  font-size: 10.5px;
  white-space: nowrap;
}
.wk-reviews-section--compact .wk-reviews-bars { gap: 3px; min-width: 120px; }
.wk-reviews-section--compact .wk-revbar-row { gap: 6px; }
.wk-reviews-section--compact .wk-revbar-label { width: 10px; font-size: 10px; }
.wk-reviews-section--compact .wk-revbar-track { height: 4px; }
.wk-reviews-section--compact .wk-revbar-count { display: none; }

.wk-reviews-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.wk-revtag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--success, #166534);
  background: var(--success-bg, #F0FDF4);
  border: .5px solid var(--success, #166534);
  border-radius: 100px;
  padding: 5px 10px;
}
.wk-revtag svg { flex-shrink: 0; }

.wk-reviews-photostrip { margin-bottom: 16px; }
.wk-reviews-photostrip__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft, #3E3028);
  margin: 0 0 8px;
}
.wk-reviews-photostrip__row { display: flex; gap: 6px; flex-wrap: wrap; }
.wk-reviews-photostrip__img,
.wk-reviews-photostrip__more {
  width: 56px;
  height: 56px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}
.wk-reviews-photostrip__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--accent, #6B1E3E);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.wk-reviews-photostrip__more span { font-size: 8.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }

.wk-reviews-section--compact .wk-reviews-list { gap: 0; }
.wk-reviews-section--compact .wk-review-card {
  padding: 12px 0;
  border-bottom: .5px solid var(--line, #E2DBD2);
}
.wk-reviews-section--compact .wk-review-card:first-child { border-top: .5px solid var(--line, #E2DBD2); }
.wk-review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}
.wk-review-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.4;
}
.wk-review-card__badge svg { fill: #fff; stroke: #fff; }
.wk-review-card__badge--good { background: var(--success, #166534); }
.wk-review-card__badge--ok   { background: #B08A45; }
.wk-review-card__badge--bad  { background: var(--sale, #B91C1C); }
.wk-reviews-section--compact .wk-review-date { font-size: 10.5px; }
.wk-reviews-section--compact .wk-review-card__text {
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 6px;
}
.wk-review-readmore {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  color: var(--accent, #6B1E3E);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.wk-review-card__bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-mute, #8A7A6A);
}
.wk-review-card__name { font-weight: 500; }
.wk-review-card__verified { color: var(--success, #166534); font-weight: 600; font-size: 10px; }
.wk-reviews-section--compact .wk-review-photos { margin-top: 8px; }
.wk-reviews-section--compact .wk-review-photo { width: 52px; height: 52px; }
.wk-reviews-section--compact .wk-reviews-load-more {
  margin-top: 12px;
  font-size: 11px;
}
.wk-reviews-section--compact .wk-reviews-empty { padding: 16px 0; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   v1.9 — Desktop PDP gallery: show the FULL photo, never cropped/zoomed
   Root cause: on desktop the image box was forced to a fixed height
   (620–680px) while its width followed the (much wider) 1.3fr grid
   column. Since the real photo is a 3:4 portrait and the box was
   effectively landscape, object-fit:cover had to crop deep into the
   top/bottom of the picture to fill it — that's the "zoomed in" look.
   Fix: the image now sizes itself from HEIGHT (matching its true 3:4
   ratio) and is centered in the column, instead of being stretched to
   fill a mismatched box. ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .wk-gallery-main {
    height: 640px !important;
    max-height: 74vh;
    background: var(--surface-2, #f5f1ec);
    /* NOTE: deliberately NOT display:flex here — .wk-gallery-main is the
       clipping viewport for the swipe track (overflow:hidden, from the
       base rule). Making it a flex container would shrink its flex-item
       child (.wk-gallery-track) down to the viewport's own width, which
       broke the track's ability to be wider than the viewport — the
       exact mechanism the carousel relies on to show one slide at a
       time. That was showing two half-slides side by side. Centering
       now happens one level down, inside each individual slide, instead. */
  }
  .wk-gallery-track { height: 100% !important; }
  .wk-gallery-slide {
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .wk-gallery-img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}
@media (min-width: 1024px) {
  .wk-gallery-main { height: 700px !important; }
}

/* ══════════════════════════════════════════════════════════════
   v1.9 — Cart-abandonment reminder ("Your cart is waiting!") no
   longer overlaps the sticky Add to Cart / Buy Now bar or the
   bottom nav — see the matching JS in main.js that measures both
   bars' real height and lifts the reminder above them dynamically.
   ══════════════════════════════════════════════════════════════ */
.wk-cart-reminder {
  z-index: 260 !important;
}

/* ══════════════════════════════════════════════════════════════
   v1.9 — Reviews: fix cramped card margins + oversized summary box
   ══════════════════════════════════════════════════════════════ */
/* The individual review "card" previously kept the old theme's 1px
   all-round border (from the non-compact .wk-review-card rule) while
   this compact version zeroed out its horizontal padding — so the
   text sat pressed right up against the left/right border with no
   breathing room at all. Removing the leftover side borders and
   giving the text a small, even inset fixes that. */
.wk-reviews-section--compact .wk-review-card {
  border: none !important;
  border-bottom: .5px solid var(--line, #E2DBD2) !important;
  padding: 12px 4px !important;
  margin-bottom: 0 !important;
}
.wk-reviews-section--compact .wk-review-card:hover { box-shadow: none; }

/* Summary card: keep the score and the star bars side-by-side in a
   single row at every width (matching the compact reference) instead
   of stacking them vertically, which was what made the summary block
   take up so much vertical space on phones. */
.wk-reviews-section--compact .wk-reviews-summary {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
@media (max-width: 480px) {
  .wk-reviews-section--compact .wk-reviews-summary { flex-direction: row !important; }
}
.wk-reviews-section--compact .wk-reviews-score {
  align-items: flex-start !important;
  min-width: unset !important;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   v1.10 — Recently Viewed + You May Also Like: one shared, robust
   2-column grid (matching the reference design) instead of the old
   horizontal-scroll "peeking card" layout on mobile.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wk-pdp-recommended__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow-x: visible !important;
    gap: 12px !important;
    padding-bottom: 0 !important;
  }
  .wk-rec-card {
    flex: none !important;
    scroll-snap-align: none !important;
  }
}
.wk-recently-viewed { padding: 32px 0; border-top: .5px solid var(--line, #E2DBD2); margin-top: 32px; }
.wk-recently-viewed__title,
.wk-pdp-recommended__title { font-size: 18px; margin-bottom: 16px; }

/* Rating badge — overlaid bottom-left on the card image, per reference */
.wk-rec-card__rating {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink, #120F0C);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.wk-rec-card__rating svg { color: var(--accent, #6B1E3E); flex-shrink: 0; }
.wk-rec-card__rating em { font-style: normal; font-weight: 500; color: var(--ink-mute, #8A7A6A); }

/* Size list — plain small text line under the price, per reference */
.wk-rec-card__sizes {
  font-size: 10.5px;
  color: var(--ink-mute, #8A7A6A);
  letter-spacing: .03em;
  margin-top: 2px;
}

/* Price row — strikethrough original + sale price side by side */
.wk-rec-card__price-row del {
  color: var(--ink-mute, #8A7A6A);
  font-weight: 400;
  font-size: 11.5px;
  margin-right: 4px;
}
.wk-rec-card__price-row ins {
  text-decoration: none;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   v1.10 — Review photo picker: thumbnail + remove button
   ══════════════════════════════════════════════════════════════ */
.wk-review-photo-thumb-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}
.wk-review-photo-thumb-wrap .wk-review-photo-thumb {
  width: 100%;
  height: 100%;
}
.wk-review-photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink, #120F0C);
  color: #fff;
  border: 2px solid #fff;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   v1.10 — Guest "sign in to review" prompt
   ══════════════════════════════════════════════════════════════ */
.wk-review-signin-prompt {
  text-align: center;
  padding: 28px 20px;
  background: var(--surface-2, #F5F1EC);
  border-radius: 8px;
}
.wk-review-signin-prompt p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink-soft, #3E3028);
}
.wk-review-signin-prompt .wk-btn {
  display: inline-flex;
  width: auto;
  padding: 0 24px;
  height: 44px;
}

/* ══════════════════════════════════════════════════════════════
   v1.10 — Missing side margins on Cart / Checkout / My Account
   Root cause: page.php deliberately renders these pages' content with
   NO wrapping container at all (see the comment in page.php — an
   earlier version double-wrapped them, causing a different bug), so
   whatever WooCommerce itself outputs is the only structure on the
   page. That's fine for the classic shortcode templates (this theme's
   own woocommerce/cart/cart.php etc. already carry their own side
   padding via .wk-cart-page / .wk-auth-page / .wk-woo-main) — but this
   store is using WooCommerce's block-based Cart/Checkout (confirmed by
   the "Order summary" / "Contact information" wording, which is the
   block checkout's own default copy, not the classic template's), and
   those blocks ship with zero side padding of their own, so the form
   fields run edge-to-edge on narrow screens.
   ══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wc-block-checkout,
.wc-block-cart {
  max-width: var(--max-w, 1440px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x, 20px);
  padding-right: var(--pad-x, 20px);
  box-sizing: border-box;
}
/* Belt-and-braces: whatever WooCommerce renders on these pages — block
   or classic — always gets the same side gutter as the rest of the
   site, even if a future WooCommerce update changes the block's exact
   class name. */
body.woocommerce-checkout > *,
body.woocommerce-cart > *,
body.woocommerce-account > * {
  padding-left: max(var(--pad-x, 20px), env(safe-area-inset-left));
  padding-right: max(var(--pad-x, 20px), env(safe-area-inset-right));
  box-sizing: border-box;
}
/* ...but don't double up on elements that already carry their own
   matching padding (header/footer and the classic-template wrappers,
   which already include --pad-x internally). */
body.woocommerce-checkout > header,
body.woocommerce-cart > header,
body.woocommerce-account > header,
body.woocommerce-checkout > footer,
body.woocommerce-cart > footer,
body.woocommerce-account > footer,
body.woocommerce-checkout .wk-woo-main,
body.woocommerce-cart .wk-woo-main,
body.woocommerce-account .wk-woo-main,
body.woocommerce-checkout .wk-cart-page,
body.woocommerce-cart .wk-cart-page,
body.woocommerce-checkout .wk-auth-page,
body.woocommerce-account .wk-auth-page {
  padding-left: 0;
  padding-right: 0;
}

/* ══════════════════════════════════════════════════════════════
   v1.11 — Global safety net for every `hidden`-attribute popup/
   drawer/modal in the theme (welcome popup, exit-intent popup,
   quick view, cart/menu/search overlays, filter drawer, etc).

   Several of these are toggled purely via the HTML `hidden`
   attribute rather than a CSS class. That only works if nothing
   else on the page sets `display` on the same element without a
   matching `[hidden]` override — one component (the welcome popup)
   was missing that override, which made it render as a permanent
   full-screen dark backdrop over the whole site, including product
   photos, until dismissed. That specific rule is now fixed at the
   source (inc/welcome-popup.php), but this belt-and-braces rule
   guarantees the same class of bug can never resurface from any
   popup/drawer added later — the `hidden` attribute always wins,
   full stop, everywhere in the theme.
   ══════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   v1.11 — Shop page pagination: square/rounded buttons instead of
   circles, tighter spacing above and below.
   Root cause: two conflicting rules in main.css both matched the
   WooCommerce `.page-numbers` links/spans (one from the original
   layout pass, one from a later "mobile fix" pass) — the later one
   added `border-radius:50%`, turning the square page-number chips
   into circles, and neither rule was ever consolidated afterwards.
   Both `.wk-pagination` blocks also added their own top/bottom
   spacing (32px margin + 20px padding) which stacked into a much
   bigger gap than intended. Overriding everything here, in the
   stylesheet this theme always loads last, wins regardless of
   cascade order upstream.
   ══════════════════════════════════════════════════════════════ */
.wk-pagination {
  margin: 8px 0 0 !important;
  padding: 16px 16px 24px !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.wk-pagination nav.woocommerce-pagination { margin: 0 !important; }
.wk-pagination ul.page-numbers {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* The class "page-numbers" is used by WordPress on BOTH this outer <ul>
     AND on each individual link/span inside it. An older rule in main.css
     (".wk-pagination .page-numbers { border-radius:50%; border:1px solid;
     height:36px; min-width:36px }") was meant only for the individual
     chips, but matches this wrapper too — giving the whole row a stray
     circular/oval outline. Resetting those specific properties here,
     just for the wrapper, removes that outline without touching the
     chip styling below. */
  border: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  background: transparent !important;
}
.wk-pagination ul.page-numbers li { list-style: none; margin: 0; padding: 0; }
.wk-pagination .page-numbers li a,
.wk-pagination .page-numbers li span,
.wk-pagination a.page-numbers,
.wk-pagination span.page-numbers,
.wk-pagination nav.woocommerce-pagination a,
.wk-pagination nav.woocommerce-pagination span,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
  min-width: 34px !important;
  height: 34px !important;
  width: auto !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--line, #ebebeb) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--ink, #111) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background .15s, color .15s, border-color .15s;
}
.wk-pagination .page-numbers li .current,
.wk-pagination .page-numbers li a:hover,
.wk-pagination span.page-numbers.current,
.wk-pagination a.page-numbers:hover,
.woocommerce-pagination span.page-numbers.current,
.woocommerce-pagination a.page-numbers:hover {
  background: var(--accent, #6B1E3E) !important;
  color: #fff !important;
  border-color: var(--accent, #6B1E3E) !important;
}

/* ══════════════════════════════════════════════════════════════
   v1.17 — Product photo zoom: the actual fix.
   Every round so far treated the dark backdrop behind the enlarged
   photo as an accidental bug and tried to stop it from appearing —
   but the zoom feature itself is wanted; it's the BLACK background
   around the photo that reads as "a black screen over the picture".
   Switching the lightbox to a clean white background (below) and
   restoring the tap-to-zoom trigger on mobile (see main.js) fixes
   the actual complaint instead of removing the feature.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .wk-gallery-expand {
    display: flex !important;
    opacity: 1 !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(0,0,0,.45) !important;
    color: #fff !important;
    z-index: 9 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   v1.17 — Product photo zoom (part 2): switch the enlarged-photo
   view from a dark backdrop to a clean white one. See main.css
   .wk-lightbox for the original dark version being overridden here.
   ══════════════════════════════════════════════════════════════ */
.wk-lightbox {
  background: #fff !important;
}
.wk-lightbox__close,
.wk-lightbox__nav {
  background: rgba(0,0,0,.06) !important;
  color: #222 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.wk-lightbox__close:hover,
.wk-lightbox__nav:hover {
  background: rgba(0,0,0,.12) !important;
}
.wk-lightbox__counter {
  color: rgba(0,0,0,.5) !important;
}
.wk-lightbox__img {
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
}

/* ══════════════════════════════════════════════════════════════
   v1.14 — Review photo lightbox: guaranteed-visible full-screen
   image viewer (see wk-fixes.js). Built almost entirely with inline
   styles at creation time on purpose — this theme's main.css has
   several independent, inconsistent z-index scales layered on top
   of each other (one pass used 999999/99999/99998, a later pass
   reset a different subset of the same classes down to a 300–600
   range), so a class-based z-index here would depend on which pass
   happens to win the cascade. Only the tap affordance (cursor) is
   handled here in CSS; the lightbox itself carries its own maximum
   z-index inline so it can never be visually covered by anything
   else on the page.
   ══════════════════════════════════════════════════════════════ */
.wk-rv-lightbox__close:hover,
.wk-rv-lightbox__nav:hover { background: rgba(255,255,255,.25) !important; }


.wk-reviews-photostrip__img,
.wk-reviews-photostrip__more {
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.wk-reviews-photostrip__img:hover,
.wk-reviews-photostrip__more:hover { opacity: .85; }

.wk-reviews-photostrip__img:active,
.wk-reviews-photostrip__more:active { transform: scale(.96); }


/* ══════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — customizer-driven colours + auto-scroll marquee
   (WhiteKurti Theme > Announcement Bar in wp-admin Customizer).
   Structure rendered by wk_announcement_strip() in
   inc/template-functions.php: an outer #wk-promo-strip, a viewport
   that clips overflow, and a track holding TWO copies of the text.
   JS in wk-fixes.js decides (based on data-scroll-mode) whether to
   add the .is-scrolling class; CSS below just reacts to that class.
   Default colours match the original hard-coded look exactly when no
   custom colour is chosen in the Customizer (var(--wk-promo-bg) /
   var(--wk-promo-text) are only set inline when an admin picks one).
   ══════════════════════════════════════════════════════════════════ */
:root {
  --wk-promo-bg-fallback:   var(--ink);
  --wk-promo-text-fallback: var(--bg);
}
body.wk-brand-black {
  --wk-promo-bg-fallback:   var(--surface-2);
  --wk-promo-text-fallback: var(--ink);
}
#wk-promo-strip {
  background: var(--wk-promo-bg, var(--wk-promo-bg-fallback)) !important;
  color: var(--wk-promo-text, var(--wk-promo-text-fallback)) !important;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0;
  overflow: hidden;
  white-space: normal;
}
#wk-promo-strip .wk-promo-strip__viewport {
  width: 100%;
  overflow: hidden;
  padding: 8px 14px;
  box-sizing: border-box;
}
#wk-promo-strip .wk-promo-strip__track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
}
/* Static (short text, or "never" mode): centre a single copy, hide the
   duplicate that only exists for the scrolling case. */
#wk-promo-strip:not(.is-scrolling) .wk-promo-strip__viewport {
  display: flex;
  justify-content: center;
}
#wk-promo-strip:not(.is-scrolling) .wk-promo-strip__item:nth-child(2) {
  display: none;
}
/* Scrolling (long text in "auto" mode, or "always" mode): loop both
   copies with a seamless marquee, same technique as the testimonials
   track above. */
#wk-promo-strip.is-scrolling .wk-promo-strip__item {
  padding-right: 56px;
}
#wk-promo-strip.is-scrolling .wk-promo-strip__track {
  animation: wk-promo-marquee var(--wk-promo-duration, 22s) linear infinite;
}
#wk-promo-strip.is-scrolling:hover .wk-promo-strip__track {
  animation-play-state: paused;
}
#wk-promo-strip.wk-promo-strip--speed-slow   { --wk-promo-duration: 34s; }
#wk-promo-strip.wk-promo-strip--speed-normal { --wk-promo-duration: 22s; }
#wk-promo-strip.wk-promo-strip--speed-fast   { --wk-promo-duration: 13s; }
@keyframes wk-promo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  #wk-promo-strip.is-scrolling .wk-promo-strip__track {
    animation: none;
  }
  #wk-promo-strip.is-scrolling .wk-promo-strip__viewport {
    overflow-x: auto;
  }
}


/* ══════════════════════════════════════════════════════════════════
   HERO SECTION — customizer-driven colours, overlay & layout
   (WhiteKurti Theme > Hero Section — Style & Layout in wp-admin
   Customizer). inc/hero-section.php sets --wk-hero-overlay and,
   only when an admin has picked a custom value, --wk-hero-text /
   --wk-hero-eyebrow / --wk-hero-btn-bg / --wk-hero-btn-text as
   inline CSS vars on #wk-herobanner. Every rule below falls back to
   the theme's original look when a var isn't set.
   ══════════════════════════════════════════════════════════════════ */
.wk-herobanner__scrim {
  background: linear-gradient(
    0deg,
    rgba(0,0,0, var(--wk-hero-overlay, .65)) 0%,
    rgba(0,0,0, calc(var(--wk-hero-overlay, .65) * 0.385)) 45%,
    rgba(0,0,0, calc(var(--wk-hero-overlay, .65) * 0.08)) 70%
  ) !important;
}
.wk-herobanner__body {
  color: var(--wk-hero-text, #fff);
}
.wk-herobanner__sub {
  color: var(--wk-hero-text, rgba(255,255,255,.85));
}
.wk-herobanner__eyebrow {
  color: var(--wk-hero-eyebrow, var(--accent));
}
.wk-herobanner__cta {
  background: var(--wk-hero-btn-bg, #fff);
  color: var(--wk-hero-btn-text, var(--ink));
}

/* Text & button position */
.wk-herobanner--pos-bottom-center .wk-herobanner__body {
  align-items: center;
  text-align: center;
}
.wk-herobanner--pos-bottom-center .wk-herobanner__sub { margin-left: auto; margin-right: auto; }
.wk-herobanner--pos-center .wk-herobanner__body {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 0;
}
.wk-herobanner--pos-center .wk-herobanner__sub { margin-left: auto; margin-right: auto; }

/* Banner height */
.wk-herobanner--height-compact { height: 56vh; min-height: 360px; max-height: 520px; }
.wk-herobanner--height-tall    { height: 90vh; min-height: 520px; max-height: 860px; }
@media (max-width: 767px) {
  .wk-herobanner--height-compact { height: 50vh; min-height: 340px; }
  .wk-herobanner--height-tall    { height: 78vh; min-height: 480px; }
}

/* ══════════════════════════════════════════════════════════════
   v1.28 — "View All Reviews" popup + trigger button.
   Pairs with the JS in wk-fixes.js (#wk-reviews-viewall-btn handler)
   and the PHP in inc/reviews-admin.php (wk_render_reviews_section +
   wk_ajax_reviews_modal_page). Z-index sits above the shared
   .wk-modal system (99990) but below the photo lightbox
   (2147483647), so a photo opened from inside this popup still
   layers correctly on top of it.
   ══════════════════════════════════════════════════════════════ */

/* Trigger button — solid pill, more prominent than the old text-link
   "load more" it replaces, closer to the "See all reviews" CTA style
   used on most marketplaces. */
.wk-reviews-viewall-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  background: #fff !important;
  border: 2px solid var(--accent, #6B1E3E) !important;
  color: var(--accent, #6B1E3E) !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 18px;
  padding: 14px 20px !important;
  height: 48px !important;
  border-radius: 4px !important;
  transition: background .2s, color .2s;
}
.wk-reviews-viewall-btn:hover {
  background: var(--accent, #6B1E3E) !important;
  color: #fff !important;
}
.wk-reviews-viewall-btn:active { transform: scale(.98); }
.wk-reviews-viewall-btn svg { flex-shrink: 0; transition: transform .15s; }
.wk-reviews-viewall-btn:hover svg { transform: translateX(2px); }

.wk-rvm-overlay {
  position: fixed;
  inset: 0;
  z-index: 999995;
  background: rgba(18,15,12,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: wk-rvm-fade .18s ease-out;
}
@keyframes wk-rvm-fade { from { opacity: 0; } to { opacity: 1; } }

.wk-rvm-panel {
  width: min(640px, 100%);
  max-height: 86vh;
  background: var(--surface, #fff);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wk-rvm-in .22s cubic-bezier(.22,1,.36,1);
}
@keyframes wk-rvm-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.wk-rvm-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: .5px solid var(--line, #E2DBD2);
  flex-shrink: 0;
}
.wk-rvm-panel__heading h3 {
  margin: 0 0 4px;
  font-family: var(--font-display, serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink, #120F0C);
}
.wk-rvm-panel__sub {
  font-size: 12.5px;
  color: var(--ink-mute, #8A7A6A);
  font-weight: 500;
}
.wk-rvm-panel__star { color: var(--accent, #6B1E3E); }
.wk-rvm-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-mute, #8A7A6A);
  padding: 2px 4px;
  flex-shrink: 0;
  transition: color .15s;
}
.wk-rvm-panel__close:hover { color: var(--ink, #120F0C); }

.wk-rvm-panel__body {
  overflow-y: auto;
  padding: 8px 20px 20px;
  flex: 1;
}

.wk-rvm-card {
  padding: 16px 0;
  border-bottom: .5px solid var(--line, #E2DBD2);
}
.wk-rvm-card:first-child { padding-top: 12px; }
.wk-rvm-card:last-of-type { border-bottom: none; }

.wk-rvm-card__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.wk-rvm-card__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2, #F5F1EC);
}
.wk-rvm-card__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #6B1E3E);
  background: var(--accent-pale, #F5EAF0);
}
.wk-rvm-card__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-rvm-card__name { font-size: 13px; font-weight: 600; color: var(--ink, #120F0C); }
.wk-rvm-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--ink-mute, #8A7A6A); }
.wk-rvm-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.wk-rvm-card__badge--good { background: var(--success, #166534); }
.wk-rvm-card__badge--ok   { background: #B08A45; }
.wk-rvm-card__badge--bad  { background: var(--sale, #B91C1C); }
.wk-rvm-card__verified { color: var(--success, #166534); font-weight: 600; }

.wk-rvm-card__text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft, #3E3028);
  white-space: pre-line;
}

.wk-rvm-card__photos { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-rvm-card__photo {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: .5px solid var(--line, #E2DBD2);
  transition: opacity .15s;
}
.wk-rvm-card__photo:hover { opacity: .85; }

.wk-rvm-loadmore {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 16px;
  background: none;
  border: 1px solid var(--line, #E2DBD2);
  color: var(--accent, #6B1E3E);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wk-rvm-loadmore:hover { border-color: var(--accent, #6B1E3E); background: var(--accent-pale, #F5EAF0); }

@media (max-width: 600px) {
  .wk-rvm-overlay { padding: 0; align-items: flex-end; }
  .wk-rvm-panel {
    width: 100%;
    max-height: 88vh;
    border-radius: 12px 12px 0 0;
    animation: wk-rvm-in-mobile .22s cubic-bezier(.22,1,.36,1);
  }
  @keyframes wk-rvm-in-mobile { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .wk-rvm-card__photo { width: 52px; height: 52px; }
}

/* ══════════════════════════════════════════════════════════════
   v1.18 — Shop pagination: eliminate the oval overlay for good.
   Root cause traced to source: two other stylesheets (main.css and
   woocommerce.css) both defined the individual page-number chips
   with `border-radius:50%`. When several of those round chips sit
   next to each other with small gaps, the borders/backgrounds
   visually merge into one elongated oval/pill shape overlapping the
   row instead of reading as separate square buttons. Fixed at the
   source (border-radius changed to 4px in both files) and locked
   down again here so nothing can reintroduce the round shape.
   ══════════════════════════════════════════════════════════════ */
.wk-pagination .page-numbers li a,
.wk-pagination .page-numbers li span,
.wk-pagination a.page-numbers,
.wk-pagination span.page-numbers,
.wk-pagination nav.woocommerce-pagination a,
.wk-pagination nav.woocommerce-pagination span,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers,
.woocommerce-pagination ul li .page-numbers,
.woocommerce-pagination ul li a {
  border-radius: 4px !important;
}
.wk-pagination::before,
.wk-pagination::after,
.wk-pagination ul.page-numbers::before,
.wk-pagination ul.page-numbers::after,
.woocommerce-pagination::before,
.woocommerce-pagination::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   v1.19 — Restore side margins on admin-created Pages (Privacy
   Policy, About, Terms, blog index, etc.)
   Root cause: main.css's "FULL-WIDTH FIX" block zeroes out padding
   on `.wk-main` (intended for full-bleed templates like the shop).
   But page.php and index.php put BOTH `.wk-main` and `.wk-container`
   on the same <main> element, and since the `.wk-main` padding:0
   rule is declared later in the cascade with equal specificity, it
   was winning and cancelling `.wk-container`'s side padding —
   causing page text to sit flush against the browser edges instead
   of inside the container margins.
   ══════════════════════════════════════════════════════════════ */
.wk-main.wk-container {
  padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px)) !important;
}