/* ==========================================================================
   components.css — reusable pieces used across pages
   Glass materials, buttons, the order ticket, chips, photo frames, service
   cards, product cards, quantity stepper, form fields, panels, testimonials,
   process steps, CTA band, gallery, empty states, toasts, footer.
   ========================================================================== */

/* ---------- Glass materials ----------
   Used sparingly: over photography, on dark-green sections, for summaries.
   Body copy never sits directly on raw photography — it sits on one of these. */
.sk-glass,
.sk-glass--dark,
.sk-glass--tint {
  backdrop-filter: var(--sk-glass-blur);
  -webkit-backdrop-filter: var(--sk-glass-blur);
  border: 1px solid var(--sk-glass-light-border);
}
.sk-glass { background: var(--sk-glass-light); box-shadow: var(--sk-glass-highlight), var(--sk-glass-shadow); color: var(--sk-ink); }
.sk-glass--dark {
  background: var(--sk-glass-dark); border-color: var(--sk-glass-dark-border);
  box-shadow: var(--sk-glass-highlight-dark), 0 24px 60px rgba(0, 0, 0, .22); color: var(--sk-rice);
}
.sk-glass--tint {
  background: var(--sk-glass-tint); border-color: rgba(255, 255, 255, .22);
  box-shadow: var(--sk-glass-highlight-dark); color: #fff;
}
/* Browsers without backdrop-filter get a more solid fill so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sk-glass { background: rgba(252, 251, 246, .95); }
  .sk-glass--dark { background: rgba(3, 50, 26, .92); }
  .sk-glass--tint { background: rgba(7, 87, 34, .9); }
}

/* ---------- Buttons ---------- */
.sk-btn {
  --btn-bg: linear-gradient(180deg, #0B6A2C 0%, var(--sk-green) 55%, #064C1E 100%);
  --btn-fg: #fff; --btn-border: transparent;
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 20px -8px rgba(7, 87, 34, .55);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.6rem;
  font-family: var(--sk-font-body); font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: .005em;
  color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-border);
  border-radius: var(--sk-radius-pill); text-decoration: none; cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: transform var(--sk-fast) var(--sk-ease), box-shadow var(--sk-medium) var(--sk-ease),
              background-color var(--sk-fast), color var(--sk-fast), border-color var(--sk-fast);
  -webkit-tap-highlight-color: transparent;
}
.sk-btn:hover {
  color: var(--btn-fg); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 28px -10px rgba(7, 87, 34, .6);
}
.sk-btn:active { transform: translateY(0) scale(.985); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); }
.sk-btn[disabled], .sk-btn.is-disabled { opacity: .5; pointer-events: none; }
.sk-btn i { font-size: 1.05em; }

