/* ─────────────────────────────────────────────────────────────────────────────
   store.next.css — a vendor's public storefront in the new look (?ui=next).
   Loaded after style.next.css: tokens, the category chips and the product card
   come from there. This sheet adds the storefront's own header, its actions row,
   and the pieces only its cards render (stock line, SKU, add and share buttons).
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* store.css gives the page its own palette names; point them at the tokens. */
    --dark: var(--color-fg-default);
    --light: var(--color-bg-muted);
    /* Ink, not the panels' green: nothing on a public page moves money, so the inline
       var(--primary) accents here (the "Browsing:" label, image dots) must not read as money. */
    --primary: var(--color-fg-default);
    --secondary: var(--color-fg-muted);
    --store-col-max: calc(var(--page-max) - 2 * var(--page-gutter));
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background: var(--color-bg-page);
    color: var(--color-fg-default);
}

/* ── Header: the vendor's name, on their own photo when they have one ──────── */
.store-header {
    position: relative;
    padding: var(--space-12) var(--page-gutter) var(--space-8);
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-fg-default);
    text-align: left;
}

/* The vendor's banner, shown whole above the name - never cropped behind it (it often carries its own lettering). */
.store-banner {
    display: block;
    width: 100%;
    height: auto;
    max-height: 26rem;
    object-fit: cover;
    background: var(--color-bg-surface);
}

.store-header-inner {
    position: relative;
    max-width: var(--store-col-max);
    margin: 0 auto;
}

/* Logo beside the name when there is one; name alone otherwise. */
.store-header-inner:has(.store-logo) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: center;
}

.store-logo {
    grid-row: span 2;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0;
    object-fit: cover;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.store-header h1 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    align-self: end;
}

.store-header p {
    margin: var(--space-1) 0 0;
    font-size: var(--text-body);
    color: var(--color-fg-muted);
    opacity: 1;
    align-self: start;
}


/* ── Body column ───────────────────────────────────────────────────────────── */
.store-container {
    max-width: var(--page-max);
    margin: 0 auto var(--space-12);
    padding: 0 var(--page-gutter);
}

/* About + actions: a ruled row under the header, not a floating glass card. */
.store-info-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

/* Full row, so the buttons always wrap beneath it; the right padding, not a max-width,
   keeps the line length readable (a max-width would let the buttons pull up beside it). */
.store-info-card p {
    flex: 0 0 100%;
    max-width: none;
    padding-right: max(0px, calc(100% - 40rem));
    box-sizing: border-box;
    margin: 0 0 var(--space-2);
    font-size: 0.9375rem;
    color: var(--color-fg-muted);
}

.store-info-card > .social-row {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-top: var(--space-2);
}

/* WhatsApp's own dark green: a third-party brand action, so a brand colour rather than a
   token. The bright brand green (#25D366) fails contrast behind white text. */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-md);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: #075e54;
    color: #ffffff;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--text-ui);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.whatsapp-btn svg { width: 1.125rem; height: 1.125rem; }
.whatsapp-btn:active { transform: scale(0.97); }

/* "Share this shelf" borrows .whatsapp-btn's shape but is not WhatsApp: ink. */
.whatsapp-btn.store-share-btn {
    background: var(--color-action);
    color: var(--color-action-fg);
}

.store-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--control-md);
    padding: 0 var(--space-3);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-fg-default);
    font-size: var(--text-ui);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .whatsapp-btn:hover { background: #054d44; color: #ffffff; text-decoration: none; }
    .whatsapp-btn.store-share-btn:hover { background: var(--color-action-hover); color: var(--color-action-fg); }
    .store-back-link:hover { background: var(--color-bg-muted); color: var(--color-fg-default); text-decoration: none; }
}

/* The vendor's social accounts. Each chip keeps its own brand tint (--sc, set inline). */
.social-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-start;
    margin-top: var(--space-3);
}

.social-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-sm);
    padding: 0 var(--space-3);
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--sc, var(--color-fg-default));
    font-size: var(--text-small);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.social-chip svg { flex: none; }

@media (hover: hover) and (pointer: fine) {
    .social-chip:hover { background: color-mix(in srgb, currentColor 8%, #fff); text-decoration: none; }
}

/* ── Categories and headings ───────────────────────────────────────────────── */
.category-pills-section { padding: var(--space-6) 0 0; background: transparent; }

.category-pills-section h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-h3);
    font-weight: 600;
    text-align: left;
    color: var(--color-fg-default);
}

