/*
Theme Name: Dishes by Grace
Theme URI: https://www.dishesbygrace.co.za
Author: Grace's Kitchen / Dishes by Grace
Description: Custom standalone WordPress + WooCommerce theme for Dishes by Grace, a delivery- and collection-only African-food kitchen in Cape Town. Built to run WooCommerce's core cart, checkout, and product templates with brand styling applied via CSS only (no core WooCommerce templates are overridden in this theme, so WooCommerce updates stay safe).
Version: 1.0.1
Requires PHP: 7.4
Text Domain: dishes-by-grace
*/

/* =====================================================================
   DISHES BY GRACE — GLOBAL SITE STYLESHEET
   Covers every page: header/footer, general typography and buttons,
   and all core WooCommerce templates (shop, single product, cart,
   checkout, order-received, my-account).

   Scope note: this file is SITE-WIDE. Homepage-only sections (hero,
   the daily-menu carousel, ingredient marquee, etc.) stay in their own
   page-specific stylesheet — don't duplicate them here. Both files
   share the same design tokens below, so if the homepage CSS still has
   its own copy of :root, point it at this one instead once this is
   live, so there's a single source of truth for colour/type.

   Where to load this: WPCode snippet set to "load on all pages" (site-
   wide header/footer insert), or your child theme's style.css enqueued
   after WooCommerce's own stylesheet so these rules win the cascade
   without needing !important.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Oswald:wght@400;500;600;700&family=Karla:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root{
  --paper: #FFFFFF;
  --panel: #F7F1E6;
  --panel-2: #EFE6D8;
  --line: #E4D8C6;
  --ink: #1C1712;
  --ink-dim: #6B5D4E;
  --orange: #E06A0A;
  --orange-dim: #C55C08;
  --ember: #A8371F;
  --gold: #B98328;
  --success: #2E7D4F;
  --success-bg: #EAF4EE;
}

/* ---------------------------------------------------------------------
   2. BASE & TYPOGRAPHY
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

a{ color: var(--ember); }
a:hover{ color: var(--orange); }

::selection{ background: var(--orange); color: #fff; }

:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* Shared page-width container — every section's .wrap div (header, footer,
   and each homepage section) relies on THIS rule for max-width, centering,
   and side padding. Missing this was the cause of full-bleed mobile layout. */
.wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 640px){
  .wrap{ padding: 0 32px; }
}

.eyebrow{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--ember);
}

/* ---------------------------------------------------------------------
   3. BUTTONS — site buttons AND WooCommerce's native .button markup
   WooCommerce marks its primary actions (Add to Cart, Proceed to
   Checkout, Place Order) with an extra ".alt" class — that's the hook
   we use to make those solid/orange, while secondary actions (Update
   Cart, Apply Coupon, Continue Shopping) stay outlined.
   --------------------------------------------------------------------- */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 13px 26px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  border-color: var(--orange);
  color: var(--orange);
}

