/*
Theme Name: O'Panama
Theme URI: https://opanama.fr/
Author: O'Panama
Description: Custom mobile-first food-ordering theme for O'Panama, a two-branch French restaurant (Angouleme and Perigueux). Presentation only. All branch, cart and modifier business logic lives in the opanama-core plugin.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: opanama
WC requires at least: 9.0
WC tested up to: 11.0
*/

/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
  /* Brand */
  --op-orange: #FB9621;
  --op-orange-ink: #b85f00;      /* accessible orange text on light */
  --op-charcoal: #2C2926;
  --op-gray: #919191;
  --op-light: #F7F5F2;
  --op-white: #FFFFFF;

  /* Derived */
  --op-charcoal-90: rgba(44, 41, 38, 0.90);
  --op-charcoal-70: rgba(44, 41, 38, 0.70);
  --op-line: #E7E3DC;
  --op-line-strong: #D8D2C8;
  --op-shadow: 0 6px 24px rgba(44, 41, 38, 0.10);
  --op-shadow-sm: 0 2px 8px rgba(44, 41, 38, 0.08);
  --op-success: #2f7a4d;
  --op-danger: #b3261e;

  /* Type */
  --op-display: "Forum", Georgia, "Times New Roman", serif;
  --op-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale (mobile-first) */
  --op-step--1: 0.833rem;
  --op-step-0: 1rem;
  --op-step-1: 1.2rem;
  --op-step-2: 1.44rem;
  --op-step-3: 1.728rem;
  --op-step-4: 2.074rem;
  --op-step-5: 2.488rem;

  /* Space */
  --op-space-1: 0.25rem;
  --op-space-2: 0.5rem;
  --op-space-3: 0.75rem;
  --op-space-4: 1rem;
  --op-space-5: 1.5rem;
  --op-space-6: 2rem;
  --op-space-7: 3rem;

  /* Radius */
  --op-radius: 14px;
  --op-radius-lg: 20px;
  --op-radius-pill: 999px;

  /* Layout */
  --op-container: 1200px;
  --op-header-h: 60px;

  /* Motion */
  --op-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================================
   Reset / base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--op-body);
  font-size: var(--op-step-0);
  line-height: 1.55;
  color: var(--op-charcoal);
  background: var(--op-light);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--op-display); font-weight: 400; line-height: 1.1; color: var(--op-charcoal); margin: 0 0 var(--op-space-3); letter-spacing: 0.01em; }
h1 { font-size: var(--op-step-5); }
h2 { font-size: var(--op-step-4); }
h3 { font-size: var(--op-step-2); }
p { margin: 0 0 var(--op-space-4); }
a { color: var(--op-orange-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

/* Accessibility helpers */
.op-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.op-skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--op-charcoal); color: #fff; padding: var(--op-space-3) var(--op-space-4); border-radius: 0 0 var(--op-radius) 0;
}
.op-skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--op-orange); outline-offset: 2px; }

/* =========================================================================
   Layout primitives
   ========================================================================= */
.op-container { width: 100%; max-width: var(--op-container); margin-inline: auto; padding-inline: var(--op-space-4); }
.op-section { padding-block: var(--op-space-6); }
.op-section--tight { padding-block: var(--op-space-5); }
.op-eyebrow {
  font-family: var(--op-body); font-weight: 700; font-size: var(--op-step--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--op-orange-ink); margin-bottom: var(--op-space-2);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.op-btn {
  --_bg: var(--op-orange); --_fg: var(--op-charcoal);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--op-space-2);
  min-height: 48px; padding: 0 var(--op-space-5);
  background: var(--_bg); color: var(--_fg);
  font-family: var(--op-body); font-weight: 700; font-size: var(--op-step-0);
  border: 2px solid transparent; border-radius: var(--op-radius-pill); cursor: pointer;
  text-decoration: none; transition: transform 0.15s var(--op-ease), background 0.2s var(--op-ease), box-shadow 0.2s var(--op-ease);
}
.op-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--op-shadow-sm); }
.op-btn:active { transform: translateY(0); }
.op-btn--block { width: 100%; }
.op-btn--dark { --_bg: var(--op-charcoal); --_fg: #fff; }
.op-btn--ghost { --_bg: transparent; --_fg: var(--op-charcoal); border-color: var(--op-line-strong); }
.op-btn--ghost:hover { border-color: var(--op-charcoal); }
.op-btn--sm { min-height: 40px; padding: 0 var(--op-space-4); font-size: var(--op-step--1); }

/* =========================================================================
   Header
   ========================================================================= */
.op-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--op-charcoal); color: #fff;
  min-height: var(--op-header-h);
}
.op-header__inner { display: flex; align-items: center; gap: var(--op-space-3); min-height: var(--op-header-h); }
.op-header__logo { display: flex; align-items: center; gap: var(--op-space-2); margin-right: auto; }
.op-header__logo img { height: 34px; width: auto; }
.op-header__logo-text { font-family: var(--op-display); font-size: var(--op-step-2); color: #fff; letter-spacing: 0.02em; }
.op-header__nav { display: none; }
.op-header__actions { display: flex; align-items: center; gap: var(--op-space-2); }

.op-branch-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.10); color: #fff;
  padding: 6px 12px; border-radius: var(--op-radius-pill);
  font-size: var(--op-step--1); font-weight: 600; border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer; text-decoration: none;
}
.op-branch-chip:hover { background: rgba(255,255,255,0.18); color: #fff; text-decoration: none; }
.op-branch-chip__pin { color: var(--op-orange); }
.op-branch-chip__change { color: rgba(255,255,255,0.65); font-weight: 400; }

.op-cart-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--op-radius-pill);
  background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.14);
}
.op-cart-button:hover { background: rgba(255,255,255,0.18); color:#fff; }
.op-cart-button__count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--op-orange); color: var(--op-charcoal); font-size: 11px; font-weight: 800;
  border-radius: var(--op-radius-pill); display: grid; place-items: center;
}
.op-menu-toggle {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--op-radius-pill); color:#fff; cursor: pointer;
}

/* =========================================================================
   Hero
   ========================================================================= */
.op-hero { position: relative; background: var(--op-charcoal); color: #fff; overflow: hidden; }
.op-hero__media { position: absolute; inset: 0; }
.op-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.op-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44,41,38,0.35) 0%, rgba(44,41,38,0.82) 100%); }
.op-hero__inner { position: relative; padding-block: var(--op-space-7) var(--op-space-6); text-align: center; }
.op-hero__title { color: #fff; font-size: clamp(2.5rem, 12vw, 4.5rem); margin-bottom: var(--op-space-2); }
.op-hero__tagline { font-family: var(--op-display); font-size: var(--op-step-2); color: var(--op-orange); margin-bottom: var(--op-space-3); }
.op-hero__lede { color: rgba(255,255,255,0.86); max-width: 46ch; margin-bottom: var(--op-space-5); margin-inline: auto; }
.op-hero__cta { display: flex; flex-wrap: wrap; gap: var(--op-space-3); justify-content: center; }

/* =========================================================================
   Branch selector
   ========================================================================= */
.op-branch-select { padding-block: var(--op-space-6); }
.op-branch-select__head { text-align: center; margin-bottom: var(--op-space-5); }
.op-branch-grid { display: grid; grid-template-columns: 1fr; gap: var(--op-space-4); }
.op-branch-card {
  background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius-lg);
  padding: var(--op-space-5); box-shadow: var(--op-shadow-sm); display: flex; flex-direction: column; gap: var(--op-space-3);
}
.op-branch-card__name { font-family: var(--op-display); font-size: var(--op-step-3); }
.op-branch-card__addr { color: var(--op-charcoal-70); font-size: var(--op-step--1); font-style: normal; }
.op-branch-card__badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--op-step--1); color: var(--op-success); font-weight: 600; }
.op-branch-card.is-active { border-color: var(--op-orange); box-shadow: 0 0 0 2px rgba(251,150,33,0.25); }

/* =========================================================================
   Active-branch bar (menu context)
   ========================================================================= */
.op-active-branch {
  display: flex; align-items: center; gap: var(--op-space-3);
  background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: var(--op-space-3) var(--op-space-4); box-shadow: var(--op-shadow-sm);
}
.op-active-branch__pin { color: var(--op-orange); font-size: 1.2em; }
.op-active-branch__name { font-weight: 700; }
.op-active-branch__meta { font-size: var(--op-step--1); color: var(--op-charcoal-70); }
.op-active-branch__change { margin-left: auto; }

/* =========================================================================
   Category rail (sticky, horizontal-scroll on mobile)
   ========================================================================= */
.op-catrail {
  position: sticky; top: var(--op-header-h); z-index: 60;
  background: var(--op-light); border-bottom: 1px solid var(--op-line);
  margin-inline: calc(-1 * var(--op-space-4)); padding-inline: var(--op-space-4);
}
.op-catrail__scroll {
  display: flex; gap: var(--op-space-2); overflow-x: auto; padding-block: var(--op-space-3);
  scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
}
.op-catrail__scroll::-webkit-scrollbar { display: none; }
.op-catrail__link {
  flex: 0 0 auto; scroll-snap-align: start;
  padding: 8px 16px; border-radius: var(--op-radius-pill);
  background: var(--op-white); border: 1px solid var(--op-line-strong);
  color: var(--op-charcoal); font-size: var(--op-step--1); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.op-catrail__link:hover { border-color: var(--op-charcoal); text-decoration: none; }
.op-catrail__link.is-active { background: var(--op-orange); border-color: var(--op-orange); color: var(--op-charcoal); }

/* =========================================================================
   Menu search
   ========================================================================= */
.op-search { position: relative; margin-block: var(--op-space-4); }
.op-search__input {
  width: 100%; min-height: 48px; padding: 0 var(--op-space-4) 0 44px;
  border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-pill);
  font-family: var(--op-body); font-size: var(--op-step-0); background: var(--op-white); color: var(--op-charcoal);
}
.op-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--op-gray); }

/* =========================================================================
   Menu category sections + product cards
   ========================================================================= */
.op-menu-cat { scroll-margin-top: calc(var(--op-header-h) + 64px); padding-top: var(--op-space-5); }
.op-menu-cat__title { display: flex; align-items: baseline; gap: var(--op-space-3); margin-bottom: var(--op-space-4); }
.op-menu-cat__count { font-family: var(--op-body); font-size: var(--op-step--1); color: var(--op-gray); font-weight: 600; }

.op-products { display: grid; grid-template-columns: 1fr; gap: var(--op-space-3); }

