:root{
  --color-primary: #1F5C40;
  --color-primary-dark: #123A28;
  --color-accent: #7A2230;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F4EE;
  --color-text: #211F1C;
  --color-border: #E4DFD3;
  --page-width: 1320px;
  --grid-spacing: 24px;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', Helvetica, sans-serif;
}

/* =========================================================
   INTERNATIONAL HALAL FOOD — THEME STYLES
   Tokens come from CSS custom properties set inline in
   layout/theme.liquid from the theme editor settings.
========================================================= */

*, *::before, *::after{ box-sizing: border-box; }
html{ 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;
  background: var(--color-bg, #fff);
  color: var(--color-text, #211F1C);
  font-family: var(--font-body, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size: 1rem; }
table{ border-collapse: collapse; width:100%; }

h1,h2,h3,h4{
  font-family: var(--font-heading, serif);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size: 1.2rem; }

.eyebrow{
  display:block;
  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary, #1F5C40);
  margin-bottom: 0.6em;
}

.container{
  max-width: var(--page-width, 1320px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}

.visually-hidden, .skip-to-content{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.skip-to-content:focus{
  position:fixed !important; top:1rem; left:1rem;
  width:auto !important; height:auto !important;
  padding:0.7em 1.2em !important; margin:0 !important;
  background: var(--color-primary); color:#fff; border-radius:4px;
  clip:auto !important; overflow:visible !important; z-index:999;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--color-accent, #7A2230);
  outline-offset: 2px;
}

.main-content{ display:block; }

/* ---------- Generic section wrapper (used by homepage sections) ---------- */
.section{ padding: clamp(3rem,6vw,5rem) 0; }
.section--dark{ background: var(--color-primary-dark); color:#fff; }
.section--dark h1, .section--dark h2, .section--dark .eyebrow{ color:#fff; }
.section-header{ text-align:center; max-width:640px; margin:0 auto 2.5rem; }
.section-header p{ opacity:.75; margin-top:0.5em; }
.section-footer{ text-align:center; margin-top:2.5rem; }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.empty-state{ text-align:center; opacity:.65; padding:2rem 0; grid-column: 1 / -1; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: 0.85em 1.7em; border-radius: 3px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary{ background: var(--color-primary); color:#fff; }
.btn--primary:hover{ background: var(--color-primary-dark); }
.btn--accent{ background: var(--color-accent); color:#fff; }
.btn--accent:hover{ filter: brightness(0.9); }
.btn--maroon{ background: var(--color-accent); color:#fff; }
.btn--maroon:hover{ filter: brightness(0.9); }
.btn--outline{ background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover{ background: var(--color-primary); color:#fff; }
.btn--outline-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.6); }
.btn--outline-light:hover{ background: rgba(255,255,255,0.15); }
.btn--full{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Announcement bar ---------- */
.announcement-bar{ background: var(--color-primary-dark); color:#fff; }
.announcement-bar__inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap: 0.3em 1.3em; padding: 0.3em clamp(1rem,3vw,2.5rem);
  font-size: 0.68rem; text-align:center; line-height:1.3;
}
.announcement-bar__item{ display:flex; align-items:center; gap:.35em; }
.announcement-bar__item svg{ width:11px; height:11px; flex-shrink:0; }

/* ---------- Site header ---------- */
.site-header{ background:#fff; border-bottom: 1px solid var(--color-border); position:sticky; top:0; z-index:40; }
.site-header__inner{ max-width: var(--page-width, 1320px); margin:0 auto; padding: 0.9rem clamp(1rem,3vw,2.5rem); display:flex; align-items:center; gap:1.5rem; }
.site-header__logo{ font-family: var(--font-heading); font-weight:700; font-size:1.3rem; color: var(--color-primary); white-space:nowrap; }
.site-header__logo-text{ color: var(--color-primary); font-family: var(--font-heading); font-weight:700; }
.site-header__nav{ flex:1; }
.site-header__nav > ul{ list-style:none; display:flex; gap:1.8rem; margin:0; padding:0; }
.site-header__nav > ul > li{ position:relative; }
.site-header__nav a{ font-size:0.85rem; font-weight:600; padding:0.3em 0; border-bottom:2px solid transparent; }
.site-header__nav a:hover{ border-color: var(--color-accent); color: var(--color-accent); }
.site-header__submenu{ list-style:none; margin:0; padding:0.5rem 0; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--color-border); border-radius:3px; min-width:180px; display:none; box-shadow:0 12px 24px rgba(0,0,0,.08); z-index:10; }
.site-header__nav > ul > li:hover .site-header__submenu{ display:block; }
.site-header__submenu li a{ display:block; padding:0.5em 1em; border-bottom:none; }
.site-header__actions{ display:flex; align-items:center; gap:1.1rem; }
.site-header__search{ display:flex; align-items:center; border:1.5px solid var(--color-border); border-radius:3px; padding:0.3em 0.6em; }
.site-header__search input{ border:none; outline:none; font-size:0.85rem; width:150px; }
.site-header__search button{ background:none; border:none; display:flex; color: var(--color-primary); }
.site-header__search button svg{ width:18px; height:18px; }
.site-header__account{ display:flex; align-items:center; }
.site-header__account-text{ font-size:0.85rem; font-weight:600; }
.site-header__cart{ position:relative; display:flex; align-items:center; }
.site-header__cart svg{ width:22px; height:22px; }
.site-header__cart-count{
  position:absolute; top:-7px; right:-10px; background: var(--color-accent); color:#fff;
  font-size:0.62rem; font-weight:700; border-radius:50%; min-width:16px; height:16px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.site-header__nav-toggle{ display:none; background:none; border:none; padding:0.25rem; }
.site-header__nav-toggle svg{ width:24px; height:24px; }

@media (max-width: 900px){
  .site-header__nav-toggle{ display:inline-flex; }
  .site-header__nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--color-border); box-shadow:0 12px 24px rgba(0,0,0,.06); }
  .site-header__nav.is-open{ display:block; }
  .site-header__nav > ul{ flex-direction:column; gap:0; }
  .site-header__nav > ul > li > a{ display:block; padding:0.9rem 1.25rem; border-bottom:1px solid var(--color-border); }
  .site-header__submenu{ position:static; display:block; border:none; box-shadow:none; padding-left:1rem; }
  .site-header__search input{ width:100px; }
}

/* ---------- Trust strip (homepage block) ---------- */
.trust-strip{ background: var(--color-bg-alt); border-bottom:1px solid var(--color-border); }
.trust-strip__inner{ max-width: var(--page-width,1320px); margin:0 auto; padding: 1rem clamp(1rem,3vw,2.5rem); display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
.trust-strip__item{ display:flex; align-items:center; gap:0.75rem; }
.trust-strip__item svg{ width:26px; height:26px; color: var(--color-primary); flex-shrink:0; }
.trust-strip__item strong{ display:block; font-size:0.85rem; }
.trust-strip__item span{ font-size:0.78rem; opacity:.7; }
@media (max-width: 900px){ .trust-strip__inner{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Hero ---------- */
.hero{ position:relative; background-size:cover; background-position:center; color:#fff; }
.hero__overlay{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(18,58,40,0.92) 0%, rgba(18,58,40,0.72) 45%, rgba(18,58,40,0.35) 100%); }
.hero__content{ position:relative; z-index:2; max-width: 720px; margin:0 auto; padding: clamp(4rem,10vw,7rem) clamp(1rem,3vw,2.5rem); }
.hero__eyebrow{ color:#cfe3d5; text-transform:uppercase; letter-spacing:.14em; font-size:0.75rem; font-weight:700; margin-bottom:0.8em; }
.hero__heading{ color:#fff; margin-bottom:0.4em; }
.hero__subheading{ font-size:1.05rem; opacity:.92; max-width:48ch; margin-bottom:1.4em; }
.hero__meta{ display:flex; gap:1.5rem; flex-wrap:wrap; font-size:0.85rem; opacity:.9; margin-bottom:1.8em; }
.hero__meta span{ display:flex; align-items:center; gap:0.4em; }
.hero__meta svg{ width:16px; height:16px; }
.hero__actions{ display:flex; gap:0.9rem; flex-wrap:wrap; }

/* ---------- Grid / product / category cards ---------- */
.grid{ display:grid; gap: var(--grid-spacing, 24px); }
.grid--3{ grid-template-columns: repeat(3,1fr); }
@media (max-width:900px){ .grid--3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .grid--3{ grid-template-columns: 1fr; } }

.product-grid, .category-grid, .blog-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: var(--grid-spacing, 24px);
}
@media (max-width:1000px){ .product-grid, .category-grid, .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .product-grid, .category-grid, .blog-grid{ grid-template-columns: repeat(2,1fr); gap:1rem; } }

.product-card{ display:flex; flex-direction:column; }
.product-card__media{ position:relative; display:block; border-radius:3px; overflow:hidden; border:1px solid var(--color-border); aspect-ratio:1/1; background:#fff; }
.product-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.product-card:hover .product-card__media img{ transform: scale(1.04); }
.product-card__info{ padding-top:0.85em; }
.product-card__title{ display:block; font-size:1rem; font-weight:600; margin-bottom:0.25em; }
.product-card__price{ font-size:0.95rem; }

.category-section-anchor{ scroll-margin-top: 90px; }
.category-tile{ position:relative; display:block; border-radius:3px; overflow:hidden; aspect-ratio:4/3; }
.category-tile__media{ position:relative; width:100%; height:100%; }
.category-tile__media img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.category-tile:hover .category-tile__media img{ transform: scale(1.05); }
.category-tile__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(31,92,64,0.12) 0%, rgba(31,92,64,0.22) 55%, rgba(18,58,40,0.62) 100%);
}
.category-tile__title{
  position:absolute; inset:auto 0 0 0; padding: 2.5rem 1.1rem 1rem;
  color:#fff; font-family: var(--font-heading); font-size:1.05rem; z-index:2;
}

.blog-card{ display:block; }
.blog-card__body{ padding-top:0.8em; }
.blog-card__date{ font-size:0.75rem; opacity:.6; text-transform:uppercase; letter-spacing:.05em; }

.badge{ position:absolute; top:0.6rem; left:0.6rem; font-size:0.65rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:0.3em 0.65em; border-radius:3px; color:#fff; }
.badge--sale{ background: var(--color-accent); }
.badge--sold-out{ background:#555; }
.badge--halal{ position:static; display:inline-flex; align-items:center; gap:0.4em; background: var(--color-bg-alt); color: var(--color-primary); }
.badge--halal svg{ width:16px; height:16px; }

.price{ font-weight:600; }
.price--sale{ color: var(--color-accent); margin-right:0.5em; }
.price--compare{ text-decoration: line-through; opacity:.55; font-weight:400; }

/* ---------- Feature banner (green gradient over background photo) ---------- */
.feature-banner{ position:relative; background-size:cover; background-position:center; color:#fff; }
.feature-banner__overlay{
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(31,92,64,0.95) 0%, rgba(31,92,64,0.82) 40%, rgba(31,92,64,0.45) 100%);
}
.feature-banner__inner{ position:relative; z-index:2; max-width:720px; margin:0 auto; padding: clamp(3rem,6vw,5rem) clamp(1rem,3vw,2.5rem); text-align:center; }
.feature-banner__eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:0.72rem; font-weight:700; color:#cfe3d5; margin-bottom:0.7em; }
.feature-banner__heading{ color:#fff; margin-bottom:0.5em; }
.feature-banner__text{ opacity:.92; margin-bottom:1.4em; }
.feature-banner__text p{ margin:0; }

/* ---------- Rich text ---------- */
.rich-text__inner{ max-width:680px; margin:0 auto; padding: clamp(2rem,5vw,3.5rem) clamp(1rem,3vw,2.5rem); }
.rich-text__inner--center{ text-align:center; }
.rich-text__content{ opacity:.85; margin-bottom:1.2em; }

/* ---------- Feature columns (multicolumn) ---------- */
.feature-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--grid-spacing,24px); max-width: var(--page-width,1320px); margin:0 auto; padding: 0 clamp(1rem,3vw,2.5rem); }
@media (max-width:900px){ .feature-cols{ grid-template-columns:1fr; } }
.feature-col{ text-align:center; padding:1.5rem; }
.feature-col svg{ width:36px; height:36px; color: var(--color-primary); margin-bottom:0.9rem; }

/* ---------- Newsletter ---------- */
.newsletter{ background: var(--color-primary-dark); color:#fff; padding: clamp(3rem,6vw,4.5rem) 0; }
.newsletter__inner{ max-width:520px; margin:0 auto; text-align:center; padding:0 clamp(1rem,3vw,2.5rem); }
.newsletter__inner form{ display:flex; gap:0.6rem; margin-top:1.3rem; flex-wrap:wrap; }
.newsletter__inner input[type="email"]{ flex:1; min-width:200px; padding:0.85em 1em; border-radius:3px; border:none; }
.newsletter__success{ margin-top:0.8em; font-size:0.9rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-primary-dark); color:#fff; }
.site-footer__inner{ max-width: var(--page-width,1320px); margin:0 auto; padding: 3.5rem clamp(1rem,3vw,2.5rem) 2rem; display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--grid-spacing,24px); }
.site-footer__col h3{ font-family: var(--font-body); font-size:0.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1em; color:#fff; }
.site-footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55em; }
.site-footer__col a{ opacity:.85; }
.site-footer__col a:hover{ opacity:1; text-decoration:underline; }
.site-footer__logo{ display:inline-flex; margin-bottom:0.8rem; background:#fff; padding:0.5rem; border-radius:6px; }
.site-footer__logo-text, .site-header__logo-text{ font-family: var(--font-heading); font-weight:700; font-size:1.2rem; }
.site-footer__tagline{ opacity:.8; max-width:32ch; margin-bottom:1.2rem; }
.site-footer__socials{ display:flex; gap:0.7rem; }
.site-footer__socials a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.site-footer__socials svg{ width:15px; height:15px; }
.site-footer__line{ display:flex; align-items:center; gap:0.55em; opacity:.9; font-size:0.9rem; margin:0 0 0.7em; }
.site-footer__line svg{ width:16px; height:16px; flex-shrink:0; }
.site-footer__payments li{ display:flex; align-items:center; gap:0.5em; }
.site-footer__payments svg{ width:16px; height:16px; }
.site-footer__bottom{ border-top:1px solid rgba(255,255,255,0.15); max-width: var(--page-width,1320px); margin:0 auto; padding:1.3rem clamp(1rem,3vw,2.5rem); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; font-size:0.78rem; opacity:.75; }
.cert-badge{ background: var(--color-accent); color:#fff; padding:0.3em 0.8em; border-radius:3px; font-weight:600; font-size:0.75rem; }
@media (max-width:900px){ .site-footer__inner{ grid-template-columns: 1fr 1fr; } }

/* ---------- Cart ---------- */
.cart__title{ max-width: var(--page-width,1320px); margin:2.5rem auto 1rem; padding:0 clamp(1rem,3vw,2.5rem); }
.cart{ max-width: var(--page-width,1320px); margin:0 auto; padding:0 clamp(1rem,3vw,2.5rem) 4rem; }
.cart__table th{ text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:.06em; padding-bottom:0.8rem; border-bottom:1px solid var(--color-border); opacity:.7; }
.cart__table td{ padding:1.2rem 0.5rem; border-bottom:1px solid var(--color-border); vertical-align:top; }
.cart__item-info{ display:flex; gap:0.9rem; align-items:flex-start; }
.cart__item-info img{ width:80px; height:80px; object-fit:cover; border-radius:3px; border:1px solid var(--color-border); }
.cart__item-variant{ display:block; font-size:0.82rem; opacity:.65; }
.cart__table input[type="number"]{ width:64px; padding:0.5em; border:1.5px solid var(--color-border); border-radius:3px; text-align:center; }
.cart__summary{ max-width:360px; margin-left:auto; padding-top:1.5rem; text-align:right; }
.cart__subtotal{ font-size:1.15rem; }
.cart__note{ font-size:0.82rem; opacity:.65; margin-top:-0.5em; }
.cart__actions{ display:flex; gap:0.8rem; justify-content:flex-end; margin-top:1rem; }
.cart__empty{ max-width: var(--page-width,1320px); margin:0 auto; padding: 4rem clamp(1rem,3vw,2.5rem); text-align:center; }

/* ---------- Product page ---------- */
.product{ max-width: var(--page-width,1320px); margin:0 auto; padding: clamp(2rem,5vw,3.5rem) clamp(1rem,3vw,2.5rem); display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--grid-spacing,24px); }
@media (max-width:900px){ .product{ grid-template-columns:1fr; } }
.product__media-main{ border-radius:3px; overflow:hidden; border:1px solid var(--color-border); aspect-ratio:1/1; background:#fff; }
.product__media-main img{ width:100%; height:100%; object-fit:cover; }
.product__thumbs{ display:flex; gap:0.6rem; margin-top:0.8rem; flex-wrap:wrap; }
.product__thumb{ background:none; border:1.5px solid var(--color-border); border-radius:3px; padding:0; width:70px; height:70px; overflow:hidden; }
.product__thumb img{ width:100%; height:100%; object-fit:cover; }
.product__title{ margin-bottom:0.3em; }
.product__price{ font-size:1.4rem; margin-bottom:0.8em; }
.product__badges{ margin-bottom:1rem; }
.product__instore-note{ display:flex; align-items:center; gap:0.5em; font-size:0.9rem; font-weight:600; color: var(--color-primary); margin-bottom:1.4rem; }
.product__instore-note svg{ width:17px; height:17px; flex-shrink:0; }
.product__option{ margin-bottom:1.1rem; }
.product__option label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:0.4em; }
.product__option select{ width:100%; padding:0.7em 0.9em; border:1.5px solid var(--color-border); border-radius:3px; background:#fff; }
.product__quantity{ margin-bottom:1.3rem; display:flex; align-items:center; gap:0.8rem; }
.product__quantity label{ font-size:0.82rem; font-weight:600; }
.product__quantity input{ width:70px; padding:0.6em; border:1.5px solid var(--color-border); border-radius:3px; text-align:center; }
.product__description{ margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--color-border); opacity:.9; }
.product__trust{ display:flex; gap:1.3rem; flex-wrap:wrap; margin-top:1.4rem; font-size:0.82rem; opacity:.75; }
.product__trust span{ display:flex; align-items:center; gap:0.4em; }
.product__trust svg{ width:16px; height:16px; }

/* ---------- Collection ---------- */
.collection-banner{ background: var(--color-primary); color:#fff; text-align:center; padding: clamp(2.5rem,5vw,4rem) clamp(1rem,3vw,2.5rem); }
.collection-banner h1{ color:#fff; }
.collection-banner__description{ max-width:640px; margin:0 auto; opacity:.9; }
.collection-toolbar{ max-width: var(--page-width,1320px); margin:0 auto; padding: 1.5rem clamp(1rem,3vw,2.5rem) 0; display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; opacity:.75; }
.collection-toolbar__sort{ display:flex; align-items:center; gap:0.5em; }
.collection-toolbar__sort select{ padding:0.4em 0.6em; border:1.5px solid var(--color-border); border-radius:3px; }
.product-grid{ max-width: var(--page-width,1320px); margin:0 auto; padding: 1.5rem clamp(1rem,3vw,2.5rem) 4rem; }
.category-grid{ max-width: var(--page-width,1320px); margin:0 auto; padding: 1.5rem clamp(1rem,3vw,2.5rem) 4rem; }
.blog-grid{ max-width: var(--page-width,1320px); margin:0 auto; padding: 1.5rem clamp(1rem,3vw,2.5rem) 4rem; }

.pagination{ grid-column: 1/-1; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:2rem; font-size:0.85rem; }
.pagination a{ text-decoration:underline; }
.pagination__current{ font-weight:700; }

/* ---------- Search ---------- */
.search-results{ max-width: var(--page-width,1320px); margin:0 auto; padding: 2.5rem clamp(1rem,3vw,2.5rem) 4rem; }
.search-results__form{ display:flex; gap:0.6rem; max-width:480px; margin-bottom:2rem; }
.search-results__form input{ flex:1; padding:0.75em 1em; border:1.5px solid var(--color-border); border-radius:3px; }
.search-results__count{ opacity:.7; margin-bottom:1.5rem; }
.search-results__other{ display:block; padding:1rem; border:1px solid var(--color-border); border-radius:3px; }

/* ---------- Article / blog ---------- */
.article{ max-width:760px; margin:0 auto; padding: clamp(2rem,5vw,3.5rem) clamp(1rem,3vw,2.5rem); }
.article__image{ border-radius:3px; margin-bottom:1.5rem; width:100%; }
.article__meta{ opacity:.65; font-size:0.85rem; }
.article__content{ margin-top:1.5rem; }
.article__content > * + *{ margin-top:1em; }
.article__comments{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--color-border); }
.comment{ padding:1rem 0; border-bottom:1px solid var(--color-border); }
.comment__author{ font-weight:700; margin:0 0 0.4em; }
.article__comments form{ display:flex; flex-direction:column; gap:0.8rem; margin-top:1.5rem; }
.article__comments input, .article__comments textarea{ padding:0.75em 1em; border:1.5px solid var(--color-border); border-radius:3px; }

/* ---------- Page / 404 ---------- */
.page{ max-width:760px; margin:0 auto; padding: clamp(2rem,5vw,3.5rem) clamp(1rem,3vw,2.5rem); }
.page__content > * + *{ margin-top:1em; }
.not-found{ max-width:520px; margin:0 auto; padding: clamp(4rem,8vw,6rem) clamp(1rem,3vw,2.5rem); text-align:center; }
.not-found h1{ font-size:4rem; color: var(--color-primary); }

/* ---------- Customer account pages ---------- */
.account-layout{ display:grid; grid-template-columns:220px 1fr; gap: var(--grid-spacing,24px); }
@media (max-width:800px){ .account-layout{ grid-template-columns:1fr; } }
.account-nav a{ display:block; padding:0.5em 0; font-size:0.9rem; }
.breadcrumbs{ font-size:0.8rem; opacity:.65; margin-bottom:1.5rem; display:block; }
.form-field{ margin-bottom:1.1rem; text-align:left; }
.form-field label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:0.4em; }
.form-field input, .form-field textarea{ width:100%; padding:0.75em 0.9em; border:1.5px solid var(--color-border); border-radius:3px; background:#fff; }
.form-errors{ background:#fbe9e9; border:1px solid var(--color-accent); color: var(--color-accent); padding:1rem; border-radius:3px; margin-bottom:1.2rem; font-size:0.9rem; }

/* ---------- Customer order / account tables (distinct markup from main cart) ---------- */
.cart-table{ width:100%; border-collapse:collapse; margin-top:1.5rem; }
.cart-table th{ text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:.06em; padding-bottom:0.8rem; border-bottom:1px solid var(--color-border); opacity:.7; }
.cart-table td{ padding:1rem 0.5rem; border-bottom:1px solid var(--color-border); }
.cart-summary{ max-width:360px; margin-left:auto; padding-top:1.5rem; }
.cart-summary__row{ display:flex; justify-content:space-between; padding:0.4rem 0; font-size:1rem; }
.cart-summary__row:last-child{ font-weight:700; font-size:1.15rem; border-top:1px solid var(--color-border); margin-top:0.4rem; padding-top:0.8rem; }