/* Outlined: secondary action on light backgrounds */
.sk-btn--ghost {
  --btn-bg: rgba(255, 255, 255, .35); --btn-fg: var(--sk-green); --btn-border: rgba(7, 87, 34, .3);
  --btn-shadow: none;
}
.sk-btn--ghost:hover { --btn-bg: var(--sk-green); --btn-fg: #fff; --btn-border: var(--sk-green); }

/* Glass: secondary action over photography or tinted sections */
.sk-btn--glass {
  --btn-bg: rgba(255, 255, 255, .55); --btn-fg: var(--sk-forest); --btn-border: rgba(255, 255, 255, .75);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 24px -10px rgba(3, 50, 26, .35);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.sk-btn--glass:hover { --btn-bg: rgba(255, 255, 255, .85); }

/* Dark glass: secondary action on dark green / dark photo overlays */
.sk-btn--outline-light,
.sk-btn--glass-dark {
  --btn-bg: rgba(255, 255, 255, .08); --btn-fg: var(--sk-rice); --btn-border: rgba(255, 255, 255, .3);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sk-btn--outline-light:hover,
.sk-btn--glass-dark:hover { --btn-bg: var(--sk-rice); --btn-fg: var(--sk-forest); --btn-border: var(--sk-rice); }

.sk-btn--light { --btn-bg: var(--sk-rice); --btn-fg: var(--sk-forest); --btn-border: var(--sk-rice); --btn-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3); }
.sk-btn--gold {
  --btn-bg: linear-gradient(180deg, #F2BC57 0%, var(--sk-gold) 60%, #D4952A 100%);
  --btn-fg: var(--sk-forest); --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(232, 169, 58, .7);
}
.sk-btn--whatsapp { --btn-bg: linear-gradient(180deg, #25A35A, #1F8F4E); --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -8px rgba(31, 143, 78, .55); }
.sk-btn--sm { min-height: 44px; padding: .55rem 1.15rem; font-size: .9375rem; }
.sk-btn--block { width: 100%; }
.sk-btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

.sk-link {
  font-weight: 700; text-decoration: none; color: var(--sk-green);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size var(--sk-medium) var(--sk-ease);
}
.sk-link:hover { background-size: 100% 2px; }

/* ---------- The order ticket (signature element) ----------
   A kitchen order chit with a punched top edge. In glass over food on the
   homepage; solid paper for the cart summary and confirmations. */
.sk-ticket {
  --ticket-bg: var(--sk-white);
  --notch: 7px;
  position: relative;
  background: var(--ticket-bg);
  color: var(--sk-ink);
  border-radius: 4px 4px var(--sk-radius-md) var(--sk-radius-md);
  padding: 1.6rem 1.4rem 1.4rem;
  -webkit-mask: radial-gradient(circle var(--notch) at 50% 0, #0000 97%, #000 100%) 0 0 / calc(var(--notch) * 3) 100% repeat-x;
          mask: radial-gradient(circle var(--notch) at 50% 0, #0000 97%, #000 100%) 0 0 / calc(var(--notch) * 3) 100% repeat-x;
}
/* mask clips box-shadow, so solid tickets carry their shadow on a wrapper */
.sk-ticket-shadow { filter: drop-shadow(0 12px 26px rgba(3, 50, 26, .16)); }
.sk-ticket--glass {
  --ticket-bg: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(252, 251, 246, .66));
  backdrop-filter: var(--sk-glass-blur); -webkit-backdrop-filter: var(--sk-glass-blur);
}
.sk-ticket--glass-dark {
  --ticket-bg: linear-gradient(160deg, rgba(7, 87, 34, .9), rgba(3, 50, 26, .84));
  color: var(--sk-rice);
  backdrop-filter: var(--sk-glass-blur); -webkit-backdrop-filter: var(--sk-glass-blur);
}
.sk-ticket--panel { padding: 1.9rem 1.6rem 1.6rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.sk-ticket__rule { border: 0; border-top: 2px dashed var(--sk-line); margin: 1rem 0; opacity: 1; }
.sk-ticket__kind { font-size: var(--sk-text-xs); font-weight: 700; color: var(--sk-green); letter-spacing: .02em; }

/* ---------- Chips ---------- */
.sk-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .85rem; border-radius: var(--sk-radius-pill);
  font-size: var(--sk-text-xs); font-weight: 700; line-height: 1.2;
  background: var(--sk-okra-soft); color: var(--sk-green);
}
.sk-chip--gold { background: var(--sk-gold-soft); color: #7A4F05; }
.sk-chip--forest { background: rgba(252, 251, 246, .12); color: var(--sk-rice); }
.sk-chip--muted { background: #ECEAE2; color: var(--sk-ink-2); }
.sk-chip--sample { background: #FFF4D6; color: #7A4F05; border: 1px dashed #D9A93A; }
/* chips that sit on photographs */
.sk-chip--glass {
  background: rgba(255, 255, 255, .72); color: var(--sk-forest); border: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 4px 14px rgba(3, 50, 26, .12);
}
.sk-chip--glass-dark {
  background: rgba(3, 50, 26, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* The Food Bowl notice — presented as a kitchen timer, not a warning */
.sk-notice {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; border-radius: var(--sk-radius-md);
  background: var(--sk-gold-soft); color: var(--sk-ink);
  border: 1px solid rgba(232, 169, 58, .35);
}
.sk-notice__icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sk-gold); color: var(--sk-forest); font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.sk-notice strong { display: block; font-family: var(--sk-font-display); font-weight: 400; font-size: 1.15rem; }
.sk-notice p { margin: 0; font-size: var(--sk-text-sm); color: var(--sk-ink-2); }
.sk-notice--muted { background: #ECEAE2; border-color: transparent; }
.sk-notice--muted .sk-notice__icon { background: #D6D3C8; color: var(--sk-ink-2); }

/* ---------- Photo frames ---------- */
.sk-photo { position: relative; overflow: hidden; border-radius: var(--sk-radius-xl); background: var(--sk-calabash); isolation: isolate; }
.sk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-photo img.is-illustration { object-fit: contain; padding: 8%; background: var(--sk-calabash-soft); }
.sk-photo--shadow { box-shadow: var(--sk-shadow-photo); }
/* gradient shade so overlaid text reads on any photo */
.sk-photo--shade::after { content: ""; position: absolute; inset: 0; background: var(--sk-photo-shade); pointer-events: none; }
.sk-photo--zoom img { transition: transform 1100ms var(--sk-ease); }
.sk-photo--zoom:hover img, a:hover .sk-photo--zoom img { transform: scale(1.045); }
.sk-photo__label { position: absolute; z-index: 2; }

/* ---------- Service cards ----------
   Three services, three personalities:
   catering  — full-bleed event photo, dark glass panel
   homemade  — warm photo with a light glass panel lifting off it
   bowls     — overhead bowl in a round frame on sage, tinted glass notice */
.sk-services { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 1.25rem; }
.sk-svc {
  position: relative; display: flex; text-decoration: none; color: inherit; isolation: isolate;
  border-radius: var(--sk-radius-xl); overflow: hidden; min-height: 260px;
  transition: transform var(--sk-medium) var(--sk-ease), box-shadow var(--sk-medium) var(--sk-ease);
}
.sk-svc:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-photo); color: inherit; }
.sk-svc__photo { position: absolute; inset: 0; z-index: -1; }
.sk-svc__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--sk-ease); }
.sk-svc:hover .sk-svc__photo img { transform: scale(1.05); }
.sk-svc__panel { border-radius: var(--sk-radius-lg); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); display: flex; flex-direction: column; gap: .65rem; }
.sk-svc__panel h3 { margin: 0; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.95rem); }
.sk-svc__panel p { margin: 0; font-size: var(--sk-text-sm); }
.sk-svc__cta { margin-top: .5rem; }

.sk-svc--catering { grid-column: span 7; grid-row: span 2; min-height: clamp(440px, calc(var(--sk-screen) - 6rem), 580px); align-items: flex-end; padding: clamp(1rem, .6rem + 1.5vw, 1.75rem); background: var(--sk-forest); color: var(--sk-rice); }
.sk-svc--catering .sk-svc__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 30, 15, .05) 30%, rgba(3, 30, 15, .7) 100%); }
.sk-svc--catering .sk-svc__panel { max-width: 30rem; }
.sk-svc--catering .sk-svc__panel p { color: rgba(252, 251, 246, .85); }

.sk-svc--homemade { grid-column: span 5; flex-direction: column; background: var(--sk-calabash); min-height: 0; }
.sk-svc--homemade .sk-svc__photo { position: relative; inset: auto; height: clamp(130px, 20vh, 200px); z-index: 0; }
.sk-svc--homemade .sk-svc__panel { position: relative; z-index: 1; margin: -3.5rem 1rem 1rem; }
.sk-svc--homemade .sk-svc__panel p { color: var(--sk-ink-2); }

.sk-svc--bowls { grid-column: span 5; background: radial-gradient(120% 100% at 100% 0%, #D3E6C8 0%, var(--sk-okra-soft) 55%); align-items: center; gap: 1rem; padding: 1.25rem; min-height: 0; }
.sk-svc--bowls .sk-svc__photo { position: relative; inset: auto; z-index: 0; flex: 0 0 min(42%, 26vh); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 18px 40px -14px rgba(3, 50, 26, .45); border: 6px solid rgba(255, 255, 255, .7); }
.sk-svc--bowls .sk-svc__panel { padding: .5rem; }
.sk-svc--bowls .sk-svc__panel p { color: var(--sk-ink-2); }

/* ---------- Product cards ---------- */
.sk-product {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: rgba(255, 255, 255, .78); border-radius: var(--sk-radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 2px rgba(3, 50, 26, .05), 0 10px 30px -18px rgba(3, 50, 26, .3);
  transition: transform var(--sk-medium) var(--sk-ease), box-shadow var(--sk-medium) var(--sk-ease);
}
.sk-product:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(3, 50, 26, .05), 0 26px 50px -24px rgba(3, 50, 26, .45); }
.sk-product__media { position: relative; display: block; aspect-ratio: 5 / 4; background: var(--sk-calabash-soft); overflow: hidden; margin: .5rem .5rem 0; border-radius: calc(var(--sk-radius-lg) - 6px); }
.sk-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--sk-ease); }
.sk-product__media img.is-illustration { object-fit: contain; padding: 10%; }
.sk-product:hover .sk-product__media img { transform: scale(1.05); }
.sk-product__media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(3, 30, 15, .18)); opacity: .6; transition: opacity var(--sk-medium); pointer-events: none; }
.sk-product:hover .sk-product__media::after { opacity: 1; }
.sk-product__badges { position: absolute; top: .75rem; left: .75rem; right: .75rem; display: flex; gap: .4rem; flex-wrap: wrap; z-index: 1; }
.sk-product__body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.sk-product__title { font-size: 1.35rem; margin: 0; }
.sk-product__title a { color: inherit; text-decoration: none; }
.sk-product__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* whole card clickable */
.sk-product__title a:hover { color: var(--sk-green); }
.sk-product__desc { margin: 0; color: var(--sk-ink-2); font-size: var(--sk-text-sm); }
.sk-product__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .25rem; }
.sk-price { font-family: var(--sk-font-display); font-size: 1.45rem; color: var(--sk-green); }
.sk-product__portion { font-size: var(--sk-text-xs); color: var(--sk-ink-3); }
.sk-product__actions { position: relative; z-index: 1; display: flex; gap: .6rem; align-items: center; margin-top: auto; padding-top: .9rem; }
.sk-product__actions .sk-btn { flex: 1; }
.sk-product:hover .sk-product__actions .sk-btn:not(.sk-btn--ghost) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 24px -10px rgba(7, 87, 34, .7); }
.sk-product.is-unavailable .sk-product__media img { filter: grayscale(.85); opacity: .7; }

