/* =============================================================
   Swapot WooCommerce CSS
   WC-specific overrides — populated as WC templates are built
   ============================================================= */

/* ── WC notices ──────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--swapot-green);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--swapot-green);
}
.woocommerce-error {
  border-top-color: #e2401c;
}

/* ── WC buttons ──────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  /* `<a>` defaults to display:inline — vertical padding on an inline
     element doesn't reserve line-box space, so the button visually
     overlaps surrounding text instead of pushing it aside (this is what
     broke the "added to cart" notice's View Cart button). inline-flex
     fixes it for every a.button on the site, not just this one case. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--swapot-green);
  color: #fff;
  font-family: var(--swapot-font);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 14px 28px;
  border: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--swapot-green-hover);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   SHOP MEGA MENU — "Shop" nav item image showcase
   Overrides the legacy Ciloe .mega-menu-shop.bg-mega-menu1 rule
   (swapot-theme.css), which hardcodes a fixed 900px / 4-tiles-per-row
   shell — fine for exactly 4 categories, but leaves ugly dead space
   with fewer and forces 3 tall rows with 10-12. This makes the panel
   size to its actual content (1–6 image tiles, see MAX_IMAGE_TILES in
   inc/class-walker-nav.php) and renders anything beyond that as a
   compact text-link list instead of more oversized image cards.

   Panel width is intentionally NOT set here — it's computed in PHP
   (Swapot_Walker_Nav_Menu::get_mega_panel_width(), emitted as an inline
   style) and not left to the browser's own shrink-to-fit sizing for a
   position:absolute element, which measured narrower than the content
   actually needed and wrapped tiles onto separate lines instead of a
   row. The 180px tile / 20px gap / 60px padding values below must stay
   in sync with the ones that function uses to compute that width.
   ══════════════════════════════════════════════════════════════ */
.mega-menu-shop.bg-mega-menu1 {
  left: 0;
}
.mega-menu-shop.bg-mega-menu1 .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.mega-menu-shop.bg-mega-menu1 .column-4 {
  width: 180px;
  flex: 0 0 180px;
}
/* Category source images are a mix of portrait and landscape originals
   (whatever each admin uploaded), so .img-responsive's default
   height:auto let every tile render at a different height and made the
   grid look uneven. Force a common square box and crop to fill it,
   the same object-fit:cover pattern used for shop/PDP images elsewhere
   in this file, so every tile is the same size regardless of source
   image orientation. */
.mega-menu-shop.bg-mega-menu1 .column-4 img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}
.mega-menu-overflow {
  flex: 1 1 100%;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
.mega-menu-overflow__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #999;
  margin: 0 0 10px;
}
.mega-menu-overflow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}
.mega-menu-overflow__list a {
  font-size: 13px;
  color: var(--swapot-dark);
  text-decoration: none;
  transition: color .2s;
}
.mega-menu-overflow__list a:hover {
  color: var(--swapot-green);
}

/* ══════════════════════════════════════════════════════════════
   SHOP BANNER
   ══════════════════════════════════════════════════════════════ */
.shop-banner-img {
  width: 100%;
  height: 480px;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* Light scrim so dark heading is readable on any image tone */
.banner_page .banner-image-wrap {
  position: relative;
}
.banner_page .banner-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.55) 100%
  );
  pointer-events: none;
}

.banner_page .text_banner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: var(--swapot-dark);
  text-shadow: none;
  z-index: 2; /* above the scrim */
}
.banner_page .text_banner h1 {
  color: var(--swapot-dark);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: none;
}
/* Neutralise Ciloe's absolute-centring rules so plain banners flow normally */
.banner_page .text_banner--plain {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100%;
  padding: 40px 20px;
  color: inherit;
  text-shadow: none;
}
.text_banner--plain h1 {
  color: var(--swapot-dark) !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB  — "Home / Category / Current"
   Used inside .banner_page .text_banner (white), inside
   .collections-hero (dark), and on product summary (dark).
   ══════════════════════════════════════════════════════════════ */
.swapot-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}
.swapot-breadcrumb__link {
  text-decoration: none;
  transition: opacity .2s;
}
.swapot-breadcrumb__link:hover { opacity: 1; text-decoration: underline; }
.swapot-breadcrumb__sep {
  margin: 0 8px;
  opacity: .6;
  font-weight: 300;
}
.swapot-breadcrumb__current {
  font-weight: 500;
}

/* Dark variant — inside banner image overlay (dark text on light scrim) */
.banner_page .text_banner .swapot-breadcrumb,
.banner_page .text_banner .swapot-breadcrumb__link,
.banner_page .text_banner .swapot-breadcrumb__sep,
.banner_page .text_banner .swapot-breadcrumb__current {
  color: #555;
}
.banner_page .text_banner .swapot-breadcrumb__link { opacity: .85; }
.banner_page .text_banner .swapot-breadcrumb__link:hover { opacity: 1; color: var(--swapot-green); }

/* Collections hero variant — on sage-green background */
.collections-hero__breadcrumb .swapot-breadcrumb,
.collections-hero__breadcrumb .swapot-breadcrumb__link,
.collections-hero__breadcrumb .swapot-breadcrumb__sep,
.collections-hero__breadcrumb .swapot-breadcrumb__current {
  color: #888;
}
.collections-hero__breadcrumb .swapot-breadcrumb__link:hover { color: var(--swapot-green); }

/* PDP product summary variant */
.product-summary-breadcrumb .swapot-breadcrumb,
.product-summary-breadcrumb .swapot-breadcrumb__link,
.product-summary-breadcrumb .swapot-breadcrumb__sep,
.product-summary-breadcrumb .swapot-breadcrumb__current {
  color: #999;
}
.product-summary-breadcrumb .swapot-breadcrumb__link:hover { color: var(--swapot-green); }

/* ══════════════════════════════════════════════════════════════
   SHOP TOOLBAR
   ══════════════════════════════════════════════════════════════ */
/* This row used to bleed ~15px past its own left edge on every viewport:
   .btn_layout_shop's own "padding: 18px 0" shorthand zeroed the
   horizontal padding that the shared .container class otherwise
   provides, but its child .row still carried Bootstrap's standard
   -15px margin — with no container padding left to cancel, that -15px
   had nothing to offset and pulled .row (and everything inside it,
   including the "N products available" text) 15px past .btn_layout_shop's
   own box. On desktop this was masked by the "See:"/"Filters" columns'
   own internal padding; on mobile it was enough to push the leading
   digits of "17 products available" past the viewport edge, where
   most mobile layouts in this theme clip overflow-x — hence the count
   number reading as "missing". Fixed by keeping .container's real
   15px side padding (only overriding top/bottom here) and zeroing the
   .row/.flex margins that were meant to cancel it, so every child's
   padding is what actually determines its inset — no cancel-the-
   negative-margin arithmetic left to get wrong. */
.btn_layout_shop {
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 0 !important;
}
.btn_layout_shop .row {
  margin-left: 0;
  margin-right: 0;
}
.btn_layout_shop .flex {
  display: flex;
  align-items: center;
}
.shop_page .btn_layout_shop .margin_left_right {
  margin: 0;
}
.btn_layout_shop .btn_function {
  display: flex;
  align-items: center;
}
/* Ciloe's base theme zeroes the outer padding on the first ("available-
   filter") and last ("filter-button") columns of this row, expecting
   .container's own 15px side padding to be the only inset — restore
   that expectation now that .btn_layout_shop no longer clobbers it. */
.btn_layout_shop .available-filter { padding-left: 0; }
.btn_layout_shop .filter-button { padding-right: 0; }
.available-filter h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-dark);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Sort dropdown */
.swapot-sort-dropdown .dropdown-toggle {
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-dark);
  cursor: pointer;
  white-space: nowrap;
}
.swapot-sort-dropdown .dropdown-toggle .dropdown-label {
  color: var(--swapot-green);
}
.swapot-sort-dropdown .dropdown-menu {
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  padding: 6px 0;
  min-width: 200px;
}
.swapot-sort-dropdown .dropdown-menu a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  color: #555;
  transition: background .15s, color .15s;
}
.swapot-sort-dropdown .dropdown-menu a:hover,
.swapot-sort-dropdown .dropdown-menu a.active {
  background: var(--swapot-green);
  color: #fff;
}

/* Column switcher */
.gr_btn_product_size p {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 8px 0 0;
  display: inline;
}
.products-size {
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  margin: 0 2px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.products-size:hover,
.products-size.active {
  border-color: var(--swapot-green);
  color: var(--swapot-green);
  background: rgba(58,157,87,.06);
}

/* Filter toggle button */
.btn_filter_toggle {
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  color: var(--swapot-dark);
  transition: border-color .2s, color .2s;
}
.btn_filter_toggle .ti-filter { margin-right: 6px; }
.btn_filter_toggle.active,
.btn_filter_toggle:hover {
  border-color: var(--swapot-green);
  color: var(--swapot-green);
}

/* Mobile sort bar */
.swapot-sort-select-mb {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-dark);
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 12px;
  width: 100%;
  cursor: pointer;
}
.btn_filter_mb .btn_filter {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--swapot-dark);
  padding: 10px 12px;
  cursor: pointer;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   SHOP SIDEBAR — native WooCommerce filter widgets
   (Product Categories / Filter by Price / Filter by Attribute /
   Active Filters — see inc/setup.php + mu-plugins/swapot-shop-
   sidebar-setup.php). woocommerce_enqueue_styles is disabled
   site-wide, so these widgets ship zero CSS of their own — every
   rule below is styling WC's own default markup, not custom markup.
   ══════════════════════════════════════════════════════════════ */

/* Layout: sidebar left, grid right — visible by default on desktop,
   a slide-up drawer on mobile via the existing #btn-shop-filter toggle
   (assets/js/swapot-shop.js). Bootstrap 3's .row already clearfixes
   around its floated children, so .shop-layout-row's height already
   matches its tallest column (almost always the product grid) — the
   same mechanism that lets position:sticky below travel the full
   height and stop naturally, no flex/grid change needed on the row. */
.shop-layout-row { margin: 0 -15px; }
.shop-sidebar-col {
  padding: 20px 20px 20px 30px;
  background: #f7f7f7;
  border-radius: 0 14px 14px 0;
}
.shop-main-col { padding: 0 15px 0 25px; }

@media (min-width: 992px) {
  .shop-sidebar-col {
    position: sticky;
    top: 108px; /* clears the 92px sticky site header + breathing room — same value as .product-gallery-col */
  }
  .admin-bar .shop-sidebar-col {
    top: 140px;
  }
}

