/*
 * BongKnot Online Store.
 *
 * The catering side of this site is an ivory-and-maroon brochure, which suits
 * it. A shop is a different job: people scan, compare and decide, so the
 * colour has to get out of the way. Maroon stays, but demoted to what it is
 * good at here - the price and the button. Everything else is quiet warm grey
 * with white cards, the way a marketplace reads.
 *
 * Loaded only on store pages.
 */

:root {
  --s-bg:        #F2F1EE;
  --s-card:      #FFFFFF;
  --s-line:      #E4E0D8;
  --s-line-soft: #F0EDE7;
  --s-ink:       #1F1B18;
  --s-muted:     #6B6259;
  --s-faint:     #938A80;
  --s-accent:    #7A1220;
  --s-accent-dk: #5A0D18;
  --s-gold:      #B08A3E;
  --s-save:      #1B7A46;
  --s-rad:       4px;
  --s-sh:        0 1px 2px rgba(31,27,24,.05);
  --s-sh-up:     0 8px 24px rgba(31,27,24,.10);
  --s-sans:      "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.bkst-page { background: var(--s-bg); }
body.bkst-page .site-main,
body.bkst-page main#content,
body.bkst-page .page-content { background: transparent; }
body.bkst-page .page-header { display: none; }

/* ---------- Utility bar: search, account, cart ---------- */
.bkst-bar2 {
  background: var(--s-card);
  border-bottom: 1px solid var(--s-line);
}
.bkst-bar2-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.bkst-search { flex: 1 1 auto; display: flex; min-width: 0; }
.bkst-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--s-line);
  border-right: 0;
  border-radius: var(--s-rad) 0 0 var(--s-rad);
  background: #FBFAF8;
  font-family: var(--s-sans);
  font-size: 0.92rem;
  color: var(--s-ink);
}
.bkst-search input[type="search"]:focus {
  outline: none;
  border-color: var(--s-gold);
  background: #fff;
}
.bkst-search button {
  flex: none;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 0 var(--s-rad) var(--s-rad) 0;
  background: var(--s-accent);
  color: #fff;
  font-family: var(--s-sans);
  font-size: 0.9rem;
  cursor: pointer;
}
.bkst-search button:hover { background: var(--s-accent-dk); }

.bkst-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.bkst-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--s-rad);
  color: var(--s-ink);
  text-decoration: none;
  font-family: var(--s-sans);
  font-size: 0.86rem;
  white-space: nowrap;
}
.bkst-act:hover { background: #F7F5F1; border-color: var(--s-line); color: var(--s-ink); }
.bkst-act svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.bkst-act--primary {
  border-color: var(--s-line);
  background: #FBFAF8;
}
.bkst-act b { font-weight: 600; }
.bkst-act small { display: block; font-size: 0.68rem; color: var(--s-faint); line-height: 1.1; }
.bkst-act-txt { display: flex; flex-direction: column; line-height: 1.25; }
.bkst-pill {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--s-accent);
  color: #fff;
  font-size: 0.7rem;
  line-height: 19px;
  text-align: center;
  font-weight: 600;
}

/* ---------- Category strip ---------- */
.bkst-cats {
  background: var(--s-card);
  border-bottom: 1px solid var(--s-line);
}
.bkst-cats-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bkst-cats-in::-webkit-scrollbar { display: none; }
.bkst-cats-in a {
  flex: none;
  padding: 13px 15px;
  font-family: var(--s-sans);
  font-size: 0.87rem;
  color: var(--s-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.bkst-cats-in a:hover { color: var(--s-ink); }
.bkst-cats-in a.is-on {
  color: var(--s-accent);
  border-bottom-color: var(--s-accent);
  font-weight: 600;
}

/* ---------- Page head + filter row ---------- */
.bkst-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 20px 0;
}
.bkst-head h1 {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  color: var(--s-ink);
  margin: 0 0 4px;
}
.bkst-head p { font-family: var(--s-sans); color: var(--s-muted); font-size: 0.9rem; margin: 0; }

.bkst-tools {
  max-width: 1280px;
  margin: 16px auto 0;
  padding: 0 20px;
}
.bkst-tools form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--s-card);
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  padding: 10px 12px;
  box-shadow: var(--s-sh);
}
.bkst-tools label.bkst-lab {
  font-family: var(--s-sans);
  font-size: 0.76rem;
  color: var(--s-faint);
  margin-right: 2px;
}
.bkst-tools select,
.bkst-tools input[type="number"] {
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  background: #fff;
  font-family: var(--s-sans);
  font-size: 0.86rem;
  color: var(--s-ink);
}
.bkst-tools input[type="number"] { width: 92px; }
.bkst-tools select { width: auto; min-width: 165px; max-width: 240px; }
.bkst-tools .bkst-chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--s-sans);
  font-size: 0.86rem;
  color: var(--s-muted);
}
.bkst-tools .bkst-go {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--s-rad);
  background: var(--s-accent);
  color: #fff;
  font-family: var(--s-sans);
  font-size: 0.86rem;
  cursor: pointer;
}
.bkst-tools .bkst-go:hover { background: var(--s-accent-dk); }
.bkst-tools .bkst-clear {
  font-family: var(--s-sans);
  font-size: 0.83rem;
  color: var(--s-muted);
  text-decoration: underline;
}
.bkst-tools .bkst-sep { flex: 1 1 auto; }

