/*
Theme Name: Bak Foods
Theme URI: https://bakfoods.com
Author: Bak Foods
Author URI: https://bakfoods.com
Description: A modern block theme for Bak Foods - Caribbean food service distributor
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bak-foods
Domain Path: /languages

This theme is a block theme - it uses modern WordPress block editor features.
*/

/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
  --color-primary:   #003B22;
  --color-secondary: #159E4C;
  --color-accent:    #F9C82D;
  --color-gray-bg:   #F2F4F3;
  --color-white:     #ffffff;

  --transition:  all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:   0 10px 30px rgba(0,0,0,0.14);
  --radius-card: 16px;
}

/* ─── Base ──────────────────────────────────────────────────────── */
body {
  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
}

a {
  transition: var(--transition);
  text-decoration: none;
}

/* ─── Search Bar ────────────────────────────────────────────────── */
.wp-block-search__input {
  transition: var(--transition);
}

.wp-block-search__input:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(21, 158, 76, 0.15);
  outline: none;
}

/* ─── Category Cards ────────────────────────────────────────────── */
/* The anchor wrapping each card */
.bak-cat-card {
  transition: var(--transition);
  background: transparent;
}

.bak-cat-card:hover {
  transform: translateY(-6px);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

/* Pastel circle inside each card */
.bak-cat-card .wp-block-group.has-background {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 999px !important;
  flex-shrink: 0;
  transition: var(--transition);
  margin: 0 auto;
}

.bak-cat-card:hover .wp-block-group.has-background {
  transform: scale(1.08);
}

/* ─── WooCommerce Product Grid ──────────────────────────────────── */
.wc-block-grid__product,
.wp-block-woocommerce-product-new .product,
li.product {
  transition: var(--transition);
  border-radius: var(--radius-card) !important;
  border: 1px solid transparent;
  padding: 16px !important;
}

.wc-block-grid__product:hover,
.wp-block-woocommerce-product-new .product:hover,
li.product:hover {
  background: var(--color-white);
  border-color: #e8ebe9;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.wc-block-grid__product-image img,
li.product img {
  border-radius: 10px;
  transition: var(--transition);
}

.wc-block-grid__product-title,
.wp-block-woocommerce-product-new .wc-block-grid__product-title,
.wp-block-woocommerce-product-best-sellers .wc-block-grid__product-title {
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.wc-block-grid__product-price,
.wc-block-grid__product .price,
.wp-block-woocommerce-product-new .wc-block-grid__product-price,
.wp-block-woocommerce-product-best-sellers .wc-block-grid__product-price {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img,
li.product:hover img {
  transform: scale(1.04);
}

/* Add to cart button */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
li.product .button {
  background: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  transition: var(--transition) !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
li.product .button:hover {
  background: var(--color-primary) !important;
  transform: translateY(-1px);
}

/* ─── Hero Image ───────────────────────────────────────────────── */
.wp-block-columns .wp-block-column:last-child .wp-block-image {
  margin: 0;
  overflow: hidden;
}

.wp-block-columns .wp-block-column:last-child .wp-block-image img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
}

/* ─── Promo Cover Blocks ────────────────────────────────────────── */
.wp-block-cover {
  overflow: hidden;
}

.wp-block-cover__image-background {
  transition: var(--transition);
}

.wp-block-cover:hover .wp-block-cover__image-background {
  transform: scale(1.03);
}

/* ─── Blog Cards (post cards in blog section) ─────────────────── */
.bak-blog-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-white);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.bak-blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.wp-block-button__link {
  transition: var(--transition) !important;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ─── Newsletter Section ────────────────────────────────────────── */
/* Override the search block inside the dark green CTA */
.has-primary-background-color .wp-block-search__input,
[style*="background:#003B22"] .wp-block-search__input,
[style*="background-color:#003B22"] .wp-block-search__input {
  border-radius: 50px 0 0 50px !important;
  border: none !important;
  padding: 14px 20px !important;
  font-size: 0.95rem;
}

.has-primary-background-color .wp-block-search__button,
[style*="background:#003B22"] .wp-block-search__button,
[style*="background-color:#003B22"] .wp-block-search__button {
  background: var(--color-secondary) !important;
  border-radius: 0 50px 50px 0 !important;
  border: none !important;
  padding: 14px 24px !important;
  font-weight: 700;
  font-size: 0.95rem;
  transition: var(--transition);
}

.has-primary-background-color .wp-block-search__button:hover,
[style*="background:#003B22"] .wp-block-search__button:hover {
  background: var(--color-accent) !important;
  color: var(--color-primary) !important;
}

/* ─── Layout / Full-width fix ───────────────────────────────────── */
.wp-site-blocks > .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT PAGE
   ══════════════════════════════════════════════════════════ */

/* Form / General typography */
.wc-block-checkout {
  font-family: inherit;
}

/* Step Headings */
.wc-block-components-checkout-step__heading,
.wc-block-checkout__title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin-bottom: 24px !important;
}

/* Inputs and Selects */
.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-checkout-step textarea,
.wc-block-components-state-input select,
.wc-block-components-country-input select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
  font-size: 0.95rem !important;
  transition: var(--transition) !important;
  box-shadow: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox .components-combobox-control__input:focus,
.wc-block-components-checkout-step textarea:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(21, 158, 76, 0.1) !important;
  outline: none;
}

.wc-block-components-text-input label,
.wc-block-components-combobox label {
  font-size: 0.85rem !important;
  color: #64748b !important;
}

/* Shipping and Payment Options container boxes */
.wc-block-components-shipping-rates-control,
.wc-block-components-payment-method-options,
.wc-block-checkout__payment-method {
  border: 1px solid #94a3b8 !important;   /* Slightly darker grey/blue matching Groceria */
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--color-white) !important;
}

/* Items inside the option boxes */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method-options__item {
  padding: 18px 24px !important;
  margin: 0 !important;
  border-bottom: 1px solid #e2e8f0;
}

.wc-block-components-radio-control__option:last-child,
.wc-block-components-payment-method-options__item:last-child {
  border-bottom: none;
}

/* Radio buttons inner content alignment */
.wc-block-components-radio-control__label-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  font-size: 0.95rem !important;
  color: var(--color-primary) !important;
  font-weight: 500 !important;
}

/* Order Summary Sidebar */
.wc-block-components-sidebar {
  background: var(--color-white) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02) !important;
}

.wc-block-components-sidebar .wc-block-components-order-summary-item {
  padding: 8px 0 !important;
}

/* Quantity badge on images */
.wc-block-components-order-summary-item__quantity {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  border: 1px solid var(--color-white) !important;
  top: -6px !important;
  right: -6px !important;
}

/* Summary item details */
.wc-block-components-order-summary-item__description {
  font-size: 0.82rem !important;
  color: #64748b !important;
  margin-top: 4px !important;
}