@media (max-width: 991px) {
  .shop-sidebar-col {
    display: none;
    padding: 0 15px;
    margin-bottom: 24px;
    background: none;
    border-radius: 0;
  }
  /* .shop-main-col's default 25px-left/15px-right padding exists to
     clear the desktop sidebar column; the sidebar is off-canvas at this
     breakpoint, so keep the padding even on both sides instead — the
     extra 10px on the left was otherwise the only thing making the
     "Sort by" dropdown (right-aligned via justify-content:flex-end)
     sit tighter against the right edge than the toolbar row above it. */
  .shop-main-col {
    padding: 0 15px;
  }

  /* Slide-up drawer — #shop-filter-panel becomes a fixed full-screen
     sheet instead of an inline reveal once swapot-shop.js adds this
     class (see swapotOpenFilterDrawer()). */
  #shop-filter-panel.is-drawer-open {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%; /* Bootstrap's col-lg-3 sets an explicit width that would
                    otherwise win over inset:0's implied left/right:0 —
                    position:fixed with both width and left/right set is
                    over-constrained, and width takes precedence. */
    z-index: 1000;
    background: #f7f7f7;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 20px 86px;
    margin-bottom: 0;
  }
  .shop-filter-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,.4);
  }
  .shop-filter-drawer-backdrop.is-visible { display: block; }
  body.swapot-drawer-open { overflow: hidden; }

  .shop-filter-drawer-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1001;
    background: #fff;
    padding: 14px 20px;
    box-shadow: 0 -4px 14px rgba(0,0,0,.1);
  }
  .btn-drawer-show-results {
    width: 100%;
    background: var(--swapot-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
  }
}

/* Collapsible accordion — every widget title becomes a toggle (see
   swapotInitShopFilterAccordion() in swapot-shop.js, which wraps each
   widget's own content in a .shop-sidebar__widget-body the first time
   the page loads, since WC's widget output has no such wrapper by
   default). Expanded is the default state; collapsed state and choice
   persist per-widget in sessionStorage for the visit. */
.shop-sidebar__widget-title.js-widget-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.shop-sidebar__widget-title.js-widget-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--swapot-dark);
  border-bottom: 2px solid var(--swapot-dark);
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}
.shop-sidebar__widget.is-collapsed .shop-sidebar__widget-title.js-widget-toggle::after {
  transform: rotate(-45deg);
}

/* Each filter group is its own card — floating on the .shop-sidebar-col
   canvas set above, matching the approved concept's "individual cards,
   clear separation" direction rather than one continuous block. */
.shop-sidebar__widget {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.shop-sidebar__widget:last-child { margin-bottom: 0; }
.shop-sidebar__widget-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--swapot-dark);
  margin: 0 0 12px;
}

/* Product Categories widget */
.shop-sidebar__widget ul.product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-sidebar__widget ul.product-categories li {
  padding: 7px 0;
  border-bottom: 1px solid #f2f2f2;
}
.shop-sidebar__widget ul.product-categories li:last-child { border-bottom: none; }
.shop-sidebar__widget ul.product-categories a {
  font-size: 13px;
  color: #555;
  transition: color .2s;
}
.shop-sidebar__widget ul.product-categories a:hover,
.shop-sidebar__widget ul.product-categories li.current-cat > a {
  color: var(--swapot-green);
}
.shop-sidebar__widget ul.product-categories .count {
  font-size: 11px;
  color: #999;
  background: #f2f2f2;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
}

/* Filter by Price widget (jQuery UI slider — no jQuery UI theme CSS
   loads on this site, so the handle/range/track are all styled here) */
.shop-sidebar__widget .price_slider { margin-bottom: 18px; }
.shop-sidebar__widget .ui-slider {
  position: relative;
  height: 4px;
  background: #e5e5e5;
  border-radius: 4px;
  margin: 10px 4px 20px;
}
.shop-sidebar__widget .ui-slider .ui-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--swapot-green);
  border-radius: 4px;
}
.shop-sidebar__widget .ui-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  transform: translateY(-50%);
  background: #fff;
  border: 2px solid var(--swapot-green);
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.shop-sidebar__widget .price_slider_amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shop-sidebar__widget .price_slider_amount .price_label {
  font-size: 12px;
  color: #666;
}
.shop-sidebar__widget .price_slider_amount button {
  background: var(--swapot-dark);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s;
}
.shop-sidebar__widget .price_slider_amount button:hover { background: var(--swapot-green); }

/* Filter by Attribute widget (Swapot Grade, and any future attribute) */
.shop-sidebar__widget .woocommerce-widget-layered-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-sidebar__widget .woocommerce-widget-layered-nav-list__item {
  padding: 7px 0;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
}
.shop-sidebar__widget .woocommerce-widget-layered-nav-list__item:last-child { border-bottom: none; }
.shop-sidebar__widget .woocommerce-widget-layered-nav-list__item a {
  font-size: 13px;
  color: #555;
  transition: color .2s;
}
.shop-sidebar__widget .woocommerce-widget-layered-nav-list__item a:hover,
.shop-sidebar__widget .woocommerce-widget-layered-nav-list__item--chosen a {
  color: var(--swapot-green);
}
.shop-sidebar__widget .woocommerce-widget-layered-nav-list .count {
  font-size: 11px;
  color: #999;
  background: #f2f2f2;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
}

/* Swapot Grade filter — a small colour dot per term (its own badge
   colour, from term meta) so the filter list echoes the same visual
   language as the PDP Grade badge/card. Injected via
   swapot_grade_layered_nav_dot() in inc/grading.php. */
.swapot-grade-filter-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Active Filters widget — chip style.
   Note: this widget's own PHP (class-wc-widget-layered-nav-filters.php)
   outputs a bare <ul> with no wrapper class — .widget_layered_nav_filters
   (from WC_Widget's own $widget_cssclass, landing in this theme's
   before_widget %2$s placeholder) is what actually scopes this reliably,
   and each entry is <li class="chosen ..."> rather than a BEM-style class. */
.widget_layered_nav_filters ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.widget_layered_nav_filters li.chosen a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--swapot-green);
  color: var(--swapot-green);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.widget_layered_nav_filters li.chosen a:hover {
  background: var(--swapot-green);
  color: #fff;
}

/* Native "Sort by" (woocommerce_catalog_ordering, restored in
   inc/woocommerce.php) — renders at the top of .shop-main-col via
   woocommerce_before_shop_loop. */
.shop-main-col .woocommerce-ordering {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.shop-main-col .woocommerce-ordering select.orderby {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 32px 8px 14px;
  font-size: 13px;
  color: var(--swapot-dark);
  background-color: #fff;
  cursor: pointer;
}
.shop-main-col .woocommerce-ordering select.orderby:focus {
  outline: none;
  border-color: var(--swapot-green);
}
.shop-main-col .woocommerce-result-count {
  display: none; /* product count already shown in shop-toolbar.php */
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT GRID — column mode variants
   ══════════════════════════════════════════════════════════════ */
.products-grid {
  margin-left: -10px;
  margin-right: -10px;
}
.products-grid .layout_product_shop {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 30px;
}
/* 3-column mode (triggered by .col3 on .products-grid) */
.products-grid.col3 .layout_product_shop {
  width: 33.3333%;
}
/* The legacy Bootstrap clearfix (swapot-theme.css) forces `clear:left` on
   every 4th/2nd child (col-lg-3/col-md-3: nth-child(4n+1), col-sm-6/col-xs-6:
   nth-child(2n+1)) to match the *default* 4-per-row/2-per-row grid. In
   3-column mode items naturally wrap every 3rd item instead, so that
   mistimed clear evicts the 4th/8th/... item into a row by itself and
   produces the "3 tiles, then a gap" pattern. Neutralize the stale clears
   and clear on every 3rd item instead. Higher specificity than the
   single-class legacy selectors, so no !important needed. */
.products-grid.col3 .layout_product_shop:nth-child(4n+1),
.products-grid.col3 .layout_product_shop:nth-child(2n+1) {
  clear: none;
}
.products-grid.col3 .layout_product_shop:nth-child(3n+1) {
  clear: left;
}
/* 4-column mode (default) */
.products-grid.col4 .layout_product_shop,
.products-grid .layout_product_shop {
  /* Bootstrap col-lg-3 = 25% — already applied via PHP class */
}

/* No products found */
.no-products-found {
  padding: 80px 20px;
}

/* ══════════════════════════════════════════════════════════════
   CONTENT PAGINATION
   ══════════════════════════════════════════════════════════════ */
.content_pagination {
  padding: 40px 0 20px;
}
.content_pagination .pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.content_pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-dark);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.content_pagination .page-numbers:hover,
.content_pagination .page-numbers.current {
  background: var(--swapot-green);
  border-color: var(--swapot-green);
  color: #fff;
}
.content_pagination .page-numbers.dots {
  border: none;
  pointer-events: none;
  color: #aaa;
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
   ══════════════════════════════════════════════════════════════ */

/* Layout */
.single-product-page .product-detail-row {
  margin-bottom: 0;
}
.product-gallery-col,
.product-summary-col {
  padding-left: 20px;
  padding-right: 20px;
}

/* ── Sticky gallery (desktop only) ───────────────────────────────
   .product-detail-row becomes a flex row with align-items:flex-start so
   the gallery column's *containing block* (the row itself) spans the
   full height of whichever column is taller — normally .product-summary-col
   once it has real description/spec content. position:sticky on the
   gallery then has room to travel that entire height and naturally stops
   being sticky the moment the row's bottom edge (i.e. the end of the
   product info) comes into view — no JS required. Scoped to >=992px,
   the same breakpoint the two-column layout itself already uses
   (col-md-7/col-lg-7 vs the col-sm-12 stacked mobile layout below it). */
@media (min-width: 992px) {
  .single-product-page .product-detail-row {
    display: flex;
    align-items: flex-start;
  }
  .product-gallery-col {
    position: sticky;
    top: 108px; /* clears the 92px sticky site header + breathing room */
  }
  .admin-bar .product-gallery-col {
    top: 140px; /* +32px WP admin bar, mirrors .admin-bar .header-v1.header-fixed */
  }
}

/* ── Gallery ─────────────────────────────────────────────────────
   Main stage (prev arrow | image/video | next arrow), a centered
   position counter, then a horizontal thumbnail strip below it — matches
   the Currys reference layout. The arrows sit beside the image, in the
   surrounding whitespace, rather than overlaid on top of it, so the
   image itself stays clean and unobstructed. */
.product-gallery-wrap {
  position: relative;
}

.product-gallery-stage {
  display: flex;
  align-items: center;
  gap: 16px;
}

.product-gallery-side-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: var(--swapot-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.product-gallery-side-nav:hover {
  background: var(--swapot-green);
  border-color: var(--swapot-green);
  color: #fff;
}

.product-main-image-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  background: #f7f7f7;
}
.product-main-image-wrap img {
  width: 100%;
  display: block;
  transition: transform .4s ease;
}
.product-main-image-wrap:hover img {
  transform: scale(1.03);
}
.product-main-image {
  display: block;
  cursor: zoom-in;
}
.product-zoom-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #555;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.product-main-image-wrap:hover .product-zoom-hint {
  opacity: 1;
}
.product-main-image-wrap.is-video-active .product-zoom-hint {
  display: none;
}
.product-main-image-wrap video.js-main-product-video {
  width: 100%;
  display: block;
  background: #000;
}
/* Embed (YouTube/etc.) stage — the iframe wp_oembed_get() returns comes
   back with fixed width/height attributes (see the args passed to it in
   swapot_get_product_oembed_html()); forced to a responsive 16:9 box here
   instead, matching how the rest of the gallery scales with its column. */
.product-main-image-wrap .js-main-product-oembed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}
.product-main-image-wrap .js-main-product-oembed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Position counter — centered, between the stage and the thumbnails */
.product-gallery-counter {
  text-align: center;
  margin-top: 12px;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Horizontal thumbnail strip — a fixed-size viewport clipping a sliding
   track, rather than flex-wrap. 4 thumbnails is exactly 100% of the
   viewport width at 25% each (same math the old flex-wrap version used),
   so no item-width change was needed — only the wrap behaviour itself.
   swapot-product.js slides .product-thumbs-track via transform to keep
   the active thumbnail inside this 4-item window; the <=4-items case is
   handled here in CSS via .is-centered (added server-side in
   product-image.php, since PHP already knows the count at render time). */
.product-thumbs-viewport {
  overflow: hidden;
  margin-top: 14px;
}
.product-thumbs-track {
  display: flex;
  gap: 12px;
  transition: transform .25s ease;
}
.product-thumbs-track.is-centered {
  justify-content: center;
}
.product-thumb-item {
  position: relative; /* positioning context for --overlay play badges below */
  flex: 0 0 calc(25% - 9px);
  max-width: 108px;
  aspect-ratio: 1/1;
  border: 2px solid #ececec;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #f5f5f5;
  transition: border-color .2s;
}
.product-thumb-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.product-thumb-item:hover,
.product-thumb-item.active {
  border-color: var(--swapot-green);
}

/* Video thumb — dark tile + centered white play badge, for uploaded
   videos (no poster-frame image is generated for those). */
.product-thumb-video-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
}
.product-thumb-video-placeholder i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--swapot-dark);
  font-size: 11px;
}
/* Embed thumb with a real provider thumbnail (YouTube/etc. — see
   swapot_get_product_oembed_thumbnail() in inc/product-videos.php): the
   image itself is a sibling <img>, not this element's background, so this
   becomes a small absolutely-positioned play badge over it instead of a
   full opaque tile — a soft dark halo behind the button keeps it legible
   against any thumbnail colour, light or dark. */