/* WooCommerce's own count + sort line */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-family: var(--s-sans); font-size: 0.85rem; color: var(--s-muted); }
.woocommerce .woocommerce-ordering select {
  height: 36px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  background: #fff;
  font-family: var(--s-sans);
  font-size: 0.86rem;
  padding: 0 9px;
}

/* ---------- Product grid ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background: var(--s-card);
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--s-sh-up);
  border-color: #D8D2C7;
  transform: translateY(-2px);
}
.woocommerce ul.products li.product > a { display: block; color: inherit; text-decoration: none; }
.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border-radius: 0;
  border-bottom: 1px solid var(--s-line-soft);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--s-sans) !important;
  font-size: 0.93rem !important;
  font-weight: 500;
  line-height: 1.35;
  color: var(--s-ink);
  padding: 12px 13px 0 !important;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

/* Price block: the one place the brand colour earns its keep. */
.woocommerce ul.products li.product .price {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  font-family: var(--s-sans) !important;
  font-size: 1.06rem !important;
  font-weight: 700;
  color: var(--s-accent) !important;
  padding: 0 13px;
  margin: 0 0 4px !important;
}
.woocommerce ul.products li.product .price del {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--s-faint) !important;
  opacity: 1;
  text-decoration: line-through;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--s-accent);
  background: transparent;
}
.bkst-off {
  font-family: var(--s-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--s-save);
}
.bkst-meta {
  font-family: var(--s-sans);
  font-size: 0.78rem;
  color: var(--s-muted);
  padding: 0 13px;
  margin: 0 0 2px;
}
.bkst-stock {
  font-family: var(--s-sans);
  font-size: 0.75rem;
  padding: 0 13px;
  margin: 0 0 10px;
}
.bkst-stock.in { color: var(--s-save); }
.bkst-stock.low { color: #B4610F; }
.bkst-stock.out { color: #A32020; }

/* Add to cart: present, not shouting. */
.woocommerce ul.products li.product .button {
  margin: auto 13px 13px !important;
  display: block;
  text-align: center;
  background: #fff !important;
  color: var(--s-accent) !important;
  border: 1px solid var(--s-accent) !important;
  border-radius: var(--s-rad);
  padding: 9px 12px !important;
  font-family: var(--s-sans) !important;
  font-size: 0.86rem !important;
  font-weight: 600;
  line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--s-accent) !important;
  color: #fff !important;
}
.woocommerce ul.products li.product .added_to_cart {
  margin: 0 13px 13px;
  display: block;
  text-align: center;
  font-family: var(--s-sans);
  font-size: 0.82rem;
  color: var(--s-muted);
}
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  margin: 0;
  background: var(--s-save);
  color: #fff;
  border-radius: 2px;
  padding: 3px 8px;
  font-family: var(--s-sans);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.6;
  min-height: 0;
  min-width: 0;
}

