/* =====================================================================
   Wicked Good Pizza — brand baseline
   Source of truth: brand-guidelines.html + index.html (storefront design)
   Tokens: black #0B0B0B  ink #1A1A1A  cream #F7F5F2  red #C5010D
           green #00873A  crust #E0A340  stone #8A8175
   Display: Anton (uppercase)   Body: Manrope
   ===================================================================== */

:root{
  --wg-black:#0B0B0B; --wg-ink:#1A1A1A; --wg-cream:#F7F5F2;
  --wg-red:#C5010D;   --wg-red-h:#E0111D;
  --wg-green:#00873A; --wg-crust:#E0A340; --wg-stone:#8A8175;
}

/* ---------------------------------------------------------------
   1. Font baseline — everything the Elementor kit does not reach
      (WooCommerce, Fluent Forms, archives, 404, comments)
   --------------------------------------------------------------- */
html body,
body.elementor-kit-9{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
}
input,select,textarea,button,optgroup,
.woocommerce input,.woocommerce select,.woocommerce textarea,.woocommerce button{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
}

/* Anton for theme-rendered display headings */
.page-header .entry-title,
.woocommerce-products-header__title,
.woocommerce-loop-category__title,
.error404 .page-title,
.search-results .page-title,
h1.entry-title{
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.95;
  color:var(--wg-black);
}

/* Tabular figures for every price / number, per the brand guide */
.tnum,.woocommerce-Price-amount,.wgp-price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------
   2. Fluent Forms → brand
      Fixes the system-font form on Party Orders and every form added later
   --------------------------------------------------------------- */
.frm-fluent-form,
.frm-fluent-form *:not(svg):not(path){
  font-family:'Manrope',system-ui,sans-serif;
}
.frm-fluent-form .ff-el-group{ margin-bottom:20px; }
.frm-fluent-form .ff-el-input--label label{
  font-size:14px; font-weight:700; color:var(--wg-black); margin-bottom:6px; display:inline-block;
}
.frm-fluent-form .ff-el-is-required.asterisk-right label:after{ color:var(--wg-red); }
.frm-fluent-form .ff-el-form-control{
  font-size:15px; font-weight:500; line-height:1.5;
  color:var(--wg-ink); background:#fff;
  border:1px solid rgba(11,11,11,.15); border-radius:12px;
  padding:12px 16px; width:100%; box-shadow:none;
}
.frm-fluent-form .ff-el-form-control::placeholder{ color:var(--wg-stone); opacity:1; }
.frm-fluent-form .ff-el-form-control:focus{
  border-color:var(--wg-red);
  outline:3px solid rgba(224,163,64,.35); outline-offset:1px; box-shadow:none;
}
.frm-fluent-form textarea.ff-el-form-control{ min-height:120px; }
.frm-fluent-form input[type=radio],
.frm-fluent-form input[type=checkbox]{ accent-color:var(--wg-red); width:18px; height:18px; }
.frm-fluent-form .ff-el-form-check-label,
.frm-fluent-form .ff_item_selectable{ font-size:15px; font-weight:500; color:var(--wg-ink); }
.frm-fluent-form .ff-el-help-message{ font-size:12px; color:var(--wg-stone); }

/* submit — primary pill, Fire Red */
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form .ff-btn.ff-btn-submit{
  background:var(--wg-red) !important; color:#fff !important;
  border:0 !important; border-radius:9999px !important;
  padding:14px 32px !important; min-height:46px;
  font-size:15px !important; font-weight:700 !important; letter-spacing:.01em;
  transition:background-color .18s ease;
}
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus{ background:var(--wg-red-h) !important; }

/* validation + confirmation */
.frm-fluent-form .text-danger,
.frm-fluent-form .error.text-danger{ color:var(--wg-red); font-size:12px; font-weight:600; }
.frm-fluent-form .ff-el-is-error .ff-el-form-control{ border-color:var(--wg-red); }
.ff-message-success,
.ff_submit_success{
  border:2px solid rgba(0,135,58,.4); background:rgba(0,135,58,.06);
  border-radius:16px; padding:20px 22px; color:var(--wg-ink);
}
.ff-message-success p:first-child strong,
.ff_submit_success strong{ font-family:'Anton',Impact,sans-serif; font-weight:400; text-transform:uppercase; font-size:20px; color:var(--wg-green); }

/* ---------------------------------------------------------------
   3. Component corrections against the design
   --------------------------------------------------------------- */

/* Buttons render at 13px on the live build; the design sets 16px/700 */
.elementor-widget-button .elementor-button{
  letter-spacing:.005em;
}

/* Star rating widget leaks the eicons font into its label */
.elementor-star-rating__title,
.elementor-widget-star-rating .elementor-screen-only{
  font-family:'Manrope',system-ui,sans-serif !important;
}

/* Accordion (FAQ) */
.elementor-accordion .elementor-tab-title{ font-family:'Manrope',system-ui,sans-serif; font-weight:700; }
.elementor-accordion .elementor-tab-content{ font-family:'Manrope',system-ui,sans-serif; }

/* Visually-hidden helpers still inherit the brand font */
.elementor-screen-only,.ff_screen_reader_title,.hfe-skip-link,.bhf-hidden{
  font-family:'Manrope',system-ui,sans-serif;
}

/* ---------------------------------------------------------------
   4. Header cart — the design's Fire Red pill with a white count bubble
      UAE's default cart renders only <span class="hfe-cart-count">N</span>,
      so the pill, the label and the bubble are built here.
   --------------------------------------------------------------- */