.op-card {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--op-space-4);
  background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: var(--op-space-3); box-shadow: var(--op-shadow-sm); position: relative;
  transition: box-shadow 0.2s var(--op-ease), transform 0.15s var(--op-ease);
}
.op-card:hover { box-shadow: var(--op-shadow); transform: translateY(-1px); }
.op-card__media { grid-row: span 2; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--op-light); }
.op-card__media img { width: 100%; height: 100%; object-fit: cover; }
.op-card__body { min-width: 0; }
.op-card__name { font-family: var(--op-body); font-weight: 700; font-size: var(--op-step-0); margin: 0 0 4px; line-height: 1.25; }
.op-card__name a { color: var(--op-charcoal); }
.op-card__name a:hover { color: var(--op-orange-ink); text-decoration: none; }
.op-card__desc { font-size: var(--op-step--1); color: var(--op-charcoal-70); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--op-space-2); margin-top: var(--op-space-2); }
.op-card__price { font-weight: 800; font-size: var(--op-step-1); color: var(--op-charcoal); }
.op-card__price .op-from { font-weight: 600; font-size: var(--op-step--1); color: var(--op-gray); }
.op-card__add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border-radius: var(--op-radius-pill);
  background: var(--op-orange); color: var(--op-charcoal); font-weight: 700; font-size: var(--op-step--1);
  border: 0; cursor: pointer; text-decoration: none;
}
.op-card__add:hover { text-decoration: none; filter: brightness(0.97); }
.op-card__has-options { font-size: var(--op-step--1); color: var(--op-orange-ink); font-weight: 600; }

/* =========================================================================
   Popular categories (homepage)
   ========================================================================= */
.op-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--op-space-3); }
.op-cat-tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--op-radius); overflow: hidden;
  background: var(--op-charcoal); color: #fff; display: flex; align-items: flex-end; padding: var(--op-space-3);
}
.op-cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.op-cat-tile__label { position: relative; font-family: var(--op-display); font-size: var(--op-step-2); text-shadow: 0 1px 8px rgba(0,0,0,0.5); }

/* =========================================================================
   Steps / how it works
   ========================================================================= */
.op-steps { display: grid; grid-template-columns: 1fr; gap: var(--op-space-4); counter-reset: step; }
.op-step { display: flex; gap: var(--op-space-3); align-items: flex-start; }
.op-step__num {
  flex: 0 0 auto; counter-increment: step;
  width: 40px; height: 40px; border-radius: var(--op-radius-pill);
  background: var(--op-orange); color: var(--op-charcoal); font-weight: 800; display: grid; place-items: center;
}
.op-step__num::before { content: counter(step); }

/* =========================================================================
   Locations
   ========================================================================= */
.op-locations { display: grid; grid-template-columns: 1fr; gap: var(--op-space-4); }
.op-loc {
  background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: var(--op-space-5); box-shadow: var(--op-shadow-sm);
}
.op-loc__hours { font-size: var(--op-step--1); color: var(--op-charcoal-70); white-space: pre-line; }
.op-pickup-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--op-step--1); font-weight: 600; color: var(--op-success); }
.op-delivery-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--op-step--1); font-weight: 600; color: var(--op-gray); }

/* =========================================================================
   Product drawer (quick order)
   ========================================================================= */
.op-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(44,41,38,0.55); z-index: 200;
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--op-ease), visibility 0.25s;
}
.op-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.op-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
  background: var(--op-white); border-radius: var(--op-radius-lg) var(--op-radius-lg) 0 0;
  max-height: 92vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.3s var(--op-ease);
}
.op-drawer.is-open { transform: translateY(0); }
.op-drawer__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--op-line-strong); margin: 10px auto 0; }
.op-drawer__head { display: flex; align-items: center; gap: var(--op-space-3); padding: var(--op-space-3) var(--op-space-4); border-bottom: 1px solid var(--op-line); }
.op-drawer__close { margin-left: auto; width: 40px; height: 40px; border-radius: var(--op-radius-pill); border: 1px solid var(--op-line-strong); background: #fff; cursor: pointer; }
.op-drawer__body { overflow-y: auto; padding: var(--op-space-4); }
.op-drawer__media { width: 100%; aspect-ratio: 16/10; border-radius: var(--op-radius); overflow: hidden; background: var(--op-light); margin-bottom: var(--op-space-4); }
.op-drawer__media img { width: 100%; height: 100%; object-fit: cover; }
.op-drawer__foot {
  padding: var(--op-space-3) var(--op-space-4); border-top: 1px solid var(--op-line);
  display: flex; align-items: center; gap: var(--op-space-3); background: #fff;
  padding-bottom: calc(var(--op-space-3) + env(safe-area-inset-bottom));
}

/* Modifier groups */
.op-mod-group { border-top: 1px solid var(--op-line); padding-top: var(--op-space-4); margin-top: var(--op-space-4); }
.op-mod-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.op-mod-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--op-space-2); margin-bottom: var(--op-space-2); }
.op-mod-group__name { font-weight: 700; }
.op-mod-group__req { font-size: var(--op-step--1); font-weight: 700; color: var(--op-orange-ink); }
.op-mod-group__opt { font-size: var(--op-step--1); color: var(--op-gray); }
.op-mod-option { display: flex; align-items: center; gap: var(--op-space-3); padding: var(--op-space-3) 0; border-bottom: 1px solid var(--op-line); cursor: pointer; }
.op-mod-option:last-child { border-bottom: 0; }
.op-mod-option input { width: 22px; height: 22px; accent-color: var(--op-orange); flex: 0 0 auto; }
.op-mod-option__label { flex: 1; }
.op-mod-option__extra { font-weight: 700; color: var(--op-charcoal); }
.op-mod-option.is-unavailable { opacity: 0.45; cursor: not-allowed; }

.op-qty { display: inline-flex; align-items: center; border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-pill); overflow: hidden; }
.op-qty__btn { width: 44px; height: 44px; border: 0; background: #fff; font-size: 1.3rem; cursor: pointer; color: var(--op-charcoal); }
.op-qty__val { min-width: 36px; text-align: center; font-weight: 700; }

/* =========================================================================
   Sticky cart bar (menu)
   ========================================================================= */
.op-sticky-cart {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  transform: translateY(120%); transition: transform 0.3s var(--op-ease);
  padding: var(--op-space-3) var(--op-space-4);
  padding-bottom: calc(var(--op-space-3) + env(safe-area-inset-bottom));
  background: transparent; pointer-events: none;
}
.op-sticky-cart.is-visible { transform: translateY(0); }
.op-sticky-cart__inner {
  pointer-events: auto; max-width: var(--op-container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--op-space-3);
  background: var(--op-charcoal); color: #fff; border-radius: var(--op-radius-pill);
  padding: 10px 12px 10px 20px; box-shadow: var(--op-shadow);
}
.op-sticky-cart__meta { display: flex; flex-direction: column; line-height: 1.2; }
.op-sticky-cart__count { font-size: var(--op-step--1); color: rgba(255,255,255,0.72); }
.op-sticky-cart__total { font-weight: 800; }
.op-sticky-cart__go { background: var(--op-orange); color: var(--op-charcoal); }

/* =========================================================================
   Branch switch confirm modal
   ========================================================================= */
.op-confirm-backdrop {
  position: fixed; inset: 0; background: rgba(44,41,38,0.55); z-index: 210;
  display: none; align-items: center; justify-content: center; padding: var(--op-space-4);
}
.op-confirm-backdrop.is-open { display: flex; }
.op-confirm {
  background: #fff; border-radius: var(--op-radius-lg); padding: var(--op-space-6); max-width: 420px; width: 100%; box-shadow: var(--op-shadow);
}
.op-confirm__actions { display: flex; flex-direction: column; gap: var(--op-space-3); margin-top: var(--op-space-5); }

/* =========================================================================
   Footer
   ========================================================================= */
.op-footer { background: var(--op-charcoal); color: rgba(255,255,255,0.82); padding-block: var(--op-space-6); margin-top: var(--op-space-7); }
.op-footer a { color: #fff; }
.op-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--op-space-5); }
.op-footer__brand { font-family: var(--op-display); font-size: var(--op-step-3); color: #fff; }
.op-footer__legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--op-space-5); padding-top: var(--op-space-4); font-size: var(--op-step--1); color: rgba(255,255,255,0.6); }

/* WooCommerce notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
  border-radius: var(--op-radius); border: 1px solid var(--op-line);
  background: var(--op-white); padding: var(--op-space-4); margin-bottom: var(--op-space-4);
  list-style: none; font-size: var(--op-step-0);
}
/* Remove the default WooCommerce notice icons (green tick / info dot) that overlap the text */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.cart-empty.woocommerce-info::before,
.wc-empty-cart-message .woocommerce-info::before {
  content: none !important;
  display: none !important;
}
.woocommerce-error { border-color: var(--op-danger); color: var(--op-danger); }
.woocommerce-message { border-color: var(--op-success); color: var(--op-charcoal); }

/* =========================================================================
   Responsive: tablet and up
   ========================================================================= */
@media (min-width: 768px) {
  :root { --op-header-h: 72px; }
  .op-header__nav { display: flex; align-items: center; gap: var(--op-space-5); margin-inline: var(--op-space-5) auto; }
  .op-header__nav a { color: rgba(255,255,255,0.86); font-size: var(--op-step-0); font-weight: 600; }
  .op-header__nav a:hover { color: #fff; text-decoration: none; }
  .op-menu-toggle { display: none; }
  .op-products { grid-template-columns: 1fr 1fr; gap: var(--op-space-4); }
  .op-branch-grid { grid-template-columns: 1fr 1fr; gap: var(--op-space-5); }
  .op-cats { grid-template-columns: repeat(4, 1fr); }
  .op-steps { grid-template-columns: repeat(2, 1fr); }
  .op-locations { grid-template-columns: 1fr 1fr; }
  .op-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .op-drawer { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 60%); width: min(560px, 92vw); border-radius: var(--op-radius-lg); max-height: 88vh; }
  .op-drawer.is-open { transform: translate(-50%, 50%); }
  .op-hero__inner { padding-block: var(--op-space-7); min-height: 420px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .op-sticky-cart__inner { max-width: 520px; }
}

@media (min-width: 1280px) {
  .op-products { grid-template-columns: 1fr 1fr 1fr; }
  .op-hero__title { font-size: 5rem; }
}


/* Baseline visibility guard: closed drawer/backdrop must be hidden even if JS fails to init. */
[hidden]{display:none !important;}
.op-drawer[hidden],.op-drawer-backdrop[hidden]{display:none !important;}
.op-confirm-backdrop[hidden]{display:none !important;}


/* Mobile nav: reveal the header nav as a dropdown panel when toggled open. */
@media (max-width: 767.98px) {
  .op-nav-open .op-header__nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: var(--op-header-h);
    background: var(--op-charcoal); padding: var(--op-space-3) var(--op-space-4) var(--op-space-4);
    gap: 0; margin: 0; z-index: 90; box-shadow: var(--op-shadow);
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .op-nav-open .op-header__nav a {
    padding: var(--op-space-3) 0; font-size: var(--op-step-1);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .op-nav-open .op-header__nav a:last-child { border-bottom: 0; }
}

/* =========================================================================
   PHASE 1 PREMIUM REDESIGN (additive presentation layer)
   Elevates header, hero, and homepage sections. Uses existing tokens.
   ========================================================================= */

:root {
  --op-maxw: 1240px;
  --op-shadow-lift: 0 18px 50px rgba(44,41,38,0.18);
  --op-shadow-soft: 0 10px 34px rgba(44,41,38,0.10);
  --op-ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* Wider, airier container for the premium feel */
.op-container { max-width: var(--op-maxw); }

/* Fluid display scale for confident, editorial headings */
@media (min-width: 768px) {
  :root {
    --op-step-4: 2.6rem;
    --op-step-5: clamp(3rem, 5vw, 4.4rem);
  }
}

/* ---- Header: refined, translucent-on-scroll, stronger hierarchy ---- */
.op-header {
  background: color-mix(in srgb, var(--op-charcoal) 96%, black);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: saturate(1.1);
}
.op-header__logo-text {
  font-family: var(--op-display);
  font-size: 1.6rem; letter-spacing: 0.01em; color: #fff; line-height: 1;
}
.op-header__logo-img { max-height: 40px; width: auto; display: block; }
.op-header__nav a {
  position: relative; color: rgba(255,255,255,0.82);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 6px 2px; transition: color 0.25s var(--op-ease);
}
.op-header__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--op-orange); transition: right 0.28s var(--op-ease-out);
}
.op-header__nav a:hover { color: #fff; }
.op-header__nav a:hover::after { right: 0; }
.op-branch-chip {
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--op-radius-pill);
  background: rgba(255,255,255,0.04); transition: background 0.25s var(--op-ease), border-color 0.25s var(--op-ease);
}
.op-branch-chip:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.28); }
.op-branch-chip__change { color: var(--op-orange); font-weight: 700; }
.op-cart-button { transition: transform 0.2s var(--op-ease); }
.op-cart-button:hover { transform: translateY(-1px); }