/* ---------- Quantity stepper ---------- */
.sk-qty {
  display: inline-flex; align-items: center; height: 46px;
  border: 1.5px solid var(--sk-line); border-radius: var(--sk-radius-pill); background: rgba(255, 255, 255, .9);
}
.sk-qty button {
  width: 42px; height: 100%; border: 0; background: transparent; color: var(--sk-green);
  font-size: 1.15rem; border-radius: var(--sk-radius-pill); cursor: pointer;
}
.sk-qty button:hover { background: var(--sk-okra-soft); }
.sk-qty input {
  width: 2.4rem; border: 0; text-align: center; font-weight: 700; background: transparent;
  -moz-appearance: textfield; appearance: textfield;
}
.sk-qty input::-webkit-outer-spin-button, .sk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Panels (checkout cards, forms) ---------- */
.sk-panel {
  border-radius: var(--sk-radius-lg); padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--sk-glass-highlight), 0 1px 2px rgba(3, 50, 26, .04), 0 18px 44px -26px rgba(3, 50, 26, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* A soft, warm backdrop so glass panels have something to sit on */
.sk-backdrop {
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(169, 199, 154, .38), transparent 60%),
    radial-gradient(800px 500px at 100% 30%, rgba(239, 228, 204, .9), transparent 60%),
    radial-gradient(600px 400px at 60% 100%, rgba(232, 169, 58, .10), transparent 70%),
    var(--sk-rice);
}

