/* Storefront: a deep green masthead over a white category strip, white content with
   tinted sections, and a deep green footer. */

/* Keyboard focus on dark green areas uses gold, which stands out there. */
.masthead :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .store-banner :focus-visible,
.promo:focus-visible, body.plain :focus-visible { outline-color: var(--gold); }

/* ---- Masthead: brand, delivery country, language, search and account ---- */
.masthead {
  color: #fff;
  background:
    radial-gradient(640px 220px at 0% 0%, rgba(95, 168, 130, .22), transparent 70%),
    radial-gradient(560px 240px at 100% 100%, rgba(94, 63, 133, .30), transparent 70%),
    var(--green-900);
}
.masthead-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand sell deliver" "brand search actions"; align-items: center; gap: 12px 26px; padding-block: 14px 16px; }
.brand-logo { grid-area: brand; display: block; line-height: 0; border-radius: 8px; }
.brand-logo img { display: block; width: auto; height: 104px; }
.side-pill { grid-area: sell; justify-self: start; }
.side-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; }
.side-pill .ic { color: var(--amethyst-soft); }
.side-pill:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Dropdowns (<details>): work without JavaScript; app.js closes them on a click elsewhere */
.drop { position: relative; }
.drop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary .ic-sm { transition: transform .15s; }
.drop[open] > summary .ic-sm { transform: rotate(180deg); }
.drop-panel { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; min-width: 250px; padding: 8px; border-radius: 14px; background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.drop-panel::before { content: ""; position: absolute; top: -7px; right: 24px; width: 12px; height: 12px; background: var(--white); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.drop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); font-weight: 700; }
.drop-head a { font-weight: 700; }
.drop-menu form { margin: 0; }
.drop-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 15.5px var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.drop-link .ic { color: var(--green-600); }
.drop-link .ic-sm { margin-left: auto; color: var(--muted); }
.drop-link:hover { background: var(--green-50); color: var(--green-800); }

.masthead-tools { grid-area: deliver; justify-self: end; display: flex; align-items: center; gap: 8px 22px; }
.deliver > summary { padding: 6px 4px; font-size: 15px; color: #fff; }
.deliver > summary .ic { color: var(--gold); }
.deliver-label { color: rgba(255, 255, 255, .72); }
.deliver-text strong { color: var(--gold-soft); }
.deliver > summary:hover .deliver-text strong { text-decoration: underline; }
.deliver-panel { width: 320px; padding: 16px; }
.deliver-panel label { display: block; margin-bottom: 8px; }
.deliver-row { display: flex; gap: 8px; }
.deliver-row select { min-height: 38px; padding: 6px 10px; }
.deliver-panel .help { margin-top: 10px; }

/* Language: the name on wide screens, the code (EN, FR) on phones */
.lang > summary { padding: 6px 4px; font-size: 15px; font-weight: 600; color: #fff; }
.lang > summary .ic { color: var(--gold); }
.lang > summary:hover .lang-name, .lang > summary:hover .lang-code { text-decoration: underline; }
.lang-code { display: none; }
.lang-panel { min-width: 230px; }
.lang-panel .drop-link[aria-current] { background: var(--green-50); color: var(--green-800); }
.lang-panel .drop-link[aria-current] .ic-sm { color: var(--green-600); }
.lang-note { margin: 6px 12px 8px; }

.site-search { grid-area: search; display: flex; align-items: center; min-height: 52px; border-radius: 12px; background: var(--white); border: 2px solid transparent; box-shadow: 0 10px 26px rgba(0, 0, 0, .18); transition: border-color .15s; }
.site-search:focus-within { border-color: var(--gold); }
.site-search button { flex: none; display: grid; place-items: center; width: 54px; height: 48px; border: 0; background: none; color: var(--green-700); cursor: pointer; }
.site-search button .ic { width: 23px; height: 23px; }
.site-search button:hover { color: var(--green-900); }
.site-search input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px 0 0; border: 0; background: transparent; font: 400 17px var(--font-body); color: var(--ink); }
.site-search input:focus { outline: none; box-shadow: none; }
.site-search input::placeholder { color: var(--muted); }
.site-search { position: relative; }
/* Suggestions as you type (app.js): products, then stores, then "See all results" */
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.suggest-head { padding: 8px 10px 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.suggest-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.suggest-item:hover, .suggest-item.is-active, .suggest-all:hover, .suggest-all.is-active { background: var(--green-50); color: var(--ink); }
.suggest-pic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 9px; background: var(--green-50); color: var(--green-900); font: 800 17px var(--font-display); }
.suggest-pic-store { border-radius: 50%; background: linear-gradient(145deg, var(--gold-soft), var(--gold)); }
.suggest-pic img { width: 100%; height: 100%; object-fit: cover; }
.suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.suggest-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-price { flex: none; font-weight: 700; color: var(--green-900); }
.suggest-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; font-weight: 700; color: var(--green-700); text-decoration: none; }
.suggest-none { margin: 0; padding: 12px 10px; color: var(--muted); }