.product-thumb-video-placeholder--overlay {
  position: absolute;
  inset: 0;
  background: transparent;
}
.product-thumb-video-placeholder--overlay i {
  width: 26px;
  height: 26px;
  box-shadow: 0 0 0 8px rgba(0, 0, 0, .28);
}

/* Product badges */
.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
}
.badge-sale {
  background: var(--swapot-green);
}
.badge-new {
  background: var(--swapot-dark);
  left: auto;
  right: 14px;
}

/* ── Summary ─────────────────────────────────────────────────── */
.product-summary-col .summary {
  position: relative;
  padding-left: 10px;
}

/* Breadcrumb in summary */
.product-summary-breadcrumb {
  font-size: 12px;
  margin-bottom: 14px;
  color: #888;
}
.product-summary-breadcrumb .breadcrumb-item,
.product-summary-breadcrumb a {
  color: #888;
  font-size: 12px;
}
.product-summary-breadcrumb a:hover {
  color: var(--swapot-green);
}

/* Title */
.single-product-page .product_title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--swapot-dark);
  margin: 0 0 12px;
}
/* .entry-title's decorative gradient underline (Ciloe legacy, meant for
   blog/archive titles) leaks onto the PDP since product_title shares that
   class — not wanted here. */
.single-product-page .product_title:before {
  content: none;
}

/* Rating */
.single-product-page .woocommerce-product-rating {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.single-product-page .star-rating {
  color: #f5a623;
  font-size: 14px;
}
.single-product-page .woocommerce-review-link {
  font-size: 13px;
  color: #888;
  text-decoration: underline;
}

/* Price */
.single-product-page .price {
  font-size: 20px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin-bottom: 16px;
  display: block;
}
.single-product-page .price del {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
  margin-right: 8px;
}
.single-product-page .price ins {
  text-decoration: none;
  color: var(--swapot-green);
}

/* Stock */
.single-product-page .stock {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
}
.single-product-page .in-stock {
  background: rgba(58,157,87,.1);
  color: var(--swapot-green);
}
.single-product-page .out-of-stock {
  background: rgba(220,53,69,.08);
  color: #dc3545;
}

/* Short description */
/* Short description — expandable "read more" card. A pure wrapper: content
   itself is untouched, only clamped/faded/toggled when it actually
   overflows (see swapotInitShortDescription() in swapot-product.js). */
.pdp-short-desc {
  position: relative;
  margin-bottom: 20px;
  padding: 20px 24px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 12px;
}
.pdp-short-desc__clamp {
  position: relative;
}
.pdp-short-desc.is-clampable .pdp-short-desc__clamp {
  max-height: 108px;
  overflow: hidden;
}
.pdp-short-desc.is-clampable.is-expanded .pdp-short-desc__clamp {
  max-height: none;
  overflow: visible;
}
.pdp-short-desc__inner {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}
.pdp-short-desc__fade {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(250,250,250,0), #fafafa);
  pointer-events: none;
}
.pdp-short-desc.is-clampable .pdp-short-desc__fade {
  display: block;
}
.pdp-short-desc.is-clampable.is-expanded .pdp-short-desc__fade {
  display: none;
}
.pdp-short-desc__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-green);
  cursor: pointer;
}
.pdp-short-desc__toggle[hidden] {
  display: none;
}
.pdp-short-desc__toggle:hover {
  text-decoration: underline;
}
.pdp-short-desc__toggle i {
  font-size: 9px;
  transition: transform .2s ease;
}
.pdp-short-desc.is-expanded .pdp-short-desc__toggle i {
  transform: rotate(180deg);
}

/* ── Add to Cart form ─────────────────────────────────────────── */
.atc-form {
  margin-bottom: 20px;
}
.atc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Qty wrap */
.qty-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  height: 50px;
}
.qty-btn {
  background: transparent;
  border: none;
  width: 40px;
  height: 50px;
  font-size: 12px;
  color: var(--swapot-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.qty-btn:hover {
  background: #f5f5f5;
}
.qty-wrap .qty.input-text {
  width: 52px;
  height: 50px;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--swapot-dark);
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}
.qty-wrap .qty::-webkit-inner-spin-button,
.qty-wrap .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* Add to cart button */
.btn-cart-full {
  flex: 1;
  min-width: 180px;
  height: 50px;
  background: var(--swapot-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s;
}
.btn-cart-full:hover,
.btn-cart-full.loading {
  background: var(--swapot-green);
  color: #fff;
}

/* ── Product meta (SKU, categories, tags) ─────────────────────── */
.single-product-page .product_meta {
  font-size: 13px;
  color: #888;
  border-top: 1px solid #ebebeb;
  padding-top: 16px;
  margin-top: 4px;
}
.single-product-page .product_meta > span {
  display: block;
  margin-bottom: 4px;
}
.single-product-page .product_meta a {
  color: var(--swapot-dark);
  font-weight: 600;
}
.single-product-page .product_meta a:hover {
  color: var(--swapot-green);
}

/* ── Product tabs ─────────────────────────────────────────────── */
.product-tabs-wrap {
  border-top: 1px solid #ebebeb;
  padding-top: 50px;
}
.product-tabs.nav-tabs {
  border-bottom: 2px solid #ebebeb;
  margin-bottom: 0;
}
.product-tabs.nav-tabs > li > a {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 14px 24px;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.product-tabs.nav-tabs > li.active > a,
.product-tabs.nav-tabs > li > a:hover {
  color: var(--swapot-dark);
  border-bottom-color: var(--swapot-green);
  background: transparent;
}
.product-tabs-content {
  border: 1px solid #ebebeb;
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.product-tabs-content .tab-pane {
  padding: 30px;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}
/* tabs.php reuses the blog .entry-content/.active classes for Bootstrap tab
   panels, which also triggers swapot-theme.css's "read more" fade-to-white
   overlay (.entry-content.active::before) — kill it here so description text
   stays solid instead of fading to gray. */
.product-tabs-content .woocommerce-Tabs-panel.entry-content {
  overflow: visible;
}
.product-tabs-content .woocommerce-Tabs-panel.entry-content::before {
  content: none;
}
.product-tabs-content h2,
.product-tabs-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin-bottom: 16px;
}

/* Reviews inside tab */
.woocommerce-Reviews #reviews {
  padding: 0;
}
.woocommerce-Reviews-title {
  margin-bottom: 24px;
}
.woocommerce-noreviews {
  color: #888;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Star rating — read-only display (average rating, per-review rating).
   WC's own icon-font CSS is dequeued site-wide (woocommerce_enqueue_styles
   filter in inc/woocommerce.php), so this replicates the same overlay
   technique with a plain unicode glyph instead of WC's proprietary font. */
.star-rating {
  position: relative;
  height: 1em;
  width: 5.4em;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .28em;
  overflow: hidden;
}
.star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  color: #ddd;
}
.star-rating span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: block;
}
.star-rating span::before {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  color: #f5a623;
}

/* Review list */
#comments {
  margin-bottom: 40px;
}
.commentlist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.commentlist li.comment {
  padding: 24px 0;
  border-bottom: 1px solid #ebebeb;
}
.commentlist li.comment:first-child {
  padding-top: 0;
}
.commentlist .comment_container {
  display: flex;
  gap: 16px;
}
.commentlist .avatar {
  border-radius: 50%;
  flex-shrink: 0;
}
.commentlist .comment-text {
  flex: 1;
}
.commentlist .star-rating {
  margin-bottom: 8px;
}
.commentlist .meta {
  font-size: 13px;
  color: #888;
  margin: 0 0 10px;
}
.commentlist .woocommerce-review__author {
  color: var(--swapot-dark);
  font-weight: 700;
}
.commentlist .woocommerce-review__verified {
  color: var(--swapot-green);
  font-style: normal;
}
.commentlist .description p {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* Review form */
#review_form_wrapper {
  border-top: 1px solid #ebebeb;
  padding-top: 32px;
}
.comment-reply-title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin-bottom: 20px;
}
#respond .comment-notes {
  color: #888;
  font-size: 13px;
  margin-bottom: 20px;
}
#respond p {
  margin-bottom: 20px;
}
#respond label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin-bottom: 8px;
}
#respond label .required {
  color: #e2401c;
  text-decoration: none;
}
#respond input[type="text"],
#respond input[type="email"],
#respond textarea,
#respond select {
  width: 100%;
  max-width: 480px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--swapot-font);
  color: var(--swapot-dark);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s ease;
}
#respond textarea {
  max-width: 100%;
  resize: vertical;
}
#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond textarea:focus,
#respond select:focus {
  outline: none;
  border-color: var(--swapot-green);
}

/* Star rating — clickable input widget in the review form.
   Mirrors WC core's own p.stars a / .selected / .active cascade
   (see includes/class-wc-frontend-scripts.php + assets/js/frontend/single-product.js)
   so hover/click state still works via WC's unmodified JS; only the
   glyph + colour are custom since WC's icon font isn't loaded. */