/* ---------- Forms ---------- */
.sk-field { margin-bottom: 1.15rem; }
.sk-field label, .sk-label { display: block; font-weight: 700; font-size: var(--sk-text-sm); margin-bottom: .4rem; }
.sk-field .form-control, .sk-field .form-select {
  min-height: 52px; padding: .75rem 1rem; font-size: 1rem;
  border: 1.5px solid var(--sk-line); border-radius: var(--sk-radius-sm); background-color: rgba(255, 255, 255, .92);
  transition: border-color var(--sk-fast), box-shadow var(--sk-fast);
}
.sk-field textarea.form-control { min-height: 0; }
.sk-field .form-control:focus, .sk-field .form-select:focus {
  border-color: var(--sk-green); box-shadow: 0 0 0 4px rgba(7, 87, 34, .12); background-color: #fff;
}
.sk-field .form-text { color: var(--sk-ink-3); font-size: var(--sk-text-xs); margin-top: .35rem; }
.sk-field .invalid-feedback { font-size: var(--sk-text-sm); font-weight: 600; color: var(--sk-danger); }
.sk-field .is-invalid { border-color: var(--sk-danger) !important; }
.sk-field.has-error .invalid-feedback { display: block; }
.sk-radio-group { display: flex; gap: .75rem; flex-wrap: wrap; }
.sk-radio-group label {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .7rem 1rem; background: #fff;
  border: 1.5px solid var(--sk-line); border-radius: var(--sk-radius-pill); cursor: pointer; font-weight: 600;
}
.sk-radio-group input { accent-color: var(--sk-green); }
.sk-radio-group label:has(input:checked) { border-color: var(--sk-green); background: var(--sk-okra-soft); }
.sk-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.sk-form-alert {
  border-radius: var(--sk-radius-sm); padding: .9rem 1rem; margin-bottom: 1.25rem;
  background: var(--sk-danger-soft); color: var(--sk-danger); font-weight: 600; font-size: var(--sk-text-sm);
}