/* ---- Buttons: premium weight + motion ---- */
.op-btn {
  font-family: var(--op-body); font-weight: 700; letter-spacing: 0.01em;
  border-radius: var(--op-radius-pill);
  box-shadow: 0 6px 18px rgba(251,150,33,0.28);
  transition: transform 0.22s var(--op-ease-out), box-shadow 0.22s var(--op-ease), background 0.22s var(--op-ease);
}
.op-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(251,150,33,0.36); }
.op-btn:active { transform: translateY(0); }
.op-btn--ghost {
  background: transparent; box-shadow: none;
  border: 1.5px solid var(--op-line-strong);
}
.op-btn--ghost:hover { box-shadow: none; background: rgba(255,255,255,0.08); }

/* ---- HERO: cinematic, layered, editorial ---- */
.op-hero { min-height: min(88vh, 760px); display: flex; align-items: center; }
.op-hero__media img {
  opacity: 1;
  transform: scale(1.06);
  animation: opHeroPan 18s ease-out forwards;
}
@keyframes opHeroPan { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .op-hero__media img { animation: none; transform: none; }
}
/* Layered scrim: dark left for text legibility, warm glow bottom */
.op-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,18,16,0.92) 0%, rgba(20,18,16,0.72) 38%, rgba(20,18,16,0.28) 68%, rgba(20,18,16,0.10) 100%),
    linear-gradient(0deg, rgba(20,18,16,0.75) 0%, rgba(20,18,16,0) 45%);
}
.op-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--op-orange), transparent 70%);
  opacity: 0.9;
}
.op-hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 8vh, 6rem);
  max-width: 720px;
}
.op-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--op-body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--op-orange); margin: 0 0 var(--op-space-4);
}
.op-hero__eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--op-orange); display: inline-block;
}
.op-hero__title {
  font-family: var(--op-display); font-weight: 400;
  font-size: var(--op-step-5); line-height: 1.02; letter-spacing: -0.01em;
  margin: 0 0 var(--op-space-4); text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.op-hero__tagline {
  font-family: var(--op-display); color: var(--op-orange);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.15; margin: 0 0 var(--op-space-3);
}
.op-hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6;
  color: rgba(255,255,255,0.86); max-width: 46ch; margin: 0 0 var(--op-space-6);
}
.op-hero__cta { display: flex; gap: var(--op-space-3); flex-wrap: wrap; }
.op-hero__cta .op-btn { min-height: 54px; padding: 0 var(--op-space-6); font-size: 1.02rem; }

/* ---- Section rhythm + eyebrows ---- */
.op-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.op-section h2 {
  font-family: var(--op-display); font-weight: 400;
  font-size: var(--op-step-4); line-height: 1.08; letter-spacing: -0.01em;
  margin: 0 0 var(--op-space-6); text-wrap: balance;
}
.op-eyebrow { color: var(--op-orange-ink); margin-bottom: var(--op-space-2); }

/* ---- Category tiles: cinematic crop + hover zoom ---- */
.op-cats { gap: var(--op-space-4); }
.op-cat-tile { border-radius: var(--op-radius-lg); box-shadow: var(--op-shadow-soft); }
.op-cat-tile img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
  transition: transform 0.6s var(--op-ease-out); opacity: 0.82;
}
.op-cat-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,16,0) 30%, rgba(20,18,16,0.82) 100%);
}
.op-cat-tile:hover img { transform: scale(1.08); opacity: 0.9; }
.op-cat-tile__label {
  position: relative; z-index: 2; margin-top: auto;
  font-family: var(--op-display); font-size: 1.15rem; padding: var(--op-space-4);
  align-self: flex-start;
}

/* ---- Product cards: premium lift ---- */
.op-card {
  border-radius: var(--op-radius-lg); border-color: var(--op-line);
  transition: transform 0.24s var(--op-ease-out), box-shadow 0.24s var(--op-ease), border-color 0.24s var(--op-ease);
}
.op-card:hover {
  transform: translateY(-3px); box-shadow: var(--op-shadow-lift);
  border-color: var(--op-line-strong);
}

/* ---- How-to steps: numbered premium ---- */
.op-step__num {
  background: var(--op-orange); color: var(--op-charcoal);
  font-family: var(--op-display); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(251,150,33,0.3);
}
.op-step__num::before { content: counter(step); font-size: 1.15rem; }

/* ---- Locations: editorial cards ---- */
.op-loc {
  border-radius: var(--op-radius-lg); box-shadow: var(--op-shadow-soft);
  border-color: var(--op-line); transition: transform 0.24s var(--op-ease-out), box-shadow 0.24s var(--op-ease);
  position: relative; overflow: hidden;
}
.op-loc::before {
  content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--op-orange), transparent);
}
.op-loc:hover { transform: translateY(-3px); box-shadow: var(--op-shadow-lift); }
.op-loc h3 { font-family: var(--op-display); font-size: 1.5rem; margin-bottom: 4px; }

/* ---- Branch selector cards feel like restaurant choices ---- */
.op-active-branch {
  border-radius: var(--op-radius-lg); box-shadow: var(--op-shadow-soft);
  border: 1px solid var(--op-line);
}
.op-active-branch__name { font-family: var(--op-display); font-size: 1.2rem; }

/* ---- NEW: Why O'Panama experience band ---- */
.op-why { background: var(--op-charcoal); color: #fff; }
.op-why .op-eyebrow { color: var(--op-orange); }
.op-why h2 { color: #fff; }
.op-why__grid { display: grid; grid-template-columns: 1fr; gap: var(--op-space-5); }
.op-why__item {
  padding: var(--op-space-5); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--op-radius-lg); background: rgba(255,255,255,0.03);
}
.op-why__item h3 { font-family: var(--op-display); font-size: 1.3rem; margin: 0 0 var(--op-space-2); color: #fff; }
.op-why__item p { color: rgba(255,255,255,0.74); margin: 0; line-height: 1.6; }
.op-why__icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: var(--op-space-4);
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,150,33,0.14); color: var(--op-orange);
}

/* ---- NEW: Final CTA band ---- */
.op-final-cta {
  position: relative; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, #221f1c 0%, #2C2926 55%, #3a332c 100%);
}
.op-final-cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 50% 0%, rgba(251,150,33,0.18), transparent 70%);
}
.op-final-cta__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5.5rem); max-width: 680px; margin: 0 auto; }
.op-final-cta h2 { color: #fff; margin-bottom: var(--op-space-3); }
.op-final-cta p { color: rgba(255,255,255,0.8); margin: 0 0 var(--op-space-6); font-size: 1.1rem; }

/* =========================================================================
   RESPONSIVE — tablet
   ========================================================================= */
@media (min-width: 768px) {
  .op-cats { grid-template-columns: repeat(3, 1fr); }
  .op-products { grid-template-columns: repeat(2, 1fr); }
  .op-steps { grid-template-columns: repeat(2, 1fr); gap: var(--op-space-6); }
  .op-locations { grid-template-columns: repeat(2, 1fr); gap: var(--op-space-5); }
  .op-why__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   RESPONSIVE — desktop
   ========================================================================= */
@media (min-width: 1024px) {
  .op-cats { grid-template-columns: repeat(4, 1fr); }
  .op-products { grid-template-columns: repeat(3, 1fr); }
  .op-steps { grid-template-columns: repeat(4, 1fr); }
  .op-hero__inner { max-width: 760px; margin-inline: auto; }
}

/* =========================================================================
   RESPONSIVE — mobile polish (<= 600px)
   ========================================================================= */
@media (max-width: 600px) {
  .op-hero { min-height: 78vh; }
  .op-hero__title { font-size: clamp(2.3rem, 12vw, 3rem); }
  .op-hero__inner { padding-block: 3rem; }
  .op-hero__cta { flex-direction: row; }
  .op-hero__cta .op-btn { flex: 1 1 auto; min-width: 0; }
  .op-header__logo-text { font-size: 1.35rem; }
}
/* PHASE 1 mobile nav polish */
@media (max-width: 767.98px) {
  .op-nav-open .op-header__nav { padding-block: var(--op-space-2) var(--op-space-4); box-shadow: var(--op-shadow-lift); }
  .op-nav-open .op-header__nav a {
    border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 1.05rem; font-weight: 600;
    padding-block: var(--op-space-4); color: rgba(255,255,255,0.9);
  }
  .op-nav-open .op-header__nav a:last-child { border-bottom: 0; }
  .op-nav-open .op-header__nav a::after { display: none; }
  .op-menu-toggle:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); }
}

/* =========================================================================
   PHASE 2 PREMIUM REDESIGN (Menu page + product cards + drawer)
   Presentation only. Uses existing tokens + class names.
   ========================================================================= */