.comment-form-rating {
  margin-bottom: 20px;
}
.comment-form-rating #comment-form-rating-label {
  margin-bottom: 10px;
}
p.stars {
  margin: 0;
}
p.stars a {
  position: relative;
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  text-decoration: none;
  text-indent: -999em;
  overflow: hidden;
}
p.stars a::before {
  content: "\2605";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-indent: 0;
  font-size: 24px;
  color: #ddd;
  transition: color .1s ease;
}
p.stars a:hover ~ a::before {
  color: #ddd;
}
p.stars:hover a::before {
  color: #f5a623;
}
p.stars.selected a.active::before {
  color: #f5a623;
}
p.stars.selected a.active ~ a::before {
  color: #ddd;
}

#respond p.form-submit {
  margin-bottom: 0;
}

/* ── Related products ─────────────────────────────────────────── */
.related-products {
  border-top: 1px solid #ebebeb;
}
.related-products .section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--swapot-dark);
}

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 767px) {
  .product-gallery-col { margin-bottom: 30px; }
  .product-summary-col .summary { padding-left: 0; }
  .btn-cart-full { min-width: 140px; font-size: 12px; }
}

/* --------------------------------------------------------------
   CART PAGE
   -------------------------------------------------------------- */
.cart-page-row {
  margin-top: 20px;
}

/* Cart table */
.shop_table.cart {
  width: 100%;
  border-collapse: collapse;
}
.shop_table.cart th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  padding: 10px 12px;
  border-bottom: 2px solid #ebebeb;
  text-align: left;
}
.shop_table.cart td {
  padding: 16px 12px;
  border-bottom: 1px solid #f0f0f0;
  /* Top-align, not the browser's default middle — the Payment Breakdown and
     KaamKrew rows now live in their own <tr> below the product row, but the
     product-name cell can still grow taller than the price/subtotal cells
     next to it (long titles, wrapped variation text). Middle-aligning those
     against a taller sibling cell visually detaches the price from the
     product name it belongs to. */
  vertical-align: top;
  font-size: 14px;
  color: var(--swapot-dark);
}
.shop_table.cart .product-thumbnail { width: 80px; }
.shop_table.cart .product-thumbnail img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.shop_table.cart .product-name a {
  color: var(--swapot-dark);
  font-weight: 600;
}
.shop_table.cart .product-name a:hover { color: var(--swapot-green); }
.shop_table.cart .product-price { color: #555; }
.shop_table.cart .product-subtotal { font-weight: 700; }
.shop_table.cart .product-remove a.remove {
  font-size: 20px;
  color: #bbb;
  line-height: 1;
  display: block;
  text-align: center;
  transition: color .2s;
}
.shop_table.cart .product-remove a.remove:hover { color: #dc3545; }

/* Cart qty input */
.shop_table.cart .qty {
  width: 54px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--swapot-dark);
  padding: 0;
}

/* Cart actions row */
.shop_table.cart td.actions {
  padding: 16px 12px;
  border-top: 2px solid #ebebeb;
  border-bottom: none;
}
.shop_table.cart td.actions .coupon {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 0;
}
.shop_table.cart td.actions .coupon input[type="text"] {
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  width: 180px;
}
.cart-coupon-btn,
.cart-update-btn {
  height: 40px;
  padding: 0 18px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  color: var(--swapot-dark);
  transition: background .2s, color .2s, border-color .2s;
}
.cart-coupon-btn:hover,
.cart-update-btn:hover {
  background: var(--swapot-dark);
  border-color: var(--swapot-dark);
  color: #fff;
}
.cart-update-btn { float: right; }
.cart-update-btn .ti-reload { margin-right: 6px; font-size: 11px; }

/* Continue shopping */
.cart-continue-shopping { margin-top: 16px; }
.cart-continue-link {
  font-size: 13px;
  color: #888;
  text-decoration: underline;
  transition: color .2s;
}
.cart-continue-link:hover { color: var(--swapot-green); }
.cart-continue-link .fa { margin-right: 5px; }

/* Cart totals box */
.cart-totals-box {
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  padding: 24px;
}
.cart-totals-box__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ebebeb;
}
.cart-totals-table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
.cart-totals-table th,
.cart-totals-table td {
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.cart-totals-table th { color: #888; font-weight: 400; }
.cart-totals-table td { text-align: right; font-weight: 600; color: var(--swapot-dark); }
.cart-totals-total th,
.cart-totals-total td {
  font-size: 16px;
  font-weight: 700;
  color: var(--swapot-dark);
  border-bottom: none;
  padding-top: 14px;
}

/* Checkout button inside totals */
.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.button {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--swapot-green) !important;
  color: #fff !important;
  padding: 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: none;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background .2s;
}
.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a.button:hover {
  background: #2e8046 !important;
  color: #fff !important;
}

/* Trust list under checkout button */
.cart-trust-list,
.checkout-trust-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.cart-trust-list li,
.checkout-trust-list li {
  font-size: 12px;
  color: #888;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-trust-list li i,
.checkout-trust-list li i {
  color: var(--swapot-green);
  font-size: 14px;
  flex-shrink: 0;
}

/* Empty cart */
.cart-empty {
  padding: 80px 20px;
}
.cart-empty__icon {
  font-size: 72px;
  color: #ddd;
  margin-bottom: 24px;
  display: block;
}
.cart-empty__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin-bottom: 12px;
}
.cart-empty__desc {
  font-size: 15px;
  color: #888;
  max-width: 400px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

/* --------------------------------------------------------------
   CHECKOUT PAGE — premium redesign
   Every selector below targets stock WooCommerce classic-checkout
   markup (form-checkout.php only adds the outer two-column wrap and
   the trust list — see woocommerce/checkout/form-checkout.php).
   Presentation only; no field names, IDs, or hooks were touched.
   Field/button treatment mirrors the site's established form
   language (.swapot-contact__input / .swapot-btn) for consistency.
   -------------------------------------------------------------- */
.checkout-fields-col,
.checkout-review-col {
  padding-top: 4px;
}

/* ── Section headings (Billing details / Shipping details / Additional) ──
   Shopify keeps these compact and low-decoration — a small bold label,
   not a large display heading — so sections read as one continuous flow. */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--swapot-dark);
  letter-spacing: -.005em;
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: none;
}
.woocommerce-checkout .woocommerce-shipping-fields {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #f0f0f0;
}
/* Order notes are disabled (woocommerce_enable_order_notes_field filter in
   inc/woocommerce.php) — WC still unconditionally renders this wrapping div
   (see checkout/form-shipping.php), so it'd otherwise sit here empty. */
.woocommerce-checkout .woocommerce-additional-fields { display: none; }

/* ── Field grid — flex-wrap pairing, no wrapper divs ───────────────
   Fields render flat (see form-billing.php) — WooCommerce's own
   assets/js/frontend/address-i18n.js runs on every checkout load and
   flattens any custom nesting back into one parent, so pairing has to
   come from `priority` + `class` (form-row-first/form-row-last, each
   flex: 1 1 220px below) landing two compatible-width fields next to
   each other, not from a dedicated wrapper element. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 20px;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none;
  width: auto;
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
}
.woocommerce-checkout .form-row-wide {
  float: none;
  width: 100%;
  margin: 0;
  flex: 1 1 100%;
}
.woocommerce-checkout .form-row { margin-bottom: 18px; }
/* Rows inside the flex field-wrapper get their spacing from `gap` instead. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row {
  margin-bottom: 0;
}

/* ── Labels ──
   Text fields carry their label as a placeholder instead (see the
   swapot_checkout_fields_layout() filter in inc/woocommerce.php — the
   real <label> is kept for screen readers via .sr-only, just not shown).
   Country/State are selects that always show a real value, so — same as
   Shopify treats its own Country/Region field — they keep a small,
   quiet label above the value instead of a placeholder. */
.woocommerce-checkout .form-row label {
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: #999;
  margin-bottom: 6px;
  display: block;
}
.woocommerce-checkout .form-row abbr.required,
.woocommerce-checkout .form-row span.required {
  color: #e74c3c;
  text-decoration: none;
  border: none;
  font-weight: 700;
}

/* ── Inputs — mirrors .swapot-contact__input for design-system consistency ── */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%;
  height: 48px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--swapot-dark);
  font-family: var(--swapot-font);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}
.woocommerce-checkout .select2-container .select2-selection--single { display: flex; align-items: center; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: normal;
  color: var(--swapot-dark);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
.woocommerce-checkout .form-row textarea {
  height: 110px;
  padding: 14px 16px;
  resize: vertical;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
  outline: none;
  border-color: var(--swapot-green);
  box-shadow: 0 0 0 3px rgba(58,157,87,.12);
}
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row input[aria-invalid="true"],
.woocommerce-checkout .form-row select[aria-invalid="true"] {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231,76,60,.08);
}
.woocommerce-checkout .form-row input::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
  color: #b5b5b5;
}
/* Inline field-level error text — injected by WC core's checkout.js
   show_inline_errors() next to a field targeted via a notice's data-id
   (see swapot_geo_guard_validate_checkout() in inc/geo-guard.php), the
   same mechanism WC uses for its own "X is a required field" errors. */
.woocommerce-checkout .form-row .checkout-inline-error-message {
  color: #e74c3c;
  font-size: 13px;
  margin: 6px 0 0;
}

/* ── Checkboxes + radios (create account / ship-to-different / terms) ──
   WooCommerce's own core template gives these labels a "checkbox" class
   (woocommerce-form__label-for-checkbox checkbox — see
   woocommerce/checkout/form-billing.php) for its own semantics, but that
   same class name is also Bootstrap 3's custom-checkbox component
   selector in swapot-theme.css: ".checkbox input[type=checkbox]" sets
   position:absolute + margin-left:-20px, a positioning trick meant to
   pair with a matching padding-left on a DIFFERENT layout (Bootstrap's
   own, not the flex+gap layout below). Nothing here was overriding
   position/margin, so that rule applied unopposed and pulled the
   checkbox out of flow, 20px left of where the flex label expects it —
   position/margin here neutralize it. */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
  accent-color: var(--swapot-green);
  width: 18px;
  height: 18px;
  cursor: pointer;
  position: static;
  margin: 0;
  flex-shrink: 0;
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout .form-row-wide.create-account label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--swapot-dark);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

/* --------------------------------------------------------------
   Order review — Shopify-style flat panel, not a boxed card.
   The panel is a quiet off-white fill with a hairline divider from the
   fields column, not a bordered/shadowed card — see .checkout-review-col.
   -------------------------------------------------------------- */
.checkout-review-col {
  border-left: 1px solid #ececec;
}
.checkout-review-sticky {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 40px;
  position: sticky;
  top: 100px;
}

/* ── Collapsible order-summary toggle (native <details>/<summary>, no JS) ──
   Rendered `open` by default in the template (see form-checkout.php) so the
   line-items/totals table is always visible with zero CSS dependency — it
   never relies on overriding the browser's native details-closed collapse.
   The bar itself is still a real, tappable toggle on any screen size; on
   desktop we just hide the bar (below) since there's no need for a collapse
   affordance there. Payment Methods + Place Order live OUTSIDE this
   <details> entirely (see #payment below) so they're never gated behind it. */