/* Sale/Save badge */
.wc-block-components-product-sale-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* Coupon section */
.wc-block-components-panel__button {
  font-size: 0.9rem !important;
  color: var(--color-primary) !important;
  padding: 16px 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

/* Totals Wrapper */
.wc-block-components-totals-wrapper {
  border-top: none !important;
  padding-top: 8px !important;
}

.wc-block-components-totals-item {
  font-size: 0.95rem !important;
  color: #475569 !important;
  padding: 8px 0 !important;
  margin-bottom: 0 !important;
}

.wc-block-components-totals-item__value {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.wc-block-components-totals-footer-item {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  padding-top: 24px !important;
  margin-top: 16px !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Actions at the bottom */
.wc-block-components-checkout-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 32px !important;
}

/* Return to Cart */
.wc-block-components-checkout-return-to-cart-button {
  color: #64748b !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--color-primary) !important;
}

/* Place Order Button */
.wc-block-components-checkout-place-order-button {
  background: var(--color-secondary) !important;
  color: var(--color-white) !important;
  padding: 16px 32px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: var(--transition) !important;
  border: none !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* Checkboxes */
.wc-block-components-checkbox {
  align-items: center !important;
}

.wc-block-components-checkbox input[type="checkbox"] {
  border-radius: 4px !important;
  border: 1px solid #cbd5e1 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
}

.wc-block-components-checkbox label {
  font-size: 0.9rem !important;
  color: #475569 !important;
  cursor: pointer;
}

/* Checkbox specific to "Same address for billing" */
.wc-block-checkout__use-address-for-billing {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* Add an arrow before return to cart */
.wc-block-components-checkout-return-to-cart-button::before {
  content: "←";
  font-size: 1.1rem;
}

/* ─── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Reduce hero heading on mobile */
  .wp-block-cover h1 {
    font-size: 1.8rem !important;
  }

  /* Reduce section headings on mobile */
  .wp-block-group h2 {
    font-size: 1.3rem !important;
  }

  /* Reduce section padding on mobile */
  .wp-block-group[style*="padding-left:40px"],
  .wp-block-group[style*="padding-right:40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .wp-block-group[style*="padding-left:60px"],
  .wp-block-group[style*="padding-right:60px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .wp-block-cover[style*="padding-left:40px"],
  .wp-block-cover[style*="padding-right:40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Map iframe responsive */
  .wp-block-column iframe {
    height: 280px !important;
    border-radius: 12px !important;
  }
}


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

/* ─── Breadcrumb bar ─────────────────────────────────────── */
.bak-single-breadcrumb {
  border-bottom: 1px solid #e8e8e8;
}

.bak-single-breadcrumb a {
  text-decoration: none;
  color: var(--color-secondary);
  transition: var(--transition);
}

.bak-single-breadcrumb a:hover {
  color: var(--color-primary);
}

/* ─── 2-column product layout ────────────────────────────── */
.bak-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ─── Product Gallery (left column) ─────────────────────── */
.bak-product-gallery {
  position: sticky;
  top: 80px;
}

/* Main product image — desktop: cap height so it doesn't overflow details column */
.bak-product-gallery .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  max-height: 520px;                 /* prevents tall images overflowing */
  border-radius: 20px !important;
  object-fit: contain !important;    /* show full packaged product */
  box-shadow: none;                  /* shadow on container card instead */
}

/* Fallback when no image */
.bak-product-gallery .wp-block-post-featured-image:not(:has(img))::after {
  content: 'No image';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 360px;
  background: #f5f5f5;
  border-radius: 20px;
  font-size: 4rem;
  opacity: 0.2;
}

/* ─── Product Details (right column) ────────────────────── */
.bak-product-details {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Product title */
.bak-product-details .wp-block-post-title {
  font-size: 2rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--color-primary) !important;
  margin: 0 0 12px !important;
}

/* Star ratings */
.bak-product-details .wc-block-components-product-rating,
.bak-product-details .woocommerce-product-rating {
  margin: 0 0 12px !important;
}

/* WooCommerce star color */
.star-rating span::before,
.wc-block-review-list-item__rating__stars span::before {
  color: var(--color-accent) !important;
}

/* Price */
.bak-product-details .wc-block-components-product-price,
.bak-product-details .price {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--color-secondary) !important;
  margin: 0 0 16px !important;
}

/* Strikethrough old price */
.bak-product-details .price del,
.bak-product-details .wc-block-components-product-price__regular-price {
  font-size: 1rem !important;
  color: #999 !important;
  font-weight: 400 !important;
  margin-right: 8px;
}

/* Sale badge inline */
.bak-product-details .onsale {
  display: inline-block;
  background: var(--color-secondary) !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  margin-bottom: 12px;
}

/* Short description / excerpt */
.bak-product-details .wp-block-post-excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 20px;
}

/* Add to cart form area */
.bak-product-details .wc-block-add-to-cart-form,
.bak-product-details form.cart {
  margin-bottom: 20px;
}

/* Quantity selector wrapper */
.bak-product-details .wc-block-components-quantity-selector,
.bak-product-details .quantity,
form.cart .quantity,
.product .quantity,
.bak-qty-wrapper {
  display: inline-flex !important;   /* shrink to content */
  align-items: stretch !important;   /* children fill height */
  gap: 0 !important;
  margin-bottom: 14px !important;
  background: #f5f5f5 !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  border: 1px solid #ddd !important;
}

/* The number input itself */
.bak-product-details .wc-block-components-quantity-selector input,
.bak-product-details .quantity input[type="number"],
form.cart .quantity input[type="number"],
.product .quantity input[type="number"],
.bak-qty-wrapper input {
  width: 56px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 10px 4px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.bak-product-details .wc-block-components-quantity-selector input::-webkit-inner-spin-button,
.bak-product-details .wc-block-components-quantity-selector input::-webkit-outer-spin-button,
form.cart .quantity input[type="number"]::-webkit-inner-spin-button,
form.cart .quantity input[type="number"]::-webkit-outer-spin-button,
.bak-qty-wrapper input::-webkit-inner-spin-button,
.bak-qty-wrapper input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* WC Block native stepper buttons */
.wc-block-components-quantity-selector__button {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: none !important;
  color: var(--color-primary) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--transition) !important;
  flex-shrink: 0 !important;
}

.wc-block-components-quantity-selector__button:hover,
.wc-block-components-quantity-selector__button:active {
  background: var(--color-secondary) !important;
  color: #fff !important;
}

/* JS-injected stepper buttons (classic WC form) */
.bak-qty-btn {
  /* Fixed 44×44 — do NOT let flex stretch these */
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: transparent;
  border: none;
  border-radius: 0;              /* pill shape is on the WRAPPER, not buttons */
  color: var(--color-primary);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

/* Hover + active tap state — green flash on press */
.bak-qty-btn:hover,
.bak-qty-btn:active {
  background: var(--color-secondary);
  color: #fff;
}


/* Add to cart button */
.bak-product-details .wc-block-add-to-cart-form button,
.bak-product-details button.single_add_to_cart_button,
.bak-product-details .wp-block-woocommerce-product-button .wp-block-button__link {
  background: var(--color-secondary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  width: 100%;
  text-align: center;
}

.bak-product-details .wc-block-add-to-cart-form button:hover,
.bak-product-details button.single_add_to_cart_button:hover {
  background: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Product meta (SKU, category) */
.bak-product-meta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
  font-size: 0.82rem;
  color: #888;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bak-product-meta a {
  color: var(--color-secondary);
  text-decoration: none;
}

/* ─── Product Tabs ────────────────────────────────────────── */
.bak-product-tabs {
  border-top: 1px solid #eee;
  padding-top: 40px;
}

/* Tab nav row */
.bak-tabs-nav {
  display: flex;
  border-bottom: 2px solid #eee;
  gap: 0;
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bak-tabs-nav::-webkit-scrollbar { display: none; }

/* Individual tab buttons */
.bak-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 14px 24px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -2px; /* overlap the nav border */
  transition: var(--transition);
}

.bak-tab-btn:hover {
  color: var(--color-primary);
}

.bak-tab-btn--active {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-secondary) !important;
}

/* Tab panels */
.bak-tab-panel {
  display: none;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
}

.bak-tab-panel--active {
  display: block;
}

/* Delivery & Returns info blocks */
.bak-delivery-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.bak-delivery-block {
  background: #f9fafb;
  border-radius: 14px;
  padding: 24px;
}

.bak-delivery-block h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px;
}

.bak-delivery-block p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #555;
}

.bak-delivery-block a {
  color: var(--color-secondary);
  text-decoration: none;
}

/* ─── Related Products section ───────────────────────────── */
.bak-related-section {
  border-top: 1px solid #eee;
}

/* Related products: fluid grid — cards never shrink below 200px
   so long product names always have enough room */
.bak-related-section .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 20px !important;
}

/* Prevent WP core flex injected inline widths from squishing our grid items */
.bak-related-section .wp-block-post-template > li {
  width: 100% !important;
  max-width: 100% !important;
}

/* ─── Product Gallery: light card bg so white products show ─ */
.bak-product-gallery .wp-block-post-featured-image {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
}

.bak-product-gallery .wp-block-post-featured-image img {
  border-radius: 12px !important;
  box-shadow: none !important;           /* shadow on container instead */
  object-fit: contain !important;        /* don't crop packaged products */
}

/* Outer container gets the shadow */
.bak-product-gallery {
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  border-radius: 20px;
}

/* ─── Tab nav: cleaner active indicator ──────────────────── */
.bak-tabs-nav {
  border-bottom: 2px solid #eee !important;
}

.bak-tab-btn--active {
  color: var(--color-primary) !important;
  border-bottom: 3px solid var(--color-secondary) !important;
  font-weight: 700 !important;
}

/* ─── Related product cards: uniform image height ────────── */
.bak-related-section .bak-product-card {
  background: #ffffff !important;    /* force clean white card */
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Override WP constrained layout inside cards — children must fill full card width */
.bak-product-card > *,
.bak-product-card .is-layout-constrained > *,
.wp-block-post-template .wp-block-group > *,
.wp-block-post-template .is-layout-constrained > * {
  max-width: 100% !important;
}

.bak-related-section .bak-product-card .wp-block-post-featured-image,
.bak-related-section .wp-block-post-template li .wp-block-post-featured-image {
  height: 180px !important;
  min-height: 180px !important;
  background: #f9f9f9 !important;    /* neutral grey, not blue */
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;             /* no extra padding on related cards */
  border-radius: 0 !important;       /* handled by card container */
}

.bak-related-section .bak-product-card .wp-block-post-featured-image img,
.bak-related-section .wp-block-post-template li .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}


/* ─── Single Product: Mobile Responsive ──────────────────── */
@media (max-width: 900px) {
  /* Stack image above details */
  .bak-product-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Gallery: not sticky on mobile */
  .bak-product-gallery {
    position: static !important;
  }

  /* Product image: compact on mobile — full product visible, not cropped.
     Grey card gives it context; max-height keeps it from dominating screen. */
  .bak-product-gallery .wp-block-post-featured-image {
    aspect-ratio: unset !important;    /* remove the huge 1:1 square */
    height: auto !important;
    width: 100% !important;
    padding: 16px !important;          /* comfortable inner spacing */
    display: block !important;
  }

  .bak-product-gallery .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 260px !important;      /* caps height so it's compact */
    object-fit: contain !important;    /* full product, no cropping */
    display: block !important;
    margin: 0 auto !important;         /* center the image in the card */
  }

  /* Product title: smaller on mobile */
  .bak-product-details .wp-block-post-title {
    font-size: 1.5rem !important;
  }

  /* Price: smaller */
  .bak-product-details .wc-block-components-product-price,
  .bak-product-details .price {
    font-size: 1.3rem !important;
  }

  /* Tabs nav: horizontal scroll */
  .bak-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .bak-tab-btn {
    padding: 12px 16px !important;
    font-size: 0.82rem !important;
    flex-shrink: 0;
  }

  /* Delivery: stack */
  .bak-delivery-info {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  /* Related products: force 2 columns on mobile */
  .bak-related-section .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* Section padding: tighter */
  .bak-related-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 480px) {
  /* Product tabs: smaller font */
  .bak-tab-btn {
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }

  /* Product section padding */
  .bak-product-layout {
    gap: 16px !important;
  }

  /* Related products: 2-col tight on small phones */
  .bak-related-section .wp-block-post-template {
    gap: 10px !important;
  }

  /* Related product image: shorter on small screens */
  .bak-related-section .wp-block-post-featured-image {
    height: 120px !important;
    min-height: 120px !important;
  }
}



/* ══════════════════════════════════════════════════════════
   SHOP PAGE
   ══════════════════════════════════════════════════════════ */


/* ─── Category Pill Row ─────────────────────────────────── */
.bak-shop-cats {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bak-cat-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 0;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.bak-cat-pills::-webkit-scrollbar { display: none; }

.bak-cat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
  flex-shrink: 0;
}

.bak-cat-pill:hover {
  background: #f0faf4;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.bak-cat-pill--active {
  border-color: var(--color-secondary);
  background: #f0faf4;
  color: var(--color-secondary);
}

.bak-cat-pill__icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--color-gray-bg);
}