/* ---- Menu page intro header ---- */
.op-menu-head { padding-block: clamp(1.5rem, 4vw, 2.5rem) 0; }
.op-menu-head__eyebrow {
  font-family: var(--op-body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--op-orange-ink);
  margin: 0 0 var(--op-space-2);
}
.op-menu-head__title {
  font-family: var(--op-display); font-weight: 400; line-height: 1.05;
  font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.01em; margin: 0;
}

/* ---- Active-branch bar: refined ---- */
.op-active-branch {
  display: flex; align-items: center; gap: var(--op-space-4);
  padding: var(--op-space-4) var(--op-space-5);
}
.op-active-branch__meta { color: var(--op-charcoal-70); font-size: var(--op-step--1); }
.op-active-branch__change { margin-left: auto; white-space: nowrap; }

/* ---- Category rail: premium sticky pill nav ---- */
.op-catrail {
  position: sticky; top: var(--op-header-h); z-index: 40;
  background: color-mix(in srgb, var(--op-light) 92%, transparent);
  backdrop-filter: blur(8px) saturate(1.1);
  margin-inline: calc(-1 * var(--op-space-4));
  padding-inline: var(--op-space-4);
  border-bottom: 1px solid var(--op-line);
}
.op-catrail__scroll {
  display: flex; gap: var(--op-space-2); overflow-x: auto; scrollbar-width: none;
  padding-block: var(--op-space-3); scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.op-catrail__scroll::-webkit-scrollbar { display: none; }
.op-catrail__link {
  flex: 0 0 auto; scroll-snap-align: start;
  padding: 9px 16px; border-radius: var(--op-radius-pill);
  font-weight: 600; font-size: 0.92rem; white-space: nowrap;
  color: var(--op-charcoal); background: var(--op-white);
  border: 1px solid var(--op-line); min-height: 40px; display: inline-flex; align-items: center;
  transition: background 0.2s var(--op-ease), color 0.2s var(--op-ease), border-color 0.2s var(--op-ease), transform 0.15s var(--op-ease);
}
.op-catrail__link:hover { border-color: var(--op-line-strong); transform: translateY(-1px); }
.op-catrail__link.is-active {
  background: var(--op-charcoal); color: #fff; border-color: var(--op-charcoal);
}

/* ---- Search: clean, integrated ---- */
.op-search {
  position: relative; margin-block: var(--op-space-5);
  display: flex; align-items: center;
}
.op-search__icon {
  position: absolute; left: 16px; color: var(--op-gray); display: inline-flex; pointer-events: none;
}
.op-search__input {
  width: 100%; min-height: 52px; padding: 0 18px 0 46px;
  border: 1px solid var(--op-line); border-radius: var(--op-radius-pill);
  background: var(--op-white); font-family: var(--op-body); font-size: 1rem; color: var(--op-charcoal);
  transition: border-color 0.2s var(--op-ease), box-shadow 0.2s var(--op-ease);
}
.op-search__input::placeholder { color: var(--op-gray); }
.op-search__input:focus {
  outline: none; border-color: var(--op-orange);
  box-shadow: 0 0 0 4px rgba(251,150,33,0.14);
}

/* ---- Category sections: editorial rhythm, minimal dividers ---- */
.op-menu-cat { padding-block: clamp(1.75rem, 4vw, 2.75rem); scroll-margin-top: calc(var(--op-header-h) + 64px); }
.op-menu-cat + .op-menu-cat { border-top: 1px solid var(--op-line); }
.op-menu-cat__title {
  display: flex; align-items: baseline; gap: var(--op-space-3);
  margin-bottom: var(--op-space-5);
}
.op-menu-cat__title h2 {
  font-family: var(--op-display); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0; line-height: 1.1;
}
.op-menu-cat__count {
  font-family: var(--op-body); font-weight: 700; font-size: 0.78rem;
  color: var(--op-orange-ink); background: rgba(251,150,33,0.12);
  padding: 3px 10px; border-radius: var(--op-radius-pill); line-height: 1.4;
}

/* ---- PREMIUM PRODUCT CARD ---- */
.op-card {
  grid-template-columns: 104px 1fr; align-items: stretch;
  gap: 0; padding: 0; overflow: hidden;
  background: var(--op-white); border: 1px solid var(--op-line);
  border-radius: var(--op-radius-lg);
}
.op-card__media {
  position: relative; width: 104px; align-self: stretch;
  background: var(--op-light); overflow: hidden;
}
.op-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.5s var(--op-ease-out);
}
.op-card:hover .op-card__media img { transform: scale(1.07); }
/* branded fallback tint for placeholder/transparent images */
.op-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset -1px 0 0 var(--op-line);
}
.op-card__body { padding: var(--op-space-4) var(--op-space-4) 0; min-width: 0; }
.op-card__name { margin: 0 0 4px; }
.op-card__name a {
  font-family: var(--op-display); font-size: 1.16rem; line-height: 1.2;
  color: var(--op-charcoal); text-decoration: none; letter-spacing: -0.005em;
}
.op-card__name a:hover { color: var(--op-orange-ink); }
.op-card__desc {
  margin: 0; color: var(--op-charcoal-70); font-size: 0.9rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.op-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--op-space-3);
  padding: var(--op-space-3) var(--op-space-4) var(--op-space-4);
  grid-column: 2; margin-top: auto;
}
.op-card__price {
  font-family: var(--op-display); font-size: 1.2rem; color: var(--op-charcoal); font-weight: 400;
}
.op-card__price .woocommerce-Price-amount { font-weight: 400; }
.op-card__add {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 16px; border: 0; cursor: pointer;
  background: var(--op-charcoal); color: #fff;
  font-family: var(--op-body); font-weight: 700; font-size: 0.9rem;
  border-radius: var(--op-radius-pill);
  transition: background 0.2s var(--op-ease), transform 0.18s var(--op-ease-out);
}
.op-card__add:hover { background: var(--op-orange); color: var(--op-charcoal); transform: translateY(-1px); }
.op-card__add svg { transition: transform 0.2s var(--op-ease); }
.op-card__add:hover svg { transform: rotate(90deg); }

/* ---- PREMIUM DRAWER ---- */
.op-drawer {
  border-radius: var(--op-radius-lg) var(--op-radius-lg) 0 0;
  box-shadow: var(--op-shadow-lift);
}
@media (min-width: 720px) {
  .op-drawer { border-radius: var(--op-radius-lg); }
}
.op-drawer__head {
  padding: var(--op-space-4) var(--op-space-5);
  border-bottom: 1px solid var(--op-line);
}
.op-drawer__head strong {
  font-family: var(--op-display); font-weight: 400; font-size: 1.5rem;
  letter-spacing: -0.01em; line-height: 1.15;
}
.op-drawer__close {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--op-line); background: var(--op-white);
  font-size: 1.4rem; line-height: 1; color: var(--op-charcoal); cursor: pointer;
  transition: background 0.2s var(--op-ease), border-color 0.2s var(--op-ease);
}
.op-drawer__close:hover { background: var(--op-light); border-color: var(--op-line-strong); }
.op-drawer__media {
  aspect-ratio: 16 / 10; border-radius: var(--op-radius); overflow: hidden;
  margin-bottom: var(--op-space-4); background: var(--op-light);
}
.op-drawer__media img { width: 100%; height: 100%; object-fit: cover; }
.op-drawer__desc { color: var(--op-charcoal-70); line-height: 1.6; margin: 0 0 var(--op-space-5); }

/* Modifier groups */
.op-mod-group { border: 0; padding: 0; margin: 0 0 var(--op-space-6); }
.op-mod-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--op-space-3);
  padding-bottom: var(--op-space-3); margin-bottom: var(--op-space-3);
  border-bottom: 1px solid var(--op-line);
}
.op-mod-group__name {
  font-family: var(--op-display); font-size: 1.2rem; color: var(--op-charcoal); padding: 0;
}
.op-mod-group__req { font-family: var(--op-body); font-size: 0.75rem; font-weight: 700; color: var(--op-orange-ink); letter-spacing: 0.02em; }
.op-mod-group__opt { font-family: var(--op-body); font-size: 0.75rem; font-weight: 600; color: var(--op-gray); letter-spacing: 0.02em; text-transform: none; }
.op-mod-group__limit { font-family: var(--op-body); font-size: 0.8rem; color: var(--op-orange-ink); margin-top: var(--op-space-2); font-weight: 600; }

.op-mod-option {
  display: flex; align-items: center; gap: var(--op-space-3);
  padding: 13px var(--op-space-3); border-radius: var(--op-radius);
  cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s var(--op-ease), border-color 0.15s var(--op-ease);
}
.op-mod-option:hover { background: var(--op-light); }
.op-mod-option input { accent-color: var(--op-orange); width: 20px; height: 20px; flex: 0 0 auto; }
.op-mod-option__label { flex: 1 1 auto; color: var(--op-charcoal); }
.op-mod-option__extra { font-weight: 700; color: var(--op-charcoal); font-size: 0.92rem; white-space: nowrap; }
.op-mod-option:has(input:checked) { background: rgba(251,150,33,0.08); border-color: rgba(251,150,33,0.35); }
.op-mod-option.is-unavailable, .op-mod-option--disabled { opacity: 0.42; cursor: not-allowed; }
.op-mod-option.is-unavailable input, .op-mod-option--disabled input { cursor: not-allowed; }