.checkout-order-summary summary {
  list-style: none;
  cursor: pointer;
}
.checkout-order-summary summary::-webkit-details-marker,
.checkout-order-summary summary::marker {
  display: none;
  content: '';
}
.checkout-order-summary__toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.checkout-order-summary__toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--swapot-dark);
}
.checkout-order-summary__bag { font-size: 16px; }
.checkout-order-summary__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--swapot-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.checkout-order-summary__chevron {
  font-size: 10px;
  color: #999;
  transition: transform .2s ease;
}
.checkout-order-summary[open] .checkout-order-summary__chevron { transform: rotate(180deg); }
.checkout-order-summary__toggle-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--swapot-dark);
}
@media (min-width: 768px) {
  .checkout-order-summary__toggle { display: none; }
}

/* WC order review table. table-layout: fixed + explicit widths on the Price
   and Subtotal columns keep the Product column's width consistent — the
   Payment Breakdown / KaamKrew rows below each item use colspan="3" and
   need the same predictable column widths to span cleanly. */
.woocommerce-checkout-review-order table.shop_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 20px;
}
.woocommerce-checkout-review-order table.shop_table th.product-price,
.woocommerce-checkout-review-order table.shop_table td.product-price,
.woocommerce-checkout-review-order table.shop_table th.product-total,
.woocommerce-checkout-review-order table.shop_table td.product-total {
  width: 90px;
  text-align: right;
}
.woocommerce-checkout-review-order table.shop_table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #aaa;
  padding: 0 0 12px;
  border-bottom: 1px solid #ececec;
}
.woocommerce-checkout-review-order table.shop_table td,
.woocommerce-checkout-review-order table.shop_table tbody th {
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
  color: var(--swapot-dark);
  font-weight: 400;
  /* Payment Breakdown / KaamKrew now render as their own dedicated rows
     below the item row (see review-order.php), so the item row itself is
     always a single line again — middle-align Price/Subtotal against the
     product-name cell's thumbnail + title, the same way the title itself
     is vertically centered against the thumbnail (.checkout-item-row). */
  vertical-align: middle;
}
.woocommerce-checkout-review-order table.shop_table tbody th { font-weight: 600; }
.woocommerce-checkout-review-order table.shop_table tfoot th { color: #888; font-weight: 400; }
.woocommerce-checkout-review-order table.shop_table tfoot td,
.woocommerce-checkout-review-order table.shop_table tfoot th {
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
}
.woocommerce-checkout-review-order table.shop_table .order-total th,
.woocommerce-checkout-review-order table.shop_table .order-total td {
  /* Deliberately not the loudest number on the page: this is the full item
     price, not what's actually charged today. Full price is still useful
     reference info, so it stays legible — just no longer competing with
     .swapot-due-today (below), which is the true "pay now" figure and sits
     right above the Place Order button. */
  font-weight: 600;
  font-size: 15px;
  color: #888;
  border-bottom: none;
  padding-top: 16px;
}
.woocommerce-checkout-review-order table.shop_table .order-total td .amount { color: var(--swapot-dark); }

/* ── "Amount due today" — the real pay-now figure, right above Place Order ── */
.swapot-due-today {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: rgba(58,157,87,.08);
  border: 1px solid rgba(58,157,87,.3);
  border-radius: 10px;
}
.swapot-due-today__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--swapot-dark);
}
.swapot-due-today__amount {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--swapot-green);
}
.swapot-due-today__note {
  font-size: 12px;
  color: #888;
}

/* dl.variation base rules — shared by generic WC item meta (e.g. variation
   attributes like "Color: Blue"). Payment Breakdown and KaamKrew Add-Ons no
   longer render through this dl at all — both are now dedicated, full-width
   rows below the product row (see review-order.php) so neither is squeezed
   into this narrow column. */
.woocommerce-checkout-review-order table.shop_table dl.variation {
  margin: 6px 0 0;
  font-size: 12px;
}
.woocommerce-checkout-review-order table.shop_table dl.variation dt,
.woocommerce-checkout-review-order table.shop_table dl.variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
  color: #999;
}
.woocommerce-checkout-review-order table.shop_table dl.variation dt::after { content: ": "; }
.woocommerce-checkout-review-order table.shop_table dl.variation p { margin: 0; }

/* ── Swapot Payment Breakdown — dedicated full-width row ─────────────────────
   Shared .swapot-breakdown-card look between Cart and Checkout; the --full
   modifier adds its own heading + block padding now that the card is a
   standalone row rather than living inline inside a dl.variation entry. */
.swapot-breakdown-card {
  display: block;
  border: 1px solid rgba(58,157,87,.25);
  background: rgba(58,157,87,.05);
  border-radius: 10px;
  overflow: hidden;
}
.swapot-breakdown-card__heading {
  display: none;
}
.swapot-breakdown-card--full {
  padding: 4px;
}
.swapot-breakdown-card--full .swapot-breakdown-card__heading {
  display: block;
  padding: 10px 14px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #999;
}
.swapot-breakdown-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}
.swapot-breakdown-card__row + .swapot-breakdown-card__row { border-top: 1px solid rgba(58,157,87,.15); }
.swapot-breakdown-card__label { font-size: 13px; color: var(--swapot-dark); }
.swapot-breakdown-card__value { font-size: 14px; font-weight: 700; white-space: nowrap; }
.swapot-breakdown-card__value--advance { color: var(--swapot-green); }
.swapot-breakdown-card__value--balance { color: var(--swapot-dark); }

.swapot-breakdown-checkout-row,
.swapot-breakdown-cart-row {
  border-top: none !important;
}
.swapot-breakdown-checkout-cell,
.swapot-breakdown-cart-cell {
  padding-top: 0 !important;
  padding-bottom: 14px !important;
  border-top: none !important;
}
/* Leading empty <td> in the cart's breakdown/KaamKrew rows (matches the
   "remove" column) — an intentionally empty cell, not a spacing hack, so
   the colspan content next to it starts flush with the thumbnail column
   regardless of that column's actual rendered width. */
.swapot-breakdown-cart-spacer,
.kk-addon-cart-spacer {
  padding: 0 !important;
  border-top: none !important;
}

/* ── Unified KaamKrew add-on block — logo header + icon/title/description
   rows. Identical structure on Cart, Checkout, and the Thank You page (see
   swapot_kk_render_addon_block() in inc/kaamkrew.php); only the wrapping
   cell's padding differs per surface. ── */
.kk-addon-checkout-row {
  border-top: none !important;
}
.kk-addon-checkout-cell {
  padding-top: 0 !important;
  padding-bottom: 14px !important;
  border-top: none !important;
}
.kk-block {
  padding: 14px 16px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 10px;
  max-width: 560px;
}
.kk-block__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.kk-block__brand-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
  display: block;
}
.kk-block__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.kk-block__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kk-block__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.kk-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  /* Always the "selected" green treatment (matches the PDP's checked-state
     icon bubble, var(--pk-accent)) — every row shown here was, by
     definition, a service the customer selected. */
  background: var(--pk-accent, var(--swapot-green));
}
.kk-block__icon img { width: 20px; height: 20px; object-fit: contain; }
.kk-block__icon svg { width: 20px; height: 20px; }
.kk-block__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 2px;
}
.kk-block__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-dark);
}
.kk-block__desc {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}

/* Product thumbnail in each order-summary line item (woocommerce_cart_item_name
   filter — swapot_checkout_item_thumbnail() in inc/woocommerce.php).
   inline-flex (not flex) is deliberate: the quantity ("×1") is a separate
   <strong> sibling that follows this span in the markup (see
   checkout/review-order.php) — plain `flex` makes the span block-level,
   which pushed the quantity onto its own line below. inline-flex keeps the
   flex alignment for the thumb+title pair while staying inline so the
   quantity sits right after it on the same line. */
.checkout-item-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Leaves room for the quantity ("× 1") that follows as a sibling — without
     this, a long title could take the full cell width, and the quantity
     would still get pushed to the next line even with inline-flex. */
  max-width: calc(100% - 46px);
  vertical-align: middle;
}
.checkout-item-thumb-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f7f5;
}
.checkout-item-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.checkout-item-title {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Distraction-free checkout header: nav/search/cart replaced with a secure-checkout note */
.checkout-secure-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-dark);
}
.checkout-secure-note i {
  color: var(--swapot-green);
  font-size: 15px;
}

/* ── Notices (Returning customer? / coupon toggle) — brand green instead of
   default WC teal. Background/padding/border-radius come from the shared
   .woocommerce-info rule (WC NOTICES section below) so every notice card
   on checkout — this one, the added-to-cart message, form errors — lines
   up with identical corners/spacing instead of drifting out of sync. ── */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: rgba(58,157,87,.06);
  border-left-color: var(--swapot-green);
  color: var(--swapot-dark);
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
  color: var(--swapot-green);
  font-weight: 700;
  text-decoration: underline;
}
.woocommerce-checkout .woocommerce-form-login-toggle { margin-bottom: 12px; }
.woocommerce-checkout .woocommerce-form-login {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.woocommerce-checkout .woocommerce-form-login .form-row { margin-bottom: 12px; }
.woocommerce-checkout .woocommerce-form-login .button {
  background: var(--swapot-dark) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 0 24px;
  height: 46px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  border: none;
}

/* ── Coupon expanded form (the notice itself is styled above, shared with
   the "Returning customer?" notice) ── */
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon .form-row { margin-bottom: 12px; }
.woocommerce-checkout .checkout_coupon .button {
  background: var(--swapot-dark) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 0 24px;
  height: 46px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  border: none;
}

/* ── Payment methods — lives in the fields column below Delivery, same as
   Shopify (its sidebar is order-summary only, no payment content) — always
   visible, never gated behind the order-summary collapsible. ── */
.checkout-payment-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--swapot-dark);
  letter-spacing: -.005em;
  margin: 0 0 6px;
}
.checkout-payment-subheading {
  font-size: 13px;
  color: #999;
  margin: 0 0 16px;
}
#payment {
  background: transparent;
  border-radius: 0;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}
.checkout-trust-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 20px 0 0;
  padding: 0;
}
.checkout-trust-list li { padding: 0; }
#payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  border: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* BUG FIX (2026-07-24): radio input and label are SIBLINGS in WC core's own
   checkout/payment-method.php (the <input> sits outside the <label>), so
   giving the label `display:flex` on its own — the old rule below — made it
   a block-level flex container that dropped to its own line under the
   (inline) radio, instead of sitting beside it. Fixed by making the <li>
   itself the flex row (radio + label side by side) and forcing .payment_box
   onto a forced-wrap full-width line beneath them via flex-basis:100%,
   rather than relying on it being a later sibling in normal flow. */
#payment ul.payment_methods li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 10px;
  transition: border-color .18s ease, background .18s ease;
}
#payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
  border-color: var(--swapot-green);
  background: rgba(58,157,87,.04);
}
#payment ul.payment_methods li.wc_payment_method > input.input-radio {
  flex: 0 0 auto;
  margin: 0;
}
#payment ul.payment_methods li label {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--swapot-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 10px;
  margin: 0;
}
#payment .payment_box {
  flex: 1 0 100%;
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  padding: 12px 0 0 28px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: #999;
  line-height: 1.6;
  margin: 0 0 16px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0; }