/* ---------- Custom pickers (static/js/pickers.js) ----------
   Replace the browser's date, time, number and select controls.
   The original control stays in the form, visually hidden. */
.sk-native-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important;
  opacity: 0; pointer-events: none;
}
.sk-field input[type="number"]::-webkit-outer-spin-button,
.sk-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sk-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.sk-pick {
  display: grid; gap: .75rem; padding: 1rem; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(252, 251, 246, .8));
  border: 1px solid rgba(23, 35, 27, .08);
  box-shadow: var(--sk-glass-highlight), 0 10px 30px -22px rgba(3, 50, 26, .35);
}
.sk-pick__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sk-pick__label { font-size: var(--sk-text-xs); font-weight: 700; color: var(--sk-ink-3); }
.sk-pick__more {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: var(--sk-radius-pill);
  border: 1px solid rgba(7, 87, 34, .2); background: rgba(255, 255, 255, .7); color: var(--sk-green);
  font-size: var(--sk-text-xs); font-weight: 700; cursor: pointer; transition: background var(--sk-fast), border-color var(--sk-fast);
}
.sk-pick__more:hover, .sk-pick__more.is-open { background: var(--sk-okra-soft); border-color: rgba(7, 87, 34, .35); }

/* shared "selected" look for every pressable option */
.sk-day[aria-pressed="true"], .sk-slot[aria-pressed="true"], .sk-hour[aria-pressed="true"],
.sk-cal__day[aria-pressed="true"], .sk-choice[aria-checked="true"] {
  background: linear-gradient(180deg, #0B6A2C, var(--sk-green)); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 20px -10px rgba(7, 87, 34, .7);
}

/* Day strip */
.sk-days {
  display: flex; gap: .55rem; overflow-x: auto; padding: 4px 2px 10px; margin: -4px -2px -6px;
  scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent);
}
.sk-days::-webkit-scrollbar { display: none; }
.sk-day {
  flex: 0 0 auto; width: 72px; padding: .65rem 0 .6rem; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  border-radius: 18px; border: 1.5px solid var(--sk-line); background: #fff; color: var(--sk-ink); cursor: pointer;
  transition: transform var(--sk-fast) var(--sk-ease), border-color var(--sk-fast), box-shadow var(--sk-medium);
}
.sk-day:hover:not([disabled]) { border-color: var(--sk-green); transform: translateY(-2px); }
.sk-day__name { font-size: .72rem; font-weight: 700; opacity: .7; }
.sk-day__num { font-family: var(--sk-font-display); font-size: 1.65rem; line-height: 1.05; }
.sk-day__month { font-size: .72rem; opacity: .7; }
.sk-day[disabled] { opacity: .35; cursor: not-allowed; background: transparent; }

/* Time slots */
.sk-slots { display: grid; gap: .9rem; }
.sk-slots__group { display: grid; gap: .45rem; }
.sk-slots__name { display: flex; align-items: center; gap: .4rem; font-size: var(--sk-text-xs); font-weight: 700; color: var(--sk-ink-2); }
.sk-slots__name i { color: var(--sk-gold); }
.sk-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .45rem; }
.sk-slot {
  height: 44px; border-radius: var(--sk-radius-pill); border: 1.5px solid var(--sk-line); background: #fff;
  font-size: .9rem; font-weight: 600; color: var(--sk-ink); cursor: pointer;
  transition: border-color var(--sk-fast), background var(--sk-fast), transform var(--sk-fast);
}
.sk-slot:hover:not([disabled]) { border-color: var(--sk-green); color: var(--sk-green); }
.sk-slot[disabled] { opacity: .32; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(23, 35, 27, .35); }
.sk-slots__empty { margin: 0; padding: 1rem; border-radius: 14px; border: 1.5px dashed var(--sk-line); color: var(--sk-ink-3); font-size: var(--sk-text-sm); text-align: center; }