/* Drawer footer: quantity + prominent live-total CTA */
.op-drawer__foot {
  display: flex; gap: var(--op-space-3); align-items: center;
  padding: var(--op-space-4) var(--op-space-5);
  border-top: 1px solid var(--op-line); background: var(--op-white);
}
.op-qty {
  display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto;
  border: 1px solid var(--op-line); border-radius: var(--op-radius-pill); overflow: hidden;
}
.op-qty__btn {
  width: 46px; height: 50px; border: 0; background: var(--op-white); cursor: pointer;
  font-size: 1.3rem; color: var(--op-charcoal); transition: background 0.15s var(--op-ease);
}
.op-qty__btn:hover { background: var(--op-light); }
.op-qty__val { min-width: 34px; text-align: center; font-weight: 700; }
.op-drawer__foot .op-btn--block {
  flex: 1 1 auto; min-height: 54px; font-size: 1.02rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
[data-op-add-total] { font-weight: 800; }


/* ---- Responsive: cards ---- */
@media (min-width: 600px) {
  .op-card { grid-template-columns: 132px 1fr; }
  .op-card__media { width: 132px; }
}
@media (min-width: 768px) {
  .op-products { grid-template-columns: repeat(2, 1fr); gap: var(--op-space-4); }
}
@media (min-width: 1100px) {
  .op-products { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Mobile polish (<= 600px) ---- */
@media (max-width: 600px) {
  .op-card { grid-template-columns: 96px 1fr; }
  .op-card__media { width: 96px; }
  .op-card__name a { font-size: 1.05rem; }
  .op-card__desc { -webkit-line-clamp: 2; font-size: 0.85rem; }
  .op-card__price { font-size: 1.08rem; }
  .op-catrail { margin-inline: calc(-1 * var(--op-space-4)); }
  .op-drawer__foot { padding: var(--op-space-3) var(--op-space-4); }
}
/* =========================================================================
   PHASE 3 PREMIUM REDESIGN (Cart + Checkout) - classic WooCommerce shortcode
   Presentation only. No block markup, no gateway, no business logic.
   ========================================================================= */

/* Page title for cart/checkout (rendered via index.php h1) */
.woocommerce-cart .op-section > h1,
.woocommerce-checkout .op-section > h1,
.woocommerce-page .op-section > h1 {
  font-family: var(--op-display); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 var(--op-space-6);
}

/* Two-column layout on desktop: items left, summary right */
@media (min-width: 900px) {
  .woocommerce-cart-form { float: none; }
  .woocommerce .cart-collaterals { width: 100%; }
}

/* ---- Cart table as premium cards ---- */
.woocommerce table.cart {
  border: 1px solid var(--op-line); border-radius: var(--op-radius-lg);
  border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: var(--op-white); box-shadow: var(--op-shadow-soft); width: 100%;
}
.woocommerce table.cart thead th {
  background: var(--op-light); font-family: var(--op-body); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--op-charcoal-70); padding: var(--op-space-4) var(--op-space-4);
  border: 0; text-align: left;
}
.woocommerce table.cart tbody td {
  padding: var(--op-space-4); border: 0; border-top: 1px solid var(--op-line);
  vertical-align: middle; background: transparent;
}
.woocommerce table.cart .product-thumbnail img {
  width: 68px; height: 68px; object-fit: cover; border-radius: var(--op-radius);
  border: 1px solid var(--op-line);
}
.woocommerce table.cart .product-name a {
  font-family: var(--op-display); font-size: 1.14rem; color: var(--op-charcoal); text-decoration: none;
}
.woocommerce table.cart .product-name a:hover { color: var(--op-orange-ink); }
/* Modifier lines under product name */
.woocommerce table.cart .product-name .wc-item-meta,
.woocommerce table.cart .product-name dl.variation {
  margin: 6px 0 0; padding: 0; list-style: none;
  font-size: 0.86rem; color: var(--op-charcoal-70); line-height: 1.5;
}
.woocommerce table.cart .wc-item-meta li,
.woocommerce table.cart dl.variation dt,
.woocommerce table.cart dl.variation dd { margin: 0; padding: 0; }
.woocommerce table.cart dl.variation dt { font-weight: 700; display: inline; }
.woocommerce table.cart dl.variation dd { display: inline; margin-right: var(--op-space-2); }
.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal {
  font-family: var(--op-display); font-size: 1.05rem; color: var(--op-charcoal);
}
.woocommerce table.cart td.product-remove { width: 44px; text-align: center; }
.woocommerce table.cart .product-remove a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-size: 0; position: relative;
  color: var(--op-gray); border: 1px solid var(--op-line); background: var(--op-white);
  transition: color 0.2s var(--op-ease), border-color 0.2s var(--op-ease), background 0.2s var(--op-ease);
}
.woocommerce table.cart .product-remove a::before { content: "\00d7"; font-size: 1.1rem; line-height: 1; }
.woocommerce table.cart .product-remove a:hover {
  color: var(--op-danger); border-color: var(--op-danger); background: rgba(179,38,30,0.06);
}

/* Quantity input */
.woocommerce table.cart .quantity input.qty {
  width: 62px; min-height: 44px; text-align: center;
  border: 1px solid var(--op-line); border-radius: var(--op-radius);
  font-family: var(--op-body); font-weight: 700; color: var(--op-charcoal); background: var(--op-white);
}
.woocommerce table.cart .quantity input.qty:focus {
  outline: none; border-color: var(--op-orange); box-shadow: 0 0 0 4px rgba(251,150,33,0.14);
}

/* Coupon + update row */
.woocommerce table.cart td.actions {
  padding: var(--op-space-4); background: var(--op-light); border-top: 1px solid var(--op-line);
}
.woocommerce table.cart td.actions .coupon { display: inline-flex; gap: var(--op-space-2); align-items: center; }
.woocommerce #coupon_code.input-text {
  min-height: 46px; padding: 0 14px; border: 1px solid var(--op-line);
  border-radius: var(--op-radius-pill); background: var(--op-white); min-width: 160px;
}
.woocommerce #coupon_code.input-text:focus { outline: none; border-color: var(--op-orange); box-shadow: 0 0 0 4px rgba(251,150,33,0.14); }

/* WooCommerce buttons -> brand pills (covers checkout + update + apply coupon) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .checkout-button, .woocommerce #place_order {
  font-family: var(--op-body); font-weight: 700; letter-spacing: 0.01em;
  min-height: 50px; padding: 0 var(--op-space-5);
  background: var(--op-charcoal); color: #fff; border: 0;
  border-radius: var(--op-radius-pill); cursor: pointer;
  transition: transform 0.2s var(--op-ease-out), background 0.2s var(--op-ease), box-shadow 0.2s var(--op-ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: color-mix(in srgb, var(--op-charcoal) 88%, black); transform: translateY(-1px);
}
/* Primary CTAs = orange */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .checkout-button, .woocommerce #place_order {
  background: var(--op-orange); color: var(--op-charcoal);
  box-shadow: 0 6px 18px rgba(251,150,33,0.28);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover {
  background: var(--op-orange); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(251,150,33,0.36);
}

/* ---- Cart totals: premium summary card ---- */
.cart_totals, .woocommerce .cart_totals {
  background: var(--op-white); border: 1px solid var(--op-line);
  border-radius: var(--op-radius-lg); padding: var(--op-space-5);
  box-shadow: var(--op-shadow-soft);
}
.cart_totals h2 {
  font-family: var(--op-display); font-weight: 400; font-size: 1.5rem;
  margin: 0 0 var(--op-space-4); letter-spacing: -0.01em;
}
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th, .cart_totals table td {
  padding: var(--op-space-3) 0; border-bottom: 1px solid var(--op-line);
  text-align: left; vertical-align: top; font-size: 0.98rem;
}
.cart_totals table th { font-weight: 600; color: var(--op-charcoal-70); }
.cart_totals .order-total th, .cart_totals .order-total td {
  border-bottom: 0; padding-top: var(--op-space-4);
  font-family: var(--op-display); font-size: 1.3rem; color: var(--op-charcoal);
}
.cart_totals .order-total .amount { font-weight: 400; }
.wc-proceed-to-checkout { margin-top: var(--op-space-5); padding: 0; }
.wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 56px; font-size: 1.05rem; }

/* ---- CHECKOUT ---- */
.woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { margin-bottom: var(--op-space-5); }
.woocommerce-checkout h3 {
  font-family: var(--op-display); font-weight: 400; font-size: 1.4rem;
  margin: 0 0 var(--op-space-4); padding-bottom: var(--op-space-3);
  border-bottom: 1px solid var(--op-line); letter-spacing: -0.01em;
}
.woocommerce form .form-row label { font-weight: 600; font-size: 0.9rem; color: var(--op-charcoal); margin-bottom: 6px; }
.woocommerce form .form-row {
  padding: 0 0 var(--op-space-4); margin: 0;
}
.woocommerce .input-text, .woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce-checkout select, .select2-container .select2-selection {
  min-height: 50px; padding: 0 14px; border: 1px solid var(--op-line) !important;
  border-radius: var(--op-radius) !important; background: var(--op-white);
  font-family: var(--op-body); font-size: 1rem; color: var(--op-charcoal);
  transition: border-color 0.2s var(--op-ease), box-shadow 0.2s var(--op-ease);
}
.woocommerce form .form-row textarea { min-height: 90px; padding-top: 12px; }
.woocommerce .input-text:focus, .woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus {
  outline: none; border-color: var(--op-orange) !important; box-shadow: 0 0 0 4px rgba(251,150,33,0.14);
}
/* Order review + payment box */
.woocommerce-checkout #order_review, .woocommerce-checkout-review-order {
  background: var(--op-white); border: 1px solid var(--op-line);
  border-radius: var(--op-radius-lg); padding: var(--op-space-5);
  box-shadow: var(--op-shadow-soft);
}
.woocommerce-checkout #order_review table.shop_table { border: 0; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding: var(--op-space-3) 0; border-bottom: 1px solid var(--op-line); font-size: 0.96rem;
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
  font-family: var(--op-display); font-size: 1.25rem; border-bottom: 0; padding-top: var(--op-space-4);
}
#payment, .woocommerce-checkout #payment {
  background: transparent; border-radius: var(--op-radius);
}
#payment ul.payment_methods {
  border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: var(--op-space-4); background: var(--op-light); list-style: none; margin: 0 0 var(--op-space-4);
}
#place_order { width: 100%; min-height: 58px; font-size: 1.08rem; }

/* Responsive checkout: two columns on desktop */
@media (min-width: 980px) {
  .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--op-space-5); width: 100%; float: none; }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
}

/* Mobile cart: responsive table already collapses; tidy spacing */
@media (max-width: 600px) {
  .woocommerce table.cart thead { display: none; }
  .woocommerce table.cart tbody td { padding: var(--op-space-3) var(--op-space-4); }
  .cart_totals, .woocommerce-checkout #order_review { padding: var(--op-space-4); }
}
/* =========================================================================
   PHASE 3 BLOCKS CHECKOUT (WooCommerce Blocks) - presentation only
   ========================================================================= */

/* Sidebar order summary as premium card */
/* Order summary: single clean card on the sidebar wrapper only (no nested borders). */
.wc-block-checkout__sidebar {
  background: var(--op-white);
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius-lg);
}
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-checkout__sidebar > .wc-block-components-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.wc-block-components-order-summary__content { padding-top: var(--op-space-2); }
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: var(--op-display); font-size: 1.05rem; color: var(--op-charcoal);
}
.wc-block-components-order-summary-item__total-price { font-weight: 700; }

/* Product image thumbs in summary */
.wc-block-components-order-summary-item__image img {
  border-radius: var(--op-radius); border: 1px solid var(--op-line);
}
.wc-block-components-order-summary-item__quantity {
  background: var(--op-charcoal) !important; color: #fff !important;
  border: 0 !important;
}

