/* =====================================================================
   Wicked Good Pizza — page layout corrections against index.html
   Loaded after wgp-brand.css and wgp-woo.css.

   Everything here closes a specific gap between the live Elementor build
   and the storefront design, and each block says which one.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Proof band — the design puts hairline dividers between the three
      stats (border-x on the middle cell) and keeps the row short.
   --------------------------------------------------------------- */
.elementor-element-1a00016 > .elementor-element:nth-child(2){
  border-left:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12);
}
.elementor-element-1a00016 > .elementor-element{ justify-content:center; }
.elementor-element-1a00016 .elementor-widget-heading .elementor-heading-title,
.elementor-element-1a00016 .elementor-widget-text-editor p{ margin:0; }

/* ---------------------------------------------------------------
   2. Horizontal card sliders on phones
      index.html: `flex md:grid ... overflow-x-auto snap-x snap-mandatory`
      with each card at 78% width. The live build rendered a 2-up grid.
   --------------------------------------------------------------- */
@media (max-width:767px){
  .wgp-slider .woocommerce ul.products,
  .wgp-slider ul.products{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px;
    margin:0 -16px !important;
    padding:2px 16px 6px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .wgp-slider ul.products::-webkit-scrollbar{ display:none; }
  .wgp-slider ul.products > li.product{
    flex:0 0 78%;
    max-width:78%;
    scroll-snap-align:start;
  }
  /* the slider must be allowed to bleed to the screen edge */
  .wgp-slider,
  .wgp-slider > .elementor-widget-container{ overflow:visible; }
}

/* ---------------------------------------------------------------
   3. Category tiles — square, photo at 55%, dark gradient, Anton label
      bottom-left. index.html renders these as `.cat-tile` buttons.
   --------------------------------------------------------------- */
.wgp-cattiles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (min-width:768px){ .wgp-cattiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1025px){ .wgp-cattiles{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; } }

.wgp-cattile{
  position:relative; display:block;
  aspect-ratio:1; border-radius:16px; overflow:hidden;
  background:var(--wg-black,#0B0B0B);
  text-decoration:none; color:#fff;
  transition:transform .18s ease;
}
.wgp-cattile:hover{ transform:translateY(-2px); }
.wgp-cattile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55; display:block;
}
.wgp-cattile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,11,11,.9),transparent 70%);
}
.wgp-cattile__label{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  font-family:'Anton',Impact,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.01em;
  font-size:1rem; line-height:1.02; color:#fff;
}
@media (max-width:400px){ .wgp-cattile__label{ font-size:.9rem; } }

/* ---------------------------------------------------------------
   4. Card add control — size pills, price row, Add / stepper
      index.html cardHTML(): pills above, then price left / Add right,
      then a "View details" link on pizzas.
   --------------------------------------------------------------- */
.woocommerce ul.products li.product .wgp-add{
  display:flex; flex-direction:column;
  margin:0 14px 14px; padding-top:10px;
  margin-top:auto;
}
.wgp-add.is-busy{ opacity:.6; pointer-events:none; }