.bak-cat-pill__icon--special {
  background: linear-gradient(135deg, #003B22, #159E4C);
  color: #fff;
  font-size: 1.2rem;
}

.bak-cat-pill__label {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ─── Sale Banner ────────────────────────────────────────── */
.bak-sale-banner {
  background: linear-gradient(135deg, #003B22 0%, #159E4C 100%);
  border-radius: 16px;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

.bak-sale-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&q=30&w=1200') center/cover no-repeat;
  opacity: 0.12;
}

.bak-sale-banner__text {
  position: relative;
  z-index: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bak-sale-banner__text strong {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.bak-sale-banner__text span {
  font-size: 0.85rem;
  opacity: 0.85;
}

.bak-sale-banner__cta {
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--color-primary);
  padding: 10px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--transition);
}

.bak-sale-banner__cta:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* ─── Shop Layout (Sidebar + Main) ──────────────────────── */
.bak-shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}

/* ─── Sidebar ────────────────────────────────────────────── */
.bak-shop-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 80px;
}

.bak-filter-widget {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
}

.bak-filter-widget__title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.bak-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: #444;
  cursor: pointer;
  padding: 4px 0;
}

.bak-filter-check input[type="checkbox"] {
  accent-color: var(--color-secondary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.bak-filter-count {
  margin-left: auto;
  background: var(--color-gray-bg);
  color: #666;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
}

/* Categories widget — wrapper is a .bak-filter-widget (white card) and
   the WC product-categories block lives inside it */
.bak-filter-cats .wc-block-product-categories,
.bak-filter-cats > .wc-block-product-categories-list {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bak-filter-cats .wc-block-product-categories::-webkit-scrollbar,
.bak-filter-cats > .wc-block-product-categories-list::-webkit-scrollbar { width: 4px; }
.bak-filter-cats .wc-block-product-categories::-webkit-scrollbar-track,
.bak-filter-cats > .wc-block-product-categories-list::-webkit-scrollbar-track { background: transparent; }
.bak-filter-cats .wc-block-product-categories::-webkit-scrollbar-thumb,
.bak-filter-cats > .wc-block-product-categories-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.bak-filter-cats li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.82rem;
  color: #444;
  text-decoration: none;
  transition: var(--transition);
}

.bak-filter-cats li a:hover {
  color: var(--color-secondary);
}

.bak-filter-cats li a span {
  background: var(--color-gray-bg);
  color: #666;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 20px;
  font-weight: 600;
}

/* ─── Price Slider ───────────────────────────────────────── */
.bak-price-slider {
  position: relative;
  height: 30px;
  margin-bottom: 8px;
}

.bak-price-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 4px;
  appearance: none;
  background: transparent;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}

.bak-price-slider input[type="range"]::-webkit-slider-runnable-track {
  background: #e0e0e0;
  height: 4px;
  border-radius: 2px;
}

.bak-price-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-secondary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  pointer-events: all;
  cursor: pointer;
  margin-top: -6px;
}