/* Totals rows */
.wc-block-components-totals-item__label { color: var(--op-charcoal-70); }
.wc-block-components-totals-item__value { font-weight: 600; color: var(--op-charcoal); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item {
  font-family: var(--op-display); font-size: 1.3rem; color: var(--op-charcoal);
}

/* Section headings */
.wc-block-components-checkout-step__title {
  font-family: var(--op-display) !important; font-weight: 400 !important;
  font-size: 1.3rem !important; letter-spacing: -0.01em; color: var(--op-charcoal) !important;
}
.wc-block-components-checkout-step__heading-content { color: var(--op-orange-ink); }

/* Form fields */
.wc-block-components-text-input input,
.wc-block-components-text-input.is-active input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-address-form input,
.wc-block-components-form .wc-block-components-text-input input {
  border-radius: var(--op-radius) !important;
  border: 1px solid var(--op-line) !important;
  min-height: 52px; font-family: var(--op-body);
  transition: border-color 0.2s var(--op-ease), box-shadow 0.2s var(--op-ease);
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input.is-active input:focus {
  border-color: var(--op-orange) !important;
  box-shadow: 0 0 0 4px rgba(251,150,33,0.14) !important;
}
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label {
  color: var(--op-charcoal-70);
}

/* Pickup / shipping option rows as selectable cards */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option {
  border: 1px solid var(--op-line); border-radius: var(--op-radius);
  padding: var(--op-space-4) var(--op-space-4) var(--op-space-4) 46px;
  margin-bottom: var(--op-space-3);
  transition: border-color 0.2s var(--op-ease), background 0.2s var(--op-ease);
}
.wc-block-components-radio-control__option:hover { border-color: var(--op-line-strong); }
.wc-block-components-radio-control__option-checked {
  border-color: var(--op-orange); background: rgba(251,150,33,0.06);
}
.wc-block-components-radio-control__input { accent-color: var(--op-orange); }

/* Place order button -> orange brand pill */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
  background: var(--op-orange) !important; color: var(--op-charcoal) !important;
  border-radius: var(--op-radius-pill) !important; min-height: 58px !important;
  font-family: var(--op-body); font-weight: 700 !important; font-size: 1.05rem !important;
  box-shadow: 0 6px 18px rgba(251,150,33,0.28);
  transition: transform 0.2s var(--op-ease-out), box-shadow 0.2s var(--op-ease);
}
.wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(251,150,33,0.36);
}

/* Generic block buttons (add coupon toggle, etc.) */
.wc-block-components-button:not(.wc-block-components-checkout-place-order-button) {
  border-radius: var(--op-radius-pill);
}
.wc-block-components-button.is-link { color: var(--op-orange-ink); }

/* Notice banners already themed globally; ensure block variant matches */
.wc-block-components-notice-banner {
  border-radius: var(--op-radius) !important;
}

/* Coupon panel */
.wc-block-components-totals-coupon { border-top: 1px solid var(--op-line); }

/* Mobile: summary stacks below on small screens (WooCommerce handles order) */
@media (max-width: 780px) {
  .wc-block-checkout__sidebar { margin-top: var(--op-space-5); }
}
/* =========================================================================
   PHASE 4 CONTACT PAGE (theme-native) - presentation only
   ========================================================================= */
.op-contact-hero {
  background: var(--op-charcoal); color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
  position: relative;
}
.op-contact-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--op-orange), transparent 70%);
}
.op-contact-hero__eyebrow {
  font-family: var(--op-body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--op-orange);
  margin: 0 0 var(--op-space-3);
}
.op-contact-hero__title {
  font-family: var(--op-display); font-weight: 400; line-height: 1.03;
  font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.01em; margin: 0 0 var(--op-space-4);
  color: #fff;
}
.op-contact-hero__intro {
  color: rgba(255,255,255,0.82); font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6; max-width: 60ch; margin: 0;
}
.op-contact-image {
  margin-top: calc(-1 * var(--op-space-6));
  border-radius: var(--op-radius-lg); overflow: hidden; box-shadow: var(--op-shadow-lift);
  aspect-ratio: 21 / 9; position: relative; z-index: 2;
}
.op-contact-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.op-contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--op-space-5); }
.op-contact-card {
  background: var(--op-white); border: 1px solid var(--op-line);
  border-radius: var(--op-radius-lg); padding: var(--op-space-6);
  box-shadow: var(--op-shadow-soft); position: relative; overflow: hidden;
}
.op-contact-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--op-orange), transparent);
}
.op-contact-card__name {
  font-family: var(--op-display); font-weight: 400; font-size: 1.9rem;
  letter-spacing: -0.01em; margin: 0 0 var(--op-space-5); color: var(--op-charcoal);
}
.op-contact-row {
  display: flex; align-items: flex-start; gap: var(--op-space-3);
  padding: var(--op-space-3) 0; border-bottom: 1px solid var(--op-line);
}
.op-contact-row__icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(251,150,33,0.12); color: var(--op-orange-ink);
}
.op-contact-row__text { padding-top: 5px; color: var(--op-charcoal); line-height: 1.5; }
.op-contact-row__text a { color: var(--op-charcoal); text-decoration: none; font-weight: 600; }
.op-contact-row__text a:hover { color: var(--op-orange-ink); }

.op-contact-hours { padding-top: var(--op-space-4); }
.op-contact-hours__title {
  font-family: var(--op-body); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-charcoal-70);
  margin: 0 0 var(--op-space-3);
}
.op-contact-hours__list { list-style: none; margin: 0; padding: 0; }
.op-contact-hours__list li {
  display: flex; justify-content: space-between; gap: var(--op-space-4);
  padding: 7px 0; border-bottom: 1px dashed var(--op-line); font-size: 0.95rem;
}
.op-contact-hours__list li:last-child { border-bottom: 0; }
.op-contact-hours__day { color: var(--op-charcoal-70); font-weight: 600; }
.op-contact-hours__time { color: var(--op-charcoal); text-align: right; }
.op-contact-hours__note {
  margin: var(--op-space-3) 0 0; font-size: 0.85rem; color: var(--op-charcoal-70);
  font-style: italic; line-height: 1.5;
}
.op-contact-card__actions {
  display: flex; gap: var(--op-space-3); flex-wrap: wrap; margin-top: var(--op-space-5);
}
.op-btn--sm { min-height: 44px; padding: 0 var(--op-space-4); font-size: 0.92rem; }

@media (min-width: 860px) {
  .op-contact-grid { grid-template-columns: 1fr 1fr; gap: var(--op-space-5); }
}
@media (max-width: 600px) {
  .op-contact-card { padding: var(--op-space-5); }
  .op-contact-card__name { font-size: 1.6rem; }
  .op-contact-image { aspect-ratio: 16 / 10; }
}
/* =========================================================================
   FINAL FOOTER + GLOBAL POLISH (presentation only)
   ========================================================================= */
.op-footer {
  background: var(--op-charcoal); color: rgba(255,255,255,0.72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0; margin-top: clamp(3rem, 7vw, 5rem);
  position: relative;
}
.op-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--op-orange), transparent 60%);
}
.op-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--op-space-6);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.op-footer__col--brand { max-width: 34ch; }
.op-footer__logo { max-height: 46px; width: auto; display: block; margin-bottom: var(--op-space-3); }
.op-footer__brand {
  font-family: var(--op-display); font-size: 1.8rem; color: #fff; line-height: 1;
  margin-bottom: var(--op-space-3);
}
.op-footer__tagline { color: rgba(255,255,255,0.66); line-height: 1.6; margin: 0 0 var(--op-space-4); font-size: 0.95rem; }
.op-footer__social { display: flex; gap: var(--op-space-3); margin: 0; }
.op-footer__social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85); transition: background 0.2s var(--op-ease), border-color 0.2s var(--op-ease), color 0.2s var(--op-ease), transform 0.2s var(--op-ease-out);
}
.op-footer__social a:hover {
  background: var(--op-orange); border-color: var(--op-orange); color: var(--op-charcoal); transform: translateY(-2px);
}
.op-footer__heading {
  font-family: var(--op-body); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  margin: 0 0 var(--op-space-4);
}
.op-footer__links { list-style: none; margin: 0; padding: 0; }
.op-footer__links li { margin-bottom: var(--op-space-3); }
.op-footer__links a, .op-footer__line a {
  color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.2s var(--op-ease);
}
.op-footer__links a:hover, .op-footer__line a:hover { color: var(--op-orange); }
.op-footer__line { margin: 0 0 var(--op-space-3); line-height: 1.5; font-size: 0.92rem; color: rgba(255,255,255,0.66); }
.op-footer__cta { color: var(--op-orange) !important; font-weight: 700; }
.op-footer__cta:hover { color: #fff !important; }
.op-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-block: var(--op-space-5); font-size: 0.85rem; color: rgba(255,255,255,0.5);
}

@media (min-width: 640px) {
  .op-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .op-footer__grid { grid-template-columns: 1.4fr 0.8fr 1fr 1fr; gap: var(--op-space-5); }
}

/* ---- GLOBAL CONSISTENCY POLISH ---- */
/* Unify focus-visible across interactive elements for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.op-btn:focus-visible, .op-card__add:focus-visible, .op-catrail__link:focus-visible {
  outline: 2px solid var(--op-orange); outline-offset: 2px; border-radius: var(--op-radius);
}
/* Consistent image fallback tint for any product image that fails/transparent */
.op-card__media, .op-drawer__media, .wc-block-components-order-summary-item__image {
  background: var(--op-light);
}
.op-card__media img[src=""], .op-card__media img:not([src]) { opacity: 0; }
/* Ensure sticky cart bar never covers footer legal on short pages */
.op-sticky-cart { z-index: 60; }
/* Reduced motion: kill all non-essential transitions/animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* =========================================================================
   MOBILE QA FIXES (cart update button + blocks summary + mobile cart cards)
   Presentation only.
   ========================================================================= */

