/* ==========================================================================
   GourmetBites design system
   Applies the design tokens to surfaces Elementor does not own:
   WooCommerce cart, checkout, account, plus shared component primitives.
   ========================================================================== */

:root {
  /* Ground + surfaces */
  --gb-bg:              #fff8f7;
  --gb-surface:         #ffffff;
  --gb-surface-alt:     #fff0ef;
  --gb-surface-tint:    #ffe9e8;
  --gb-surface-strong:  #ffe1e0;

  /* Ink */
  --gb-ink:             #271717;
  --gb-ink-muted:       #5b403f;

  /* Accent */
  --gb-accent:          #b7102a;
  --gb-accent-hover:    #92001c;
  --gb-accent-soft:     #db313f;
  --gb-accent-wash:     #ffdad8;

  /* Support */
  --gb-secondary:       #8e4e14;
  --gb-secondary-soft:  #ffab69;
  --gb-gold:            #edc157;
  --gb-gold-deep:       #755700;
  --gb-dark:            #3e2c2b;
  --gb-on-dark:         #ffedeb;
  --gb-outline:         #8f6f6e;
  --gb-outline-soft:    #e4bebc;
  --gb-error:           #ba1a1a;

  /* 8px spacing scale */
  --gb-xs: 8px;
  --gb-sm: 16px;
  --gb-md: 24px;
  --gb-lg: 40px;
  --gb-xl: 64px;
  --gb-container: 1280px;

  /* Radius scale: controls 8, cards 16, features 24, chips pill */
  --gb-r-sm:   8px;
  --gb-r-md:   16px;
  --gb-r-lg:   24px;
  --gb-r-pill: 9999px;

  /* Tinted shadow, never black */
  --gb-shadow: 0 8px 24px -4px rgba(39, 23, 23, 0.06);
  --gb-shadow-lift: 0 12px 32px -6px rgba(39, 23, 23, 0.10);

  --gb-font: 'Plus Jakarta Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   Material Symbols
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.gb-filled { font-variation-settings: 'FILL' 1; }
.material-symbols-outlined.gb-sm { font-size: 18px; }
.material-symbols-outlined.gb-lg { font-size: 32px; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  background-color: var(--gb-bg);
  color: var(--gb-ink);
  font-family: var(--gb-font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gb-font);
  color: var(--gb-ink);
  letter-spacing: -0.01em;
}
h1 { font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-weight: 700; line-height: 1.2; }
h3 { font-weight: 700; line-height: 1.3; }

a { color: var(--gb-accent); }
a:hover { color: var(--gb-accent-hover); }

/* --------------------------------------------------------------------------
   Glassmorphism: sticky header and floating hero badges only
   -------------------------------------------------------------------------- */
.gb-glass {
  background: rgba(255, 255, 255, 0.70);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

/* --------------------------------------------------------------------------
   Chips and badges
   -------------------------------------------------------------------------- */
.gb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--gb-r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.gb-chip--diet   { background: rgba(237, 193, 87, 0.20); color: var(--gb-gold-deep); }
.gb-chip--accent { background: var(--gb-accent-wash);    color: var(--gb-accent-hover); }
.gb-chip--dark   { background: var(--gb-dark);           color: var(--gb-on-dark); }

/* --------------------------------------------------------------------------
   WooCommerce: buttons
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  background-color: var(--gb-accent);
  color: #ffffff;
  font-family: var(--gb-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  border: none;
  border-radius: var(--gb-r-sm);
  padding: 14px 24px;
  box-shadow: none;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
  background-color: var(--gb-accent-hover);
  color: #ffffff;
  transform: scale(1.02);
}

.gb-btn-ghost,
.woocommerce a.button.gb-btn-ghost {
  background: transparent;
  color: var(--gb-accent);
  border: 2px solid var(--gb-accent);
}
.gb-btn-ghost:hover,
.woocommerce a.button.gb-btn-ghost:hover {
  background: var(--gb-accent);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   WooCommerce: form fields
   -------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input {
  background: var(--gb-surface);
  border: 1px solid var(--gb-outline-soft);
  border-radius: var(--gb-r-sm);
  padding: 14px 16px;
  font-family: var(--gb-font);
  font-size: 15px;
  color: var(--gb-ink);
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus {
  outline: none;
  border-color: var(--gb-secondary-soft);
  box-shadow: 0 0 0 2px var(--gb-secondary-soft);
}
.woocommerce form .form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gb-ink-muted);
  margin-bottom: 6px;
}
::placeholder { color: var(--gb-outline); opacity: 1; }

/* --------------------------------------------------------------------------
   WooCommerce: star ratings in gold
   -------------------------------------------------------------------------- */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce .star-rating::before {
  color: var(--gb-gold);
}

/* --------------------------------------------------------------------------
   WooCommerce: price in accent
   -------------------------------------------------------------------------- */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce ul.products li.product .price {
  color: var(--gb-accent);
  font-weight: 700;
}
.woocommerce .price del { color: var(--gb-ink-muted); font-weight: 400; opacity: 0.7; }

/* --------------------------------------------------------------------------
   WooCommerce: cart and checkout shell
   -------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: var(--gb-md);
}

.woocommerce table.shop_table {
  background: var(--gb-surface);
  border: 1px solid var(--gb-outline-soft);
  border-radius: var(--gb-r-md);
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--gb-surface-tint);
  color: var(--gb-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px 20px;
}
.woocommerce table.shop_table td {
  padding: 20px;
  border-top: 1px solid var(--gb-outline-soft);
  vertical-align: middle;
}
.woocommerce table.shop_table img { border-radius: var(--gb-r-sm); }

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--gb-surface-tint);
  border-radius: var(--gb-r-md);
  padding: var(--gb-md);
}
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: var(--gb-r-md);
}
.woocommerce-checkout #payment ul.payment_methods {
  background: var(--gb-surface);
  border: 1px solid var(--gb-outline-soft);
  border-radius: var(--gb-r-sm);
  padding: var(--gb-sm);
}

.woocommerce form.checkout_coupon,
.woocommerce-form-coupon-toggle {
  background: var(--gb-surface);
  border: 1px solid var(--gb-outline-soft);
  border-radius: var(--gb-r-sm);
}

/* --------------------------------------------------------------------------
   WooCommerce: quantity stepper
   -------------------------------------------------------------------------- */
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--gb-accent-wash);
  border-radius: var(--gb-r-pill);
  padding: 4px;
}
.woocommerce .quantity input.qty {
  width: 46px;
  text-align: center;
  background: transparent;
  border: none;
  font-weight: 700;
  color: var(--gb-ink);
  -moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gb-qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--gb-r-pill);
  background: transparent;
  color: var(--gb-accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.gb-qty-btn:hover { background: rgba(183, 16, 42, 0.12); }

/* --------------------------------------------------------------------------
   WooCommerce: notices
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--gb-accent);
  background: var(--gb-surface);
  border-radius: var(--gb-r-sm);
  box-shadow: var(--gb-shadow);
  font-family: var(--gb-font);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gb-accent); }

/* --------------------------------------------------------------------------
   Fluent Forms
   -------------------------------------------------------------------------- */
.fluentform .ff-el-input--content input[type=text],
.fluentform .ff-el-input--content input[type=email],
.fluentform .ff-el-input--content input[type=tel],
.fluentform .ff-el-input--content textarea,
.fluentform .ff-el-input--content select {
  background: var(--gb-surface);
  border: 1px solid var(--gb-outline-soft);
  border-radius: var(--gb-r-sm);
  padding: 14px 16px;
  font-family: var(--gb-font);
  font-size: 15px;
  color: var(--gb-ink);
}
.fluentform .ff-el-input--content input:focus,
.fluentform .ff-el-input--content textarea:focus,
.fluentform .ff-el-input--content select:focus {
  border-color: var(--gb-secondary-soft);
  box-shadow: 0 0 0 2px var(--gb-secondary-soft);
  outline: none;
}
.fluentform .ff-el-input--label label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gb-ink-muted);
}
.fluentform .ff-btn-submit {
  background: var(--gb-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--gb-r-sm);
  padding: 14px 28px;
  font-family: var(--gb-font);
  font-weight: 700;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.fluentform .ff-btn-submit:hover {
  background: var(--gb-accent-hover);
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive: mobile side margin 20px, section rhythm 40px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce { padding-inline: 20px; }
  .woocommerce table.shop_table th { padding: 14px; }
  .woocommerce table.shop_table td { padding: 14px; }
}