.bak-price-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ─── Sidebar Promo Banner ───────────────────────────────── */
.bak-sidebar-promo {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
}

.bak-sidebar-promo__body {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bak-sidebar-promo__tagline {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
  margin: 0;
}

.bak-sidebar-promo__cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--transition);
}

.bak-sidebar-promo__cta:hover {
  color: var(--color-primary);
}

/* ─── Shop Toolbar ───────────────────────────────────────── */
.bak-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.bak-shop-results {
  font-size: 0.85rem;
  color: #666;
}

.bak-shop-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.bak-shop-sort label {
  color: #666;
}

.bak-shop-sort select {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.83rem;
  color: var(--color-primary);
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding-right: 28px;
  cursor: pointer;
  transition: var(--transition);
  outline: none;
}

.bak-shop-sort select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(21,158,76,0.1);
}

/* ─── Product Cards (shop grid) ──────────────────────────── */
.bak-product-card {
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid #f0f0f0 !important;
  overflow: hidden;
  transition: var(--transition);
}

.bak-product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #e0e0e0 !important;
  transform: translateY(-4px);
}

/* Inner content groups inside a product card should be invisible wrappers */
.bak-product-card .wp-block-group {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Sale badge */
.woocommerce span.onsale,
.bak-product-card .onsale {
  background: var(--color-secondary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  line-height: 1;
  border: none !important;
  min-height: auto !important;
  min-width: auto !important;
}

/* Product image container — ALWAYS the same fixed height.
   This ensures cards stay identical size with or without an image. */
.bak-product-card .wp-block-post-featured-image,
.wp-block-query .wp-block-post-featured-image {
  display: block;
  width: 100%;
  height: 200px;                  /* fixed height — same with or without image */
  background: #f5f5f5;            /* neutral placeholder bg */
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Placeholder icon when no image — centred camera icon via ::after */
.bak-product-card .wp-block-post-featured-image:not(:has(img))::after,
.wp-block-query .wp-block-post-featured-image:not(:has(img))::after {
  content: 'No image';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  opacity: 0.18;
  pointer-events: none;
}

/* The img inside — fills the container exactly */
.bak-product-card .wp-block-post-featured-image img,
.wp-block-query .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;         /* fill the fixed-height container */
  object-fit: cover;
  display: block;
  transition: var(--transition);
}

.bak-product-card:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}

/* Category label */
.bak-product-card .wp-block-post-terms,
.wp-block-query .wp-block-post-terms {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-secondary) !important;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Product title — clamp to 2 lines so cards stay uniform height */
.bak-product-card .wp-block-post-title,
.wp-block-query .wp-block-post-title {
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--color-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Price */
.bak-product-card .wc-block-components-product-price,
.bak-product-card .price,
.wp-block-query .price {
  font-size: 1.16rem !important;
  font-weight: 800 !important;
  color: var(--color-secondary) !important;
  margin: 0 0 10px;
}

/* Add to cart */
.bak-product-card .wp-block-button__link,
.wp-block-query .wp-block-button__link {
  background: var(--color-secondary) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  width: 100%;
  display: block;
  text-align: center;
  transition: var(--transition) !important;
  white-space: nowrap;
}

.bak-product-card .wp-block-button__link:hover,
.wp-block-query .wp-block-button__link:hover {
  background: var(--color-primary) !important;
  transform: none;
}

/* ─── Pagination ─────────────────────────────────────────── */
.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #e0e0e0;
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers.current {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* Prev / Next links: natural width, padded pill */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  border: 1px solid #e0e0e0;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

/* ─── Newsletter on Shop Page ────────────────────────────── */
.bak-shop-newsletter {
  margin-top: 0;
}

.bak-newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
  background: var(--color-gray-bg);
}

.bak-newsletter-content {
  padding: 60px 40px 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bak-newsletter-form {
  display: flex;
  gap: 0;
  max-width: 400px;
}

.bak-newsletter-input {
  flex: 1;
  padding: 13px 18px;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 50px 0 0 50px;
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
  font-family: 'Figtree', system-ui, sans-serif;
}

.bak-newsletter-input:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(21,158,76,0.1);
}

.bak-newsletter-btn {
  background: var(--color-secondary);
  color: #fff;
  border: none;
  border-radius: 0 50px 50px 0;
  padding: 13px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Figtree', system-ui, sans-serif;
}

.bak-newsletter-btn:hover {
  background: var(--color-primary);
}

.bak-newsletter-image {
  overflow: hidden;
  position: relative;
}

.bak-newsletter-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition);
}

.bak-newsletter-image:hover img {
  transform: scale(1.04);
}

/* ─── Shop page mobile ───────────────────────────────────── */
@media (max-width: 900px) {
  .bak-shop-layout {
    grid-template-columns: 1fr;
  }

  .bak-shop-sidebar {
    position: static;
  }

  .bak-newsletter-inner {
    grid-template-columns: 1fr;
  }

  .bak-newsletter-image {
    height: 220px;
  }
}

/* ══════════════════════════════════════════════════════════
   PAGES: CONTACT & ABOUT US
   ══════════════════════════════════════════════════════════ */

/* --- GENERAL PAGE --- */
.bak-page-header {
  padding: 40px 16px;
  background: var(--color-white);
}

.bak-page-header h1, .bak-page-header h2 {
  margin-bottom: 8px !important;
}

/* --- CONTACT PAGE --- */
.bak-contact-tabs {
  gap: 24px !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}
.bak-contact-tabs p {
  font-size: 1.1rem;
  color: #94a3b8;
  cursor: pointer;
  margin: 0 !important;
  padding-bottom: 4px;
}
.bak-contact-tabs p.is-active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.bak-map-section {
  position: relative;
  display: flex;
  margin-bottom: 60px !important;
}
.bak-map-wrapper {
  width: 100%;
}
.bak-store-card {
  position: absolute;
  top: 50%;
  right: 60px;
  transform: translateY(-50%);
  background: var(--color-white);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  width: 320px;
  z-index: 10;
}
.bak-store-card h3 {
  color: var(--color-primary);
  margin-bottom: 20px !important;
}
.bak-store-field {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 12px !important;
  line-height: 1.4;
}
.bak-store-field span {
  font-weight: 600;
  color: var(--color-primary);
}
.bak-btn-get-directions {
  display: block;
  text-align: center;
  margin-top: 24px;
  border-radius: 8px !important;
}