.header-actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }
.header-actions > .drop > summary, .cart-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 16.5px; text-decoration: none; }
.header-actions > .drop > summary:hover, .header-actions > .drop[open] > summary, .cart-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.header-actions .ic { width: 23px; height: 23px; }
.header-actions .ic-sm { width: 15px; height: 15px; }
.drop-panel .ic { width: 18px; height: 18px; }
.drop-panel .ic-sm { width: 14px; height: 14px; }
.more-icon { display: none; }
.cart-icon { position: relative; display: inline-flex; }
.cart-count { position: absolute; top: -8px; right: -10px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--green-950); font-size: 11.5px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--green-900); }
.deliver-form { display: grid; gap: 6px; }
.deliver-form label { margin: 4px 0 0; }
.deliver-form select { min-height: 40px; padding: 6px 10px; }
.deliver-form .btn { justify-self: start; margin-top: 8px; }

/* Category strip: illustrated icons over names, the current one underlined. A long name (in some
   languages) wraps onto two lines. */
.cat-nav { background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 8px 20px rgba(6, 35, 26, .05); }
.cat-row { display: flex; justify-content: space-between; gap: 2px; overflow-x: auto; padding-top: 10px; scrollbar-width: none; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-link { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 88px; padding: 2px 6px 12px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14.5px; text-align: center; }
.cat-link span { max-width: 10em; line-height: 1.25; text-wrap: balance; }
.cat-link img { width: 46px; height: 46px; transition: transform .2s; }
.cat-link:hover { color: var(--green-700); }
.cat-link:hover img { transform: translateY(-2px) scale(1.05); }
.cat-link[aria-current] { color: var(--green-900); font-weight: 700; }
.cat-link[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--green-700); }

@media (max-width: 900px) {
  .masthead-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "search search" "deliver deliver"; gap: 10px 8px; padding-block: 10px 12px; }
  .side-pill { display: none; }
  .brand-logo img { height: 64px; }
  .masthead-tools { justify-self: stretch; justify-content: space-between; }
  .deliver > summary, .lang > summary { font-size: 14px; padding: 0; }
  .lang-name { display: none; }
  .lang-code { display: inline; }
  .deliver .drop-panel { right: auto; left: 0; }
  .deliver .drop-panel::before { right: auto; left: 24px; }
  .action-label { display: none; }
  .more-icon { display: inline-flex; }
  .header-actions > .drop > summary, .cart-link { padding: 8px; gap: 4px; }
  .header-actions > .drop > summary .ic-sm { display: none; }
  .site-search { min-height: 46px; }
  .site-search input { min-height: 42px; font-size: 16px; }
  .cat-row { justify-content: flex-start; padding-top: 8px; }
  .cat-link { min-width: 84px; font-size: 13px; padding-inline: 6px; }
  .cat-link img { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .deliver-panel { width: calc(100vw - 32px); }
}

.site-main { min-height: 60vh; padding-bottom: 48px; }
.flash-wrap { padding-top: 16px; }

