:root {
--teal: #1e6b64;
--teal-dark: #143f3c;
--ink: #2a2420;
--gray-text: #6b6058;
--gray-light: #948a80;
--border: #e6dccb;
--terracotta: #a8632c;
--oos: #8a1f1f;
--soon: #1f4a8a;
--new: #1a7a4c;
--card-bg: #fffdfa;
--bg-top: #fbe9d8;
--bg-mid: #f7ede2;
--bg-bot: #eef0e2;
}

* { box-sizing: border-box; }

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: var(--ink);
background: linear-gradient(160deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%);
background-attachment: fixed;
}

h1, h2, h3, .serif { font-family: Georgia, 'Liberation Serif', serif; }

.mono { font-family: 'Courier New', 'Liberation Mono', monospace; }

/* ---------- HEADER ---------- */
.site-header {
background: rgba(255, 253, 250, 0.9);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 20;
}
.site-header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 16px 20px 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.brand-name {
font-family: Georgia, 'Liberation Serif', serif;
font-size: 26px;
font-weight: 700;
color: var(--teal);
}
.brand-name em { font-style: italic; font-weight: 400; color: var(--ink); }
.brand-sub {
display: block;
font-family: Georgia, 'Liberation Serif', serif;
font-style: italic;
font-size: 12.5px;
color: var(--gray-text);
margin-top: 3px;
}

.cart-header-group {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.cart-header-total {
font-family: 'Courier New', 'Liberation Mono', monospace;
font-weight: 700;
font-size: 15px;
color: var(--teal-dark);
background: #eef2ee;
border-radius: 999px;
padding: 7px 12px;
white-space: nowrap;
}
.cart-toggle {
position: relative;
background: var(--teal);
color: #fff;
border: none;
border-radius: 6px;
padding: 10px 14px;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.cart-count {
background: #fff;
color: var(--teal);
font-family: 'Courier New', monospace;
font-weight: 700;
font-size: 12px;
border-radius: 999px;
min-width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}

.search-row {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px 12px;
}
#searchInput {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 14px;
font-family: inherit;
background: #fff;
}
#searchInput:focus { outline: 2px solid var(--teal); outline-offset: -1px; }

.cat-nav {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px 12px;
display: flex;
gap: 8px;
overflow-x: auto;
white-space: nowrap;
}
.cat-nav a {
font-size: 12.5px;
color: var(--ink);
text-decoration: none;
background: #f2ebe0;
border-radius: 999px;
padding: 6px 12px;
flex-shrink: 0;
}
.cat-nav a:hover { background: #e8dcc8; }

.tier-banner {
max-width: 1200px;
margin: 14px auto 0;
padding: 10px 20px;
text-align: center;
font-family: Georgia, 'Liberation Serif', serif;
font-style: italic;
font-size: 13px;
color: var(--teal-dark);
}
.vat-note {
max-width: 1200px;
margin: 2px auto 0;
padding: 0 20px;
text-align: center;
font-size: 11.5px;
color: var(--gray-light);
}

/* ---------- CATALOG ---------- */
#catalog {
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px 80px;
}

.category-block { margin-top: 34px; scroll-margin-top: 150px; }
.category-title {
display: flex;
align-items: baseline;
gap: 10px;
border-bottom: 2px solid var(--terracotta);
padding-bottom: 8px;
margin-bottom: 16px;
}
.category-title h2 { margin: 0; font-size: 22px; color: var(--teal-dark); }
.category-title .desc { color: var(--gray-text); font-size: 12.5px; }

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 16px;
}

.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
transition: box-shadow 0.15s;
}
.card.badge-new {
border-color: var(--new);
box-shadow: 0 0 0 1px var(--new), 0 0 10px rgba(26,122,76,0.3);
}
.card.is-oos .card-img, .card.is-oos .card-body { opacity: 0.55; }
.card.is-oos img { filter: grayscale(1); }