.store-section-title {
    margin: var(--space-8) 0 var(--space-4);
    font-size: var(--text-h2);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-fg-default);
}

.store-clear-wrap { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }

/* ── Searching and browsing this shelf ─────────────────────────────────────── */
.store-search { display: flex; gap: var(--space-2); margin: var(--space-6) 0 0; }

.store-search input {
    flex: 1;
    min-width: 0;
    min-height: var(--control-lg);
    padding: 0 var(--space-3);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 16px; /* no iOS zoom on focus */
    color: var(--color-fg-default);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.store-search input:focus { border-color: var(--color-fg-default); box-shadow: 0 0 0 3px rgb(28 25 23 / 0.15); }

.store-search button {
    min-height: var(--control-lg);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-action);
    color: var(--color-action-fg);
    font-family: inherit;
    font-size: var(--text-ui);
    font-weight: 500;
    cursor: pointer;
}

.store-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--text-small); color: var(--color-fg-muted); }
.store-crumbs li { min-width: 0; overflow-wrap: anywhere; }
.store-crumbs li + li::before { content: "›"; margin-right: var(--space-1); color: var(--color-fg-subtle); }
.store-crumbs a { color: var(--color-fg-muted); text-decoration: none; }
.store-crumbs [aria-current] { color: var(--color-fg-default); }

@media (hover: hover) and (pointer: fine) {
    .store-crumbs a:hover { color: var(--color-fg-default); text-decoration: underline; }
}

.store-results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.store-results-head .store-section-title { margin: 0; }
.store-results-head .results-count { font-size: var(--text-ui); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.store-results-head .store-clear-filter { margin-left: auto; }

.recent-store { margin: var(--space-6) 0 0; }

/* Price: the new figure, then the struck old one and a neutral "−40%" on a small second line. */
.product-price .price-was { margin-left: var(--space-1); font-size: 0.8125rem; font-weight: 400; color: var(--color-fg-subtle); }
.product-price .price-off {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 0.3125rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
    vertical-align: 0.0625rem;
}

.store-clear-filter {
    color: var(--color-fg-default);
    font-size: var(--text-ui);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 4px;
}

/* ── What only the storefront's cards render ───────────────────────────────── */
.product-image-link { display: block; color: inherit; text-decoration: none; }

.product-title-link { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
    .product-title-link:hover { color: var(--color-fg-default); text-decoration: underline; text-underline-offset: 3px; }
}

.product-stock { margin-bottom: var(--space-1); font-size: var(--text-small); }

.product-stock .s-out,
.product-stock .s-low {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 0.375rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.product-stock .s-out { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.product-stock .s-low { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.product-stock .s-ok  { color: var(--color-success-fg); font-weight: 500; }

.product-sku {
    margin-bottom: var(--space-3);
    font-size: 0.6875rem;
    color: var(--color-fg-subtle);
    font-variant-numeric: tabular-nums;
}

.store-add-btn {
    width: 100%;
    min-height: var(--control-sm);
    margin-top: auto;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-action);
    border-radius: var(--radius-sm);
    background: var(--color-action);
    color: var(--color-action-fg);
    font-family: inherit;
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.store-add-btn + .store-add-btn { margin-top: var(--space-2); }
.store-add-btn:active { transform: scale(0.97); }

.store-add-btn.store-share-item {
    background: var(--color-bg-surface);
    border-color: var(--color-border-strong);
    color: var(--color-fg-default);
}

@media (hover: hover) and (pointer: fine) {
    .store-add-btn:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
    .store-add-btn.store-share-item:hover { background: var(--color-bg-muted); border-color: var(--color-border-input); }
}

.store-empty {
    grid-column: 1 / -1;
    padding: var(--space-12) var(--space-6);
    background: var(--color-bg-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-fg-muted);
    text-align: center;
}

/* ── Store not found (answers a real 404) ──────────────────────────────────── */
.store-notfound {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    min-height: 100vh;
    max-width: var(--store-col-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.store-notfound h1 {
    margin: 0;
    font-size: var(--text-h1);
    font-weight: 600;
    color: var(--color-fg-default);
}

/* ── Phones ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .store-header { padding: var(--space-8) var(--page-gutter) var(--space-6); }
    .store-logo { width: 3.5rem; height: 3.5rem; }
    .store-info-card .whatsapp-btn,
    .store-back-link { flex: 1 1 100%; min-height: var(--control-lg); justify-content: center; }
    .store-add-btn { min-height: var(--control-md); }
}

@media (max-width: 480px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
}