/*
Theme Name: Bulkora
Theme URI: https://bulkora.net/
Author: Bulkora
Description: Purpose-built WooCommerce storefront inspired by the supplied Bulkora layout study.
Version: 1.0.13
Requires at least: 6.6
Requires PHP: 8.2
Text Domain: bulkora
*/

:root {
  --bk-bg: #f5f5f5;
  --bk-surface: #fff;
  --bk-ink: #111;
  --bk-link: #444;
  --bk-muted: #697386;
  --bk-line: #e5e7eb;
  --bk-accent: #febd69;
  --bk-accent-hover: #f3a847;
  --bk-danger: #c54032;
  --bk-radius: 4px;
  --bk-container: 1440px;
  --bk-shadow: 0 2px 12px rgba(0,0,0,.05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bk-bg); color: var(--bk-ink); font-family: Arial, Roboto, sans-serif; font-size: 14px; line-height: 1.5; }
body.drawer-open { overflow: hidden; }
a { color: var(--bk-link); text-decoration: none; }
a:hover { color: #111; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bk-container { width: min(calc(100% - 40px), var(--bk-container)); margin-inline: auto; }
.site-main { min-height: 60vh; }

.bk-utility { background: #f7f7f7; border-bottom: 1px solid #e9e9e9; color: #555; font-size: 12px; }
.bk-utility__inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bk-utility__controls { display: flex; align-items: center; gap: 14px; }
.bk-native-select { border: 0; background: transparent; color: #444; padding: 4px 20px 4px 4px; cursor: pointer; }
.bk-currency-static, .bk-language-static { color: #444; padding: 4px; }
.yay-currency-single-page-switcher { display: none !important; }
.bk-language-switcher { display: inline-flex; align-items: center; }
.bk-language-switcher select,
.bk-language-switcher .postform {
  border: 0;
  background: transparent;
  color: #444;
  padding: 4px 20px 4px 4px;
  cursor: pointer;
}
/* WOOCS's own CSS gives the option rows a white background but never the dropdown's outer
   container/list — so with no solid backdrop, the header content behind it (cart icon, nav
   links) shows through the gaps once it pops open, looking like it doesn't line up with the
   language select next to it. Give the panel a proper solid, bordered floating-card look. */
.dd-container { position: relative; }
.dd-select { border-radius: var(--bk-radius); }
.dd-options { background: #fff; border: 1px solid #ddd; border-radius: var(--bk-radius); box-shadow: 0 6px 16px rgba(0,0,0,.12); margin-top: 4px; }
.dd-options .dd-option { background: #fff; }
.dd-options .dd-option:hover { background: #f7f7f7; }
.bk-brandbar { background: #fff; }
.bk-brandbar__inner { min-height: 82px; display: grid; grid-template-columns: 230px minmax(260px, 1fr) auto; gap: 34px; align-items: center; }
.bk-logo { color: #111; font-size: 29px; font-weight: 800; letter-spacing: -.8px; }
.bk-logo__dot { color: var(--bk-accent-hover); }
.bk-search { display: flex; height: 42px; border: 2px solid #111; border-radius: var(--bk-radius); overflow: hidden; }
.bk-search input { flex: 1; min-width: 0; padding: 0 14px; border: 0; outline: 0; }
.bk-search button { width: 52px; border: 0; background: var(--bk-accent); color: #111; cursor: pointer; font-size: 18px; }
.bk-search button:hover { background: var(--bk-accent-hover); }
.bk-actions { display: flex; gap: 19px; align-items: center; }
.bk-action { display: inline-flex; gap: 7px; align-items: center; color: #222; font-size: 13px; white-space: nowrap; }
.bk-action__icon { font-size: 21px; line-height: 1; }
.bk-cart-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--bk-accent); font-size: 11px; font-weight: 700; }
.bk-nav { background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #ddd; }
.bk-nav__inner { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.bk-nav__inner::-webkit-scrollbar { display: none; }
.bk-nav a { flex: 0 0 auto; padding: 13px 16px; color: #333; font-size: 13px; white-space: nowrap; border-bottom: 2px solid transparent; }
.bk-nav a:first-child { padding-left: 0; font-weight: 700; }
.bk-nav a:hover { border-bottom-color: var(--bk-accent-hover); }

.bk-button, .button, button.button, input.button, #place_order { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 10px 22px; border: 1px solid #d9a44f; border-radius: var(--bk-radius); background: var(--bk-accent); color: #111; font-weight: 700; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.bk-button:hover, .button:hover, button.button:hover, input.button:hover, #place_order:hover { background: var(--bk-accent-hover); color: #111; }
/* WooCommerce's own button rules (.woocommerce a.button / button.button.alt) outrank the reset above on specificity; force the brand color back. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--bk-accent) !important; color: #111 !important; border-color: #d9a44f; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--bk-accent-hover) !important; color: #111 !important; }

/* Homepage hero: rotating banner carousel (reference-site creative, one slide per featured category). */
.bk-hero-carousel { position: relative; margin: 22px auto; overflow: hidden; border-radius: var(--bk-radius); background: #f2f2f2; }
.bk-hero-carousel__track { display: flex; transition: transform .5s ease; }
.bk-hero-carousel__slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 1774 / 887; }
.bk-hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.bk-hero-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.bk-hero-carousel__arrow:hover { background: #fff; }
.bk-hero-carousel__arrow--prev { left: 16px; }
.bk-hero-carousel__arrow--next { right: 16px; }
.bk-hero-carousel__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.bk-hero-carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); cursor: pointer; }
.bk-hero-carousel__dot.is-active { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

/* Category tiles embed a small live preview grid of that category's products (matching
   the reference site's tile design, rather than a plain icon+name card). */
.bk-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 26px; }
.bk-category-tile { display: flex; flex-direction: column; padding: 16px; background: #fff; border: 1px solid #ececec; box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: transform .2s, box-shadow .2s; }
.bk-category-tile:hover { transform: translateY(-2px); box-shadow: var(--bk-shadow); }
.bk-category-tile__name { display: block; margin-bottom: 12px; color: #111; font-size: 15px; font-weight: 700; }
.bk-category-tile__products { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 14px; margin-bottom: 12px; }
.bk-category-tile__product { display: block; color: inherit; }
.bk-category-tile__product-media { position: relative; display: block; aspect-ratio: 1 / 1; background: #f4f4f4; margin-bottom: 6px; overflow: hidden; }
.bk-category-tile__product-media img { width: 100%; height: 100%; object-fit: contain; }
.bk-category-tile__badge { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bk-danger); color: #fff; font-size: 10px; font-weight: 700; }
.bk-category-tile__product-title { display: block; margin-bottom: 2px; overflow: hidden; color: #444; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.bk-category-tile__product-price .price { display: block; gap: 4px; font-size: 12px; }
.bk-category-tile__product-price .price del { font-size: 10px; }
.bk-category-tile__product-price .price ins { text-decoration: none; }
.bk-category-tile__shop-link { display: block; margin-top: auto; padding-top: 10px; border-top: 1px solid #f0f0f0; color: var(--bk-link); font-size: 12px; font-weight: 600; }
.bk-category-tile__shop-link:hover { color: var(--bk-accent-hover); }
.bk-section { margin-block: 28px; padding: 22px; background: #fff; }
.bk-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 18px; border-bottom: 1px solid #eee; padding-bottom: 12px; }
.bk-section__head h2 { margin: 0; font-size: 22px; }
.bk-section__head a { color: #59636e; font-size: 13px; }

.bk-why { margin-top: 40px; padding: 44px 0; background: #4b5768; }
.bk-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 30px 22px; }
.bk-why__item { color: #dfe6ec; text-align: center; }
.bk-why__icon { display: flex; justify-content: center; margin-bottom: 16px; color: #fff; }
.bk-why__icon svg { width: 40px; height: 40px; stroke-width: 1.4; }
.bk-why__title { display: block; margin-bottom: 8px; color: #fff; font-size: 18px; font-weight: 700; font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.bk-why__social { display: flex; justify-content: center; gap: 26px; margin-top: 36px; }
.bk-why__social-link { color: #fff; opacity: .9; }
.bk-why__social-link:hover { opacity: 1; color: #fff; }
.bk-why__social-link svg { width: 22px; height: 22px; display: block; }
.bk-why__desc { margin: 0; color: #c9d2da; font-size: 13px; line-height: 1.5; }

ul.products, .bk-product-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
/* woocommerce-general.css's float-clearfix (ul.products::before/::after{display:table}) is a leftover
   from the classic float grid. Inside our CSS Grid, a non-none pseudo-element becomes a real (invisible)
   grid item and eats the first slot, shoving every product over by one and stranding the last one(s)
   on their own row. Kill it so grid placement isn't off by one regardless of column/limit count. */
ul.products::before, ul.products::after, .bk-product-grid::before, .bk-product-grid::after { content: none !important; display: none !important; }
.product, .bk-product-card { position: relative; min-width: 0; background: #fff; border: 1px solid #e9e9e9; padding: 12px; transition: box-shadow .2s, transform .2s; }
.product:hover, .bk-product-card:hover { box-shadow: var(--bk-shadow); transform: translateY(-2px); }
.woocommerce-loop-product__link { display: block; }
.product img, .bk-product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #edf0f2; }
.woocommerce-loop-product__title, .bk-product-card__title { margin: 11px 0 7px; color: #222; font-size: 14px; font-weight: 400; line-height: 1.42; height: 2.84em; overflow: hidden; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; color: #b12704; font-size: 19px; font-weight: 700; }
.price del { color: #777; font-size: 12px; font-weight: 400; }
.price ins { text-decoration: none; }
.bk-rating { margin: 5px 0 8px; color: #e69b20; font-size: 13px; white-space: nowrap; }
.bk-rating__count { color: #68727d; margin-left: 4px; }
.onsale, .bk-sale, .woocommerce span.onsale, .woocommerce ul.products li.product .onsale { position: absolute !important; z-index: 2; top: 10px !important; left: 10px !important; right: auto !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; padding: 4px 8px !important; margin: 0 !important; border-radius: 2px !important; background: #c54032 !important; color: #fff !important; font-size: 11px !important; font-weight: 700; line-height: 1.2 !important; text-align: left; }
.product .button { width: 100%; min-height: 36px; margin-top: 9px; padding: 7px 10px; font-size: 12px; }
.bk-trust { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee; }
.bk-trust__line { margin: 0 0 10px; color: #2f7a3d; font-size: 13px; font-weight: 600; }
.bk-trust__heading { margin: 0 0 8px; color: #68727d; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.bk-trust__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-trust__badge { padding: 5px 12px; border: 1px solid #d8dde1; border-radius: 4px; background: #fafbfc; color: #444; font-size: 12px; font-weight: 700; }

.bk-page-shell { width: min(calc(100% - 40px), var(--bk-container)); margin: 24px auto 50px; }
.woocommerce-breadcrumb { margin-bottom: 18px; color: #7b838c; font-size: 12px; }
.woocommerce-products-header { margin-bottom: 18px; padding: 22px; background: #fff; }
.woocommerce-products-header__title { margin: 0 0 5px; font-size: 28px; }
.woocommerce-result-count { color: #68727d; }
.woocommerce-ordering { margin-bottom: 18px; }
.woocommerce-ordering select { min-height: 38px; border: 1px solid #d8d8d8; background: #fff; padding: 0 34px 0 12px; }
.woocommerce-pagination ul { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 28px 0; }
.woocommerce-pagination a, .woocommerce-pagination span { display: grid; place-items: center; min-width: 38px; height: 38px; background: #fff; border: 1px solid #ddd; }
.woocommerce-pagination .current { background: var(--bk-accent); border-color: var(--bk-accent-hover); }

.single-product div.product { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.82fr); gap: 44px; padding: 30px; background: #fff; transform: none; }
.single-product div.product:hover { transform: none; }
.woocommerce-product-gallery img { width: 100%; }
.single-product .summary { align-self: start; }

/* Eyebrow kicker (category name) above the H1, and a bigger/bolder editorial-style title +
   price than the rest of the site — this pairing is the PDP's own visual register, scoped to
   .single-product so category/search grids keep their normal weight. */
.bk-pdp-eyebrow { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #8b93a3; }
.bk-pdp-eyebrow a { color: inherit; }
.bk-pdp-eyebrow a:hover { color: #111; }
.single-product .product_title { margin: 0 0 10px; font-size: 30px; line-height: 1.18; font-weight: 800; letter-spacing: -.2px; }
.single-product .summary .price { margin: 10px 0 6px; font-size: 25px; }
.bk-pdp-rating-link { display: inline-block; text-decoration: none; cursor: pointer; }
.bk-pdp-rating-link:hover .bk-rating { text-decoration: underline; }
.woocommerce-product-details__short-description { color: #59636e; }

.variations { width: 100%; border-collapse: collapse; margin: 20px 0 6px; }
.variations th, .variations td { padding: 6px 0; text-align: left; }
.variations th.label label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #444; }
.variations .value { position: relative; }
/* The native <select> stays in the DOM (WooCommerce's own variation-matching JS reads/writes
   it) but visually collapses behind the swatch row once assets/pdp.js enhances it — kept
   in the DOM so WooCommerce's variation-matching logic keeps receiving real change events. */
.woocommerce div.product form.cart .variations select.bk-native-select-hidden,
.variations select.bk-native-select-hidden {
  position: absolute;
  width: 1px;
  min-width: 0;
  max-width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  pointer-events: none;
  opacity: 0;
}
.bk-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-swatch { min-width: 44px; height: 40px; padding: 0 14px; border: 1px solid var(--bk-line); border-radius: 2px; background: #fff; color: #222; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.bk-swatch:hover { border-color: #9aa1a9; }
.bk-swatch.is-selected { border-color: #111; border-width: 2px; padding: 0 13px; }
.bk-swatch.is-disabled { color: #c7cbd0; border-color: #eee; text-decoration: line-through; cursor: not-allowed; background: repeating-linear-gradient(135deg, #fff, #fff 5px, #f4f4f4 5px, #f4f4f4 6px); }

.quantity { display: inline-flex; }
.quantity input { width: 64px; min-height: 42px; border: 1px solid #cfd3d7; text-align: center; }
.single_add_to_cart_button { margin-left: 8px; }
/* PDP add-to-cart: full-width, high-contrast — the one place on the site that departs from
   the brand-accent button color, matching the monochrome editorial PDP register above. */
.single-product .single_variation_wrap .button.single_add_to_cart_button,
.single-product a.single_add_to_cart_button.button,
.single-product button.single_add_to_cart_button.button {
  display: block; width: 100%; margin: 16px 0 0; padding: 15px; min-height: 0;
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  background: #111 !important; color: #fff !important; border: 1px solid #111 !important; border-radius: 2px;
}
.single-product .single_add_to_cart_button.button:hover { background: #333 !important; }
.single-product .single_add_to_cart_button.button.disabled { background: #fff !important; color: #b7bcc2 !important; border-color: #e2e5e8 !important; }
.single-product .woocommerce-variation-add-to-cart { display: flex; flex-direction: column; }

.product_meta { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; color: #697386; font-size: 12px; }

/* Horizontal underline tabs (Details / Additional info / Reviews) — WooCommerce's core
   single-product.js already toggles the "active" class on click, this only restyles it. */
.woocommerce-tabs { grid-column: 1 / -1; border-top: 1px solid #eee; padding-top: 4px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--bk-line); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 16px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #8b93a3; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.woocommerce-tabs ul.tabs li.active a { color: #111; border-bottom-color: #111; }
.woocommerce-tabs .woocommerce-Tabs-panel { padding: 22px 2px; color: #444; line-height: 1.75; }
.woocommerce-tabs .woocommerce-Tabs-panel h2 { font-size: 16px; margin: 0 0 12px; }

.bk-detail-images { display: flex; flex-direction: column; margin-top: 18px; max-width: 760px; }
.bk-detail-images img { width: 100%; height: auto; display: block; }

/* Gallery: full-bleed image on a light backdrop with a clean thumbnail strip underneath —
   WooCommerce's flexslider already provides the thumb-click-to-swap behavior, this only
   restyles the container and thumbnail rail. */
.woocommerce-product-gallery { background: #f5f5f5; padding: 8px; }
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  justify-content: start;
}
/* WooCommerce core ships `.woocommerce div.product div.images .flex-control-thumbs li{width:25%;float:left}`
   which beats our plain-class selector on specificity and fights the grid layout above (25% of a
   48px track = 12px, not the intended full-column thumbnail) — match its specificity to win. */
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs li { width: 100%; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img,
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid transparent;
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s, border-color .15s;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: #111; }

/* Trust panel v2 (bordered card: shield heading, three honest stat columns, payment grid) —
   see functions.php for why each stat is worded the way it is (nothing unverifiable). */
.bk-trust--v2 { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--bk-line); border-radius: 6px; background: #fafbfc; }
.bk-trust--v2 .bk-trust__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bk-trust__shield { width: 21px; height: 21px; color: #2f7a3d; flex: none; }
.bk-trust__head-text { font-size: 14px; font-weight: 800; color: #2f7a3d; }
.bk-trust--v2 .bk-trust__stats { display: flex; margin-bottom: 14px; border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line); }
.bk-trust--v2 .bk-trust__stat { flex: 1; padding: 10px 8px; text-align: center; border-left: 1px solid var(--bk-line); display: flex; flex-direction: column; gap: 2px; }
.bk-trust--v2 .bk-trust__stat:first-child { border-left: 0; }
.bk-trust--v2 .bk-trust__stat strong { font-size: 12.5px; color: #111; }
.bk-trust--v2 .bk-trust__stat span { font-size: 10.5px; color: #8b93a3; }
.bk-trust--v2 .bk-trust__heading { text-align: center; margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #68727d; }
.bk-trust--v2 .bk-trust__badges { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.bk-trust--v2 .bk-trust__badge { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #e3e6e9; border-radius: 4px; background: #fff; padding: 4px 6px; }
.bk-trust__seal { display: flex; justify-content: center; margin-top: 10px; }
.bk-trust__seal-pct { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9b65a, #8a6a1f); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.25); }

.woocommerce-cart-form, .cart-collaterals, .woocommerce-checkout-review-order, .woocommerce-checkout .col2-set > div { background: #fff; border: 1px solid #e8eaed; padding: 22px; }
.shop_table { width: 100%; border-collapse: collapse; background: #fff; }
.shop_table th, .shop_table td { padding: 14px; border-bottom: 1px solid #eee; text-align: left; }
.shop_table .product-thumbnail img { width: 74px; }
.cart-collaterals { margin: 20px 0 45px auto; max-width: 480px; }
.cart_totals h2 { margin-top: 0; }
.wc-proceed-to-checkout .button { width: 100%; }
/* Scoped to the checkout <form> itself, not `.woocommerce-checkout` alone: WooCommerce
   also adds "woocommerce-checkout" as a BODY class on this page, so a bare
   `.woocommerce-checkout` grid rule would turn the whole <body> (header/drawer/main/footer)
   into a 2-column grid instead of just the form's billing/order-review split. */
form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(360px,.8fr); gap: 24px; align-items: start; }
form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
form.checkout > #order_review { grid-column: 2; grid-row: 2; }
.woocommerce-checkout .col2-set > div { margin-bottom: 20px; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.03); }
.woocommerce-checkout-review-order { border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.03); }
.form-row { margin: 0 0 14px; }
.form-row label { display: block; margin-bottom: 5px; font-weight: 700; }
.form-row input, .form-row textarea, .form-row select, .select2-container .select2-selection { width: 100%; min-height: 42px; border: 1px solid #cfd3d7; border-radius: 4px; padding: 8px 10px; background: #fff; }
#payment { margin-top: 16px; }
.wc_payment_methods { list-style: none; padding: 0; }
.payment_box { padding: 12px; background: #f4f6f7; color: #59636e; }
#place_order { width: 100%; margin-top: 15px; }
/* Left padding leaves room for WooCommerce's own absolutely-positioned ::before icon (general.css
   puts it at left:1.5em) so it doesn't overlap the message text. */
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 18px; padding: 14px 18px 14px 52px; background: #fff; border-left: 4px solid var(--bk-accent-hover); border-top: none; }

.bk-drawer-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.bk-cart-drawer { position: fixed; top: 0; right: 0; z-index: 999; width: min(440px, 94vw); height: 100vh; padding: 22px; background: #fff; transform: translateX(102%); transition: transform .25s ease; overflow-y: auto; box-shadow: -10px 0 30px rgba(0,0,0,.16); }
.drawer-open .bk-drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-open .bk-cart-drawer { transform: translateX(0); }
.bk-cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.bk-cart-drawer__head h2 { margin: 0; font-size: 20px; }
.bk-cart-drawer__close { border: 0; background: transparent; font-size: 25px; cursor: pointer; }
.widget_shopping_cart_content { padding-top: 15px; }
.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
/* WooCommerce's own woocommerce.css ships default `.product_list_widget li` / `li img` /
   `.cart_list li a.remove` rules that outrank these on specificity (they key off the parent
   <ul class="... product_list_widget">, which every mini-cart list carries) — padding collapses
   to 4px, the image shrinks to a floated 32px thumbnail, and the remove link gets `left:0`
   fighting our `right:0` (both set with autowidth stretches the element and overlaps the text).
   !important guarantees our layout wins regardless of that cascade. */
.woocommerce-mini-cart-item { position: relative; min-height: 86px; padding: 10px 25px 10px 82px !important; border-bottom: 1px solid #eee; }
.woocommerce-mini-cart-item img { position: absolute !important; left: 0; top: 10px; right: auto !important; width: 66px !important; height: 66px !important; float: none !important; margin: 0 !important; object-fit: cover; }
.woocommerce-mini-cart-item .remove { position: absolute !important; right: 0 !important; left: auto !important; top: 8px; font-size: 20px; }
.woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 17px 0; }
.woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.bk-footer { margin-top: 50px; background: #232f3e; color: #dfe5eb; }
/* Homepage ends on the full-bleed .bk-why band — the default gap above would show a strip
   of the body's light gray background between two dark sections. */
body.home .bk-footer { margin-top: 0; }
.bk-footer a { color: #dfe5eb; }
.bk-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 50px; padding: 44px 0; }
.bk-footer h3 { margin: 0 0 12px; color: #fff; font-size: 15px; }
.bk-footer p, .bk-footer li { color: #c6ced7; font-size: 13px; }
.bk-footer ul { list-style: none; padding: 0; margin: 0; }
.bk-footer li { margin: 8px 0; }
.bk-footer__bottom { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.13); font-size: 12px; color: #abb5c1; }

@media (max-width: 1100px) {
  .bk-category-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  ul.products, .bk-product-grid { grid-template-columns: repeat(4,1fr); }
  .bk-brandbar__inner { grid-template-columns: 190px 1fr auto; gap: 18px; }
  .bk-action__label { display: none; }
}
@media (max-width: 768px) {
  .bk-container, .bk-page-shell { width: min(calc(100% - 24px), var(--bk-container)); }
  .bk-utility__message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* YayCurrency's selected label can wrap inside its fixed-height mobile trigger and
     spill into the utility row above. Keep the label to the trigger's available line. */
  .bk-utility__controls .yay-currency-custom-select__trigger {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
  }
  .bk-utility__controls .yay-currency-custom-selected-option,
  .bk-utility__controls .yay-currency-selected-option {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bk-brandbar__inner { min-height: 112px; grid-template-columns: 1fr auto; }
  .bk-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 12px; }
  .bk-logo { font-size: 25px; }
  .bk-nav a { padding: 11px 12px; }
  .bk-hero-carousel__slide { aspect-ratio: 4 / 3; }
  .bk-hero-carousel__arrow { width: 32px; height: 32px; font-size: 18px; }
  .bk-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  ul.products, .bk-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .bk-why { padding: 26px 0; }
  .bk-why__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 18px; }
  .bk-section { padding: 14px; }
  .product, .bk-product-card { padding: 9px; }
  .single-product div.product { grid-template-columns: 1fr; gap: 24px; padding: 18px; }
  .single-product .product_title { font-size: 24px; }
  .bk-trust--v2 .bk-trust__stat strong { font-size: 11px; }
  .bk-trust--v2 .bk-trust__stat span { font-size: 9.5px; }
  .bk-trust--v2 .bk-trust__badges { grid-template-columns: repeat(2, minmax(0,1fr)); }
  form.checkout.woocommerce-checkout { display: block; }
  .shop_table .product-thumbnail { display: none; }
  .bk-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 420px) {
  .bk-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bk-category-tile { padding: 13px; }