#payment .place-order { margin-top: 20px; }
#payment .place-order .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--swapot-green) !important;
  color: #fff !important;
  border: 2px solid var(--swapot-green) !important;
  padding: 0 32px;
  height: 54px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .18s ease;
}
#payment .place-order .button:hover {
  background: transparent !important;
  color: var(--swapot-green) !important;
  box-shadow: 0 4px 20px rgba(58,157,87,.2);
  transform: translateY(-1px);
}

/* ── Mobile: collapsed order-summary bar first, larger touch targets ── */
@media (max-width: 767px) {
  .checkout-row { display: flex; flex-direction: column; }
  /* Explicit gutter — defensive, doesn't rely on the base grid's column
     padding surviving at this breakpoint (that's what let the create-account
     checkbox row sit flush against the viewport edge). */
  .checkout-fields-col,
  .checkout-review-col {
    padding-left: 20px;
    padding-right: 20px;
  }
  .checkout-review-col { order: -1; margin-bottom: 24px; border-left: none; }
  .checkout-review-sticky {
    position: static;
    padding: 0;
    background: #fafbfa;
    border: 1px solid #ececec;
    border-radius: 10px;
  }
  .checkout-order-summary__toggle { display: flex; padding: 16px 18px; }
  .checkout-order-summary[open] .checkout-order-summary__toggle { border-bottom: 1px solid #ececec; }
  .checkout-order-summary__body { padding: 18px; }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { flex: 1 1 100%; }
  .woocommerce-checkout .form-row input.input-text,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea,
  #payment .place-order .button { height: 50px; }
}

/* --------------------------------------------------------------
   MY ACCOUNT PAGE
   -------------------------------------------------------------- */
.myaccount-row { margin-top: 10px; }

/* Sidebar nav */
.myaccount-nav__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f7f7f7;
  border-radius: 8px;
  margin-bottom: 8px;
}
.myaccount-nav__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.myaccount-nav__user-info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--swapot-dark);
  line-height: 1.3;
}
.myaccount-nav__user-info span {
  font-size: 11px;
  color: #888;
}
.myaccount-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  overflow: hidden;
}
.myaccount-nav__item {
  border-bottom: 1px solid #ebebeb;
}
.myaccount-nav__item:last-child { border-bottom: none; }
.myaccount-nav__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  transition: background .15s, color .15s;
}
.myaccount-nav__item a i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: #aaa;
  flex-shrink: 0;
  transition: color .15s;
}
.myaccount-nav__item a:hover,
.myaccount-nav__item.is-active a {
  background: rgba(58,157,87,.06);
  color: var(--swapot-green);
}
.myaccount-nav__item a:hover i,
.myaccount-nav__item.is-active a i { color: var(--swapot-green); }
.myaccount-nav__item:last-child a { color: #dc3545; }
.myaccount-nav__item:last-child a:hover { background: rgba(220,53,69,.06); color: #dc3545; }
.myaccount-nav__item:last-child a i { color: #dc3545; }

/* My account content area */
.myaccount-content-col .woocommerce-MyAccount-content {
  padding-left: 20px;
}
.myaccount-content-col h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ebebeb;
}
.myaccount-content-col .woocommerce-Message {
  padding: 16px;
  background: rgba(58,157,87,.06);
  border-left: 3px solid var(--swapot-green);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  color: var(--swapot-dark);
  margin-bottom: 20px;
}
/* Orders table */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.woocommerce-orders-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  padding: 8px 12px;
  border-bottom: 2px solid #ebebeb;
}
.woocommerce-orders-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--swapot-dark);
}
.woocommerce-orders-table .woocommerce-button {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--swapot-dark);
  color: #fff;
  font-weight: 700;
  display: inline-block;
  transition: background .2s;
}
.woocommerce-orders-table .woocommerce-button:hover { background: var(--swapot-green); color: #fff; }

/* Account address boxes */
.woocommerce-Address { margin-bottom: 30px; }
.woocommerce-Address-title h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin-bottom: 12px;
}

/* --------------------------------------------------------------
   THANK YOU / ORDER CONFIRMATION PAGE
   -------------------------------------------------------------- */
/* No top padding here — the page.php wrapper (.container.space_top_bot_50)
   already contributes 50px above this, and .thankyou-hero adds its own
   padding below. Stacking all three (as this used to: 50 + 40 + 24px)
   pushed the hero checkmark ~114px down before any real content was
   visible in the initial viewport. */
.thankyou-page { padding: 0 0 20px; }

/* Fills the page .container (same ~1170px content width checkout uses) —
   no extra cap here. An earlier version capped this at 720px, which read
   as a narrow column with large dead margins either side on real screens;
   the actual constraint belongs on individual text elements (hero
   description) where a long line length would hurt readability, not on
   the whole page. */
.thankyou-wrap {
  width: 100%;
}

.thankyou-hero {
  padding: 0 20px 30px;
  text-align: center;
}
.thankyou-hero__icon {
  width: 72px;
  height: 72px;
  background: var(--swapot-green);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(58,157,87,.25);
}
.thankyou-hero--failed .thankyou-hero__icon { background: #dc3545; box-shadow: 0 8px 24px rgba(220,53,69,.2); }
.thankyou-hero__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.thankyou-hero__desc {
  font-size: 16px;
  color: #666;
  max-width: 480px;
  margin: 0 auto 0;
  line-height: 1.7;
}

.thankyou-overview {
  margin: 0 0 24px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 28px 0;
}
.thankyou-tile {
  padding: 8px 16px;
}
.thankyou-tile__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #999;
  margin-bottom: 8px;
}
.thankyou-tile strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--swapot-dark);
}

/* Generic premium card — used for the payment breakdown, order items,
   addresses, and next-steps sections below the overview tiles. */
.thankyou-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.thankyou-card__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin: 0 0 20px;
}
.thankyou-card__title--sm { font-size: 16px; margin-bottom: 14px; }

/* Swapot Payment Breakdown — the most prominent card on the page: a green-
   tinted treatment (echoes .swapot-breakdown-card from the PDP/checkout)
   scaled up so the advance-due amount is unmissable. */
.thankyou-breakdown {
  border-color: rgba(58,157,87,.3);
  background: rgba(58,157,87,.04);
}
.thankyou-breakdown__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.thankyou-breakdown__header i {
  font-size: 20px;
  color: var(--swapot-green);
}
.thankyou-breakdown__header .thankyou-card__title { margin: 0; }
.thankyou-breakdown__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(58,157,87,.15);
}
.thankyou-breakdown__row:first-of-type { border-top: none; padding-top: 0; }
.thankyou-breakdown__label { font-size: 14px; color: var(--swapot-dark); }
.thankyou-breakdown__value { font-size: 17px; font-weight: 700; color: var(--swapot-dark); white-space: nowrap; }
.thankyou-breakdown__value--advance { color: var(--swapot-green); font-size: 20px; }
.thankyou-breakdown__row--total { border-top: 1px solid rgba(58,157,87,.15); }
.thankyou-breakdown__row--total .thankyou-breakdown__label,
.thankyou-breakdown__row--total .thankyou-breakdown__value { color: #888; font-size: 13px; font-weight: 600; }
.thankyou-breakdown__note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(58,157,87,.25);
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}
.thankyou-breakdown__note strong { color: var(--swapot-dark); }

/* KaamKrew order-item branding — replaces the plain "KaamKrew Service: X"
   meta line with the same .kk-block component used on Cart/Checkout (logo
   header + icon/title/description rows per service), so all three pages
   read as one consistent pattern. Thank You page only — see
   is_order_received_page() guards in inc/kaamkrew.php. */
.kk-order-confirm {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f2f2f2;
  width: 100%;
}
.kk-order-confirm__message {
  font-size: 12px;
  line-height: 1.6;
  color: #777;
  margin: 0 0 10px;
}
.kk-order-confirm .kk-block { max-width: 480px; }

/* Order items table — same data/markup as WC core's order-details.php,
   just restyled to match the checkout review table treatment. */
.thankyou-order-items table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.thankyou-order-items table.woocommerce-table--order-details thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #999;
  padding: 0 0 14px;
  border-bottom: 1px solid #ececec;
  text-align: left;
}
.thankyou-order-items table.woocommerce-table--order-details thead th.product-total { text-align: right; }
.thankyou-order-items table.woocommerce-table--order-details td,
.thankyou-order-items table.woocommerce-table--order-details tbody th {
  padding: 14px 0;
  border-bottom: 1px solid #f2f2f2;
  color: var(--swapot-dark);
  font-weight: 400;
  /* Top-align, not the browser's default middle — otherwise a tall product
     cell (e.g. one with the KaamKrew line-item block below the product
     name) visually drags the price cell down with it, making the price
     look like it belongs to the add-on instead of the product. */
  vertical-align: top;
}
.thankyou-order-items table.woocommerce-table--order-details tbody th { font-weight: 600; }
.thankyou-order-items table.woocommerce-table--order-details td.product-total { text-align: right; }
.thankyou-order-items table.woocommerce-table--order-details tfoot th { color: #888; font-weight: 400; text-align: left; }
.thankyou-order-items table.woocommerce-table--order-details tfoot td { text-align: right; }
.thankyou-order-items table.woocommerce-table--order-details tfoot th,
.thankyou-order-items table.woocommerce-table--order-details tfoot td {
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
}
.thankyou-order-items table.woocommerce-table--order-details .order-total th,
.thankyou-order-items table.woocommerce-table--order-details .order-total td {
  font-weight: 700;
  font-size: 16px;
  color: var(--swapot-dark);
  border-bottom: none;
}

/* Billing / shipping addresses */
.thankyou-addresses address { font-style: normal; font-size: 14px; line-height: 1.7; color: #555; }
.thankyou-addresses__cols {
  display: flex;
  gap: 40px;
}
.thankyou-addresses__cols .woocommerce-column { flex: 1; min-width: 0; }

/* Next steps — wraps the payment gateway's own thank-you output (e.g. BACS
   bank-transfer instructions) unmodified; only the surrounding card and
   typography are ours. */
.thankyou-next-steps p { font-size: 14px; line-height: 1.7; color: #555; margin: 0 0 14px; }
.thankyou-next-steps p:last-child { margin-bottom: 0; }
.thankyou-next-steps .woocommerce-bacs-bank-details { margin-top: 20px; }
.thankyou-next-steps .wc-bacs-bank-details-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin: 0 0 14px;
}
.thankyou-next-steps .wc-bacs-bank-details-account-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--swapot-dark);
  margin: 0 0 8px;
}
.thankyou-next-steps ul.wc-bacs-bank-details {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
}
.thankyou-next-steps ul.wc-bacs-bank-details li {
  padding: 12px 16px;
  font-size: 14px;
  color: #666;
}
.thankyou-next-steps ul.wc-bacs-bank-details li + li { border-top: 1px solid #f2f2f2; }
.thankyou-next-steps ul.wc-bacs-bank-details li strong { color: var(--swapot-dark); }

/* Two-column split — mirrors the checkout page's own fields-left /
   payment-right layout (.checkout-fields-col / .checkout-review-col) so
   "what did I order" (left) and "what do I pay now" (right) read side by
   side. col-md-7 / col-md-5 match checkout's proportions exactly. */
.thankyou-columns-row {
  margin-top: 8px;
}
.thankyou-col-side {
  border-left: 1px solid #ececec;
  padding-left: 40px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}
.thankyou-col-side .thankyou-card:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .thankyou-columns-row { display: flex; flex-direction: column; }
  /* Payment info first on mobile — the same "most-actionable content
     first" ordering the checkout page already uses for its review column,
     so the amount due is visible without scrolling past order details. */
  .thankyou-col-side {
    order: -1;
    border-left: none;
    padding-left: 0;
    position: static;
    margin-bottom: 24px;
  }
}