/* ---------- Single product ---------- */
.woocommerce div.product {
  background: var(--s-card);
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  padding: 24px;
  margin-top: 18px;
}
.woocommerce div.product .product_title {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--s-ink);
  margin: 0 0 10px;
}
.woocommerce div.product p.price {
  font-family: var(--s-sans);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--s-accent);
}
.woocommerce div.product p.price del { font-size: 1rem; font-weight: 400; color: var(--s-faint); }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product form.cart .button {
  background: var(--s-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--s-rad);
  padding: 13px 28px !important;
  font-family: var(--s-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 600;
}
.woocommerce div.product form.cart .button:hover { background: var(--s-accent-dk) !important; }
.woocommerce .woocommerce-tabs ul.tabs li.active a { color: var(--s-accent); }

/* ---------- Cart, checkout, account ---------- */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content { max-width: 1280px; margin: 0 auto; }
.wc-block-cart, .wc-block-checkout, .woocommerce-account .woocommerce {
  background: var(--s-card);
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  padding: 22px;
  margin-top: 18px;
}
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained,
.woocommerce .button.alt,
.woocommerce a.checkout-button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type="submit"] {
  background-color: var(--s-accent) !important;
  background: var(--s-accent) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--s-rad) !important;
  font-family: var(--s-sans) !important;
  font-weight: 600;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover,
.woocommerce .button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button[type="submit"]:hover {
  background-color: var(--s-accent-dk) !important;
  background: var(--s-accent-dk) !important;
  color: #FFFFFF !important;
}
.wc-block-components-button.contained .wc-block-components-button__text { color: #FFFFFF !important; }
.wc-block-components-button.outlined {
  border: 1px solid var(--s-accent) !important;
  color: var(--s-accent) !important;
  background: transparent !important;
}
.wc-block-cart-item__image img,
.woocommerce-cart-form__cart-item .product-thumbnail img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover;
  border-radius: 2px;
}