.wgp-headercart .hfe-site-header-cart{ border:0; }
.wgp-headercart .hfe-cart-container{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--wg-red,#C5010D); color:#fff;
  border-radius:9999px; padding:9px 16px; min-height:40px;
  text-decoration:none; transition:background-color .18s ease;
}
.wgp-headercart .hfe-cart-container:hover{ background:var(--wg-red-h,#E0111D); }
.wgp-headercart .hfe-cart-menu-wrap-default{
  display:inline-flex; align-items:center; gap:8px;
}
/* the bag glyph UAE draws with its icon font — suppressed in favour of the
   design's own cart SVG, because the UAE icon font does not always load */
.wgp-headercart .hfe-cart-menu-wrap-default .hfe-cart-count:after{
  display:none !important;
}
/* the design's cart glyph, drawn as an inline SVG mask so it takes currentColor */
.wgp-headercart .hfe-cart-menu-wrap-default:before{
  content:""; order:1; flex:0 0 auto;
  width:18px; height:18px; background-color:#fff;
  -webkit-mask:var(--wgp-cart-svg) center/contain no-repeat;
          mask:var(--wgp-cart-svg) center/contain no-repeat;
}
.wgp-headercart{
  --wgp-cart-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
}
/* the word "Cart", desktop only — the design hides it on small screens */
.wgp-headercart .hfe-cart-menu-wrap-default:after{
  content:"Cart";
  font-family:'Manrope',system-ui,sans-serif;
  font-size:14px; font-weight:700; color:#fff; line-height:1;
  order:2;
}
@media (max-width:767px){
  .wgp-headercart .hfe-cart-menu-wrap-default:after{ display:none; }
  .wgp-headercart .hfe-cart-container{ padding:8px 11px; gap:6px; min-height:38px; }
  .wgp-headercart .hfe-cart-menu-wrap-default:before{ width:17px; height:17px; }
  .wgp-headercart .hfe-cart-menu-wrap-default span.hfe-cart-count{
    min-width:19px; height:19px !important; line-height:19px !important; font-size:11px; padding:0 5px;
  }
}
/* the count itself becomes a white bubble on the red pill */
.wgp-headercart .hfe-cart-menu-wrap-default span.hfe-cart-count{
  order:3;
  background:#fff !important; color:var(--wg-red,#C5010D) !important;
  border:0 !important; border-radius:9999px !important;
  min-width:21px; height:21px !important; line-height:21px !important;
  padding:0 6px; flex:0 0 auto; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:12px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------
   4b. Header row — keep logo + wordmark + hamburger + cart on one line
       down to 320px. The wordmark is the only part allowed to shrink.
   --------------------------------------------------------------- */
/* The design's header is `sticky top-0` — it follows you down the page.
   #masthead is UAE's header wrapper on this theme. */
body.ehf-header #masthead{
  position:sticky; top:0; z-index:99;
}

/* the header row itself: three flex items, only the wordmark may give way */
.ehf-header .elementor-element-1a00009 > .e-con-inner,
.ehf-header .elementor-element-1a00009{ flex-wrap:nowrap !important; }
.ehf-header .elementor-element-1a00005{
  width:auto !important; max-width:100%;
  flex:0 1 auto !important;
}
/* the nav + cart group is content_width:full in Elementor, which made it
   claim the entire 1280px row and squeeze the logo group to zero */
.ehf-header .elementor-element-1a00008{ width:auto !important; }
.ehf-header .elementor-element-1a00003{
  width:auto !important; min-width:0; flex:0 1 auto !important; overflow:hidden;
}
.ehf-header .elementor-element-1a00003 .elementor-heading-title{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* logo badge never shrinks, and carries its own size — the Elementor width
   controls were removed so the flex row could shrink honestly */
.ehf-header .elementor-element-1a00004{ flex:0 0 auto !important; width:auto !important; }
.ehf-header .elementor-element-1a00004 .elementor-widget-container,
.ehf-header .elementor-element-1a00004 a,
.ehf-header .elementor-element-1a00004 img{ display:block; }
.ehf-header .elementor-element-1a00004 .elementor-widget-container img{
  aspect-ratio:1; height:auto; object-fit:cover;
}
/* hamburger + cart are never allowed to be pushed off the right edge */
.ehf-header .elementor-element-1a00008{ flex:0 0 auto !important; min-width:0; }
.ehf-header .elementor-element-1a00006{ flex:0 0 auto !important; }
/* The "More" dropdown is the last item before the cart, so a left-aligned
   panel crossed the right edge and gave every page a 6px sideways scroll
   at around 1200px. Hang it from the right instead. */
@media (min-width:1025px){
  .ehf-header .hfe-nav-menu li.menu-item-has-children > ul.sub-menu{
    left:auto !important; right:0 !important;
  }
}

/* below 360px the gold kicker is the first thing to go */
@media (max-width:359px){
  .ehf-header .elementor-element-1a00002{ display:none; }
}

/* Joinchat ships its own system font stack for the bubble and tooltip */
.joinchat,
.joinchat *,
.joinchat__tooltip,
.joinchat__message,
.joinchat__header,
.joinchat__optin{
  font-family:'Manrope',system-ui,sans-serif !important;
}
.joinchat__tooltip{ font-weight:600; }

/* Focus rings — brand guide calls for a 3px crust-gold ring */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--wg-crust); outline-offset:2px; border-radius:4px;
}