.card-badge-row {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 8px 8px 0;
gap: 6px;
flex-wrap: wrap;
min-height: 14px;
}
.status-badge {
font-family: 'Courier New', monospace;
font-size: 10px;
font-weight: 700;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
letter-spacing: 0.3px;
}
.status-badge.oos { background: var(--oos); }
.status-badge.soon { background: var(--soon); }
.status-badge.new { background: var(--new); }

.card-img {
height: 160px;
margin: 8px 14px 0;
display: flex;
align-items: center;
justify-content: center;
background: #faf6ef;
border: 1px solid #f0e6d6;
border-radius: 6px;
overflow: hidden;
}
.card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.card-body {
padding: 14px;
flex: 1;
display: flex;
flex-direction: column;
}
.card-name {
font-family: Georgia, 'Liberation Serif', serif;
font-weight: 700;
font-size: 15.5px;
line-height: 1.25;
color: var(--teal-dark);
min-height: 2.5em; /* reserves 2 lines so a wrapped title doesn't push this
card's pills/tier row lower than its row-neighbour's */
}
.card-sub {
font-size: 12px; color: var(--gray-text); margin-top: 2px;
line-height: 1.25;
min-height: 1.25em; /* reserves 1 line even when this card has no descriptor --
only takes effect once card-sub is always rendered, see
the app.js change below */
}
.card-tags {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.card-tag {
font-family: 'Courier New', monospace;
font-size: 10.5px;
background: #f2ebe0;
color: #5a5045;
padding: 2px 6px;
border-radius: 3px;
}

/* The product-details / pricing wrapper is the direct flex child of
.card-body (its contents — .unavailable-note or .tier-block — are
nested one level deeper), so this is where "push to the bottom" has
to be set for it to actually take effect across every card. */
[data-cart-control] {
margin-top: auto;
}

.unavailable-note {
padding-top: 10px;
border-top: 1px dashed #ddd0ba;
font-size: 11.5px;
color: var(--gray-light);
font-style: italic;
}

/* ---------- TIER PRICE BUTTONS ---------- */
/* Lines up across a row of cards no matter how many lines the product
name/tags above take up — see the [data-cart-control] rule above. */
.tier-block {
padding-top: 10px;
border-top: 1px dashed #ddd0ba;
}
.tier-row {
display: flex;
gap: 6px;
}
.tier-btn {
flex: 1;
background: #f2ebe0;
border: 1px solid transparent;
border-radius: 6px;
padding: 6px 3px;
text-align: center;
cursor: pointer;
font-family: Arial, sans-serif;
line-height: 1.5;
}
.tier-btn .tier-qty {
font-family: 'Courier New', monospace;
font-size: 10.5px;
color: var(--gray-text);
display: block;
}
.tier-btn .tier-price {
font-family: Georgia, 'Liberation Serif', serif;
font-weight: 700;
font-size: 13.5px;
color: var(--ink);
display: block;
}
.tier-btn:hover { background: #e8dcc8; }
.tier-btn.tier-best {
background: var(--teal);
}
.tier-btn.tier-best .tier-qty { color: #cfe6e1; }
.tier-btn.tier-best .tier-price { color: #fff; }
.tier-btn.tier-best:hover { background: var(--teal-dark); }

/* Currently-selected pack size: keep every tier button visible (so the
customer can still compare prices) and ring the active one instead of
hiding the others. */
.tier-btn.tier-active {
box-shadow: inset 0 0 0 2px var(--teal-dark);
}
.tier-btn.tier-best.tier-active {
box-shadow: inset 0 0 0 2px var(--teal-dark), inset 0 0 0 4px #fff;
}

.qty-panel {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.qty-stepper {
display: flex;
align-items: center;
gap: 10px;
background: #f2ebe0;
border-radius: 6px;
padding: 2px 4px;
}
.qty-stepper button {
background: none;
border: none;
font-size: 16px;
width: 28px;
height: 28px;
cursor: pointer;
color: var(--teal);
font-weight: 700;
}
.qty-stepper .qty-num {
font-family: 'Courier New', monospace;
font-weight: 700;
min-width: 18px;
text-align: center;
}
.qty-price-block {
text-align: right;
line-height: 1.3;
}
.was-price {
font-family: 'Courier New', 'Liberation Mono', monospace;
font-size: 12px;
color: var(--gray-light);
text-decoration: line-through;
margin-right: 5px;
}
.now-price {
font-family: 'Courier New', 'Liberation Mono', monospace;
font-weight: 700;
font-size: 14.5px;
color: var(--terracotta);
}
.save-note {
display: block;
font-size: 10.5px;
font-weight: 700;
color: var(--new);
margin-top: 2px;
}

/* ---------- CART DRAWER ---------- */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(30,20,10,0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
z-index: 30;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 380px;
max-width: 92vw;
background: #fffdfa;
box-shadow: -6px 0 24px rgba(0,0,0,0.15);
transform: translateX(100%);
transition: transform 0.25s ease;
z-index: 31;
display: flex;
flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-drawer-head h2 { margin: 0; font-size: 19px; color: var(--teal-dark); }
.cart-close {
background: none;
border: none;
font-size: 26px;
line-height: 1;
cursor: pointer;
color: var(--gray-text);
}

.cart-items {
flex: 1;
overflow-y: auto;
padding: 10px 20px;
}
.cart-empty {
color: var(--gray-light);
font-size: 14px;
text-align: center;
margin-top: 40px;
}
.cart-line {
display: flex;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid #f0e6d6;
}
.cart-line-img {
width: 46px;
height: 46px;
border: 1px solid #f0e6d6;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #faf6ef;
}
.cart-line-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--teal-dark); }
.cart-line-sub { font-size: 11.5px; color: var(--gray-text); }
.cart-line-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
.cart-line-controls .qty-stepper { transform: scale(0.9); transform-origin: left center; }
.cart-line-price { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; }
.cart-remove {
background: none;
border: none;
color: var(--gray-light);
font-size: 11px;
text-decoration: underline;
cursor: pointer;
padding: 0;
}

.cart-footer {
padding: 16px 20px 20px;
border-top: 1px solid var(--border);
}
.cart-total-row {
display: flex;
justify-content: space-between;
font-size: 17px;
font-weight: 700;
margin-bottom: 8px;
color: var(--teal-dark);
}
.cart-note { font-size: 11.5px; color: var(--gray-light); margin: 0 0 12px; line-height: 1.4; }
.checkout-btn {
width: 100%;
background: #25D366;
color: #fff;
border: none;
border-radius: 6px;
padding: 13px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.checkout-btn:disabled { background: #ccc; cursor: not-allowed; }

/* ---------- FOOTER ---------- */
.site-footer {
text-align: center;
font-size: 12px;
color: var(--gray-text);
padding: 30px 20px 44px;
border-top: 1px solid var(--border);
}
.footer-brand {
font-family: Georgia, 'Liberation Serif', serif;
font-size: 18px;
color: var(--teal);
margin-bottom: 6px;
}
.footer-brand em { font-style: italic; font-weight: 400; color: var(--ink); }
.site-footer div { margin: 3px 0; }

@media (max-width: 640px) {
.brand-name { font-size: 20px; }
.brand-sub { font-size: 11px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.card-img { height: 120px; }
.tier-btn .tier-price { font-size: 12px; }
.cart-header-total { font-size: 12.5px; padding: 6px 9px; }
.cart-toggle { padding: 8px 11px; }
}

/* ================================================================
ROUND 32b -- card-footer clipping fix (qty in cart)
Appended 2026-09-03. Verified root cause (re-confirmed against
this exact, byte-hashed live fetch -- corrects an earlier,
inaccurate claim about white-space:nowrap already being present
on .was-price/.now-price/.save-note above; it is NOT -- see the
round-32b changelog note for the correction):
.qty-panel is display:flex with no flex-wrap set (default:
nowrap). .qty-price-block has no flex/min-width set (default
flex-shrink behavior still won't shrink below its content's
intrinsic width). .card has overflow:hidden. When
.qty-stepper + .qty-price-block's combined natural width
exceeds the available card width, the row overflows its flex
container and .card's overflow:hidden clips the excess --
producing exactly the mid-word clipping SMB reported ("You
sa", "$30.0"). No text-level nowrap needed to be involved.
================================================================ */

.qty-panel{
flex-wrap: wrap;
}

.qty-price-block{
flex: 1 1 100%;
min-width: 0;
text-align: right;
}

/* Defensive only -- no white-space:nowrap was found on these three
selectors in the live CSS above (verified, not just re-asserted).
Kept as a harmless, no-op-today safeguard in case content ever
forces a nowrap context here; does not change current behavior. */
.qty-price-block .was-price,
.qty-price-block .now-price,
.qty-price-block .save-note {
white-space: normal;
overflow-wrap: anywhere;
}

/* ================================================================
ROUND 11 -- "Made With Imported Ingredients" pill, restyled + merged
Appended 2026-09-13. Per SMB's ruling: "shouldn't be highlighted in
yellow, should be similar to the other pills to flow seamlessly."
This ruleset is property-for-property IDENTICAL to .card-tag above
(same font family, size, background, colour, padding, border-radius
-- no border on either, no highlight colour). The class is kept
separate from .card-tag only so this specific pill stays individually
selectable later; it is deliberately NOT styled as a variant. app.js's
cardHtml() now emits this pill as another <span class="card-tag
imported-pill"> INSIDE the same .card-tags flex-wrap row as the size/
origin tags (not a separate row below), which is what actually lets it
"sit in the same row" when there's space, or wrap to its own line when
there isn't -- restyling colour alone, in a separate container, could
never have produced that.
Width-overflow check done the same objective way round 32/32b/32c
required for this exact class of defect (scrollWidth/clientWidth
comparison, not a screenshot) -- simulated at a 199px card content
width (this file's own historical failure point, see the round-32b
block above) using SMB-008-equivalent tags ["500 g","Lebanon"] plus
this pill: .card-tags scrollWidth/clientWidth measured equal (zero
overflow) both when the pill wraps to its own line (199px) and at the
site's normal card widths (230px+/160px mobile floor) -- see this
round's delivery notes for the full measurement output. No clipping
found; .card itself has overflow:hidden but .card-tags's flex-wrap
already prevents the row from ever exceeding its container, so that
clip boundary is never reached by this addition.
================================================================ */

.imported-pill {
font-family: 'Courier New', monospace;
font-size: 10.5px;
background: #f2ebe0;
color: #5a5045;
padding: 2px 6px;
border-radius: 3px;
}

/* ================================================================
ROUND 33 -- mobile tier-price clipping fix (appended 2026-10-16)
Reported by SMB (phone screenshot): in the 2-column mobile grid the
three tier buttons (x1 / x3 / x6) sit side by side inside a card
body only ~125px wide. Two-digit prices ("$13.25", "$12.50") are
wider than their slot, the row overflows, the x6 button runs to the
card edge and .card's overflow:hidden cuts it off; the buttons also
end up unevenly spaced. Fix, mobile (<=640px) only: stack the tiers
as three full-width rows (quantity on the left, price on the right)
so every price has room however many digits it has. Desktop and
tablet layouts above 640px are untouched.
================================================================ */

@media (max-width: 640px) {
.card-body { padding: 10px; }
.tier-row { flex-direction: column; gap: 4px; }
.tier-btn {
display: flex;
justify-content: space-between;
align-items: center;
min-width: 0;
padding: 6px 10px;
}
.tier-btn .tier-qty,
.tier-btn .tier-price { display: inline; }
.tier-btn .tier-price { font-size: 13px; white-space: nowrap; }
}