.bak-contact-features {
  text-align: center;
  margin-bottom: 80px !important;
  gap: 24px !important;
}
.bak-feature-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  margin-bottom: 16px;
  color: var(--color-primary);
}
.bak-feature-icon-wrapper .dashicons {
  font-size: 28px;
  width: 28px;
  height: 28px;
}
.bak-contact-features h4 {
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 8px !important;
}
.bak-contact-features p {
  font-size: 0.85rem;
  color: #64748b;
}

.bak-contact-split {
  margin-bottom: 80px !important;
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #f1f5f9;
  align-items: stretch !important;
}
.bak-contact-form-column {
  padding: 48px;
}
.bak-contact-form-column h2 {
  font-size: 1.6rem;
  color: var(--color-primary);
  margin-bottom: 12px !important;
}
.bak-contact-form-column > p {
  color: #64748b;
  font-size: 0.95rem;
  margin-bottom: 32px !important;
}
.bak-mock-contact-form input,
.bak-mock-contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fdfdfd;
}
.bak-mock-contact-form input:focus,
.bak-mock-contact-form textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(21, 158, 76, 0.1);
}
.bak-form-row {
  display: flex;
  gap: 16px;
}
.bak-submit-btn {
  width: 100%;
  text-align: center;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.bak-contact-image-column {
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 48px;
  min-height: 400px;
}
.bak-contact-image-column::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
}
.bak-contact-banner {
  position: relative;
  z-index: 1;
}
.bak-contact-banner h3 {
  font-size: 1.8rem;
  margin-bottom: 8px !important;
}
.bak-contact-banner p {
  font-size: 0.95rem;
  margin-bottom: 24px !important;
}

/* --- ABOUT US PAGE --- */
.bak-page-about .bak-about-hero {
  margin-bottom: 60px !important;
}
.bak-about-story {
  margin-bottom: 60px !important;
}