.btn-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order{
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover{
  background: var(--ember);
  border-color: var(--ember);
  color: #fff;
  transform: translateY(-1px);
}
.woocommerce .button.disabled,
.woocommerce .button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Native form controls — inputs, selects, radios/checkboxes used
   throughout shop, cart, checkout, and account forms */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce select,
.woocommerce textarea{
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus{
  outline: none;
  border-color: var(--orange);
}
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"]{
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
}
.woocommerce .quantity .qty{
  width: 72px;
  text-align: center;
  padding: 10px 8px;
}

/* ---------------------------------------------------------------------
   4. SITE HEADER & LOGO
   --------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

/* Logo, top-left of the header */
.site-logo{
  display: flex;
  align-items: center;
}
.site-logo img{
  height: 42px;
  width: auto;
  display: block;
}
@media (max-width: 480px){
  .site-logo img{ height: 34px; }
}

.site-nav{
  display: flex;
  gap: 36px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav a{ color: var(--ink-dim); }
.site-nav a:hover{ color: var(--orange); }
@media (max-width: 860px){
  .site-nav{ display: none; }
}

/* Cart icon/count in the header, if you add one */
.header-cart-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 0.68rem;
  font-family: 'Oswald', sans-serif;
}

/* ---------------------------------------------------------------------
   5. SITE FOOTER
   --------------------------------------------------------------------- */
.site-footer{
  padding: 70px 0 40px;
  border-top: 1px solid var(--line);
}
.site-footer h4{
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.site-footer ul{ list-style: none; padding: 0; }
.site-footer li{ margin-bottom: 10px; font-size: 0.92rem; }
.site-footer a{ color: var(--ink); }
.site-footer a:hover{ color: var(--orange); }

.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{
  font-family: 'Oswald', sans-serif; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 18px;
}
.footer-grid ul{ list-style: none; padding: 0; }
.footer-grid li{ margin-bottom: 10px; font-size: 0.92rem; }
.footer-grid a:hover{ color: var(--orange); }
.footer-tagline{
  font-family: 'Fraunces', serif; font-style: italic; color: var(--ember); max-width: 280px; margin-top: 14px;
}

.payment-row{
  display:flex; align-items:center; gap: 14px; flex-wrap: wrap;
  padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.payment-row .label{
  font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim);
}
.payment-methods{ display:flex; gap: 10px; flex-wrap: wrap; }
.payment-chip{
  font-family: 'Oswald', sans-serif; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink);
}

.footer-bottom{
  display:flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: var(--ink-dim);
}

/* ---------------------------------------------------------------------
   6. WOOCOMMERCE NOTICES (added-to-cart, errors, info banners)
   --------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 20px;
  border-radius: 6px;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.woocommerce-message{ background: var(--success-bg); border: 1px solid var(--success); color: var(--success); }
.woocommerce-error{ background: #FBEEEA; border: 1px solid var(--ember); color: var(--ember); }
.woocommerce-info{ background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button{ margin-left: auto; }

/* ---------------------------------------------------------------------
   7. SHOP / PRODUCT ARCHIVE
   --------------------------------------------------------------------- */
.woocommerce ul.products{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
}
@media (max-width: 900px){ .woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .woocommerce ul.products{ grid-template-columns: 1fr; } }

.woocommerce ul.products li.product{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product:hover{
  border-color: var(--orange-dim);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product img{
  border-radius: 6px;
  margin-bottom: 16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.woocommerce ul.products li.product .price{
  font-family: 'Oswald', sans-serif;
  color: var(--orange);
  font-weight: 600;
  font-size: 0.9rem;
}
.woocommerce ul.products li.product .price del{ color: var(--ink-dim); opacity: 0.7; }
.woocommerce ul.products li.product .price ins{ text-decoration: none; color: var(--ember); }
.woocommerce ul.products li.product .button{ margin-top: 14px; width: 100%; justify-content: center; }

/* ---------------------------------------------------------------------
   8. SINGLE PRODUCT PAGE
   --------------------------------------------------------------------- */
.woocommerce div.product .product_title{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family: 'Oswald', sans-serif;
  color: var(--orange);
  font-weight: 600;
  font-size: 1.2rem;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color: var(--ink-dim);
  margin: 18px 0;
}
.woocommerce div.product form.cart{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding-bottom: 12px;
  display: inline-block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color: var(--ink);
  border-bottom: 2px solid var(--orange);
}

/* ---------------------------------------------------------------------
   9. CART PAGE
   --------------------------------------------------------------------- */
.woocommerce-cart table.cart,
.woocommerce table.shop_table{
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.woocommerce-cart table.cart th,
.woocommerce table.shop_table th{
  text-align: left;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--panel);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.woocommerce-cart table.cart td,
.woocommerce table.shop_table td{
  padding: 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.woocommerce-cart table.cart tr:last-child td{ border-bottom: none; }
.woocommerce-cart table.cart td.product-thumbnail img{
  width: 64px;
  border-radius: 6px;
}
.woocommerce-cart table.cart td.product-name a{
  font-family: 'Fraunces', serif;
  color: var(--ink);
  font-weight: 600;
}
.woocommerce-cart table.cart td.product-remove a.remove{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--ember) !important;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none !important;
}
.woocommerce-cart table.cart td.product-remove a.remove:hover{ background: var(--ember); color: #fff !important; }
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart td.product-price{
  font-family: 'Oswald', sans-serif;
  color: var(--orange);
  font-weight: 600;
}

.woocommerce-cart .cart-collaterals{ margin-top: 40px; display: flex; justify-content: flex-end; }
.woocommerce-cart .cart-collaterals .cart_totals{
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}
.woocommerce-cart .cart-collaterals .cart_totals h2{ font-size: 1.2rem; margin-bottom: 16px; }
.woocommerce-cart .cart-collaterals .cart_totals table{ width: 100%; }
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td{
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.woocommerce-cart .cart-collaterals .cart_totals .order-total .amount{
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  color: var(--ink);
}
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout{ margin-top: 18px; }
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button{ width: 100%; justify-content: center; }

.woocommerce-cart .woocommerce-shipping-calculator{ margin-top: 14px; font-size: 0.88rem; }
.woocommerce-cart form.woocommerce-shipping-calculator .shipping-calculator-form{ margin-top: 10px; }

.woocommerce-cart form.checkout_coupon{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.woocommerce-cart form.checkout_coupon input#coupon_code{ max-width: 220px; }

/* ---------------------------------------------------------------------
   10. CHECKOUT PAGE
   --------------------------------------------------------------------- */
.woocommerce-checkout #customer_details{
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.woocommerce-checkout #customer_details > div{ flex: 1 1 320px; }

.woocommerce-checkout .form-row{ margin-bottom: 18px; }
.woocommerce-checkout .form-row label{
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.woocommerce-checkout .form-row .required{ color: var(--ember); }

.woocommerce-checkout #order_review_heading{ font-size: 1.3rem; margin: 40px 0 16px; }
.woocommerce-checkout #order_review{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}
.woocommerce-checkout #order_review table.shop_table{ border: none; background: transparent; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{ background: transparent; }

.woocommerce-checkout #payment{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 24px;
  padding: 4px 4px 24px;
}
.woocommerce-checkout #payment ul.wc_payment_methods{ list-style: none; padding: 0; margin: 0; }
.woocommerce-checkout #payment ul.payment_methods li{
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods li:last-of-type{ border-bottom: none; }
.woocommerce-checkout #payment ul.payment_methods li label{
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  color: var(--ink);
  margin-left: 8px;
}
.woocommerce-checkout #payment .payment_box{
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.woocommerce-checkout #payment .form-row.place-order{ padding: 20px 20px 4px; }
.woocommerce-checkout #payment #place_order{ width: 100%; justify-content: center; font-size: 0.95rem; padding: 16px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ margin-bottom: 16px; font-size: 0.88rem; }

/* ---------------------------------------------------------------------
   11. ORDER RECEIVED (THANK YOU) & MY ACCOUNT
   --------------------------------------------------------------------- */
.woocommerce-order-received .woocommerce-thankyou-order-received{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 30px;
}
.woocommerce-order-overview{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}
.woocommerce-order-overview li{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 18px;
}
.woocommerce-order-overview li strong{ display: block; font-family: 'Fraunces', serif; font-size: 1.05rem; margin-top: 4px; }

.woocommerce-MyAccount-navigation ul{ list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li{ border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li a{
  display: block;
  padding: 12px 4px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.woocommerce-MyAccount-navigation li.is-active a{ color: var(--orange); }

/* ---------------------------------------------------------------------
   12. RESPONSIVE — collapse cart/checkout review tables into stacked
   cards on small screens, using the data-title attribute WooCommerce
   already renders on each cell.
   --------------------------------------------------------------------- */
@media (max-width: 700px){
  .woocommerce-cart table.cart thead,
  .woocommerce table.shop_table thead{ display: none; }

  .woocommerce-cart table.cart tr,
  .woocommerce table.shop_table tr{
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 14px;
  }
  .woocommerce-cart table.cart td,
  .woocommerce table.shop_table td{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    text-align: right;
  }
  .woocommerce-cart table.cart tr td:last-child,
  .woocommerce table.shop_table tr td:last-child{ border-bottom: none; }
  .woocommerce-cart table.cart td::before,
  .woocommerce table.shop_table td::before{
    content: attr(data-title);
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-align: left;
  }

  .woocommerce-cart .cart-collaterals{ justify-content: stretch; }
  .woocommerce-cart .cart-collaterals .cart_totals{ max-width: none; }

  .woocommerce-checkout #customer_details{ gap: 0; }
}