.thankyou-actions {
  max-width: 720px;
  margin: 6px auto 0;
  padding-top: 30px;
  border-top: 1px solid #ebebeb;
}
/* Both CTAs share a fixed height (from .sp-cart-btn/.btn-cart-full) and a
   220px max-width (inline style). "Continue Shopping" no longer fit that
   width on one line once real padding was added, so it wrapped to two
   lines and grew taller than "View My Orders" — the two buttons visibly
   misaligned. Smaller text + nowrap keeps both on a single line so the
   shared fixed height actually holds for both. */
.thankyou-actions .btn-cart-full,
.thankyou-actions .sp-cart-btn {
  font-size: 12px;
  white-space: nowrap;
  height: 50px;
  /* Both are inline-flex siblings in a text-align:center row — without
     this they align to their own content baseline, which differs slightly
     between the icon+text button and the text-only one, showing up as a
     ~2px vertical offset even with identical heights. */
  vertical-align: middle;
}
/* "View My Orders" — brand green instead of the shared .btn-cart-full dark
   treatment (used elsewhere, e.g. the empty-cart page, which keeps its own
   color). Scoped here rather than changed globally. Matches the specificity
   + !important of the shared .btn-cart-full rule (assets/css/swapot-
   woocommerce.css, "ATC button" section) so it actually wins the cascade. */
.thankyou-actions .btn-cart-full {
  background: var(--swapot-green) !important;
}
.thankyou-actions .btn-cart-full:hover {
  background: var(--swapot-green-hover) !important;
}

/* --------------------------------------------------------------
   WC NOTICES (global)
   Single source of truth for every notice card on the site (added-to-cart
   message, checkout's returning-customer / coupon toggles, form errors).
   -------------------------------------------------------------- */
.woocommerce-notices-wrapper { margin-bottom: 20px; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  list-style: none;
  border-left: 4px solid;
}
/* .woocommerce-message / .woocommerce-info render as a single <div> holding
   raw text plus an optional trailing <a class="button"> (e.g. "View cart").
   Flex keeps that button beside the text on wide screens and wraps it to
   its own full-width line on mobile instead of overlapping — never a
   `float` + raw vertical-padding combo (that's what broke it originally,
   since padding on a display:inline <a> doesn't reserve line-box space). */
.woocommerce-message,
.woocommerce-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.woocommerce-message > a.button,
.woocommerce-info > a.button {
  margin-left: auto;
  flex-shrink: 0;
  padding: 8px 20px;
}
.woocommerce-message {
  background: rgba(58,157,87,.06);
  border-left-color: var(--swapot-green);
  color: var(--swapot-dark);
}
.woocommerce-info {
  background: rgba(23,162,184,.06);
  border-left-color: #17a2b8;
  color: var(--swapot-dark);
}
/* .woocommerce-error renders as <ul><li>…</li></ul> — one or more validation
   messages — so it stays block-level (each <li> on its own line) rather
   than the flex-row treatment above, which would otherwise wrap multiple
   errors side by side instead of stacking them. */
.woocommerce-error {
  background: rgba(220,53,69,.06);
  border-left-color: #dc3545;
  color: #dc3545;
}
.woocommerce-error li + li { margin-top: 6px; }

@media (max-width: 480px) {
  .woocommerce-message,
  .woocommerce-info {
    flex-direction: column;
    align-items: flex-start;
  }
  .woocommerce-message > a.button,
  .woocommerce-info > a.button {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .cart-totals-col { margin-top: 30px; }
  .myaccount-content-col .woocommerce-MyAccount-content { padding-left: 0; margin-top: 20px; }
  .thankyou-tile { border-bottom: 1px solid #ebebeb; padding: 14px 10px; }
  .thankyou-tile:last-child { border-bottom: none; }
  .thankyou-card { padding: 22px; border-radius: 12px; }
  .thankyou-hero__title { font-size: 24px; }
  .thankyou-breakdown__value--advance { font-size: 18px; }
  .thankyou-addresses__cols { flex-direction: column; gap: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   SHOP / PLP — PRODUCT CARD DESIGN IMPROVEMENTS
   Shopify parity: light image bg, green title, clean price
   ══════════════════════════════════════════════════════════════ */

/* Ensure the Bootstrap row clears properly */
.products-grid::after {
  content: '';
  display: table;
  clear: both;
}

/* Card inner image: light gray background + consistent aspect ratio */
.layout_product_shop .img-product {
  background: #f5f7f5;
  border-radius: 8px;
  overflow: hidden;
}

/* Force square-ish aspect ratio so cards are uniform regardless of upload size */
.layout_product_shop .img-product a.engoj_find_img {
  display: block;
  position: relative;
  padding-top: 85%; /* ~5:4 portrait ratio, close to Shopify card proportions */
  overflow: hidden;
}

.layout_product_shop .img-product a.engoj_find_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, opacity .4s ease;
}

/* Hover: slight zoom on main image */
.layout_product_shop .engoj_grid_parent:hover .img-product a.engoj_find_img img:first-child {
  transform: scale(1.04);
}

/* Hover image repositioned inside new absolute link */
.layout_product_shop .img-product .img-product-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product title: green (match Shopify Ciloe green-on-hover) */
.layout_product_shop .title-product a {
  color: var(--swapot-green);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.45;
}
.layout_product_shop .title-product a:hover {
  color: var(--swapot-dark);
}

/* Price: gray, compact */
.layout_product_shop .price-wrap .price {
  font-size: 13px;
  font-weight: 500;
  color: #666;
}
.layout_product_shop .price-wrap del {
  color: #aaa;
  font-size: 12px;
}
.layout_product_shop .price-wrap ins {
  text-decoration: none;
  color: var(--swapot-dark);
}

/* Info block: tighten spacing */
.layout_product_shop .info-product {
  padding: 12px 6px 0;
}
.layout_product_shop .info-product .title-product {
  margin: 0 0 4px;
}
.layout_product_shop .info-product .space_top_bot_20 {
  margin-top: 0;
  margin-bottom: 4px;
}

/* Sold-out overlay */
.layout_product_shop .sold-out-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.layout_product_shop .sold-out-overlay span {
  background: var(--swapot-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 5px 12px;
  border-radius: 4px;
}

/* Column switcher override: 3-col on desktop */
.products-grid.col3 .layout_product_shop {
  width: 33.3333%;
  float: left;
}

/* Mobile product grid: 2 columns */
@media (max-width: 767px) {
  .layout_product_shop {
    margin-bottom: 20px;
  }
  .layout_product_shop .img-product a.engoj_find_img {
    padding-top: 90%;
  }
}

/* ══════════════════════════════════════════════════════════════
   SHOP BANNER — plain (no image) improved style
   Matches Shopify's light sage-green banner aesthetic
   ══════════════════════════════════════════════════════════════ */
.text_banner--plain {
  background: #f0f5f1;
  padding: 50px 20px 40px;
  position: relative;
  overflow: hidden;
}
.text_banner--plain::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(58,157,87,.08);
  pointer-events: none;
}
.text_banner--plain h1 {
  color: var(--swapot-dark) !important;
  text-shadow: none !important;
  font-size: 38px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.text_banner--plain .breadcrumb-wrap,
.text_banner--plain nav {
  position: relative;
  z-index: 1;
}

/* Category banner: full-height hero image */
.banner_page .banner-image-wrap {
  position: relative;
  overflow: hidden;
}
.banner_page .shop-banner-img {
  width: 100%;
  height: 480px;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   PDP — PRODUCT DETAIL PAGE IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Price: Shopify shows it in green */
.single-product-page .price,
.single-product-page .woocommerce-Price-amount {
  color: var(--swapot-green) !important;
}
.single-product-page .price del,
.single-product-page .price del .woocommerce-Price-amount {
  color: #aaa !important;
  font-size: 18px;
}
.single-product-page .price ins {
  text-decoration: none;
}

/* Delivery info card — quiet icon+text row matching the reservation
   plugin's payment-breakdown card directly above it (same border/radius/
   palette) so the two read as a matched pair, not two competing styles. */
.pdp-delivery-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
}
.pdp-delivery-info__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(58,157,87,.08);
  color: var(--swapot-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-delivery-info__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.pdp-delivery-info__icon svg {
  width: 18px;
  height: 18px;
}
.pdp-delivery-info__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 1px;
}
.pdp-delivery-info__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-dark);
}
.pdp-delivery-info__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: #777;
}

/* Swapot Grading — title-adjacent badge + trust card. Card styling
   matches the Payment Breakdown / Delivery Info cards above (same
   border/radius/palette) so all three read as one consistent system. */
.pdp-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.swapot-grade-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.swapot-grade-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
}
.swapot-grade-card__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swapot-grade-card__body {
  min-width: 0;
}
.swapot-grade-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--swapot-dark);
}
.swapot-grade-card__def {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}
.swapot-grade-card__teaser {
  font-size: 11.5px;
  color: #888;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}
.swapot-grade-card__teaser-link {
  color: var(--swapot-green);
  font-weight: 700;
  margin-left: 4px;
  text-decoration: none;
}
.swapot-grade-card__teaser-link:hover {
  text-decoration: underline;
}

/* Condition Report — full list, inside the product tab. */
.swapot-defects-tab__empty {
  color: #777;
  font-size: 14px;
  margin: 0;
}
.swapot-defect-full-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
}
.swapot-defect-full-row + .swapot-defect-full-row {
  border-top: 1px solid #eee;
}
.swapot-defect-full-row__photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f7f7;
  border: 1px solid #ececec;
}
.swapot-defect-full-row__photo-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.swapot-defect-full-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.swapot-defect-full-row__photo-link:hover img {
  transform: scale(1.06);
}
.swapot-defect-full-row__body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.swapot-defect-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.swapot-defect-dot--minor {
  background: #c9871f;
}
.swapot-defect-dot--notable {
  background: #a23b2e;
}
.swapot-defect-full-row__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--swapot-dark);
}
.swapot-defect-full-row__note {
  font-size: 12.5px;
  color: #777;
  margin-top: 2px;
}

/* Badge positioning relative to gallery wrap */
.product-gallery-wrap > .product-badge {
  position: absolute;
  z-index: 5;
}
.product-badge.badge-sale {
  top: 14px;
  left: 14px;
}
.product-badge.badge-new {
  top: 14px;
  right: 14px;
}