.bak-about-diet-icons {
  margin-bottom: 60px !important;
  gap: 16px !important;
  text-align: center;
}
.bak-diet-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.bak-diet-icon .dashicons {
  font-size: 32px;
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}
.pastel-green { background-color: #E6F7ED; }
.pastel-purple { background-color: #F2F1FF; }
.pastel-blue { background-color: #EAF6FF; }
.pastel-yellow { background-color: #FFF6E5; }
.pastel-pink { background-color: #FFEBEB; }
.bak-diet-col p {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.bak-promo-bar {
  padding: 16px 0;
  margin-bottom: 60px !important;
}
.bak-promo-strip {
  display: flex;
  justify-content: space-around;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.bak-about-partner {
  margin-bottom: 80px !important;
  gap: 40px !important;
}
.bak-partner-image-col img {
  border-radius: 16px;
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.bak-partner-text-col {
  padding: 20px 0;
}

.bak-stats-wrap {
  padding: 60px 24px;
  background: #fdfdfd;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 80px !important;
}
.bak-stats-row {
  text-align: center;
}
.bak-stat-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 8px !important;
}
.bak-stat-label {
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 500;
}

.bak-testimonial-sec {
  background: var(--color-white);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
  margin-bottom: 80px !important;
}
.bak-test-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.bak-test-author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.bak-test-author-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.bak-team-grid {
  gap: 24px !important;
  margin-bottom: 80px !important;
}
.bak-team-card {
  text-align: center;
}
.bak-team-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}
.bak-team-card h4 {
  font-size: 1.1rem;
  margin-bottom: 4px !important;
}
.bak-team-card p {
  font-size: 0.85rem;
  color: #64748b;
}

.bak-values-split {
  margin-bottom: 80px !important;
  gap: 40px !important;
}
.bak-values-accordion {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bak-acc-item {
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0;
  cursor: pointer;
}
.bak-acc-item h4 {
  font-size: 1.1rem;
  margin: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bak-acc-item.is-open h4 {
  margin-bottom: 12px !important;
}
.bak-acc-item p {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0 !important;
  line-height: 1.5;
}
.bak-values-image img {
  border-radius: 16px;
  width: 100%;
  height: 450px;
  object-fit: cover;
}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Strategy: CSS-only, no HTML changes.
   ══════════════════════════════════════════════════════════

   Breakpoints:
     Tablet   → max-width: 1024px
     Mobile   → max-width: 768px
     Small    → max-width: 480px
*/

/* ─────────────────────────────────────────────────────────
   TABLET  ≤ 1024px
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Header: reduce horizontal padding on all 3 bars */
  .bak-header-top,
  .bak-header-main,
  .bak-header-nav {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Header search: let it grow, drop fixed width */
  .wp-block-search {
    width: auto !important;
    flex: 1 1 auto;
    max-width: 360px;
  }

  /* Homepage: hero padding tighter */
  .wp-block-columns.alignwide {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Homepage: WooCommerce 5-col → 4-col */
  .wc-block-grid.has-5-columns .wc-block-grid__products,
  .wp-block-woocommerce-product-new .wc-block-grid__products {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Homepage: blog 4-col → 3-col */
  .bak-home-blog-columns:has(.wp-block-column:nth-child(4)) {
    gap: 20px !important;
  }

  /* Shop: sidebar narrower */
  .bak-shop-layout {
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }

  /* Shop: keep 5 columns on tablet, just tighten the gap */
  .bak-shop-main .wp-block-query .wp-block-post-template,
  .bak-shop-main-col .wp-block-query .wp-block-post-template {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
  }

  /* Footer: 5 col → 3 col */
  .wp-block-columns.alignwide {
    flex-wrap: wrap !important;
  }
  .wp-block-columns.alignwide > .wp-block-column {
    flex-basis: 30% !important;
    min-width: 200px;
  }
  /* First/logo column gets a bit more room */
  .wp-block-columns.alignwide > .wp-block-column:first-child {
    flex-basis: 100% !important;
    margin-bottom: 16px;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE  ≤ 768px
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── GLOBAL ──
     NOTE: Only clamp overflow on top-level containers.
     Applying overflow-x:hidden to wp-block-group breaks product cards! */
  html, body, .wp-site-blocks {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* Columns and cover blocks can overflow internally — clip only the page wrapper */
  .wp-block-columns {
    max-width: 100%;
  }

  /* ══════════════════════════════════════════════════════════
     HEADER — Mobile: single-bar layout
     Strategy: White bar = the visible bar. Green nav bar hides
     all its content EXCEPT the hamburger, which is absolutely
     positioned to sit at the left of the white bar. No negative
     margin tricks that collapse flex children.
     ══════════════════════════════════════════════════════════ */

  /* 1. Gray top bar — completely hidden */
  .bak-header-top {
    display: none !important;
  }

  /* 2. White middle bar: clean flex row
        padding-left: 56px reserves space for the hamburger button
        that will be absolutely positioned over it from the green bar */
  .bak-header-main {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px 10px 52px !important;
    gap: 10px !important;
    min-height: 60px !important;
    border-bottom: 1px solid #e0e0e0;
    z-index: 10;
    box-sizing: border-box !important;
  }

  /* Logo block: grows to fill remaining space */
  .bak-header-main > .wp-block-group:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Site logo image */
  .bak-header-main .wp-block-site-logo img {
    max-height: 38px !important;
    width: auto !important;
    display: block !important;
  }

  /* Search group — HIDE on mobile */
  .bak-header-main .wp-block-search {
    display: none !important;
  }

  /* Cart and account icons group — pin to right */
  .bak-header-main > .wp-block-group:last-child {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* 3. Dark green nav bar: collapsed to height:0,
        hamburger absolutely pops up into the white bar */
  .bak-header-nav {
    position: relative !important;
    background: transparent !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 20;
  }

  /* Everything inside green bar: hidden except the nav block */
  .bak-header-nav > *:not(.wp-block-navigation):not(.wp-block-group) {
    display: none !important;
  }

  /* Inner flex group holding button + nav: hide button, show nav */
  .bak-header-nav > .wp-block-group {
    display: flex !important;
    height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    align-items: flex-start !important;
  }

  /* Browse Categories button — hidden on mobile */
  .bak-header-nav .wp-block-button {
    display: none !important;
  }

  /* Flash sale text — hidden on mobile */
  .bak-header-nav > p {
    display: none !important;
  }

  /* Navigation block: zero height, overflow visible so hamburger pops up */
  .bak-header-nav .wp-block-navigation {
    display: block !important;
    height: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Hamburger button: float up 60px to sit in the white bar */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -60px !important;
    left: 8px !important;
    width: 40px !important;
    height: 40px !important;
    background: none !important;
    border: none !important;
    padding: 4px !important;
    cursor: pointer !important;
    z-index: 99 !important;
    color: var(--color-primary) !important;
  }

  /* Hamburger SVG icon */
  .wp-block-navigation__responsive-container-open svg {
    fill: var(--color-primary) !important;
    color: var(--color-primary) !important;
    width: 26px !important;
    height: 26px !important;
    display: block !important;
  }

  /* Full-screen overlay menu */
  .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--color-primary) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
  }

  /* Close button inside the overlay */
  .wp-block-navigation__responsive-container-close {
    display: flex !important;
    color: white !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* ── HOMEPAGE ── */

  /* Hero: stack to single column */
  .wp-block-columns.alignwide.are-vertically-aligned-center {
    flex-direction: column !important;
    padding-top: 40px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .wp-block-columns.alignwide.are-vertically-aligned-center > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Hero image: remove asymmetric radius, reduce height */
  .wp-block-columns.alignwide .wp-block-image figure,
  .wp-block-columns.alignwide .wp-block-image img {
    border-radius: 20px !important;
    height: 260px !important;
  }

  /* Hero stats strip: hide on small */
  .wp-block-columns.alignwide > .wp-block-column > .wp-block-group:last-child {
    display: none !important;
  }

  /* All full-width groups: correct padding */
  .wp-block-group.alignfull,
  .wp-block-group.alignwide {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Category dots: shrink icons & label */
  .bak-cat-card .wp-block-group.has-background {
    width: 60px !important;
    height: 60px !important;
  }

  .bak-cat-card .wp-block-group.has-background img {
    width: 32px !important;
    height: 32px !important;
  }

  /* Recently Added / Best Sellers: 2-col product grid */
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .wc-block-grid.has-5-columns .wc-block-grid__products,
  .wc-block-grid.has-4-columns .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Promo banners: stack to single column */
  .bak-home-promo-columns {
    flex-direction: column !important;
  }

  .bak-home-promo-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Cover blocks in promo: uniform height when stacked */
  .wp-block-cover {
    min-height: 240px !important;
  }

  /* Blog grid: 4 → 2 col */
  .bak-home-blog-columns {
    flex-wrap: wrap !important;
  }
  .bak-home-blog-columns > .wp-block-column {
    flex-basis: 47% !important;
  }

  /* Newsletter CTA (dark green): hide image column, stack */
  .bak-newsletter-inner {
    grid-template-columns: 1fr !important;
  }
  .bak-newsletter-image {
    display: none !important;
  }
  .bak-newsletter-content {
    padding: 40px 24px !important;
  }
  .bak-newsletter-form {
    max-width: 100% !important;
  }

  /* ── CONTACT & ABOUT PAGES ── */
  .bak-store-card {
    position: relative !important;
    top: -30px !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 auto;
    width: calc(100% - 32px) !important;
    padding: 24px !important;
  }
  .bak-form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .bak-contact-form-column {
    padding: 24px !important;
  }
  .bak-contact-image-column {
    padding: 32px 24px !important;
  }
  .bak-partner-image-col img,
  .bak-values-image img {
    height: 300px !important;
  }
  .bak-stats-row .wp-block-column {
    margin-bottom: 24px !important;
  }
  .bak-promo-strip {
    font-size: 0.9rem !important;
  }

  /* ── SHOP PAGE ── */

  /* Sidebar stacks above main */
  .bak-shop-layout {
    grid-template-columns: 1fr !important;
  }
  .bak-shop-sidebar {
    position: static !important;
  }

  /* Category filter list: collapse height */
  .bak-filter-cats {
    max-height: 160px !important;
  }

  /* Sale banner: stack text & CTA */
  .bak-sale-banner {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px 20px !important;
    text-align: center;
  }

  /* Shop toolbar: stack */
  .bak-shop-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Shop product grid: 4 → 2 col */
  .bak-shop-main .wp-block-query .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── FOOTER ── */
  .wp-block-group > .wp-block-columns.alignwide {
    flex-direction: column !important;
  }
  .wp-block-group > .wp-block-columns.alignwide > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE-SM  ≤ 480px
   ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── HEADER ── */
  /* Site title: smaller */
  .wp-block-site-title a {
    font-size: 1rem !important;
  }

  /* ── HOMEPAGE ── */

  /* Hero H1: clamp floor down */
  .wp-block-columns .wp-block-heading h1,
  .wp-block-columns h1 {
    font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
  }

  /* Category icons: even smaller */
  .bak-cat-card .wp-block-group.has-background {
    width: 48px !important;
    height: 48px !important;
  }

  .bak-cat-card .wp-block-group.has-background img {
    width: 26px !important;
    height: 26px !important;
  }

  .bak-cat-card p {
    font-size: 0.65rem !important;
  }

  /* Blog grid: 2 → 1 col */
  .bak-home-blog-columns > .wp-block-column {
    flex-basis: 100% !important;
  }

  /* Hero image height */
  .wp-block-columns.alignwide .wp-block-image img {
    height: 200px !important;
  }

  /* Promo covers */
  .wp-block-cover {
    min-height: 200px !important;
  }

  /* Buttons: full width on tiny screens */
  .wp-block-buttons .wp-block-button {
    width: 100%;
  }
  .wp-block-buttons .wp-block-button .wp-block-button__link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── SHOP PAGE ── */

  /* Sale banner: font down */
  .bak-sale-banner__text strong {
    font-size: 1.15rem !important;
  }

  /* Shop product grid stays 2 col but tighter */
  .bak-shop-main .wp-block-query .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Product card padding */
  .bak-product-card {
    padding-bottom: 10px !important;
  }

  /* Newsletter: smaller text */
  .bak-newsletter-content h2 {
    font-size: 1.4rem !important;
  }

  /* ── FOOTER ── */
  .wp-block-group > .wp-block-columns.alignwide {
    text-align: left;
  }

  /* Copyright */
  .wp-block-group p.has-text-align-center {
    font-size: 0.72rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MINI CART (DRAWER)
   ══════════════════════════════════════════════════════════ */

/* Drawer content base */
.wc-block-components-drawer__content {
  background: var(--color-white) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Header */
.wc-block-components-drawer__header {
  padding: 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.wc-block-components-drawer__title,
.wc-block-mini-cart__title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin: 0 !important;
}

.wc-block-components-drawer__close {
  color: #94a3b8 !important;
  background: transparent !important;
  transition: var(--transition) !important;
}

.wc-block-components-drawer__close:hover {
  color: var(--color-primary) !important;
  transform: rotate(90deg);
}

/* Items List */
.wc-block-mini-cart__items {
  padding: 24px !important;
}

.wc-block-mini-cart__item {
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
}

.wc-block-mini-cart__item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Image */
.wc-block-components-product-image {
  border-radius: 8px !important;
  border: 1px solid #f1f5f9 !important;
  overflow: hidden !important;
  padding: 4px !important;
  background: #f8fafc !important;
}

.wc-block-components-product-image img {
  border-radius: 4px !important;
}

/* Product Details */
.wc-block-components-product-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  margin-bottom: 4px !important;
}

.wc-block-components-product-price {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

/* Item Description/Excerpt */
.wc-block-components-product-description,
.wc-block-components-product-metadata {
  font-size: 0.78rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

/* Quantity & Remove Row */
.wc-block-mini-cart__item-quantity-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Quantity selector inside mini cart */
.wc-block-components-quantity-selector {
  background: var(--color-white) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  overflow: hidden !important;
}

.wc-block-components-quantity-selector input {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  width: 32px !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: center !important;
}

.wc-block-components-quantity-selector__button {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: none !important;
  width: 28px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
}

.wc-block-components-quantity-selector__button:hover {
  background: #f1f5f9 !important;
}

/* Trash Icon */
.wc-block-components-cart-item__remove-button,
.wc-block-mini-cart__item-remove {
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.wc-block-components-cart-item__remove-button:hover,
.wc-block-mini-cart__item-remove:hover {
  color: #ef4444 !important;
}

/* Footer Container */
.wc-block-mini-cart__footer {
  border-top: 1px solid #e2e8f0 !important;
  padding: 24px !important;
  background: #fdfdfd !important;
}

/* Subtotal */
.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--color-primary) !important;
  margin-bottom: 8px !important;
}

/* Shipping calculated text */
.wc-block-mini-cart__taxes {
  font-size: 0.72rem !important;
  color: #64748b !important;
  margin-bottom: 24px !important;
}

/* Action Buttons */
.wc-block-mini-cart__footer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.wc-block-components-button {
  width: 100% !important;
  text-align: center !important;
  padding: 14px 20px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  transition: var(--transition) !important;
  letter-spacing: 0.5px !important;
}

/* View Cart Button (secondary action usually has an outline) */
.wc-block-components-button:not(.wc-block-components-checkout-button) {
  background: var(--color-white) !important;
  color: var(--color-secondary) !important;
  border: 1px solid var(--color-secondary) !important;
}

.wc-block-components-button:not(.wc-block-components-checkout-button):hover {
  background: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

/* Checkout Button */
.wc-block-components-checkout-button {
  background: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-secondary) !important;
}

.wc-block-components-checkout-button:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE PRODUCT GRID & SHOP LAYOUT FIXES
   (Targeted overrides — applied after all breakpoints)
   ══════════════════════════════════════════════════════════ */

/* ─── wp:query post-template grid ───────────────────────────
   The block editor outputs wp-block-post-template as a flex
   container. We force CSS Grid to achieve a clean 2-col layout.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Force query loop template into CSS Grid */
  .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Each list item in the query loop */
  .wp-block-post-template > li {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important; /* override any flex-basis */
  }

  /* Product card: contained, no overflow issues */
  .bak-product-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden; /* clip content, not the whole page */
  }

  /* Product featured image CONTAINER: always 160px tall — with or without an image */
  .wp-block-post-featured-image,
  .bak-product-card .wp-block-post-featured-image,
  .wp-block-query .wp-block-post-featured-image {
    height: 160px !important;
    min-height: 160px !important;
    width: 100% !important;
    background: #f5f5f5 !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* The img inside: fill the container */
  .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* Product title: 2 lines max */
  .wp-block-post-template .wp-block-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2; /* standard property for compatibility */
    overflow: hidden;
    font-size: 0.98rem !important;
    line-height: 1.3;
  }

  /* Product price */
  .wp-block-post-template .wc-block-components-product-price,
  .wp-block-post-template .price {
    font-size: 1.06rem !important;
  }

  /* Add to cart button: contained */
  .wp-block-post-template .wp-block-button__link {
    font-size: 0.84rem !important;
    padding: 8px 12px !important;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* Tighter on small phones */
  .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Tighter containers on small phones */
  .wp-block-post-featured-image,
  .bak-product-card .wp-block-post-featured-image,
  .wp-block-query .wp-block-post-featured-image {
    height: 130px !important;
    min-height: 130px !important;
  }

  .wp-block-post-featured-image img {
    height: 100% !important;
  }

  .wp-block-post-template .wp-block-group {
    padding-bottom: 10px !important;
  }
}

/* ─── Shop page outer padding fix ───────────────────────────
   The shop layout wrapper has 40px padding on desktop.
   Override to 16px on mobile.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Shop outer wrapper */
  .bak-shop-layout {
    grid-template-columns: 1fr !important;
    gap: 20px;
    margin-top: 16px;
  }

  /* Breadcrumb padding */
  .wp-block-group.alignfull > p {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Page title section */
  .wp-block-group.alignfull {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Category pill row: stays scrollable, fix outer padding */
  .bak-shop-cats {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Sale banner: full width */
  .bak-sale-banner {
    border-radius: 12px;
  }

  /* Sidebar: full width, not sticky */
  .bak-shop-sidebar {
    width: 100% !important;
    position: static !important;
  }

  /* Filter widget: more compact */
  .bak-filter-widget {
    padding: 14px 16px;
  }

  /* Main product area: full width */
  .bak-shop-main {
    width: 100% !important;
    min-width: 0;
  }

  /* Shop toolbar sort select: full width on mobile */
  .bak-shop-sort select {
    width: 100%;
  }

  /* Pagination: tighter on mobile */
  .wp-block-query-pagination .page-numbers {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  /* ── SIDEBAR: Collapse on mobile so products aren't buried ── */

  /* Sidebar promo banner — hidden on mobile (saves 180px+) */
  .bak-sidebar-promo {
    display: none !important;
  }

  /* Categories list: capped at 5 rows, scroll for the rest */
  .bak-filter-cats {
    max-height: 180px !important;
    overflow-y: auto !important;
    /* Visual hint that list is scrollable */
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  }

  /* Filter widgets: reduce gap so sidebar is compact */
  .bak-shop-sidebar {
    gap: 12px !important;
  }

  /* Filter widget: more compact header */
  .bak-filter-widget__title {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    font-size: 0.85rem !important;
  }

  /* Price slider: reduce spacing */
  .bak-price-slider {
    height: 24px !important;
    margin-bottom: 4px !important;
  }

  /* Shop toolbar: stack label above select on very small screens */
  .bak-shop-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
  }
}

/* ─── WooCommerce classic product loops (homepage grids) ─────
   These use .wc-block-grid which is different from wp:query
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Force WC classic grid to 2 columns */
  .wc-block-grid .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .wc-block-grid .wc-block-grid__product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Product image in WC classic grid */
  .wc-block-grid .wc-block-grid__product-image img {
    height: 160px !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  /* Product title in WC widget */
  .wc-block-grid .wc-block-grid__product-title {
    font-size: 0.94rem !important;
    line-height: 1.3;
  }

  .wc-block-grid .wc-block-grid__product-price,
  .wc-block-grid .wc-block-grid__product .price {
    font-size: 1rem !important;
  }

  /* Add to cart in WC widget */
  .wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
    font-size: 0.82rem !important;
    padding: 8px 14px !important;
  }
}

@media (max-width: 480px) {
  .wc-block-grid .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .wc-block-grid .wc-block-grid__product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE — ACCORDION (wp:details)
   ══════════════════════════════════════════════════════════ */

.wp-block-details {
  transition: var(--transition);
}

.wp-block-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-primary);
  transition: var(--transition);
  flex-shrink: 0;
  margin-left: 16px;
}

.wp-block-details[open] summary::after {
  content: "\2212";
}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE — TESTIMONIAL WARM BEIGE
   ══════════════════════════════════════════════════════════ */

.has-warm-beige-background-color {
  background-color: #fcf6ef;
}

/* ══════════════════════════════════════════════════════════
   FRONT PAGE — 8-CATEGORY TILE GRID
   ══════════════════════════════════════════════════════════ */

.bak-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bak-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  background: #fff;
  border: 1px solid #eef0ef;
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--color-primary);
  transition: var(--transition);
  text-align: center;
}

.bak-cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.bak-cat-tile__icon {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bak-cat-tile__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.bak-cat-tile__icon--meats      { background: #fce4ec; }
.bak-cat-tile__icon--seafood    { background: #e3f2fd; }
.bak-cat-tile__icon--bakery     { background: #fff3e0; }
.bak-cat-tile__icon--beverages  { background: #e8f5e9; }
.bak-cat-tile__icon--groceries  { background: #f3e5f5; }
.bak-cat-tile__icon--seasonings { background: #ffebee; }
.bak-cat-tile__icon--candy      { background: #fff8e1; }
.bak-cat-tile__icon--supplies   { background: #eceff1; }

.bak-cat-tile__label {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
}

.bak-cat-tile__count {
  font-size: 0.78rem;
  color: #6b7a73;
  font-weight: 600;
}

@media (max-width: 900px) {
  .bak-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .bak-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .bak-cat-tile { padding: 20px 10px; }
  .bak-cat-tile__icon { width: 72px; height: 72px; }
  .bak-cat-tile__icon img { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════
   HEADER — CATEGORIES MEGA MENU
   ══════════════════════════════════════════════════════════ */

.bak-categories-menu {
  position: relative;
  display: inline-block;
}

.bak-categories-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-secondary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 14px 24px;
  border: 0;
  cursor: pointer;
  line-height: 1;
}

.bak-categories-menu__trigger::after {
  content: "\25BE";
  font-size: 0.8rem;
}

.bak-categories-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 280px;
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 12px 12px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 100;
}

.bak-categories-menu:hover .bak-categories-menu__panel,
.bak-categories-menu:focus-within .bak-categories-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bak-categories-menu__panel a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}

.bak-categories-menu__panel a:hover {
  background: #f2f4f3;
  color: var(--color-secondary);
}

.bak-categories-menu__panel a span {
  font-size: 0.75rem;
  color: #8a958f;
  background: #f2f4f3;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* Shop sidebar — real category filter list */
.bak-filter-cats a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  text-decoration: none;
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 500;
  border-bottom: 1px solid #f1f3f2;
  transition: color 0.15s ease;
}

.bak-filter-cats a:hover { color: var(--color-secondary); }
.bak-filter-cats a span {
  font-size: 0.75rem;
  color: #8a958f;
  font-weight: 600;
}
.bak-filter-cats ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bak-filter-cats > ul > li > ul {
  padding-left: 14px;
  margin: 4px 0 8px;
}
.bak-filter-cats > ul > li > ul a {
  font-weight: 400;
  font-size: 0.82rem;
  color: #4a5a53;
}

/* Shop sidebar — price + stock forms */
.bak-price-form .bak-price-inputs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.bak-price-form label {
  flex: 1;
  font-size: 0.75rem;
  color: #6b7a73;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bak-price-form input[type="number"] {
  width: 100%;
  border: 1px solid #d9dfdc;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.88rem;
  background: #fff;
}
.bak-stock-form .bak-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-primary);
  padding: 6px 0;
  cursor: pointer;
}
.bak-filter-apply {
  margin-top: 10px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bak-filter-apply:hover { background: var(--color-secondary); }

.bak-shop-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-primary);
  font-weight: 600;
}
.bak-shop-sort select {
  border: 1px solid #d9dfdc;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
}

/* ─── Shop archive: sidebar column (wp:column based) ─────── */
.bak-shop-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bak-shop-sidebar-col > * { margin: 0; }

/* The WC categories block, when it's the only child inside the
   .bak-filter-cats wrapper, needs to inherit the wrapper padding */
.bak-filter-cats .wp-block-woocommerce-product-categories {
  margin-top: 0;
}
.bak-filter-cats .wc-block-product-categories-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bak-filter-cats .wc-block-product-categories-list-item {
  list-style: none;
}

/* Sidebar text-only promo card */
.bak-sidebar-promo--text {
  padding: 22px 20px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #00582f 100%);
  border: 0;
  text-align: left;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 59, 34, 0.18);
}
.bak-sidebar-promo--text .bak-sidebar-promo__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.bak-sidebar-promo--text .bak-sidebar-promo__heading {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: #fff;
  line-height: 1.2;
}
.bak-sidebar-promo--text .bak-sidebar-promo__text {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.88);
}
.bak-sidebar-promo--text .bak-sidebar-promo__cta {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(249, 200, 45, 0.4);
  padding-bottom: 2px;
  transition: var(--transition);
}
.bak-sidebar-promo--text .bak-sidebar-promo__cta:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ─── Shop archive: stack columns on small screens ───────── */
@media (max-width: 781px) {
  .bak-shop-sidebar-col {
    flex-basis: 100% !important;
  }
}

/* ─── Pay Bak Foods Page ─────────────────────────────────── */
.bak-pay-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 40px 36px 32px;
  text-align: center;
}
.bak-pay-card__label {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 20px;
}
.bak-pay-form {
  margin: 0 0 20px;
}
.bak-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  padding: 18px 44px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 59, 34, 0.25);
  transition: var(--transition);
  text-transform: uppercase;
}
.bak-pay-btn:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 59, 34, 0.3);
}
.bak-pay-btn:active {
  transform: translateY(0);
}
.bak-pay-btn__icon {
  font-size: 1.1rem;
  line-height: 1;
}
.bak-pay-card__note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #666;
  margin: 0 0 22px;
}
.bak-pay-card__methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 0.78rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bak-pay-card__methods span:first-child {
  font-weight: 600;
}
.bak-pay-method {
  background: #f5f7f6;
  color: var(--color-primary);
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.4px;
}
.bak-pay-card__seal {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  min-height: 54px;
}

@media (max-width: 600px) {
  .bak-pay-card {
    padding: 32px 22px 26px;
    border-radius: 16px;
  }
  .bak-pay-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 0.98rem;
  }
  .bak-pay-card__methods {
    gap: 6px;
    font-size: 0.72rem;
  }
}