/* Update-cart button: WooCommerce renders it disabled (grey) until quantity changes.
   Give it a clear secondary look with a VISIBLE label in both states. */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
  background: var(--op-white);
  color: var(--op-charcoal);
  border: 1px solid var(--op-line-strong, var(--op-line));
}
.woocommerce button[name="update_cart"]:not([disabled]):hover,
.woocommerce input[name="update_cart"]:not([disabled]):hover {
  background: var(--op-charcoal);
  color: #fff;
  border-color: var(--op-charcoal);
}
/* Disabled state for ANY woo button: readable, clearly inactive (not a blank grey pill). */
.woocommerce button.button[disabled],
.woocommerce input.button[disabled],
.woocommerce a.button.disabled,
.woocommerce button[name="update_cart"][disabled],
.woocommerce input[name="update_cart"][disabled] {
  background: var(--op-light);
  color: var(--op-charcoal-70, #6b6560);
  border: 1px solid var(--op-line);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Ensure the place-order / checkout primary buttons keep dark readable text on orange. */
.woocommerce .checkout-button,
.wc-block-components-checkout-place-order-button {
  color: var(--op-charcoal) !important;
}

/* ---- Mobile cart: convert the classic table into readable stacked cards ---- */
@media (max-width: 600px) {
  .woocommerce table.cart thead { display: none; }
  .woocommerce table.cart,
  .woocommerce table.cart tbody,
  .woocommerce table.cart tr { display: block; width: 100%; }
  .woocommerce table.cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 68px 1fr;
    grid-template-areas:
      "thumb name"
      "thumb meta"
      "qty   subtotal";
    gap: 6px 12px;
    align-items: center;
    padding: var(--op-space-4);
    border-top: 1px solid var(--op-line);
  }
  .woocommerce table.cart tr.cart_item td {
    border: 0; padding: 0; display: block;
  }
  .woocommerce table.cart td.product-remove {
    position: absolute; top: 10px; right: 10px; width: auto;
  }
  .woocommerce table.cart td.product-thumbnail { grid-area: thumb; }
  .woocommerce table.cart td.product-thumbnail img { width: 68px; height: 68px; }
  .woocommerce table.cart td.product-name { grid-area: name; padding-right: 32px; }
  .woocommerce table.cart td.product-price { display: none; } /* price shown via subtotal */
  .woocommerce table.cart td.product-quantity { grid-area: qty; }
  .woocommerce table.cart td.product-subtotal {
    grid-area: subtotal; text-align: right; font-family: var(--op-display); font-size: 1.1rem;
  }
  .woocommerce table.cart td.actions {
    display: flex; flex-wrap: wrap; gap: var(--op-space-3); padding: var(--op-space-4);
  }
  .woocommerce table.cart td.actions .coupon { display: flex; flex: 1 1 100%; gap: var(--op-space-2); }
  .woocommerce #coupon_code.input-text { flex: 1 1 auto; min-width: 0; }
  .woocommerce table.cart td.actions button[name="update_cart"] { flex: 1 1 100%; }
  /* Totals card full-width under items on mobile */
  .cart_totals, .woocommerce .cart_totals { width: 100%; }
  .wc-proceed-to-checkout .checkout-button { width: 100%; }
}
/* Suppress WooCommerce responsive-table auto labels on mobile (our grid provides structure). */
@media (max-width: 600px) {
  /* shop_table_responsive pseudo-label suppress */
  .woocommerce table.cart.shop_table_responsive td::before,
  .woocommerce-page table.cart.shop_table_responsive td::before {
    display: none !important;
    content: "" !important;
  }
  .woocommerce table.cart td.product-name::before { content: "" !important; }
  /* Give the product name room + weight on mobile */
  .woocommerce table.cart td.product-name a {
    font-size: 1.05rem; line-height: 1.25; display: block;
  }
  /* Modifier meta under the name spans full width */
  .woocommerce table.cart td.product-name .wc-item-meta,
  .woocommerce table.cart td.product-name dl.variation {
    grid-area: meta; margin-top: 4px;
  }
  /* Quantity input comfortable tap size */
  .woocommerce table.cart .quantity input.qty { width: 72px; min-height: 46px; }
}
/* =========================================================================
   CENTRAL RESTAURANT SELECTOR (modal + cards + geolocation + toast)
   ========================================================================= */
.op-modal-open { overflow: hidden; }

.op-selector-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 18, 16, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: var(--op-space-4);
  animation: opFade 0.2s var(--op-ease);
}
.op-selector-backdrop[hidden] { display: none; }
.op-selector {
  position: relative; width: 100%; max-width: 520px;
  background: var(--op-white); border-radius: var(--op-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: 0 24px 60px rgba(20, 18, 16, 0.28);
  animation: opRise 0.25s var(--op-ease-out);
  max-height: 90vh; overflow-y: auto;
}
.op-selector__close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--op-light); color: var(--op-charcoal);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background 0.2s var(--op-ease);
}
.op-selector__close:hover { background: #ece8e3; }
.op-selector__title {
  font-family: var(--op-display); font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--op-charcoal); margin: 0 0 var(--op-space-2); padding-right: 40px;
}
.op-selector__intro { color: #6b6560; margin: 0 0 var(--op-space-5); line-height: 1.5; }
.op-selector__cards { display: grid; gap: var(--op-space-3); margin-bottom: var(--op-space-4); }
.op-selector__card {
  display: flex; align-items: center; gap: var(--op-space-3);
  width: 100%; text-align: left; cursor: pointer;
  background: var(--op-white); border: 1.5px solid var(--op-line);
  border-radius: var(--op-radius); padding: var(--op-space-4);
  transition: border-color 0.18s var(--op-ease), box-shadow 0.18s var(--op-ease), transform 0.12s var(--op-ease-out);
}
.op-selector__card:hover { border-color: var(--op-orange); box-shadow: 0 6px 18px rgba(251, 150, 33, 0.14); transform: translateY(-1px); }
.op-selector__card.is-selected { border-color: var(--op-orange); background: rgba(251, 150, 33, 0.06); }
.op-selector__card-pin { font-size: 1.4rem; flex: 0 0 auto; }
.op-selector__card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.op-selector__card-name { font-weight: 700; color: var(--op-charcoal); font-size: 1.05rem; }
.op-selector__card-addr { color: #6b6560; font-size: 0.9rem; }
.op-selector__card-check { flex: 0 0 auto; color: var(--op-orange); font-size: 1.2rem; opacity: 0; transition: opacity 0.18s var(--op-ease); }
.op-selector__card.is-selected .op-selector__card-check { opacity: 1; }
.op-selector__geo {
  display: flex; align-items: center; justify-content: center; gap: var(--op-space-2);
  width: 100%; cursor: pointer; background: transparent;
  border: 1px dashed var(--op-line-strong, var(--op-line)); border-radius: var(--op-radius);
  padding: var(--op-space-3); color: var(--op-charcoal); font-weight: 600;
  transition: background 0.18s var(--op-ease), border-color 0.18s var(--op-ease);
}
.op-selector__geo:hover { background: var(--op-light); border-color: var(--op-orange); }
.op-selector__geo-result { margin-top: var(--op-space-3); }
.op-selector__nearest {
  border: 1.5px solid var(--op-orange); border-radius: var(--op-radius);
  padding: var(--op-space-4); background: rgba(251, 150, 33, 0.06);
}
.op-selector__nearest-head { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-orange); font-weight: 700; margin-bottom: 4px; }
.op-selector__nearest-name { font-weight: 700; color: var(--op-charcoal); margin-bottom: 2px; }
.op-selector__nearest-addr { color: #6b6560; font-size: 0.9rem; margin-bottom: var(--op-space-3); }
.op-selector__geo-error { color: #b3402f; font-size: 0.9rem; padding: var(--op-space-2) 0; }

/* Confirm modal open-state (reuses existing markup) */
.op-confirm-backdrop {
  position: fixed; inset: 0; z-index: 210; background: rgba(20, 18, 16, 0.62);
  display: none; align-items: center; justify-content: center; padding: var(--op-space-4);
}
.op-confirm-backdrop.is-open { display: flex; animation: opFade 0.2s var(--op-ease); }
.op-confirm {
  width: 100%; max-width: 420px; background: var(--op-white);
  border-radius: var(--op-radius-lg); padding: clamp(1.5rem, 4vw, 2.2rem);
  box-shadow: 0 24px 60px rgba(20, 18, 16, 0.28); animation: opRise 0.25s var(--op-ease-out);
}
.op-confirm h3 { font-family: var(--op-display); font-size: 1.4rem; color: var(--op-charcoal); margin: 0 0 var(--op-space-2); }
.op-confirm p { color: #6b6560; line-height: 1.5; margin: 0 0 var(--op-space-5); }
.op-confirm__actions { display: grid; gap: var(--op-space-2); }

/* Toast (replaces native alert for add-to-cart errors) */
.op-toast {
  position: fixed; top: 20px; left: 50%; transform: translate(-50%, -20px);
  z-index: 240; max-width: min(90vw, 420px);
  background: var(--op-charcoal); color: #fff; padding: var(--op-space-3) var(--op-space-4);
  border-radius: var(--op-radius); box-shadow: 0 12px 30px rgba(20, 18, 16, 0.3);
  font-size: 0.95rem; line-height: 1.4; opacity: 0;
  transition: opacity 0.3s var(--op-ease), transform 0.3s var(--op-ease-out);
}
.op-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.op-toast a { color: var(--op-orange); font-weight: 700; text-decoration: underline; }

@keyframes opFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes opRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .op-selector-backdrop, .op-selector, .op-confirm-backdrop, .op-confirm, .op-toast { animation: none; }
}
/* =========================================================================
   MOBILE HEADER CHIP + CHECKOUT SUMMARY (phone responsiveness)
   ========================================================================= */

/* Phone: branch chip becomes an icon-only tap target (no text), desktop keeps text. */
@media (max-width: 600px) {
  .op-branch-chip {
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
  }
  .op-branch-chip__label,
  .op-branch-chip__change {
    /* Visually hidden but still accessible via the chip's aria-label. */
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .op-branch-chip__pin {
    font-size: 1.1rem;
    line-height: 1;
  }
}

/* Phone: tighten the WooCommerce Blocks order summary so it fits cleanly. */
@media (max-width: 600px) {
  .wc-block-checkout__sidebar {
    margin: 0 0 var(--op-space-4);
  }
  .wc-block-checkout__sidebar .wc-block-components-order-summary {
    padding: 0;
  }
  /* Summary header row (title + collapsed total + chevron) */
  .wc-block-components-checkout-order-summary__title,
  .wc-block-components-panel__button {
    padding-left: var(--op-space-4);
    padding-right: var(--op-space-4);
  }
  /* Summary line items: smaller thumb, tighter text, no overflow */
  .wc-block-components-order-summary-item {
    padding: var(--op-space-3) var(--op-space-4);
  }
  .wc-block-components-order-summary-item__image,
  .wc-block-components-order-summary-item__image img {
    width: 48px; height: 48px;
  }
  .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-size: 0.98rem; line-height: 1.25;
  }
  .wc-block-components-order-summary-item__description,
  .wc-block-components-order-summary-item__description p {
    font-size: 0.82rem; line-height: 1.35;
  }
  /* Totals rows: comfortable spacing, aligned amounts, no clipping */
  .wc-block-components-totals-item {
    padding-left: var(--op-space-4);
    padding-right: var(--op-space-4);
  }
  .wc-block-components-totals-footer-item {
    font-size: 1.02rem;
  }
  /* Promo code toggle full-width tap target */
  .wc-block-components-totals-coupon {
    padding-left: var(--op-space-4);
    padding-right: var(--op-space-4);
  }
  /* Prevent any horizontal overflow inside the summary card */
  .wc-block-checkout__sidebar,
  .wc-block-components-order-summary,
  .wc-block-components-order-summary-item {
    max-width: 100%;
    box-sizing: border-box;
  }
  .wc-block-components-order-summary-item__quantity {
    flex: 0 0 auto;
  }
}
/* =========================================================================
   CHECKOUT SUMMARY ALIGNMENT (authoritative single pass, phone <=600px)
   One consistent model so every row shares the same left + right edge:
   - every row (line item, subtotal, retrait, coupon, AND the footer Total which
     WooCommerce renders outside the sidebar) gets the SAME 16px horizontal inset;
   - every amount cell (item price + totals values) sits flush at the right inset;
   - every label cell sits flush at the left inset.
   ========================================================================= */
@media (max-width: 600px) {
  /* Rows: identical horizontal inset, no stray margins. */
  .wc-block-checkout__sidebar .wc-block-components-order-summary-item,
  .wc-block-checkout__sidebar .wc-block-components-totals-item,
  .wc-block-checkout__sidebar .wc-block-components-totals-coupon,
  .wc-block-components-totals-footer-item {
    padding-left: var(--op-space-4) !important;
    padding-right: var(--op-space-4) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  /* Amount cells: no own right padding so every amount reaches the same right edge. */
  .wc-block-checkout__sidebar .wc-block-components-order-summary-item__total-price,
  .wc-block-checkout__sidebar .wc-block-components-totals-item__value,
  .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    padding-right: 0 !important;
    margin-right: 0 !important;
    text-align: right !important;
  }
  /* Label cells: no own left padding so every label reaches the same left edge. */
  .wc-block-checkout__sidebar .wc-block-components-totals-item__label,
  .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}
/* LINE-ITEM PRICE RIGHT EDGE MATCH: drop only the right padding on the product line row so its
   price aligns to 330 (same right edge as subtotal / retrait / total). Left inset kept for the thumb. */
@media (max-width: 600px) {
  .wc-block-checkout__sidebar .wc-block-components-order-summary-item {
    padding-right: var(--op-space-4) !important;
  }
}
/* =========================================================================
   SUMMARY IN MAIN COLUMN (no sidebar scope) - phone <=600px
   The order summary is rendered in the checkout main column on mobile, so the
   sidebar-scoped rules never matched the product line item. These unscoped rules
   bring the line-item price to the same right edge (330) as the totals amounts.
   ========================================================================= */
@media (max-width: 600px) {
  .wc-block-components-order-summary-item {
    padding-right: var(--op-space-4) !important;
    padding-left: var(--op-space-4) !important;
    box-sizing: border-box !important;
  }
  /* Let the price cell consume the row's right inset so it lands at the shared right edge. */
  .wc-block-components-order-summary-item__total-price {
    margin-right: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
  }
}
/* =========================================================================
   HIDE DUPLICATE MOBILE ORDER SUMMARY (phone <=600px)
   Phones show the summary twice: a collapsible copy at the top (WooCommerce
   Fill wrapper) plus the sidebar summary below. Keep only the sidebar one.
   ========================================================================= */
@media (max-width: 600px) {
  .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
    display: none !important;
  }
}
/* =========================================================================
   SUMMARY TITLE ROW INSET (align heading with content) - phone <=600px
   The order-summary title row was flush to the card edge while the content rows
   were inset 16px. Match the title row's inset so the heading, collapsed price
   and chevron align with the product / subtotal / total rows.
   ========================================================================= */
@media (max-width: 600px) {
  .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
    padding-left: var(--op-space-4) !important;
    padding-right: var(--op-space-4) !important;
    box-sizing: border-box !important;
  }
}
/* =========================================================================
   COLLAPSED TITLE PRICE NUDGE (phone <=600px)
   Move the collapsed summary price right (reduce gap to the chevron) so it sits
   closer to the shared right edge of the amounts below.
   ========================================================================= */
@media (max-width: 600px) {
  .wc-block-components-checkout-order-summary__title-price {
    margin-right: 2px !important;
  }
  .wc-block-components-checkout-order-summary__title-icon {
    margin-left: 2px !important;
  }
}

/* =========================================================================
   SINGLE PRODUCT PAGE - brand alignment (O'Panama)
   The single product template is WooCommerce core default, so all brand
   styling is done here. Scoped to .single-product so nothing else is affected.
   ========================================================================= */
.single-product div.product {
  font-family: var(--op-body);
  color: var(--op-charcoal);
}

/* Product title */
.single-product div.product .product_title {
  font-family: var(--op-display);
  font-weight: 400;
  color: var(--op-charcoal);
  line-height: 1.1;
  margin: 0 0 var(--op-space-3);
}

/* Featured image: rounded + soft shadow to match card system */
.single-product div.product .woocommerce-product-gallery {
  margin-bottom: var(--op-space-5);
}
.single-product div.product .woocommerce-product-gallery__image img {
  border-radius: var(--op-radius);
  box-shadow: var(--op-shadow-sm);
}
.single-product div.product .woocommerce-product-gallery__trigger {
  border-radius: 999px;
  box-shadow: var(--op-shadow-sm);
}

/* Price -> brand orange, prominent */
.single-product div.product p.price,
.single-product div.product .summary .price,
.single-product div.product p.price ins,
.single-product div.product .summary .price .woocommerce-Price-amount {
  color: var(--op-orange-ink) !important;
  font-family: var(--op-body);
  font-weight: 800;
  font-size: var(--op-step-3);
}
.single-product div.product p.price del,
.single-product div.product .summary .price del {
  color: var(--op-gray) !important;
  font-weight: 600;
  opacity: 0.8;
}

/* Short description */
.single-product div.product .woocommerce-product-details__short-description {
  color: var(--op-charcoal-90);
  font-size: var(--op-step-0);
  line-height: 1.6;
  margin-bottom: var(--op-space-5);
}

/* Quantity input */
.single-product div.product .quantity .qty {
  min-height: 48px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius);
  background: var(--op-white);
  font-family: var(--op-body);
  font-weight: 700;
  color: var(--op-charcoal);
  text-align: center;
}