/* Month calendar */
.sk-pick__cal { padding: .25rem 0 .25rem; }
.sk-cal { display: grid; gap: .5rem; }
.sk-cal__head { display: flex; align-items: center; justify-content: space-between; }
.sk-cal__title { font-size: 1.2rem; margin: 0; }
.sk-cal__navs { display: flex; gap: .35rem; }
.sk-cal__nav {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sk-line); background: #fff; color: var(--sk-ink);
  display: grid; place-items: center; cursor: pointer; transition: background var(--sk-fast), border-color var(--sk-fast);
}
.sk-cal__nav:hover:not([disabled]) { background: var(--sk-okra-soft); border-color: rgba(7, 87, 34, .3); }
.sk-cal__nav[disabled] { opacity: .3; cursor: default; }
.sk-cal__weekdays, .sk-cal__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.sk-cal__weekdays span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--sk-ink-3); padding: .25rem 0; }
.sk-cal__grid { display: grid; gap: .25rem; }
.sk-cal__row > span { display: grid; place-items: center; }
.sk-cal__day {
  width: 100%; max-width: 46px; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid transparent; background: transparent;
  font-weight: 600; font-size: .95rem; color: var(--sk-ink); cursor: pointer; transition: background var(--sk-fast), border-color var(--sk-fast);
}
.sk-cal__day:hover:not([aria-disabled]) { background: var(--sk-okra-soft); }
.sk-cal__day.is-today:not([aria-pressed="true"]) { border-color: var(--sk-gold); }
.sk-cal__day[aria-disabled="true"] { color: var(--sk-ink-3); opacity: .35; cursor: not-allowed; }

/* Hour strip + minute segments */
.sk-hours { display: flex; gap: .45rem; overflow-x: auto; padding: 4px 2px 10px; margin: -4px -2px -6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.sk-hours::-webkit-scrollbar { display: none; }
.sk-hour {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 16px; border: 1.5px solid var(--sk-line); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; cursor: pointer;
  scroll-snap-align: start; color: var(--sk-ink); transition: border-color var(--sk-fast);
}
.sk-hour span { font-family: var(--sk-font-display); font-size: 1.3rem; }
.sk-hour small { font-size: .68rem; font-weight: 700; opacity: .7; margin-top: .2rem; }
.sk-hour:hover { border-color: var(--sk-green); }
.sk-segment { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--sk-radius-pill); background: #ECEAE2; justify-self: start; }
.sk-segment__btn { min-width: 64px; height: 40px; border: 0; border-radius: var(--sk-radius-pill); background: transparent; font-weight: 700; color: var(--sk-ink-2); cursor: pointer; transition: background var(--sk-fast), color var(--sk-fast); }
.sk-segment__btn[aria-pressed="true"] { background: #fff; color: var(--sk-green); box-shadow: 0 2px 8px rgba(3, 50, 26, .15); }
.sk-segment__btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Summary line */
.sk-pick__summary {
  display: flex; align-items: center; gap: .55rem; margin: 0; padding: .7rem .9rem; border-radius: 14px;
  background: rgba(23, 35, 27, .04); color: var(--sk-ink-2); font-size: var(--sk-text-sm); font-weight: 600;
}
.sk-pick__summary.is-done { background: var(--sk-okra-soft); color: var(--sk-green); }

/* Choice chips (replace <select>) */
.sk-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.sk-choice {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .55rem 1rem;
  border-radius: var(--sk-radius-pill); border: 1.5px solid var(--sk-line); background: #fff; color: var(--sk-ink);
  font-weight: 600; font-size: .92rem; cursor: pointer; transition: border-color var(--sk-fast), background var(--sk-fast), color var(--sk-fast);
}
.sk-choice i { width: 0; overflow: hidden; transition: width var(--sk-fast); }
.sk-choice[aria-checked="true"] i { width: 1em; }
.sk-choice:hover:not([aria-checked="true"]) { border-color: var(--sk-green); color: var(--sk-green); }

/* Number stepper */
.sk-stepper { display: flex; align-items: center; gap: .5rem; }
.sk-stepper .form-control { text-align: center; font-weight: 700; font-size: 1.1rem; max-width: 140px; }
.sk-stepper__btn {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--sk-line); background: #fff;
  color: var(--sk-green); font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; transition: background var(--sk-fast);
}
.sk-stepper__btn:hover { background: var(--sk-okra-soft); }

/* errors */
.sk-field.has-error .sk-pick, .sk-field.has-error .sk-choices { outline: 1.5px solid var(--sk-danger); outline-offset: 4px; border-radius: 20px; }

/* ---------- Testimonials ---------- */
.sk-quote {
  height: 100%; padding: 2rem; border-radius: var(--sk-radius-lg); display: flex; flex-direction: column; gap: 1.25rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .52));
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: var(--sk-glass-highlight), 0 16px 40px -24px rgba(3, 50, 26, .3);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.sk-quote blockquote { margin: 0; font-family: var(--sk-font-display); font-size: 1.25rem; line-height: 1.4; }
.sk-quote figcaption { display: flex; align-items: center; gap: .8rem; margin-top: auto; font-size: var(--sk-text-sm); }
.sk-quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sk-quote__stars { color: var(--sk-gold); letter-spacing: 2px; }
.sk-surface-forest .sk-quote { background: var(--sk-glass-dark); border-color: var(--sk-glass-dark-border); box-shadow: var(--sk-glass-highlight-dark); color: var(--sk-rice); }