/* 7" / 10" pills */
.wgp-sizes{ display:flex; gap:6px; margin:0 0 6px; }
.woocommerce ul.products li.product .wgp-sizes .wgp-size{
  flex:0 0 auto;
  min-width:44px; min-height:34px; padding:0 12px;
  border-radius:9999px;
  border:1px solid rgba(11,11,11,.25);
  background:transparent; color:var(--wg-black,#0B0B0B);
  font-family:'Manrope',system-ui,sans-serif; font-weight:700; font-size:13px;
  line-height:1; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce ul.products li.product .wgp-sizes .wgp-size.is-active{
  background:var(--wg-black,#0B0B0B); color:#fff; border-color:var(--wg-black,#0B0B0B);
}
.wgp-sizenote{
  margin:0 0 8px; font-size:11px; line-height:1.4;
  color:var(--wg-stone,#8A8175);
}

/* price ↔ add */
.wgp-addrow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto;
}
.woocommerce ul.products li.product .wgp-cardprice{
  font-family:'Manrope',system-ui,sans-serif;
  font-weight:700; font-size:1.15rem; line-height:1.2;
  color:var(--wg-red,#C5010D);
  font-variant-numeric:tabular-nums;
}
.woocommerce ul.products li.product .wgp-cardprice .woocommerce-Price-amount{ color:inherit; }
.wgp-addslot{ flex:0 0 auto; }

.woocommerce ul.products li.product .wgp-addslot .wgp-addbtn{
  display:inline-flex; align-items:center; justify-content:center;
  margin:0; padding:.5rem 1.25rem; min-height:38px;
  background:var(--wg-red,#C5010D); color:#fff;
  border:0; border-radius:9999px;
  font-family:'Manrope',system-ui,sans-serif; font-weight:700; font-size:14px;
  line-height:1.2; cursor:pointer;
  transition:background-color .18s ease;
}
.woocommerce ul.products li.product .wgp-addslot .wgp-addbtn:hover{ background:var(--wg-red-h,#E0111D); }

/* − / + stepper, same footprint as the Add pill */
.wgp-stepper{
  display:inline-flex; align-items:center;
  border:1px solid var(--wg-red,#C5010D); border-radius:9999px; overflow:hidden;
  min-height:38px;
}
.woocommerce ul.products li.product .wgp-stepper .wgp-step{
  width:34px; height:36px; padding:0; margin:0; min-height:0;
  background:transparent; border:0; border-radius:0;
  color:var(--wg-red,#C5010D); font-weight:800; font-size:1.1rem; line-height:1;
  cursor:pointer;
}
.woocommerce ul.products li.product .wgp-stepper .wgp-step:hover{
  background:rgba(197,1,13,.08);
}
.wgp-qty{
  min-width:26px; text-align:center; font-weight:700; font-size:14px;
  color:var(--wg-black,#0B0B0B); font-variant-numeric:tabular-nums;
}

.wgp-viewdetail{
  margin-top:8px; align-self:flex-start;
  font-size:.8rem; font-weight:700; color:var(--wg-black,#0B0B0B);
  text-decoration:underline;
}
.wgp-viewdetail:hover{ color:var(--wg-red,#C5010D); }

/* the loop link no longer holds the price, so it must not claim the leftover
   vertical space — the control block does */
.woocommerce ul.products li.product a.woocommerce-loop-product__link{ flex:0 0 auto; }

/* ---------------------------------------------------------------
   4b. Sourdough teaser image — the widget box collapsed to 26px and the
       photograph spilled out of it, so the section read as empty space.
       index.html frames this as a rounded 4:3 crop.
   --------------------------------------------------------------- */
.elementor-element-1a0009e{ padding:0; align-self:stretch; }
.elementor-element-1a0009d{
  height:auto !important; min-height:0; width:100%;
}
.elementor-element-1a0009d img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:16px;
}

/* ---------------------------------------------------------------
   4c. Footer — the five columns are percentage-width flex items, and
       26+15+22+17+17 plus four 30px gaps overflowed 100%, so "Company"
       wrapped onto a second row. A grid sizes them against the gaps.
   --------------------------------------------------------------- */
@media (min-width:1025px){
  .elementor-83 .elementor-element-1a00026 > .e-con-inner{
    display:grid;
    grid-template-columns:1.55fr 1fr 1.35fr 1.1fr 1.1fr;
    gap:30px;
    align-items:start;
  }
  .elementor-83 .elementor-element-1a00026 > .e-con-inner > .elementor-element{
    width:auto !important;
  }
}
@media (min-width:768px) and (max-width:1024px){
  .elementor-83 .elementor-element-1a00026 > .e-con-inner{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 28px; align-items:start;
  }
  .elementor-83 .elementor-element-1a00026 > .e-con-inner > .elementor-element{
    width:auto !important;
  }
}
/* the design keeps the Instagram mark on the same left edge as the blurb */
.elementor-83 .elementor-element-1a0000e .elementor-widget-container,
.elementor-83 .elementor-element-1a0000e .elementor-social-icons-wrapper{
  justify-content:flex-start; text-align:left;
}
/* Company links were set solid; the design spaces them like the Menu list */
.elementor-83 .elementor-element-1a00025 .hfe-nav-menu li.menu-item{ margin-bottom:8px; }
.elementor-83 .elementor-element-1a00025 .hfe-nav-menu li.menu-item:last-child{ margin-bottom:0; }
.elementor-83 .elementor-element-1a00025 .hfe-nav-menu a.hfe-menu-item{
  padding:0 !important; line-height:1.5; font-size:14px;
}

/* ---------------------------------------------------------------
   4d. Single product page — index.html renderProduct()
   --------------------------------------------------------------- */
.woocommerce div.product .wgp-single__pill{
  display:inline-block; width:max-content;
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wg-green,#00873A);
  border:1px solid rgba(0,135,58,.3); border-radius:4px; padding:3px 8px;
  margin-bottom:12px;
}
.woocommerce div.product .product_title{ margin-bottom:10px; font-size:2.4rem; }
@media (max-width:767px){
  .woocommerce div.product .product_title{ font-size:1.9rem; }
}

/* the black "why it tastes different" note */
.wgp-why{
  background:var(--wg-black,#0B0B0B); color:var(--wg-cream,#F7F5F2);
  border-radius:14px; padding:16px; margin:18px 0 4px;
}
.wgp-why__head{ margin:0; font-weight:700; color:var(--wg-crust,#E0A340); font-size:15px; }
.wgp-why__body{ margin:4px 0 0; font-size:.9rem; line-height:1.55; opacity:.85; }

/* the size dropdown is kept for WooCommerce's own logic but hidden behind pills */
/* screen-reader-only rather than position:absolute — an absolutely positioned
   select with no positioned ancestor sat outside the viewport and made the
   page scroll sideways at 1440px */
.woocommerce div.product form.cart .variations select.wgp-hidden-select{
  display:block; width:1px !important; height:1px !important;
  min-height:0 !important; padding:0 !important; margin:0 !important;
  border:0 !important; opacity:0; pointer-events:none;
  overflow:hidden; clip-path:inset(50%);
}
.woocommerce div.product form.cart .variations{ margin-bottom:6px; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{ padding:0; border:0; background:none; }
.woocommerce div.product form.cart .variations label{
  font-weight:700; font-size:.85rem; margin-bottom:8px; display:block;
}
.woocommerce div.product .reset_variations{ font-size:12px; }

.wgp-sizerow{ display:flex; gap:8px; flex-wrap:wrap; }
.woocommerce div.product form.cart .wgp-sizerow .wgp-sizepill{
  min-width:52px; min-height:42px; padding:0 16px;
  background:transparent; color:var(--wg-black,#0B0B0B);
  border:1px solid rgba(11,11,11,.25); border-radius:9999px;
  font-family:'Manrope',system-ui,sans-serif; font-weight:700; font-size:15px;
  line-height:1; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce div.product form.cart .wgp-sizerow .wgp-sizepill.is-active{
  background:var(--wg-black,#0B0B0B); color:#fff; border-color:var(--wg-black,#0B0B0B);
}
.wgp-sizenote--single{ margin:6px 0 0; font-size:11px; color:var(--wg-stone,#8A8175); }

/* dip add-ons */
.wgp-dips{ margin:20px 0 4px; }
.wgp-dips__head{ margin:0 0 8px; font-weight:700; font-size:.85rem; }
.wgp-dips__head .woocommerce-Price-amount{ color:inherit; font-size:inherit; font-weight:inherit; }
.wgp-dips__row{ display:flex; flex-wrap:wrap; gap:8px; }
.wgp-dip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:9999px;
  padding:.4rem .9rem; font-size:.85rem; font-weight:600; min-height:38px;
}
.wgp-dip input{ accent-color:var(--wg-red,#C5010D); width:16px; height:16px; margin:0; }
.wgp-dip__swatch{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.wgp-dip:has(input:checked){ border-color:var(--wg-red,#C5010D); }

/* quantity stepper + full-width add button */
.woocommerce div.product form.cart{ margin-top:20px; }
.woocommerce div.product form.cart .quantity.wgp-stepped{
  display:inline-flex; align-items:center;
  border:1px solid rgba(11,11,11,.2); border-radius:9999px; overflow:hidden;
  margin-right:14px; float:none;
}
.woocommerce div.product form.cart .quantity.wgp-stepped input.qty{
  border:0 !important; border-radius:0 !important;
  width:44px; min-height:44px; padding:0; text-align:center;
  font-weight:700; font-size:1.05rem;
  -moz-appearance:textfield;
}
.woocommerce div.product form.cart .quantity.wgp-stepped input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity.wgp-stepped input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.woocommerce div.product form.cart .wgp-qtybtn{
  width:40px; height:44px; padding:0; min-height:0;
  background:transparent; border:0; border-radius:0;
  color:var(--wg-red,#C5010D); font-weight:800; font-size:1.2rem; line-height:1;
  cursor:pointer;
}
.woocommerce div.product form.cart .wgp-qtybtn:hover{ background:rgba(197,1,13,.08); }
.woocommerce div.product form.cart button.single_add_to_cart_button{
  min-width:min(320px,100%);
  padding:.9rem 1.5rem; font-size:1.05rem; font-weight:800;
}
@media (max-width:520px){
  .woocommerce div.product form.cart button.single_add_to_cart_button{ width:calc(100% - 150px); min-width:0; }
}

/* the summary column is taller than the gallery, so the related section was
   being pulled up beside the image instead of sitting below both */
.woocommerce div.product .related,
.woocommerce div.product .up-sells,
.woocommerce div.product .woocommerce-tabs{ clear:both; }

/* one price, not a range: the pills and the button carry the real number */
.woocommerce div.product.product-type-variable > .summary > p.price{ display:none; }
.woocommerce div.product .woocommerce-variation-price .price{
  font-size:1.6rem; font-weight:700; color:var(--wg-red,#C5010D);
}
/* the design has no "Clear" affordance — a size is always selected */
.woocommerce div.product form.cart .reset_variations{ display:none !important; }

/* quantity sits to the LEFT of the add button, as in the design */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form){
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .wgp-sizenote,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .wgp-dips{
  flex:0 0 100%; margin-top:0;
}
.woocommerce div.product form.cart .quantity.wgp-stepped{ order:1; margin-right:0; }
.woocommerce div.product form.cart button.single_add_to_cart_button{ order:2; flex:1 1 auto; }

/* related products keep the loop card, just less shouty a heading */
.woocommerce .related > h2,
.woocommerce .up-sells > h2{
  font-family:'Anton',Impact,sans-serif; font-weight:400; text-transform:uppercase;
  font-size:1.5rem; margin-bottom:16px;
}

/* ---------------------------------------------------------------
   5. Mobile order bar — index.html #mobileBar. Fixed to the bottom on
      phones once the basket has something in it.
   --------------------------------------------------------------- */
.wgp-orderbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:none;
  align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background:var(--wg-red,#C5010D); color:#fff;
  font-family:'Manrope',system-ui,sans-serif; font-weight:700; font-size:14px;
  text-decoration:none;
  box-shadow:0 -4px 20px rgba(0,0,0,.25);
}
.wgp-orderbar:hover{ color:#fff; }
.wgp-orderbar__left{ display:inline-flex; align-items:center; gap:8px; }
.wgp-orderbar__count{
  display:inline-grid; place-items:center;
  min-width:24px; height:24px; padding:0 6px;
  background:#fff; color:var(--wg-red,#C5010D);
  border-radius:9999px; font-size:13px; font-weight:800;
}
@media (max-width:767px){
  .wgp-orderbar:not([hidden]){ display:flex; }
  /* keep the last section clear of the bar, and lift the WhatsApp bubble */
  body.wgp-has-orderbar{ padding-bottom:56px; }
  body.wgp-has-orderbar .joinchat{ bottom:64px; }
}
/* pointless on the pages that already are the basket */
body.woocommerce-cart .wgp-orderbar,
body.woocommerce-checkout .wgp-orderbar{ display:none !important; }

/* ---------------------------------------------------------------
   6. "Read the 24-hour story" — the design makes this an inline red
      text link with an arrow, not a filled pill.
   --------------------------------------------------------------- */
.elementor-element-1a000a2 .elementor-button{
  background:transparent !important;
  color:var(--wg-red,#C5010D) !important;
  padding:0 !important; min-height:0;
  border-radius:0; font-weight:700;
}
.elementor-element-1a000a2 .elementor-button:hover{
  background:transparent !important; text-decoration:underline;
}
.elementor-element-1a000a2 .elementor-button-text::after{ content:" \2192"; }