/* =========================================================
   PIZZA & CO — pc-ui.css
   NOTE: This file is enqueued site-wide by functions.php
   ========================================================= */

/* -----------------------------
   Tokens
------------------------------ */
:root{
  --pc-home-green: #8cc540;
  --pc-radius: 18px;

  --pc-gap: 22px;

  /* Tile heights (desktop) */
  --pc-h-row1: clamp(220px, 18vw, 280px);
  --pc-h-row2: clamp(190px, 16vw, 250px);

}

/* =========================================================
   GLOBAL SAFETY RESETS (prevents “red links on white”)
   ========================================================= */
.pc-classic a{
  color: inherit;
  text-decoration: none;
}
.pc-classic{
  color: #111;
}
.pc-classic *{
  box-sizing: border-box;
}

/* =========================================================
   HOME — CLASSIC TILE LAYOUT (RESTORES YOUR HOMEPAGE)
   Targets your template markup:
   <main class="pc-classic">
     <div class="pc-body-bg">
       <section class="pc-wrap pc-panel">
         <div class="pc-tiles">
           <div class="pc-blend"> ... </div>
           <div class="pc-blend3"> ... </div>
         </div>
       </section>
     </div>
   ========================================================= */

.pc-classic .pc-body-bg{
  /* avoids “white void” look */
  background: #0b0f07;
  padding: 30px 0 30px;
}

.pc-classic .pc-wrap{
  width: min(1080px, calc(100% - 28px));
  margin: 0 auto;
}

/*.pc-classic .pc-panel{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: calc(var(--pc-radius) + 8px);
  padding: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
}*/

.pc-classic .pc-tiles{
  display: grid;
  gap: var(--pc-gap);
}

/* Row 1: 2 tiles equal height */
.pc-classic .pc-blend{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pc-gap);
}

/* Row 2: 3 tiles equal height */
.pc-classic .pc-blend3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--pc-gap);
}

/* Base tile */
.pc-classic a.pc-tile{
  display: grid;
  align-content: end;
  position: relative;
  overflow: hidden;
  border-radius: var(--pc-radius);
  isolation: isolate; /* keeps overlays sane */

  /* IMPORTANT: makes them “tiles” not inline links */
  min-height: var(--pc-h-row2);
  width: 100%;

  /* fallbacks if image missing */
  background: #111;
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

/* Row 1 is taller */
.pc-classic .pc-blend > a.pc-tile{
  min-height: var(--pc-h-row1);
}

/* Background image via --img */
.pc-classic a.pc-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  z-index: -2;
}

/* Dark overlay so labels read */
.pc-classic a.pc-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.15) 0%,
      rgba(0,0,0,.25) 35%,
      rgba(0,0,0,.70) 100%);
  z-index: -1;
}

/* Label styling */
.pc-classic .pc-tile__label{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin: 14px;
  padding: 12px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  color: #e5e5e5;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1;

  background:linear-gradient(135deg, #729919 0%, #6faa22 55%, #9cca4e 100%);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
  text-shadow:0px 1px 0px rgba(0,0,0,0.9);
}

/* “View Full Menu” tile can intentionally show no label */
.pc-classic .pc-tile--viewfull .pc-tile__label{
  display:none;
}
div.prod_hold .links a.lafka-quick-view-link {
	margin:0px !important;
}
/* Hover polish (desktop only) */
@media (hover:hover) and (pointer:fine){
  .pc-classic a.pc-tile{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .pc-classic a.pc-tile:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(0,0,0,.32);
    border-color: rgba(140,197,64,.30);
  }
  .pc-classic a.pc-tile:hover::before{
    transform: scale(1.06);
    transition: transform .28s ease;
  }
}
@media (max-width: 420px){
	.name {
		width:95%;
	}
  .lafka-products-list-view div.prod_hold {
    background: transparent !important;
    padding: 12px 0 0 2px !important;
    margin: 12px 0 0 0 !important;
    border: 0 !important;         /* disable normal border */
    position: relative;               /* anchor the pseudo-line */
	  box-shadow:none !important;
  }

  /* 75% width line, darkest in middle, fades to transparent at ends */
  .lafka-products-list-view div.prod_hold::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 1px;

    /*background: lightgrey;*/
  }
}
/* Responsive: stack cleanly */
@media (max-width: 860px){
  .pc-classic .pc-blend{
    grid-template-columns: 1fr;
  }
  .pc-classic .pc-blend3{
    grid-template-columns: 1fr;
  }
  .pc-classic a.pc-tile{
    min-height: 220px;
  }
}