/* ---------- Process steps (a real sequence, so numbered) ---------- */
.sk-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; counter-reset: step; }
.sk-steps--row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sk-step {
  position: relative; padding: 1.4rem 1.5rem 1.4rem 4.5rem; border-radius: var(--sk-radius-md); counter-increment: step;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--sk-glass-highlight);
}
.sk-step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 1.4rem; top: 1.3rem;
  font-family: var(--sk-font-display); font-size: 1.6rem; color: var(--sk-green); line-height: 1;
}
.sk-step h3 { font-size: 1.25rem; margin: 0 0 .35rem; }
.sk-step p { margin: 0; color: var(--sk-ink-2); font-size: var(--sk-text-sm); }
.sk-surface-forest .sk-step { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: var(--sk-glass-highlight-dark); }
.sk-surface-forest .sk-step::before { color: var(--sk-gold); }
.sk-surface-forest .sk-step p { color: rgba(252, 251, 246, .78); }

/* ---------- Inner page heroes ---------- */
.sk-page-hero { padding-top: calc(var(--sk-nav-h) + clamp(1.25rem, 4vh, 3rem)); padding-bottom: clamp(2rem, 5vh, 4rem); position: relative; overflow: hidden; }
.sk-page-hero h1 { max-width: 14ch; }
.sk-page-hero .sk-lead { margin-top: 1.25rem; }
.sk-page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.sk-page-hero--plain { padding-bottom: 2rem; }
.sk-breadcrumb { font-size: var(--sk-text-sm); margin-bottom: 1.5rem; color: var(--sk-ink-3); }
.sk-breadcrumb a { color: inherit; }

/* Layered photo composition used by inner heroes: big photo + small overlapping photo + glass label */
.sk-stack { position: relative; padding: 0 0 7% 0; max-width: calc((var(--sk-screen) - 8.5rem) * .95); margin-left: auto; }
.sk-stack__main { aspect-ratio: 4 / 5; max-height: calc(var(--sk-screen) - 8.5rem); }
.sk-stack__main--wide { aspect-ratio: 5 / 4; }
.sk-stack__small {
  position: absolute; left: -8%; bottom: 0; width: 46%; aspect-ratio: 1;
  border-radius: var(--sk-radius-lg); border: 6px solid var(--sk-rice);
}
.sk-stack__small--round { border-radius: 50%; }
.sk-stack__label { right: 1.25rem; top: 1.25rem; }

/* The pan arc — a thin curved line echoing the logo's pan rim */
.sk-arc { position: absolute; pointer-events: none; z-index: 0; }
.sk-arc path { fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Soft blurred organic shapes behind sections */
.sk-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.sk-blob--green { background: #BFD9B1; }
.sk-blob--gold { background: #F6D79A; opacity: .35; }

/* ---------- CTA band: dark green over food photography, glass panel on top ---------- */
.sk-cta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--sk-radius-xl);
  padding: clamp(1.25rem, .5rem + 2.4vw, 2.75rem); min-height: clamp(340px, 58vh, 440px); display: flex; align-items: center;
  background: var(--sk-forest); color: var(--sk-rice);
}
.sk-cta__photo { position: absolute; inset: 0; z-index: -2; }
.sk-cta__photo img { width: 100%; height: 110%; object-fit: cover; }
.sk-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(3, 50, 26, .92) 0%, rgba(3, 50, 26, .7) 40%, rgba(3, 50, 26, .15) 100%); }
.sk-cta__panel { max-width: 38rem; border-radius: var(--sk-radius-lg); padding: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); }
.sk-cta h2 { max-width: 16ch; margin: 0; }
.sk-cta .sk-lead { color: rgba(252, 251, 246, .85); }
.sk-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------- Editorial gallery ----------
   Twelve-column mosaic with a repeating rhythm of large / tall / wide / small
   tiles; one tile overlaps its neighbour; glass captions on a few. */