/* ---- Home: banner carousel (about two banners at a time, scroll-snapped) ---- */
.promos { padding-top: 22px; }
.promos-wrap { position: relative; }
.promo-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 2.3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 20px; }
.promo-track::-webkit-scrollbar { display: none; }
.promo { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 260px; padding: 28px 22px 28px 30px; border-radius: 20px; overflow: hidden; text-decoration: none; scroll-snap-align: start; isolation: isolate; }
.promo::after { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.promo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 60%; }
.promo-eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.promo-title { font: 800 clamp(1.35rem, 2.1vw, 1.85rem)/1.12 var(--font-display); letter-spacing: -.01em; }
.promo-sub { font-size: 15.5px; opacity: .88; }
.promo-price { margin-top: 4px; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 15px; }
.promo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 800; font-size: 15.5px; }
.promo-cta .ic-sm { transition: transform .2s; }
.promo:hover .promo-cta .ic-sm { transform: translateX(3px); }
.promo-art { position: relative; flex: none; display: grid; place-items: center; width: 180px; height: 180px; }
.promo-art::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%); }
.promo-art img { position: relative; width: 168px; height: 168px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .22)); transition: transform .3s; }
.promo:hover .promo-art img { transform: translateY(-4px) scale(1.03); }
.promo-art-3 img { position: absolute; width: 104px; height: 104px; }
.promo-art-3 img:nth-child(1) { left: -8px; top: 18px; }
.promo-art-3 img:nth-child(2) { right: -8px; top: 6px; }
.promo-art-3 img:nth-child(3) { left: 40px; bottom: -4px; width: 112px; height: 112px; }
.promo-forest { color: #fff; background: radial-gradient(360px 240px at 85% 50%, rgba(95, 168, 130, .5), transparent 65%), linear-gradient(135deg, var(--green-800), var(--green-950)); }
.promo-forest .promo-eyebrow { color: var(--gold-soft); }
.promo-forest .promo-cta { color: var(--gold); }
.promo-amethyst { color: #fff; background: radial-gradient(360px 240px at 85% 50%, rgba(201, 182, 228, .45), transparent 65%), linear-gradient(135deg, #573A80, #2B1C45); }
.promo-amethyst .promo-eyebrow { color: var(--amethyst-soft); }
.promo-amethyst .promo-cta { color: var(--gold-soft); }
.promo-gold { color: var(--green-950); background: radial-gradient(360px 240px at 85% 50%, rgba(255, 255, 255, .65), transparent 65%), linear-gradient(135deg, #F7E2A8, var(--gold)); }
.promo-gold .promo-eyebrow { color: var(--gold-ink); }
.promo-gold .promo-price { background: var(--green-900); color: #fff; }
.promo-gold .promo-cta { color: var(--green-800); }
.promo-leaf { color: #fff; background: radial-gradient(360px 240px at 85% 50%, rgba(243, 214, 140, .35), transparent 65%), linear-gradient(135deg, var(--green-600), var(--green-800)); }
.promo-leaf .promo-eyebrow, .promo-leaf .promo-cta { color: var(--gold-soft); }
.promo-forest .promo-price, .promo-amethyst .promo-price, .promo-leaf .promo-price { background: var(--gold); color: var(--green-950); }
.promo-nav { position: absolute; top: calc(50% - 38px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--white); color: var(--green-900); box-shadow: var(--shadow); cursor: pointer; }
.promo-nav .ic { width: 22px; height: 22px; }
.promo-nav:hover { color: var(--green-600); }
.promo-nav:disabled { opacity: 0; pointer-events: none; }
.promo-prev { left: 6px; }
.promo-next { right: 6px; }
.promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.promo-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: width .2s, background .2s; }
.promo-dots button[aria-current="true"] { width: 28px; background: var(--green-700); }
@media (max-width: 900px) {
  .promo-track { grid-auto-columns: 88%; gap: 12px; }
  .promo { min-height: 210px; padding: 20px 14px 20px 20px; }
  .promo-text { max-width: 64%; }
  .promo-art { width: 116px; height: 116px; }
  .promo-art img { width: 108px; height: 108px; }
  .promo-art-3 img { width: 66px; height: 66px; }
  .promo-art-3 img:nth-child(3) { left: 24px; width: 72px; height: 72px; }
  .promo-nav { display: none; }
}

.section { padding-top: 36px; }
.section-title { font-size: 1.55rem; margin-bottom: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.section-head a { font-weight: 600; }

/* Top picks: photo with the store's name, a price bar, then the product name */
.picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pick { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.pick-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 18px 18px 0 0; background: var(--green-50); }
.pick-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pick:hover .pick-img img { transform: scale(1.04); }
.pick-store { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); max-width: 84%; padding: 8px 16px 6px; border-radius: 12px 12px 0 0; background: var(--white); color: var(--green-900); font: 800 15px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-tag { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 6px; background: var(--gold); color: var(--green-950); font-size: 12px; font-weight: 800; }
.pick-bar { display: block; padding: 9px 12px; border-radius: 0 0 18px 18px; background: linear-gradient(90deg, var(--green-800), var(--green-600)); color: #fff; font: 800 19px var(--font-display); text-align: center; }
.pick-name { display: block; margin-top: 8px; font-size: 16.5px; text-align: center; }
.pick:hover .pick-name { color: var(--green-700); }
@media (max-width: 900px) {
  .picks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .picks li { scroll-snap-align: start; }
}

/* Shop by category: illustrated icons on soft tinted discs */
.cat-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.cat-icon { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; padding: 18px 12px 20px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); color: var(--ink); text-align: center; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.cat-icon:hover { border-color: #CFE3D6; box-shadow: var(--shadow); transform: translateY(-3px); color: var(--ink); }
.cat-icon-art { display: grid; place-items: center; width: 116px; height: 116px; margin-bottom: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--white) 30%, var(--green-100) 100%); }
.cat-icons li:nth-child(3n+2) .cat-icon-art { background: radial-gradient(circle at 50% 38%, var(--white) 30%, #F8E9C2 100%); }
.cat-icons li:nth-child(3n) .cat-icon-art { background: radial-gradient(circle at 50% 38%, var(--white) 30%, #E7DBF5 100%); }
.cat-icon-art img { width: 92px; height: 92px; transition: transform .25s; }
.cat-icon:hover .cat-icon-art img { transform: translateY(-4px) scale(1.05); }
.cat-icon-name { font: 700 16px/1.25 var(--font-display); color: var(--green-950); }
.cat-icon-meta { font-size: 13.5px; color: var(--muted); }
@media (max-width: 560px) {
  .cat-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-icon-art { width: 96px; height: 96px; }
  .cat-icon-art img { width: 76px; height: 76px; }
}

/* Shelves: a tinted band holding a white tray of four products */
.shelf { padding: 18px; border-radius: 22px; }
.shelf-amethyst { background: linear-gradient(180deg, #E3D4F3 0, #E3D4F3 100px, #F3EDFA 100px); }
.shelf-gold { background: linear-gradient(180deg, #F5E1A9 0, #F5E1A9 100px, #FBF4DF 100px); }
.shelf-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 2px 4px 14px; }
.shelf-head h2 { margin: 0; font-size: 1.45rem; color: var(--green-950); }
.shelf-head p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); }
.shelf-more { flex: none; display: grid; place-items: center; width: 46px; height: 34px; border-radius: 999px; background: var(--green-950); color: #fff; }
.shelf-more:hover { background: var(--green-700); color: #fff; }
.shelf-grid { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); }
.shelf-card { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.shelf-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--green-50); }
.shelf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.shelf-card:hover .shelf-img img { transform: scale(1.04); }
.shelf-card:hover .shelf-name { color: var(--green-700); }
.shelf-name { margin-top: 8px; font-size: 15.5px; }
.shelf-price { font-size: 16px; color: var(--green-900); }
.shelf-price s { margin-left: 6px; font-weight: 400; font-size: 14px; color: var(--muted); }
.shelf-all .shelf-img { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, var(--white) 20%, var(--green-100) 100%); }
.shelf-amethyst .shelf-all .shelf-img { background: radial-gradient(circle at 50% 42%, var(--white) 20%, #E7DBF5 100%); }
.shelf-gold .shelf-all .shelf-img { background: radial-gradient(circle at 50% 42%, var(--white) 20%, #F8E9C2 100%); }
.shelf-all .shelf-img img { width: 46%; height: auto; transition: transform .3s; }
.shelf-all:hover .shelf-img img { transform: translateY(-4px) scale(1.05); }
.shelf-all .shelf-price { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); }
@media (max-width: 760px) { .shelf { padding: 14px; } .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; } }

/* Quality banner */
.trust-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 26px 34px; border-radius: 22px; border: 1px solid #D5E7DB;
  background:
    radial-gradient(560px 240px at 0% 0%, rgba(243, 214, 140, .5), transparent 60%),
    radial-gradient(520px 260px at 100% 100%, rgba(201, 182, 228, .5), transparent 60%),
    linear-gradient(135deg, var(--green-50), var(--white));
}
.trust-art { width: 132px; height: 132px; }
.trust-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amethyst); }
.trust-copy h2 { margin: 0 0 14px; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--green-950); }
.trust-steps { list-style: none; counter-reset: step; display: inline-flex; margin: 0; padding: 6px; border-radius: 999px; background: var(--green-900); }
.trust-steps li { counter-increment: step; display: flex; align-items: center; gap: 8px; padding: 7px 16px; color: #fff; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.trust-steps li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.trust-steps li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--green-950); font-size: 12.5px; font-weight: 800; }
@media (max-width: 1000px) {
  .trust-banner { grid-template-columns: auto minmax(0, 1fr); padding: 22px; }
  .trust-cta { grid-column: 1 / -1; justify-self: start; }
  .trust-steps { flex-direction: column; border-radius: 16px; }
  .trust-steps li { white-space: normal; }
  .trust-steps li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .15); }
}
@media (max-width: 560px) { .trust-banner { grid-template-columns: minmax(0, 1fr); } .trust-art { width: 84px; height: 84px; } }

/* Stores in the spotlight */
.spotlight { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.spot { display: flex; flex-direction: column; color: var(--ink); text-align: center; text-decoration: none; }
.spot-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px 18px 0 0; background: radial-gradient(300px 200px at 80% 100%, rgba(94, 63, 133, .45), transparent 70%), linear-gradient(135deg, var(--green-800), var(--green-950)); }
.spot-img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.spot:hover .spot-img > img { transform: scale(1.04); }
.spot-logo { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border: 3px solid var(--white); border-radius: 14px; background: linear-gradient(145deg, var(--gold-soft), var(--gold)); color: var(--green-950); font: 800 22px var(--font-display); box-shadow: var(--shadow); }
.spot-logo img { width: 100%; height: 100%; object-fit: cover; }
.spot-bar { display: block; padding: 9px; border-radius: 0 0 18px 18px; background: linear-gradient(90deg, #4A3170, var(--amethyst)); color: #fff; font: 800 18px var(--font-display); }
.spot-name { margin-top: 8px; font: 700 17px var(--font-display); color: var(--green-950); }
.spot:hover .spot-name { color: var(--green-700); }
.spot-meta { font-size: 14px; color: var(--muted); }
.search-stores { margin-bottom: 28px; }
.spotlight-compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.spotlight-compact .spot-img { aspect-ratio: 16 / 8; }

/* ---- Cart and checkout: items on the left, a sticky price summary on the right ---- */
.cart-title { margin-bottom: 18px; font-size: 1.9rem; }
.cart-title .muted { font: 400 1.05rem var(--font-body); }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.cart-summary { position: sticky; top: 16px; }
.summary-card { padding: 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.summary-card h2 { margin-bottom: 12px; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.summary-card .help { margin: -4px 0 14px; }
.summary-trust { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.summary-trust .ic { color: var(--green-600); margin-top: 2px; }
.checkout-accept { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.problem-list { margin: 4px 0 0; padding-left: 18px; }
.cart-group { margin-bottom: 16px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); overflow: hidden; }
.cart-group-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 12px 18px; background: var(--green-50); border-bottom: 1px solid var(--line); }
.cart-group-head a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-900); text-decoration: none; }
.cart-group-head a:hover { text-decoration: underline; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 18px; }
.cart-line + .cart-line { border-top: 1px solid var(--line); }
.cart-line.is-problem { background: #FFFBF3; }
.cart-thumb { display: block; width: 96px; height: 96px; overflow: hidden; border-radius: 12px; background: var(--green-50); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cart-name { font-weight: 700; font-size: 16.5px; color: var(--ink); text-decoration: none; }
.cart-name:hover { color: var(--green-700); }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cart-actions form { margin: 0; }
.qty-form { display: flex; gap: 6px; }
.qty-form select { width: auto; min-height: 36px; padding: 4px 10px; font-weight: 600; }
.cart-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.cart-price strong { font: 800 18px var(--font-display); color: var(--green-900); }
.checkout-step { margin-bottom: 16px; padding: 20px 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.checkout-step h2 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.step-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-900); color: var(--gold); font-size: 15px; font-weight: 800; }
.step-foot { margin: 12px 0 0; font-weight: 600; }
.address-choice { display: grid; gap: 10px; }
.choice.is-muted { opacity: .7; }
.choice .pill { margin-top: 4px; }
.parcel-box { margin-top: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--green-50); }
.parcel-box-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.parcel-box-head strong { display: inline-flex; align-items: center; gap: 8px; color: var(--green-900); }
.parcel-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.parcel-lines li { display: flex; justify-content: space-between; gap: 12px; }
.courier-choice { margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); display: grid; gap: 8px; min-width: 0; }
.courier-choice legend { padding: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--green-900); float: left; width: 100%; margin-bottom: 2px; }
.courier-option { align-items: center; padding: 10px 12px; }
.courier-option .courier-name { flex: 1; min-width: 0; }
.courier-option .courier-name strong { display: inline; }
.courier-option .courier-name .small { display: block; }
.courier-price { color: var(--green-900); white-space: nowrap; }
.courier-form + .notice { margin-top: 14px; }
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; }
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-thumb { width: 72px; height: 72px; }
  .cart-price { grid-column: 2; align-items: flex-start; }
}

/* Product page buying */
.price-note { margin: -2px 0 6px; font-size: 14px; color: var(--muted); }
.add-to-cart { display: flex; gap: 8px; margin: 0; }
.add-to-cart select { width: auto; min-height: 44px; font-weight: 600; }
.in-cart { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-weight: 600; color: var(--green-700); }

/* The local stand-in for Paystack's page */
.auth-test-pay .auth-head { background: radial-gradient(420px 180px at 100% 0%, rgba(231, 184, 75, .35), transparent 70%), linear-gradient(150deg, #0C5C8C, #07324D); }
.test-pay-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Empty cart */
.empty-state { max-width: 560px; margin: 20px auto 0; padding: 34px 28px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); text-align: center; box-shadow: var(--shadow-sm); }
.empty-state img { width: 140px; height: 140px; }
.empty-state h1 { margin: 10px 0 6px; font-size: 1.7rem; }
.empty-state p { color: var(--muted); }
.empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Selling page hero: deep green with a leafy glow and a faint amethyst blush */
.hero {
  position: relative; overflow: hidden; color: #fff; padding: 60px 0 68px;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(95, 168, 130, .32), transparent 62%),
    radial-gradient(700px 380px at 95% 110%, rgba(94, 63, 133, .30), transparent 60%),
    linear-gradient(160deg, var(--green-900), var(--green-950));
}
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .55; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: center; }
.eyebrow { font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--amethyst); margin-bottom: 10px; }
.hero .eyebrow { color: var(--amethyst-soft); }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 19ch; color: #fff; }
.hero h1 .hl { color: var(--gold); }
.hero-lede { font-size: 18px; color: rgba(255, 255, 255, .8); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero .btn-primary { background: var(--gold); color: var(--green-950); box-shadow: 0 8px 22px rgba(231, 184, 75, .25); }
.hero .btn-primary:hover { background: var(--gold-soft); color: var(--green-950); }
.hero .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero .btn-secondary:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.listing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.listing-head h1 { margin-bottom: 4px; }
.listing-head p { margin: 0; }
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form select { width: auto; min-height: 40px; }

.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
.gallery-main { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: var(--green-50); border: 1px solid var(--line); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumbs a { display: block; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; }
.gallery-thumbs a[aria-current="true"] { border-color: var(--green-700); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-vendor { display: inline-flex; gap: 6px; align-items: center; color: var(--amethyst); font-weight: 600; text-decoration: none; margin-bottom: 8px; }
.product-size { color: var(--muted); font-size: 17px; margin-top: -4px; }
.product-price { display: flex; gap: 12px; align-items: baseline; margin: 10px 0 4px; }
.product-price strong { font-size: 30px; font-family: var(--font-display); color: var(--green-900); }
.product-price s { color: var(--muted); }
.stock { font-weight: 700; font-size: 14.5px; }
.stock-in { color: var(--green-600); }
.stock-out { color: var(--danger); }
.quality-box { margin: 18px 0; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--green-50), var(--white)); border: 1px solid #CFE3D6; box-shadow: inset 4px 0 0 var(--green-700); }
.quality-box p { margin: 0; font-size: 15px; }
.quality-box .quality-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 17px; font-weight: 800; color: var(--green-900); }
.quality-title .ic { color: var(--green-700); }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.product-actions form { margin: 0; }
.product-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.product-details section { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.product-details h2 { color: var(--green-900); }
.product-details p { margin: 0; }
.product-details .warning-box { background: var(--gold-tint); border-color: #EDD9A0; }
.warning-box h2 { display: flex; gap: 8px; align-items: center; }
.warning-box h2 .ic { color: var(--gold-ink); }
@media (max-width: 860px) { .product-grid, .product-details { grid-template-columns: minmax(0, 1fr); } }
.product-rating { display: inline-flex; align-items: center; gap: 7px; margin: -2px 0 10px; color: var(--ink); text-decoration: none; }
.product-rating:hover strong { text-decoration: underline; }

/* Reviews under a product */
.reviews { scroll-margin-top: 90px; }
.reviews-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }
.reviews-side { display: flex; flex-direction: column; gap: 18px; }
.rating-summary, .review-write { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.review-write { scroll-margin-top: 90px; }
.review-write:empty { display: none; }
.review-write h3 { margin-bottom: 12px; }
.rating-big { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; color: var(--muted); }
.rating-big strong { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--green-950); }
.rating-summary .muted { margin: 8px 0 14px; }
.rating-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.rating-bars li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 3em; align-items: center; gap: 10px; }
.rating-bars-share { text-align: right; color: var(--muted); }
.bar { display: block; height: 8px; border-radius: 999px; background: var(--green-50); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--star); }
.bar-fill.w5 { width: 5%; } .bar-fill.w10 { width: 10%; } .bar-fill.w15 { width: 15%; } .bar-fill.w20 { width: 20%; } .bar-fill.w25 { width: 25%; } .bar-fill.w30 { width: 30%; } .bar-fill.w35 { width: 35%; } .bar-fill.w40 { width: 40%; } .bar-fill.w45 { width: 45%; } .bar-fill.w50 { width: 50%; } .bar-fill.w55 { width: 55%; } .bar-fill.w60 { width: 60%; } .bar-fill.w65 { width: 65%; } .bar-fill.w70 { width: 70%; } .bar-fill.w75 { width: 75%; } .bar-fill.w80 { width: 80%; } .bar-fill.w85 { width: 85%; } .bar-fill.w90 { width: 90%; } .bar-fill.w95 { width: 95%; } .bar-fill.w100 { width: 100%; }
.review-list { list-style: none; margin: 0; padding: 0; }
.review { padding: 18px 0; border-bottom: 1px solid var(--line); }
.review:first-child { padding-top: 4px; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.review-author { color: var(--ink); }
.review-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--green-700); }
.review-date { margin: 4px 0 8px; font-size: 14px; color: var(--muted); }
.review-body { margin: 0; overflow-wrap: anywhere; }
.reviews-empty { display: flex; align-items: center; gap: 14px; margin: 0; padding: 22px; border: 1px dashed var(--line-strong); border-radius: 16px; color: var(--muted); }
.reviews-empty .ic-lg { color: var(--star); }
.review-state { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; color: var(--ink-2); }
.review-state .ic { flex: none; margin-top: 3px; color: var(--gold-ink); }
.review-state-ok .ic { color: var(--green-700); }
.review-state-off .ic { color: var(--danger); }
.review-edit summary { cursor: pointer; font-weight: 700; color: var(--green-600); margin-bottom: 12px; }
.review-edit form + form { margin-top: 10px; }
@media (max-width: 860px) { .reviews-grid { grid-template-columns: minmax(0, 1fr); } }

.store-banner { height: 180px; background: radial-gradient(600px 240px at 90% 120%, rgba(94, 63, 133, .35), transparent 60%), linear-gradient(135deg, var(--green-800), var(--green-950)); }
.store-banner.has-image { height: auto; max-height: 320px; overflow: hidden; }
.store-banner img { width: 100%; max-height: 320px; object-fit: cover; }
.store-head { position: relative; display: flex; gap: 20px; align-items: flex-start; margin: -60px 0 28px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.store-head h1 { margin-bottom: 4px; }
.store-logo { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; flex: none; border: 3px solid var(--white); box-shadow: var(--shadow); }
.store-logo-empty { display: grid; place-items: center; background: linear-gradient(145deg, var(--gold-soft), var(--gold)); color: var(--green-900); font: 800 40px var(--font-display); }
.store-about { margin: 8px 0 0; max-width: 70ch; }

.sell-terms { padding: 24px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); }
.sell-terms-head { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; }
.sell-terms dl { margin: 0; display: grid; gap: 12px; }
.sell-terms dt { font-weight: 700; color: var(--gold); }
.sell-terms dd { margin: 0; color: rgba(255, 255, 255, .8); }
/* About us */
.about-photo { margin: 0; line-height: 0; }
.about-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.about-story { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.about-story p { max-width: 72ch; font-size: 17px; }
.about-quote { position: relative; margin: 0; padding: 34px 30px 26px; border-radius: 22px; background: linear-gradient(150deg, var(--green-900), var(--green-950)); color: #fff; }
.about-quote::before { content: "\201C"; position: absolute; top: -6px; left: 22px; font: 800 86px/1 var(--font-display); color: var(--gold); }
.about-turn { font-weight: 700; color: var(--green-900); }
.about-quote-label { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.about-quote blockquote { margin: 0; }
.about-quote blockquote p { margin: 0; font: 700 1.3rem/1.4 var(--font-display); color: #fff; }
.about-quote figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px; font-style: italic; color: var(--gold-soft); }
@media (max-width: 860px) { .about-story { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.about-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.about-values li { padding: 22px 20px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.about-values h3 { margin: 12px 0 6px; font-size: 1.1rem; color: var(--green-950); }
.about-values p { margin: 0; color: var(--ink-2); font-size: 15px; }
.about-value-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--green-900); color: var(--gold); }
.about-value-icon .ic { width: 22px; height: 22px; }
.about-note { max-width: 880px; }
.about-note p { margin: 0 0 4px; }
.about-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 32px; border-radius: 22px; color: #fff; background: radial-gradient(520px 220px at 100% 100%, rgba(94, 63, 133, .35), transparent 70%), linear-gradient(150deg, var(--green-900), var(--green-950)); }
.about-cta h2 { margin: 0 0 8px; color: #fff; }
.about-cta p { margin: 0 0 6px; color: rgba(255, 255, 255, .82); }
.about-cta a:not(.btn) { color: var(--gold-soft); }
.about-cta .btn { flex: none; }
.footer-about { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
@media (max-width: 1000px) { .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .about-values { grid-template-columns: minmax(0, 1fr); } .about-cta { flex-direction: column; align-items: flex-start; padding: 24px 22px; } }

.steps-list { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 780px; }
.sell-policy { display: flex; gap: 10px; align-items: flex-start; max-width: 780px; margin: 18px 0 0; color: var(--ink-2); }
.sell-policy .ic { flex: none; margin-top: 3px; color: var(--green-600); }
.steps-list li { counter-increment: step; position: relative; padding: 16px 18px 16px 64px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.steps-list li::before { content: counter(step); position: absolute; left: 16px; top: 13px; width: 32px; height: 32px; border-radius: 50%; background: var(--green-900); color: var(--gold); display: grid; place-items: center; font-weight: 800; }

/* Privacy policy (views/shop/privacy.php): the contents list sticks beside the text on wide
   screens and starts folded away above it on phones. */
.legal { padding-block: 36px 64px; }
.legal-head { max-width: 760px; margin: 0 0 28px; }
.legal-head h1 { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 2.6rem); }
.legal-dates { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; font-size: 15px; color: var(--muted); }
.legal-translated { margin: 16px 0 0; }
.legal-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.legal-toc { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 16px 18px; border-radius: 16px; background: var(--green-50); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
.legal-toc summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary .ic-sm { transition: transform .2s; }
.legal-toc[open] summary .ic-sm { transform: rotate(180deg); }
.legal-toc ol { margin: 12px 0 0; padding-left: 1.7em; display: grid; gap: 5px; }
.legal-toc li::marker { font-size: 13px; color: var(--muted); }
.legal-toc a { color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--green-700); text-decoration: underline; }
.legal-body { max-width: 760px; font-size: 16.5px; }
.legal-intro p:first-child { font-size: 18px; color: var(--green-950); }
.legal-body section { scroll-margin-top: 16px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-body h2 { font-size: 1.4rem; }
.legal-body h3 { margin: 22px 0 8px; font-size: 1.1rem; color: var(--green-900); }
.legal-num { margin-right: 4px; color: var(--gold-ink); }
.legal-body ul { margin: 0 0 1em; padding-left: 1.25em; display: grid; gap: 4px; }
.legal-body li::marker { color: var(--green-600); }
.legal-facts { display: grid; gap: 8px; margin: 0 0 1em; padding: 16px 20px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.legal-facts div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
.legal-facts dt { font-weight: 700; color: var(--ink-2); }
.legal-facts dd { margin: 0; overflow-wrap: anywhere; }
.legal-company { margin-bottom: 8px; font-weight: 700; color: var(--green-950); }
.legal-contact { font-weight: 600; overflow-wrap: anywhere; }
.legal-flow { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.legal-flow li { display: flex; align-items: center; gap: 8px; }
.legal-flow li + li::before { content: "→"; content: "→" / ""; font-weight: 800; color: var(--gold-ink); }
.legal-flow span { padding: 5px 12px; border-radius: 999px; background: var(--green-50); border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--green-900); }
.legal-table { border: 1px solid var(--line); border-radius: 14px; }
.legal-table td { vertical-align: top; }
.legal-table td:first-child { font-weight: 600; color: var(--ink); }
.legal-notice { margin: 36px 0 0; padding: 18px 20px; }
.legal-notice h2 { margin: 0 0 6px; font-size: 1.1rem; color: var(--green-900); }
.legal-steps { margin: 0 0 1em; padding-left: 1.5em; display: grid; gap: 4px; }
.legal-steps li::marker { font-weight: 700; color: var(--green-700); }
.legal-quote { margin: 0 0 1em; padding: 16px 20px; border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0; background: var(--gold-tint); }
.legal-quote p { margin: 0; font-style: italic; color: var(--ink); }
.legal-more { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-more h2 { margin-bottom: 12px; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.legal-more a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none; }
.legal-more a:hover { border-color: var(--green-600); color: var(--green-700); }
@media (max-width: 960px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .legal-toc { position: static; max-height: none; }
}
@media (min-width: 600px) and (max-width: 960px) { .legal-toc ol { display: block; columns: 2; column-gap: 36px; } .legal-toc li { margin-bottom: 5px; break-inside: avoid; } }
@media (max-width: 560px) { .legal-facts div { grid-template-columns: minmax(0, 1fr); gap: 0; } .legal-body { font-size: 16px; } }

/* Log in, sign up, password pages: a white card with a deep green heading band.
   Customer and vendor logins sit in the shop; the staff login has its own bare page. */
.auth-wrap { display: grid; place-items: center; padding-block: 40px; }
.auth-card { width: 100%; max-width: 540px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.auth-head { position: relative; padding: 28px 32px 24px; color: #fff; background: radial-gradient(420px 160px at 100% 0%, rgba(94, 63, 133, .45), transparent 70%), linear-gradient(150deg, var(--green-800), var(--green-950)); }
.auth-head::after { content: ""; position: absolute; left: 32px; bottom: 0; width: 64px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.auth-head h1 { color: #fff; margin-bottom: 6px; }
.auth-head p { margin: 0; color: rgba(255, 255, 255, .78); }
.auth-head .auth-kicker { margin-bottom: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }
.auth-vendor .auth-kicker { color: var(--amethyst-soft); }
.auth-admin .auth-head { background: radial-gradient(420px 180px at 100% 0%, rgba(201, 182, 228, .35), transparent 70%), linear-gradient(150deg, #43295F, #1E1430); }
.auth-admin .auth-head::after { background: var(--amethyst-soft); }
.auth-admin .auth-kicker { color: var(--amethyst-soft); }
.auth-body { padding: 26px 32px 30px; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; font-size: 15px; }
.auth-switch { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--green-50); border: 1px dashed #CFE3D6; font-size: 15px; }
.auth-switch .ic { color: var(--green-600); }
/* Email confirmation: one big box for the 6-digit code */
.code-input { font: 700 30px/1.2 var(--font-mono); letter-spacing: .3em; text-align: center; padding-block: 12px; }
.code-resend p { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.error-code { font: 800 60px/1 var(--font-display); color: var(--gold); margin: 0 0 6px; }
.error-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.error-card .auth-body { text-align: center; }
@media (max-width: 560px) { .auth-head, .auth-body { padding-inline: 22px; } .auth-head::after { left: 22px; } }

body.plain { min-height: 100vh; background: radial-gradient(700px 420px at 0% 0%, rgba(95, 168, 130, .25), transparent 60%), radial-gradient(620px 420px at 100% 100%, rgba(94, 63, 133, .38), transparent 60%), linear-gradient(160deg, var(--green-900), var(--green-950)); }
.plain-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 16px; }
.plain-brand { display: block; line-height: 0; border-radius: 8px; }
.plain-brand:hover { color: #fff; }
.plain-brand img { display: block; width: auto; height: 110px; }
.plain-main .auth-wrap { width: 100%; padding: 0; }
.plain-flash { width: 100%; max-width: 540px; }
.plain-foot { margin: 0; font-size: 13.5px; color: var(--green-300); }

.site-footer { background: var(--green-950); color: var(--green-300); padding-top: 44px; border-top: 3px solid var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.5fr; gap: 28px; }
.site-footer a { color: #E6F0EA; text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); text-decoration: underline; }
.footer-logo { margin: 0 0 14px; line-height: 0; }
.footer-logo img { display: block; width: auto; height: 96px; }
.footer-head { font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 32px; padding-block: 16px; font-size: 14px; color: var(--green-300); }
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
/* Contact: the support address, then round buttons for each social network */
.footer-contact p { margin: 0 0 10px; }
.footer-email a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
.footer-email .ic { color: var(--gold); }
.footer-follow { margin: 18px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-300); }
.site-footer .social { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); transition: background .15s, color .15s, border-color .15s; }
.social-link .ic { width: 20px; height: 20px; }
.site-footer .social-link:hover { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid > :first-child, .footer-contact { grid-column: span 3; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child, .footer-contact { grid-column: span 2; } }

/* Banners with a product photo: wider slides, the words on the left and the photo resting in the
   bottom-right corner. On phones the photo sits under the words. */
.promo-track-photos { grid-auto-columns: calc((100% - 20px) / 1.3); }
.promo-has-photo { min-height: 300px; padding: 36px 0 36px 40px; }
.promo-has-photo::after { right: 4%; bottom: -150px; width: 460px; height: 460px; background: rgba(255, 255, 255, .07); }
.promo-has-photo .promo-text { position: relative; z-index: 1; max-width: 42%; }
.promo-has-photo .promo-title { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
.promo-photo { position: absolute; right: -10px; bottom: -8px; width: 60%; pointer-events: none; }
.promo-photo::before { content: ""; position: absolute; z-index: -1; inset: 16% 6% 0 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0)); }
.promo-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .28)); transform-origin: 70% 100%; transition: transform .4s ease; }
.promo-has-photo:hover .promo-photo img { transform: scale(1.03); }
.promo-gold .promo-photo img { filter: drop-shadow(0 16px 20px rgba(92, 64, 10, .28)); }
@media (max-width: 900px) {
  .promo-track-photos { grid-auto-columns: 88%; }
  .promo-has-photo { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 22px 20px 0; }
  .promo-has-photo .promo-text { max-width: none; }
  .promo-photo { position: relative; right: auto; bottom: auto; width: calc(100% + 28px); margin: 10px -12px -6px -16px; }
  .promo-has-photo::after { right: -80px; bottom: -120px; width: 300px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .promo-photo img { transition: none; } }

/* Sign up: shopping or selling (views/auth/register-choose.php) */
.choose-wrap { max-width: 880px; padding-block: 44px 60px; }
.choose-head { margin-bottom: 26px; text-align: center; }
.choose-head h1 { margin: 0 0 6px; }
.choose-head p { margin: 0; font-size: 18px; color: var(--muted); }
.choose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.choose-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 24px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--white); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s; }
.choose-card:hover { border-color: var(--green-600); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.choose-card strong { font: 800 24px/1.2 var(--font-display); color: var(--green-900); }
.choose-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--green-100); color: var(--green-700); }
.choose-icon .ic { width: 28px; height: 28px; }
.choose-sell .choose-icon { background: var(--amethyst-tint); color: var(--amethyst); }
.choose-text { line-height: 1.55; color: var(--ink-2); }
.choose-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--green-700); }
.choose-sell .choose-go { color: var(--amethyst); }
.choose-login { margin: 24px 0 0; text-align: center; color: var(--muted); }
@media (max-width: 640px) { .choose-grid { grid-template-columns: minmax(0, 1fr); } .choose-wrap { padding-block: 28px 40px; } }