/* =========================================================
   MobileCats inside the bottom dock overlay
   ========================================================= */
.pc-overlay .pc-mobile-topbar { width: 100%; }
.pc-overlay .pc-mobile-topbar details { width: 100%; }
.pc-overlay .pc-mobile-topbar summary { cursor: pointer; }

/* =========================================================
   PRODUCTS LIST VIEW — SINGLE SOURCE OF TRUTH (FINAL)
   <760px  : 2-col (img + content), CTA under content
   >=760px : 3-col (img / content / price+CTA)
   Image sizes:
     - <=420px: 90px
     - 421–759: 110px
     - >=760px: 130px
   ========================================================= */

/* ---------- Base (mobile-first) ---------- */
.lafka-products-list-view div.prod_hold{
  --pc-img-col: 90px;

  width: 100% !important;
  display: grid !important;

  /* 2-col layout by default */
  grid-template-columns: var(--pc-img-col) minmax(0, 1fr) !important;
  grid-template-areas:
    "img info"
    "img cta" !important;
  grid-template-rows: auto auto !important;

  column-gap: 18px !important;
  row-gap: 10px !important;

  align-items: start !important;

  background: #fff !important;
  border: 1px solid var(--pc-border, #e6e9ef) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.06) !important;

  padding: 10px !important;
  margin: 8px 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Image column */
.lafka-products-list-view div.prod_hold > .image{
  grid-area: img !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  align-self: start !important;
}
.lafka-products-list-view div.prod_hold > .image a{
  display: block !important;
  width: 100% !important;
}
.lafka-products-list-view div.prod_hold > .image img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Info column (title, desc, price) */
.lafka-products-list-view div.prod_hold > .lafka-list-prod-summary{
  grid-area: info !important;
  min-width: 0 !important;

  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-rows: auto auto auto !important; /* title / desc / price */
  row-gap: 8px !important;
}

.lafka-products-list-view div.prod_hold .lafka-list-prod-summary .name,
.lafka-products-list-view div.prod_hold .lafka-list-prod-summary h3{
  font-family: var(--pc-headline-font, "Archivo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  color: #111827 !important;
  margin: 0 !important;
}

/* Description */
.lafka-products-list-view div.prod_hold .woocommerce-product-details__short-description,
.lafka-products-list-view div.prod_hold .woocommerce-product-details__short-description p{
  margin: 0 !important;
  color: var(--pc-muted, #6b7280) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* Price (mobile: stays with content) */
.lafka-products-list-view div.prod_hold .price_hold{
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 10px !important;
}
.lafka-products-list-view div.prod_hold .price_hold .amount{
  font-weight: 800 !important;
  font-size: 17px !important;
  color: #111827 !important;
}
.lafka-products-list-view div.prod_hold .price_hold sup{
  font-size: 0.65em !important;
  top: -0.4em !important;
}

/* CTA row (mobile: sits under content, never over image) */
.lafka-products-list-view div.prod_hold > .links{
  grid-area: cta !important;
  grid-column: 2 / 3 !important;
  grid-row: 2 !important;

  position: static !important;
  transform: none !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Hide “Select options” etc */
.lafka-products-list-view div.prod_hold > .links > a.add_to_cart_button,
.lafka-products-list-view div.prod_hold > .links > a.button.product_type_simple,
.lafka-products-list-view div.prod_hold > .links > a.button.product_type_variable{
  display: none !important;
}

/* Order Now button */
.lafka-products-list-view div.prod_hold > .links > a.lafka-quick-view-link{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  height: 40px !important;
  line-height: 40px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;

  background: var(--pc-green, #9cca4e) !important;
  border: 1px solid rgba(0,0,0,.08) !important;

  color: #fff !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  text-decoration: none !important;
  box-shadow: none !important;
}
.lafka-products-list-view div.prod_hold > .links > a.lafka-quick-view-link:hover{
  background: var(--pc-green-hover, #8fbe46) !important;
}

/* Screen reader text: keep accessible, never affects layout */
.lafka-products-list-view div.prod_hold .screen-reader-text{
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* ---------- Image step: 110px (421–759) ---------- */
@media (min-width: 421px) and (max-width: 759px){
  .lafka-products-list-view div.prod_hold{ --pc-img-col: 110px; }
}

/* =========================================================
   >=760px — 3 COLUMN LAYOUT:
   col1 image (130px)
   col2 title + 2-line desc
   col3 price (top) + button (bottom)
   ========================================================= */
@media (min-width: 760px){

  .lafka-products-list-view div.prod_hold{
    --pc-img-col: 130px;

    grid-template-columns: var(--pc-img-col) minmax(0, 1fr) minmax(170px, 240px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "img  title price"
      "img  desc  cta" !important;

    column-gap: 18px !important;
    row-gap: 10px !important;

    align-items: start !important;
  }

  /* Let children be placed directly into the card grid */
  .lafka-products-list-view div.prod_hold > .lafka-list-prod-summary{
    display: contents !important;
  }

  /* Title -> column 2 row 1 */
  .lafka-products-list-view div.prod_hold .wrap_link{
    grid-area: title !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  /* Description -> column 2 row 2, clamp to 2 lines */
  .lafka-products-list-view div.prod_hold .woocommerce-product-details__short-description{
    grid-area: desc !important;
    min-width: 0 !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  /* Price -> column 3 row 1 (top-right) */
  .lafka-products-list-view div.prod_hold .price_hold{
    grid-area: price !important;
    text-align: right !important;
    align-self: start !important;
    margin: 0 !important;
  }

  /* CTA -> column 3 row 2 (under price) */
  .lafka-products-list-view div.prod_hold > .links{
    grid-area: cta !important;
    grid-column: auto !important;
    grid-row: auto !important;

    align-self: end !important;
    justify-self: stretch !important;

    width: 100% !important;
    margin: 0 !important;
  }

  .lafka-products-list-view div.prod_hold > .links > a.lafka-quick-view-link{
    width: 100% !important;
  }
}

.lafka-products-list-view div.prod_hold .name::after {
  border-bottom: none !important;
}
/* =========================================================
   FIX: >=760px 3-col layout spacing + force CTA down
   ========================================================= */
@media (min-width: 760px){

  /* Make row 2 take remaining height so CTA can sit at the bottom */
  .lafka-products-list-view div.prod_hold{
    grid-template-rows: auto 1fr !important; /* <-- key */
    row-gap: 6px !important;                /* tighten title/desc spacing */
    align-items: start !important;
  }

  /* Nuke any theme margins that create artificial whitespace */
  .lafka-products-list-view div.prod_hold .name,
  .lafka-products-list-view div.prod_hold h3,
  .lafka-products-list-view div.prod_hold .woocommerce-product-details__short-description,
  .lafka-products-list-view div.prod_hold .woocommerce-product-details__short-description p{
    margin: 0 !important;
  }

  /* Give description a tiny breathing space (not a canyon) */
  .lafka-products-list-view div.prod_hold .woocommerce-product-details__short-description{
    margin-top: 4px !important;
  }

  /* HARD LOCK: put the CTA in row 2 col 3 and push it down */
  .lafka-products-list-view div.prod_hold > .links,
  .lafka-products-list-view div.prod_hold.product.type-product > .links{
    grid-area: cta !important;
    grid-column: 3 / 4 !important;
    grid-row: 2 !important;

    align-self: end !important;      /* <-- key: bottom of row 2 */
    justify-self: stretch !important;

    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
  }

  /* Make sure the button actually obeys the column width */
  .lafka-products-list-view div.prod_hold > .links > a.lafka-quick-view-link{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* Dock is fixed and layout-neutral */
.pc-bottom-dock{
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 24px));
  height: var(--pc-dock-h);
  z-index: 999999;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: 50% 100%;
}

/* Hide via transform only — never display/height */
.pc-bottom-dock.is-hidden{
  transform: translateX(-50%) translateY(110%);
  opacity: 0;
  pointer-events: none;
}
/* =========================================================
   HOMEPAGE — FULL MENU OVERLAY (styling mode)
   Trigger: .pc-fullmenu-trigger
   Adds: #pcMenuOverlay.pc-menuoverlay--fullmenu
   ========================================================= */

#pcMenuOverlay.pc-menuoverlay--fullmenu .pc-overlay__panel{
  width: min(980px, calc(100vw - 24px));
}

#pcMenuOverlay.pc-menuoverlay--fullmenu .pc-overlay__body{
  padding: 12px;
}

#pcMenuOverlay.pc-menuoverlay--fullmenu .pc-overlay__panel--fullmenu{
  background: rgba(10,12,8,.96);
  border: 1px solid rgba(255,255,255,.08);
}
/* =========================================================
   HARD FIX: Prevent overlays creating page-height whitespace
   (removes “white strip” at bottom of pages)
   ========================================================= */

.pc-overlay{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
}

/* When closed, keep them visually hidden and non-interactive */
.pc-overlay[aria-hidden="true"]{
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* When open, make them interactive */
.pc-overlay.is-open,
.pc-overlay[aria-hidden="false"]{
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* =========================================================
   FIX: White strip bottom on non-home pages
   Cause: hidden dock still reserving space / page has bottom padding
========================================================= */

/* 1) When dock is hidden, it should be GONE (no height, no padding, no pointer events) */
.pc-bottom-dock.is-hidden{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* 2) If you add body padding to "make room" for the dock, remove it when dock is hidden */
body:has(.pc-bottom-dock.is-hidden){
  padding-bottom: 0 !important;
}

/* Fallback if :has() isn't supported in a browser (rare now, but safe) */
body.pc-dock-hidden{
  padding-bottom: 0 !important;
}

/* =========================================================
   WPO CHECKBOX ALIGNMENT FIX
   Keep checkbox + label + price on ONE ROW
   ========================================================= */

/* Target checkbox rows only */
.wpo-field-checkbox .wpo-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
}

/* Kill stacked layouts inside */
.wpo-field-checkbox .wpo-checkbox > * {
  float: none !important;
  display: inline-flex;
  align-items: center;
}

/* Checkbox input */
.wpo-field-checkbox input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

/* Label text */
.wpo-field-checkbox .wpo-option-label,
.wpo-field-checkbox .wpo-option-name {
  flex: 1 1 auto;
  line-height: 1.3;
}

/* Price aligned right */
.wpo-field-checkbox .wpo-option-price {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
}
/* =========================================================
   OVERLAYS — RESTORE REAL STYLING (panel/head/body/backdrop)
   This is what makes the dock overlays NOT look like a blank Word doc.
   ========================================================= */

:root{
  --pc-ov-backdrop: rgba(0,0,0,.55);
  --pc-ov-panel: #0b0f07;
  --pc-ov-panel-border: rgba(255,255,255,.10);
  --pc-ov-text: #eef2f7;
  --pc-ov-muted: rgba(238,242,247,.70);
  --pc-ov-radius: 18px;
  --pc-ov-shadow: 0 24px 70px rgba(0,0,0,.40);
}

/* Overlay shell is already fixed by your existing code.
   Add baseline visual behavior + safe scrolling. */
.pc-overlay{
  display: block !important;
  overflow: hidden !important;
}

/* Backdrop */
.pc-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: var(--pc-ov-backdrop);
}

/* Panel */
.pc-overlay__panel{
  position: absolute;
  inset: 10px;
  margin: auto;
  width: min(440px, calc(100vw - 24px));
  height: min(680px, calc(100vh - 24px));
  background: var(--pc-ov-panel);
  color: var(--pc-ov-text);
  border: 1px solid var(--pc-ov-panel-border);
  border-radius: var(--pc-ov-radius);
  box-shadow: var(--pc-ov-shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* “Light” panel variant (your cart uses this class) */
.pc-overlay__panel--light{
  background: #ffffff;
  color: #111827;
  border-color: rgba(0,0,0,.10);
}

/* Head */
.pc-overlay__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pc-overlay__panel--light .pc-overlay__head{
  border-bottom-color: rgba(0,0,0,.08);
}

/* Title */
.pc-overlay__title{
  font-family: var(--pc-headline-font, "Archivo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  margin: 0;
}

/* Close button */
.pc-overlay__close{
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.08);
  color: inherit;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pc-overlay__close svg{ width: 20px; height: 20px; }
.pc-overlay__panel--light .pc-overlay__close{
  background: rgba(0,0,0,.06);
}

/* Body */
.pc-overlay__body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

/* =========================================================
   DOCK MENU (MobileCats) — overlay styling
   Targets your markup inside #pcDockMobileCats
   ========================================================= */

.pc-mobile-topbar--overlay{
  width: 100%;
  color: inherit;
}

.pc-mobile-topbar--overlay .pc-mobile-dd{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.pc-overlay__panel--light .pc-mobile-topbar--overlay .pc-mobile-dd{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

/* Summary row */
.pc-mobile-topbar--overlay .pc-mobile-dd__summary{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.pc-mobile-topbar--overlay .pc-mobile-dd__summary::-webkit-details-marker{ display:none; }

/* Burger */
.pc-mobile-topbar--overlay .pc-burger{
  width: 18px;
  height: 14px;
  display: grid;
  gap: 3px;
}
.pc-mobile-topbar--overlay .pc-burger span{
  display:block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .9;
}

/* Hint */
.pc-mobile-topbar--overlay .pc-mobile-dd__hint{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}

/* Panel contents */
.pc-mobile-topbar--overlay .pc-mobile-dd__panel{
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.pc-overlay__panel--light .pc-mobile-topbar--overlay .pc-mobile-dd__panel{
  border-top-color: rgba(0,0,0,.10);
}

/* Category blocks */
.pc-mobile-topbar--overlay .pc-cat{
  border-radius: 12px;
  overflow: hidden;
  margin: 8px 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.pc-overlay__panel--light .pc-mobile-topbar--overlay .pc-cat{
  border-color: rgba(0,0,0,.10);
  background: #fff;
}

/* Category summary row */
.pc-mobile-topbar--overlay .pc-cat__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.pc-mobile-topbar--overlay details.pc-cat > summary.pc-cat__summary::-webkit-details-marker{ display:none; }

/* Arrow on summaries for <details> cats */
.pc-mobile-topbar--overlay details.pc-cat > summary.pc-cat__summary::after{
  content: "›";
  font-size: 20px;
  line-height: 1;
  opacity: .75;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.pc-mobile-topbar--overlay details.pc-cat[open] > summary.pc-cat__summary::after{
  transform: rotate(90deg);
}

/* Link-style cats */
.pc-mobile-topbar--overlay .pc-cat--link .pc-cat__summary{
  text-decoration: none;
  color: inherit;
}
.pc-mobile-topbar--overlay .pc-cat--link .pc-cat__summary::after{
  content: "›";
  font-size: 20px;
  opacity: .75;
}

/* Submenu */
.pc-mobile-topbar--overlay .pc-cat__sub{
  padding: 8px 8px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pc-overlay__panel--light .pc-mobile-topbar--overlay .pc-cat__sub{
  border-top-color: rgba(0,0,0,.08);
}

.pc-mobile-topbar--overlay a.pc-mobile-dd__subitem{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  opacity: .92;
}
.pc-mobile-topbar--overlay a.pc-mobile-dd__subitem:hover{
  background: rgba(255,255,255,.08);
}
.pc-overlay__panel--light .pc-mobile-topbar--overlay a.pc-mobile-dd__subitem:hover{
  background: rgba(0,0,0,.05);
}
/* WPO/WC Product Options — make native inputs actually clickable */
.wpo-options-container .wpo-radio,
.wpo-options-container .wpo-checkbox{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Ensure the input is not covered */
.wpo-options-container input[type="checkbox"],
.wpo-options-container input[type="radio"]{
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  opacity: 1 !important;         /* if your skin hides it, remove this line */
}

/* If the plugin/theme draws a fake box using pseudo-elements, stop it stealing clicks */
.wpo-options-container .wpo-radio::before,
.wpo-options-container .wpo-radio::after,
.wpo-options-container .wpo-checkbox::before,
.wpo-options-container .wpo-checkbox::after{
  pointer-events: none !important;
}

/* If the label text block is sitting on top of the checkbox area */
.wpo-options-container .wpo-option-price,
.wpo-options-container .wpo-option-label,
.wpo-options-container .wpo-option-name{
  position: relative;
  z-index: 1;
}

/* =========================================
   PROMO STRIP — full width inside tiles
   Proper image fade RIGHT → LEFT
   Fonts remain untouched
   ========================================= */

.pc-promo-strip{
  margin: var(--pc-gap, 22px) 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;

  /* Base green behind image */
  background: #3f6f13;
}

/* Layout only — NO background colour here */
.pc-promo-strip__inner{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px;
  background: transparent;
}

/* IMAGE LAYER */
.pc-promo-strip::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background-image: url("/wp-content/themes/lafka-child/assets/home/promo.jpg"); /* ← update path if needed */
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;

  filter: saturate(1.08) contrast(1.05);

  /* TRUE IMAGE FADE */
  -webkit-mask-image: linear-gradient(to left,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,.75) 60%,
    rgba(0,0,0,.35) 75%,
    rgba(0,0,0,0) 90%
  );
  mask-image: linear-gradient(to left,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,.75) 60%,
    rgba(0,0,0,.35) 75%,
    rgba(0,0,0,0) 90%
  );
}

/* Subtle left-side darkening for text clarity */
.pc-promo-strip::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background: linear-gradient( to right, rgba(140,197,64,0.1) 0%, rgba(140,197,64,.18) 35%, rgba(140,197,64,0) 65% );
}

/* Keep your existing font styling — nothing changed */
.pc-promo-strip__content h3{
  margin: 0 0 6px 0;
	font-size:22px;
	font-weight:600;
	color:white;
	text-shadow:1px 1px 1px black;
}

.pc-promo-strip__content p{
  margin: 0;
	color:white;
	font-weight:500;
	font-size:12px;
}

/* Button alignment only */
.pc-promo-strip__btn{
  flex: 0 0 auto;
  white-space: nowrap;
	background:white;
	padding:10px;
	border-radius:10px;
	font-weight:600;
}

/* Mobile adjustments */
@media (max-width: 680px){
  .pc-promo-strip__inner{
    padding: 18px 16px;
  }

  .pc-promo-strip::before{
    background-position: 70% center;
  }
}