/* Add to cart button -> brand pill button */
.single-product div.product form.cart .button,
.single-product div.product .single_add_to_cart_button {
  background: var(--op-orange) !important;
  color: var(--op-charcoal) !important;
  font-family: var(--op-body);
  font-weight: 700;
  min-height: 48px;
  padding: 0 var(--op-space-5);
  border: 2px solid transparent;
  border-radius: var(--op-radius-pill);
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.single-product div.product form.cart .button:hover,
.single-product div.product .single_add_to_cart_button:hover {
  transform: translateY(-1px);
  box-shadow: var(--op-shadow-sm);
}

/* Wishlist link */
.single-product div.product .yith-wcwl-add-to-wishlist {
  margin: var(--op-space-4) 0;
}
.single-product div.product .yith-wcwl-add-to-wishlist a {
  color: var(--op-orange-ink);
  font-weight: 600;
  text-decoration: none;
}
.single-product div.product .yith-wcwl-add-to-wishlist a:hover {
  text-decoration: underline;
}

/* Product meta (SKU / categories) */
.single-product div.product .product_meta {
  margin-top: var(--op-space-5);
  padding-top: var(--op-space-4);
  border-top: 1px solid var(--op-line);
  font-size: var(--op-step--1);
  color: var(--op-gray);
  line-height: 1.8;
}
.single-product div.product .product_meta a {
  color: var(--op-orange-ink);
  text-decoration: none;
}
.single-product div.product .product_meta a:hover {
  text-decoration: underline;
}
.single-product div.product .product_meta > span {
  display: block;
}

/* Tabs (Description / Avis) */
.single-product .woocommerce-tabs {
  margin-top: var(--op-space-6);
}
.single-product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--op-space-2);
  border-bottom: 1px solid var(--op-line);
  padding: 0;
  margin: 0 0 var(--op-space-5);
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
  border: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: var(--op-space-3) var(--op-space-4);
  font-family: var(--op-body);
  font-weight: 700;
  color: var(--op-gray);
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--op-charcoal);
  border-bottom-color: var(--op-orange);
}
.single-product .woocommerce-tabs .panel {
  color: var(--op-charcoal-90);
  font-size: var(--op-step-0);
  line-height: 1.7;
}
.single-product .woocommerce-tabs .panel h2 {
  font-family: var(--op-display);
  font-weight: 400;
  color: var(--op-charcoal);
}

/* Related products heading */
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  font-family: var(--op-display);
  font-weight: 400;
  color: var(--op-charcoal);
  margin-bottom: var(--op-space-5);
}

/* Related products cards -> match menu card system */
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
  background: var(--op-white);
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius);
  padding: var(--op-space-3);
  box-shadow: var(--op-shadow-sm);
  overflow: hidden;
}
.single-product .related.products li.product img,
.single-product .upsells.products li.product img {
  border-radius: calc(var(--op-radius) - 4px);
  margin-bottom: var(--op-space-3);
  background: var(--op-light);
}
.single-product .related.products li.product .woocommerce-loop-product__title,
.single-product .upsells.products li.product .woocommerce-loop-product__title {
  font-family: var(--op-display);
  font-weight: 400;
  font-size: var(--op-step-1);
  color: var(--op-charcoal);
  padding: 0;
}
.single-product .related.products li.product .price,
.single-product .upsells.products li.product .price {
  color: var(--op-orange-ink) !important;
  font-weight: 800;
}
.single-product .related.products li.product .price del,
.single-product .upsells.products li.product .price del {
  color: var(--op-gray) !important;
  font-weight: 600;
}
.single-product .related.products li.product .button,
.single-product .upsells.products li.product .button,
.single-product .related.products li.product .add_to_cart_button,
.single-product .upsells.products li.product .add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--op-charcoal) !important;
  color: var(--op-white) !important;
  font-family: var(--op-body);
  font-weight: 700;
  min-height: 44px;
  padding: 0 var(--op-space-4);
  border-radius: var(--op-radius-pill);
  border: 2px solid transparent;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.single-product .related.products li.product .button:hover,
.single-product .upsells.products li.product .button:hover,
.single-product .related.products li.product .add_to_cart_button:hover,
.single-product .upsells.products li.product .add_to_cart_button:hover {
  transform: translateY(-1px);
  box-shadow: var(--op-shadow-sm);
}

/* Softer placeholder image for products without a photo */
.single-product .related.products li.product img[src*="placeholder"],
.single-product .upsells.products li.product img[src*="placeholder"],
.single-product div.product .woocommerce-product-gallery__image img[src*="placeholder"] {
  opacity: 0.45;
  background: var(--op-light);
}

/* onsale badge -> brand orange */
.single-product span.onsale {
  background: var(--op-orange) !important;
  color: var(--op-charcoal) !important;
  border-radius: var(--op-radius-pill);
  font-family: var(--op-body);
  font-weight: 700;
  min-height: auto;
  padding: 4px 12px;
  box-shadow: var(--op-shadow-sm);
}


/* Hero content centering fix (description block) */
.op-hero .op-hero__inner { align-items: center; text-align: center; }
.op-hero .op-hero__inner .op-hero__lede { margin-left: auto; margin-right: auto; text-align: center; }
.op-hero .op-hero__inner .op-hero__cta { justify-content: center; }