.sk-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(70px, min(7vw, 9.5vh), 112px); gap: 12px; }
.sk-gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--sk-radius-lg); background: var(--sk-calabash); }
.sk-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--sk-ease); }
.sk-gallery figure:hover img { transform: scale(1.04); }
.sk-gallery figure:nth-child(8n+1) { grid-column: 1 / span 5; grid-row: span 4; }
.sk-gallery figure:nth-child(8n+2) { grid-column: 6 / span 4; grid-row: span 2; }
.sk-gallery figure:nth-child(8n+3) { grid-column: 10 / span 3; grid-row: span 3; }
.sk-gallery figure:nth-child(8n+4) { grid-column: 6 / span 4; grid-row: span 3; }
.sk-gallery figure:nth-child(8n+5) { grid-column: 10 / span 3; grid-row: span 2; }
.sk-gallery figure:nth-child(8n+6) { grid-column: 1 / span 4; grid-row: span 3; }
.sk-gallery figure:nth-child(8n+7) { grid-column: 5 / span 3; grid-row: span 3; z-index: 1; margin-left: -28px; margin-top: -28px; border: 6px solid var(--sk-rice); border-radius: calc(var(--sk-radius-lg) + 6px); box-shadow: var(--sk-shadow-lg); }
.sk-gallery figure:nth-child(8n) { grid-column: 8 / span 5; grid-row: span 3; }
.sk-gallery figcaption {
  position: absolute; left: .9rem; bottom: .9rem; max-width: calc(100% - 1.8rem);
  padding: .55rem .9rem; border-radius: var(--sk-radius-pill);
  font-family: var(--sk-font-display); font-size: 1rem; line-height: 1.2;
  background: rgba(255, 255, 255, .7); color: var(--sk-forest); border: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* ---------- Empty and status states ---------- */
.sk-state { text-align: center; max-width: 34rem; margin-inline: auto; padding-block: 3rem; }
.sk-state__icon {
  width: 96px; height: 96px; margin: 0 auto 1.5rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2.4rem; background: var(--sk-okra-soft); color: var(--sk-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 30px -14px rgba(7, 87, 34, .45);
}
.sk-state__icon--warn { background: var(--sk-gold-soft); color: #7A4F05; }
.sk-state__icon--error { background: var(--sk-danger-soft); color: var(--sk-danger); }
.sk-state p { margin-inline: auto; }
.sk-state__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- Toasts ---------- */
.sk-toasts { position: fixed; z-index: 1090; right: 1rem; top: calc(var(--sk-nav-h) + .5rem); display: grid; gap: .5rem; width: min(380px, calc(100vw - 2rem)); }
.sk-toast {
  display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--sk-radius-md);
  background: rgba(3, 50, 26, .9); color: var(--sk-rice); font-size: var(--sk-text-sm);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--sk-glass-highlight-dark), var(--sk-shadow-lg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: sk-toast-in var(--sk-medium) var(--sk-ease);
}
.sk-toast--error { background: rgba(179, 38, 30, .94); }
.sk-toast--info, .sk-toast--warning { background: rgba(23, 35, 27, .92); }
.sk-toast__close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .7; font-size: 1.1rem; line-height: 1; }
.sk-toast a { color: var(--sk-gold); font-weight: 700; }
.sk-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: all var(--sk-medium) var(--sk-ease); }
@keyframes sk-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Contact action pair (call + WhatsApp) */
.sk-contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Footer ---------- */
.sk-footer {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0 1.5rem; margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  border-radius: var(--sk-radius-xl) var(--sk-radius-xl) 0 0;
  background: radial-gradient(700px 400px at 90% 0%, rgba(11, 106, 44, .55), transparent 70%), var(--sk-forest);
}
.sk-footer__title { font-family: var(--sk-font-body); font-size: var(--sk-text-sm); font-weight: 700; color: var(--sk-okra); margin-bottom: 1rem; }
.sk-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sk-footer__links a { color: var(--sk-rice) !important; text-decoration: none; }
.sk-footer__links a:hover { color: var(--sk-gold) !important; }
.sk-footer__links i { margin-right: .4rem; color: var(--sk-okra); }
.sk-footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.sk-footer__social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--sk-rice) !important; }
.sk-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(252, 251, 246, .12); font-size: var(--sk-text-sm); }
.sk-footer__bottom p { margin: 0; color: rgba(252, 251, 246, .65); }

/* ---------- Photo credits ---------- */
.sk-credits { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .75rem; max-width: 52rem; }
.sk-credits li { padding: .9rem 1.1rem; border-radius: var(--sk-radius-md); background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9); }
.sk-credits li a:first-child { font-weight: 600; color: var(--sk-ink); }

/* Inner-page heroes that start under the nav: rounded only at the bottom */
.sk-inset--hero { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Footer motto */
.sk-footer__motto { margin: .9rem 0 0; font-family: var(--sk-font-display); font-size: 1.15rem; color: var(--sk-gold); letter-spacing: .01em; }