/* Summary: tighten spacing */
.product-summary-col .summary {
  padding-left: 20px;
}

/* ── ATC button ──────────────────────────────────────────── */
.btn-cart-full,
.single_add_to_cart_button.btn-cart-full {
  background: var(--swapot-dark) !important;
  color: #fff !important;
  width: 100%;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 8px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  transition: background .2s;
  margin-top: 4px;
}
.btn-cart-full:hover,
.single_add_to_cart_button.btn-cart-full:hover {
  background: var(--swapot-green) !important;
  color: #fff !important;
}

/* ATC row: qty + full-width button stacked */
.atc-row {
  flex-direction: column;
  gap: 12px;
}
.qty-wrap {
  width: 100%;
  justify-content: center;
}

/* ── Sticky mobile ATC footer ──────────────────────────────── */
.pdp-mobile-sticky {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-top: 1px solid #ebebeb;
  padding: 10px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.pdp-mobile-sticky__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.pdp-mobile-sticky__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
}
.pdp-mobile-sticky__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp-mobile-sticky__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--swapot-dark);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pdp-mobile-sticky__btn {
  flex-shrink: 0;
  background: var(--swapot-green);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.pdp-mobile-sticky__btn:hover,
.pdp-mobile-sticky__btn:focus {
  background: var(--swapot-dark);
  color: #fff;
}

@media (max-width: 767px) {
  /* Show sticky footer on mobile */
  .pdp-mobile-sticky {
    display: block;
  }
  /* Add bottom padding to page so sticky bar doesn't overlap content */
  .single-product-page {
    padding-bottom: 80px;
  }
  /* PDP gallery: smaller side arrows + thumbs on narrow screens */
  .product-gallery-side-nav {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  /* Mobile keeps native horizontal scroll instead of the JS-driven 4-item
     window above — touch users reach for a swipe before an on-screen
     arrow, so there's no reason to rebuild windowing math for touch here.
     swapot-product.js itself also skips the windowing transform below
     768px (see swapotUpdateThumbWindow's width guard), so the !important
     is belt-and-suspenders, not load-bearing. */
  .product-thumbs-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }
  .product-thumbs-track {
    flex-wrap: nowrap;
    gap: 8px;
    transform: none !important;
  }
  .product-thumb-item {
    flex: 0 0 64px;
    max-width: 64px;
  }
  /* Summary: no left padding on mobile */
  .product-summary-col .summary {
    padding-left: 0;
    margin-top: 24px;
  }
  /* ATC row: qty and button full width */
  .atc-row { flex-direction: column; }
  .qty-wrap { width: 100%; }
  .btn-cart-full { width: 100%; min-width: 0; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .product-thumb-item {
    flex: 0 0 84px;
    max-width: 84px;
  }
  .product-summary-col .summary {
    padding-left: 10px;
  }
}

/* ── Related products: use same product card styles ─────────── */
.related-products .layout_product_shop .title-product a {
  color: var(--swapot-green);
}
.related-products .layout_product_shop .title-product a:hover {
  color: var(--swapot-dark);
}

/* ── Shop toolbar: Available label spacing fix ───────────────── */
.space_top_70 {
  padding-top: 0;
}
.content_shop {
  padding-top: 30px;
  padding-bottom: 60px;
}

/* ── WooCommerce notices: ensure they show above grid ────────── */
.woocommerce-notices-wrapper {
  width: 100%;
  padding: 0 15px;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT CARD HOVER — neutralise Ciloe per-icon conflicts
   Ciloe's .product .img-product .product-icon .icon-addcart rules
   set opacity:0 on individual icons and animate them independently
   via :hover. Our approach animates the *container* (.product-icon)
   instead. Override the Ciloe per-icon rules so only the container
   animation fires and buttons render cleanly.
   ══════════════════════════════════════════════════════════════ */

/* Strip Ciloe's per-icon opacity / size / padding / transform */
.engoj_grid_parent .product-icon .icon-addcart,
.engoj_grid_parent .product-icon .icon-quickview,
.engoj_grid_parent .product-icon .icon-heart {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  width: auto !important;
  height: auto !important;
  padding-top: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Also neutralise the Ciloe :hover per-icon transforms */
.engoj_grid_parent .img-product:hover .product-icon .icon-addcart,
.engoj_grid_parent .img-product:hover .product-icon .icon-quickview,
.engoj_grid_parent .img-product:hover .product-icon .icon-heart {
  opacity: 1 !important;
  transform: none !important;
}

/* Container-level animation (from swapot-theme.css) remains:
   .product-icon { opacity:0; transform:translateY(10px); }
   .engoj_grid_parent:hover .product-icon { opacity:1; transform:translateY(0); }
   The btn-default circles inside each link render the actual visual button. */

/* ══════════════════════════════════════════════════════════════
   CATEGORIES LANDING PAGE (page-categories.php, Template Name:
   Categories) → category card grid. NOT /shop/ — see
   template-parts/shop/shop-collections.php docblock.
   ══════════════════════════════════════════════════════════════ */

.shop-collections {
  padding: 50px 0 70px;
}

.shop-collections__col {
  margin-bottom: 30px;
}

/* ── Collection card ──────────────────────────────────────────── */
.collection-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: box-shadow .25s ease, transform .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.collection-card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,.13);
  transform: translateY(-3px);
}

/* ── Image area ───────────────────────────────────────────────── */
.collection-card__link {
  display: block;
  text-decoration: none;
}
.collection-card__img-wrap {
  position: relative;
  overflow: hidden;
  padding-top: 68%; /* 3:2 ish aspect ratio */
  background: #f0f5f1;
}
.collection-card__img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.collection-card:hover .collection-card__img {
  transform: scale(1.05);
}
.collection-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.22) 100%);
  pointer-events: none;
}
/* No category photo uploaded yet — a quiet branded surface instead of a
   missing/broken image. Reuses the same sage gradient + soft green glow
   motif as .collections-hero, so an unphotographed category still reads
   as "designed" rather than "placeholder". */
.collection-card__img-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #f0f5f1 0%, #e8f0ea 100%);
}
.collection-card__img-fallback::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 140%; height: 140%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,157,87,.10) 0%, rgba(58,157,87,0) 60%);
}

/* ── Body ─────────────────────────────────────────────────────── */
.collection-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.collection-card__title {
  display: block;
  font-family: var(--swapot-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--swapot-dark);
  text-decoration: none;
  margin-bottom: 6px;
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: color .2s;
}
.collection-card__title:hover {
  color: var(--swapot-green);
}
.collection-card__count {
  font-size: 13px;
  color: #888;
  margin: 0 0 18px;
  font-weight: 500;
  letter-spacing: .02em;
}
.collection-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--swapot-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--swapot-green);
  text-decoration: none;
  border: 2px solid var(--swapot-green);
  border-radius: 6px;
  padding: 9px 18px;
  margin-top: auto;
  align-self: flex-start;
  transition: background-color .2s, color .2s;
}
.collection-card__btn svg {
  transition: transform .2s;
  flex-shrink: 0;
}
.collection-card__btn:hover {
  background-color: var(--swapot-green);
  color: #fff;
}
.collection-card__btn:hover svg {
  transform: translateX(3px);
}

/* ── Collections landing: independent hero (avoids Ciloe .banner_page .text_banner rules) */
.collections-hero {
  background: linear-gradient(135deg, #f0f5f1 0%, #e8f0ea 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
.collections-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(58, 157, 87, .07);
  pointer-events: none;
}
.collections-hero::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -70px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(58, 157, 87, .05);
  pointer-events: none;
}
.collections-hero__inner {
  position: relative; /* above pseudo-element circles */
  z-index: 1;
  padding: 56px 20px 48px;
}
.collections-hero__title {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--swapot-dark);
  margin: 0 0 12px;
  line-height: 1.15;
}
.collections-hero__sub {
  font-size: 15px;
  color: #666;
  font-weight: 400;
  margin: 0 auto 18px;
  max-width: 480px;
  line-height: 1.6;
}
.collections-hero__breadcrumb {
  font-size: 13px;
  color: #888;
}

/* ── Category PLP variant: taller hero (no image uploaded yet) ── */
.collections-hero--plp .collections-hero__inner {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

/* ── Banner subtitle (image banners + category banners) ─────── */
.banner-subtitle {
  font-size: 15px;
  color: #555;
  font-weight: 400;
  margin: 0 auto 14px;
  max-width: 480px;
  line-height: 1.6;
}
.title_shop_sub {
  font-size: 13px;
  color: #888;
  margin: 4px 0 0;
  font-weight: 400;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991px) {
  .shop-collections {
    padding: 36px 0 50px;
  }
  /* Tablet: slightly shorter banner */
  .shop-banner-img,
  .banner_page .shop-banner-img {
    height: 360px;
  }
  .collections-hero--plp .collections-hero__inner {
    min-height: 280px;
    padding: 48px 20px;
  }
}
@media (max-width: 767px) {
  .shop-collections {
    padding: 24px 0 40px;
  }
  .shop-collections__col {
    margin-bottom: 22px;
  }
  .collection-card__img-wrap {
    padding-top: 60%;
  }
  .collection-card__body {
    padding: 16px 16px 18px;
  }
  .collection-card__title {
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MARKETPLACE MODE — Quantity selector hidden (body.swapot-hide-qty)
   Controlled by Customizer → Cart & Shop Options.
   ════════════════════════════════════════════════════════════════════ */

/* Cart page: hide Qty column header and cells */
body.swapot-hide-qty .woocommerce-cart-form th.product-quantity,
body.swapot-hide-qty .woocommerce-cart-form td.product-quantity {
  display: none !important;
}

/* Single product PDP: hide WC's quantity widget; input remains in DOM so qty=1 submits */
body.swapot-hide-qty .single-product div.quantity {
  display: none !important;
}

/* Mini cart: hide qty controls (PHP conditional also suppresses them,
   but this provides a CSS fallback in case fragments haven't refreshed) */
body.swapot-hide-qty .cart-item-qty-wrap {
  display: none !important;
}

/* Mini cart: style the static qty label */
.cart-item-qty-static {
  font-size: 12px;
  color: #888;
  display: block;
  margin-bottom: 4px;
}

/* PDP: WooCommerce tab panels have a hit-test area that extends ~260px above their
   visual rect in Chrome at non-integer devicePixelRatio (e.g. 125% Windows scaling).
   This causes the tab panel to absorb clicks on the Reserve button in the product
   summary column above. pointer-events:none removes the tab pane from hit-testing
   while keeping interactive descendants (links, review form, etc.) usable. */
.single-product .woocommerce-Tabs-panel {
  pointer-events: none;
}
.single-product .woocommerce-Tabs-panel a,
.single-product .woocommerce-Tabs-panel label,
.single-product .woocommerce-Tabs-panel input,
.single-product .woocommerce-Tabs-panel button,
.single-product .woocommerce-Tabs-panel textarea,
.single-product .woocommerce-Tabs-panel select,
.single-product .woocommerce-Tabs-panel form {
  pointer-events: auto;
}