/* ---------- My Account: login and register side by side ---------- */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-rad);
  padding: 22px !important;
  background: #FBFAF8;
  margin: 0 !important;
}
.bkst-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.bkst-auth h2 {
  font-family: var(--font-heading, serif);
  font-size: 1.15rem;
  color: var(--s-ink);
  margin: 0 0 4px;
}
.bkst-auth .bkst-auth-sub {
  font-family: var(--s-sans);
  font-size: 0.85rem;
  color: var(--s-muted);
  margin: 0 0 14px;
}
.woocommerce form .form-row label {
  font-family: var(--s-sans);
  font-size: 0.82rem;
  color: var(--s-muted);
  margin-bottom: 4px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  background: #fff;
  font-family: var(--s-sans);
  font-size: 0.92rem;
  color: var(--s-ink);
  box-shadow: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-account input:focus { outline: none; border-color: var(--s-gold); }
.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .lost_password a {
  font-family: var(--s-sans);
  font-size: 0.84rem;
  color: var(--s-muted);
}
.woocommerce-account .woocommerce-privacy-policy-text p {
  font-family: var(--s-sans);
  font-size: 0.78rem;
  color: var(--s-faint);
}

/* Account dashboard: a real sidebar, not a bare list. */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 24% !important;
  background: #FBFAF8;
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  padding: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--s-rad);
  font-family: var(--s-sans);
  font-size: 0.89rem;
  color: var(--s-muted);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #F2EFE9; color: var(--s-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--s-accent);
  color: #fff;
  font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content { width: 72% !important; }
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce table.shop_table { font-family: var(--s-sans); font-size: 0.9rem; }
.woocommerce table.shop_table {
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
}
.woocommerce table.shop_table th { background: #FBFAF8; color: var(--s-ink); font-weight: 600; }

/* ---------- The catering sticky bar has no place in a shop ---------- */
body.bkst-page .bk-mobile-cta { display: none !important; }
.bkst-mbar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .bkst-bar2-in { flex-wrap: wrap; gap: 10px; }
  .bkst-search { order: 3; flex: 1 1 100%; }
  .bkst-acts { margin-left: auto; }
  .bkst-act-txt { display: none; }
  .bkst-act { padding: 0 11px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .woocommerce div.product,
  .wc-block-cart, .wc-block-checkout, .woocommerce-account .woocommerce { padding: 16px; }
  .bkst-auth { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; float: none !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 16px; }
}
@media (max-width: 780px) {
  .bkst-mbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 66;
    background: #fff;
    border-top: 1px solid var(--s-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bkst-mbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px;
    font-family: var(--s-sans);
    font-size: 0.7rem;
    color: var(--s-muted);
    text-decoration: none;
  }
  .bkst-mbar a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .bkst-mbar a.is-on { color: var(--s-accent); }
  .bkst-mbar .bkst-pill {
    position: absolute;
    transform: translate(12px, -4px);
  }
  body.bkst-page { padding-bottom: 60px; }
}
@media (max-width: 520px) {
  .bkst-tools form { gap: 6px; }
  .bkst-tools input[type="number"] { width: 76px; }
  .bkst-tools .bkst-sep { display: none; }
  .bkst-tools .bkst-go { flex: 1 1 100%; }
}
/* Two across is the phone default; a single column only below the point
   where two cards stop being legible. */
@media (max-width: 344px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* Breadcrumb, moved above the page heading where it belongs. */
.bkst-crumb { max-width: 1280px; margin: 0 auto; padding: 14px 20px 0; }
.bkst-crumb .woocommerce-breadcrumb {
  font-family: var(--s-sans);
  font-size: 0.8rem;
  color: var(--s-faint);
  margin: 0;
  padding: 0;
}
.bkst-crumb .woocommerce-breadcrumb a { color: var(--s-muted); text-decoration: none; }
.bkst-crumb .woocommerce-breadcrumb a:hover { color: var(--s-accent); text-decoration: underline; }

/* ---------- Full-bleed bars inside a constrained container ----------
   On the shop the bar is rendered outside the content wrapper and spans
   the window. Cart, checkout and account are ordinary pages, so the same
   markup lands inside the theme's container and would sit inset. This
   pulls it back out to the full width so the store reads as one thing.
   The overflow guard on the body absorbs the scrollbar that 100vw
   otherwise introduces. */
/* 100vw counts the scrollbar, so the bleed overhangs by its width. Clip at
   the root rather than on the body, which is where the overflow actually
   lands; 'clip' does not create a scroll container, so sticky still works. */
html:has(body.bkst-page) { overflow-x: clip; }
body.bkst-page { overflow-x: clip; }
.bkst-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }
body.bkst-page .entry-content > .bkst-bar2,
body.bkst-page .entry-content > .bkst-cats,
body.bkst-page .page-content > .bkst-bar2,
body.bkst-page .page-content > .bkst-cats {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
/* The account panels need breathing room under the bars. */
.woocommerce-account .woocommerce { margin-top: 22px; }

/* The single product's sale flash: same green as the grid, and inside the
   image rather than hanging off the panel edge. */
.woocommerce div.product { position: relative; }
.woocommerce div.product span.onsale {
  position: absolute;
  top: 34px;
  left: 34px;
  right: auto;
  margin: 0;
  background: var(--s-save);
  color: #fff;
  border-radius: 2px;
  padding: 4px 10px;
  font-family: var(--s-sans);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.6;
  min-height: 0;
  min-width: 0;
}
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
/* Quantity box, so it sits level with the button. */
.woocommerce div.product form.cart .quantity input.qty {
  height: 46px;
  width: 68px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-rad);
  font-family: var(--s-sans);
  text-align: center;
}
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.woocommerce div.product .product_meta { font-family: var(--s-sans); font-size: 0.83rem; color: var(--s-muted); }
.woocommerce div.product .woocommerce-product-details__short-description { font-family: var(--s-sans); color: var(--s-muted); }
.woocommerce div.product .stock.in-stock { font-family: var(--s-sans); color: var(--s-save); font-size: 0.86rem; }

/* bkst-cats-gap
   On cart, checkout and account the bar is prepended inside the content, so
   the panel below it butts straight up against the category strip. Padding
   on the content would push the bar down too, and a top margin on the panel
   collapses through its block wrapper, so the space goes on the strip, which
   has a border and therefore cannot collapse. */
body.bkst-page .page-content > .bkst-cats,
body.bkst-page .entry-content > .bkst-cats { margin-bottom: 24px; }
body.bkst-page .page-content > .wp-block-woocommerce-cart,
body.bkst-page .page-content > .wp-block-woocommerce-checkout { margin-top: 0; }

/* phone-two-up */
@media (max-width: 560px) {
  .woocommerce ul.products { gap: 10px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.85rem !important; padding: 10px 10px 0 !important; }
  .woocommerce ul.products li.product .price { font-size: 0.97rem !important; padding: 0 10px; gap: 5px; }
  .bkst-meta, .bkst-stock { padding: 0 10px; font-size: 0.72rem; }
  .woocommerce ul.products li.product .button { margin: auto 10px 10px !important; padding: 8px 6px !important; font-size: 0.8rem !important; }
  .bkst-off { font-size: 0.72rem; }
}

/* orphan-label: on a phone the field labels wrap onto their own line and
   read as stray words. The placeholders already say what each box is. */
@media (max-width: 560px) {
  .bkst-tools label.bkst-lab { display: none; }
  .bkst-tools select { flex: 1 1 100%; max-width: none; }
  .bkst-tools input[type="number"] { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ---------- Delivery checker on the product page ---------- */
.bkst-pin { margin: 18px 0 6px; padding: 14px; border: 1px solid var(--s-line); border-radius: var(--s-rad); background: #FBFAF8; max-width: 380px; }
.bkst-pin label { display: block; font-family: var(--s-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--s-faint); margin: 0 0 7px; }
.bkst-pin-row { display: flex; gap: 8px; }
.bkst-pin-row input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--s-line); border-radius: var(--s-rad); background: #fff; font-family: var(--s-sans); font-size: 0.92rem; color: var(--s-ink); }
.bkst-pin-row input:focus { outline: none; border-color: var(--s-gold); }
.bkst-pin-row .bkst-pin-go { flex: none; height: 40px; padding: 0 18px; border: 1px solid var(--s-accent); border-radius: var(--s-rad); background: #fff; color: var(--s-accent); font-family: var(--s-sans); font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.bkst-pin-row .bkst-pin-go:hover { background: var(--s-accent); color: #fff; }
.bkst-pin-out { font-family: var(--s-sans); font-size: 0.84rem; margin: 9px 0 0; line-height: 1.45; }
.bkst-pin-out:empty { display: none; }
.bkst-pin-out.is-yes { color: var(--s-save); }
.bkst-pin-out.is-no { color: #A32020; }
.bkst-pin-out.is-warn { color: #B4610F; }
/* The same rule, stated before anyone fills in an address. */
.bkst-area-note { font-family: var(--s-sans); font-size: 0.86rem; color: var(--s-muted); background: #FBF6E9; border: 1px solid #E9DCBD; border-left: 3px solid var(--s-gold); border-radius: var(--s-rad); padding: 11px 14px; margin: 0 0 18px; }
.bkst-no-rate { font-family: var(--s-sans); font-size: 0.88rem; color: #A32020; margin: 0; }

/* ---------- Social sign-in above the email form ---------- */
.bkst-social { margin: 0 0 18px; }
.bkst-social .nsl-container { margin: 0 0 4px !important; padding: 0 !important; }
.bkst-social .nsl-container-buttons { display: block; }
.bkst-social .nsl-container-buttons a { margin-bottom: 8px !important; border-radius: var(--s-rad) !important; }
.bkst-social-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; }
.bkst-social-or::before, .bkst-social-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--s-line); }
.bkst-social-or span { font-family: var(--s-sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--s-faint); }

/* ---------- store-width ----------
   Hello Elementor boxes the main column to a reading width, which is right
   for an article and wrong for a checkout: it squeezed the order summary
   to 248px and wrapped every product name down the column. Store pages get
   a shop-sized container instead. Led with html so it outranks the theme
   rule, which is (0,2,1) and loads after this file. */
html body.bkst-page .site-main,
html body.bkst-page main#content { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
html body.bkst-page .page-content,
html body.bkst-page .entry-content { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
/* The bars stay edge to edge inside that padded container. */
html body.bkst-page .page-content > .bkst-bar2,
html body.bkst-page .page-content > .bkst-cats,
html body.bkst-page .entry-content > .bkst-bar2,
html body.bkst-page .entry-content > .bkst-cats { padding-left: 0; padding-right: 0; }
/* Order summary needs real room; 248px wrapped every line. */
@media (min-width: 900px) {
  .wc-block-checkout .wc-block-components-sidebar { flex: 0 0 380px !important; max-width: 380px !important; }
  .wc-block-checkout .wc-block-components-main { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; padding-right: 32px; }
  .wc-block-cart .wc-block-components-sidebar { flex: 0 0 340px !important; max-width: 340px !important; }
  .wc-block-cart .wc-block-components-main { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; padding-right: 32px; }
}
/* A line item in the summary should read as one row, not a paragraph. */
.wc-block-components-order-summary-item__description { font-family: var(--s-sans); font-size: 0.85rem; }
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price { font-family: var(--s-sans); white-space: nowrap; }
.wc-block-components-product-details { display: none; }
.wc-block-components-order-summary-item__image img { width: 56px !important; height: 56px !important; object-fit: cover; }

/* sidebar-layout-nowrap: the block layout wraps by default, which dropped
   the summary below the form the moment the main column could grow. */
@media (min-width: 900px) {
  .wc-block-components-sidebar-layout { flex-wrap: nowrap !important; align-items: flex-start; }
}