/* TopShop — public site
   All colors, fonts, and a few layout knobs come from CSS variables set in
   includes/theme.php (--color-*, --font-*, --radius, --card-shadow,
   --grid-columns, --img-ratio). This file defines structure only, so the
   same stylesheet produces a different look for every preset. */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    line-height: 1.15;
    margin: 0;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ---- Header --------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.site-logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    text-decoration: none;
    color: var(--color-text);
}

.site-logo img {
    max-height: 44px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-nav a {
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
}

.site-nav a:hover { color: var(--color-primary); }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
}

.nav-toggle svg { width: 26px; height: 26px; display: block; }

@media (max-width: 780px) {
    .site-nav {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0.5rem 0;
        display: none;
    }
    .site-nav.open { display: flex; }
    .site-nav a {
        width: 100%;
        padding: 0.85rem 1.25rem;
        border-bottom: 1px solid var(--color-border);
    }
    .nav-toggle { display: block; }
}

/* ---- Hero: image only, per spec ------------------------------------- */

.hero {
    width: 100%;
    overflow: hidden;
    background: var(--color-surface);
    aspect-ratio: 5 / 2;   /* desktop default — a fixed ratio, not a fixed pixel height,
                              so the crop looks identical at any laptop width instead of
                              being cut off differently depending on screen size */
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background:
        repeating-linear-gradient(45deg, var(--color-border) 0 2px, transparent 2px 14px);
    font-size: 0.9rem;
}

/* Tablet: a slightly taller crop than desktop */
@media (max-width: 1024px) {
    .hero { aspect-ratio: 16 / 9; }
}

/* Mobile */
@media (max-width: 640px) {
    .hero { aspect-ratio: 4 / 3; }
}

/* Safety cap for very large/ultra-wide monitors only, so the banner doesn't
   become excessively tall in absolute pixels. Doesn't engage at normal
   laptop widths (up to ~1536px), which stay governed purely by the
   aspect-ratio above for a consistent crop. */
@media (min-width: 1600px) {
    .hero { max-height: 600px; }
}

/* ---- Section scaffolding ---------------------------------------------- */

.section {
    padding: 4rem 0;
}

.section-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 2rem;
}

.category-heading {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin: 2.25rem 0 1.1rem;
}

.category-heading:first-of-type {
    margin-top: 0;
}

.section-alt {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* ---- Products ---------------------------------------------------------- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .product-grid { grid-template-columns: repeat(var(--grid-columns-mobile), 1fr); gap: 0.9rem; }
}

.product-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-card-img {
    width: 100%;
    aspect-ratio: var(--img-ratio);
    background: var(--color-bg);
    overflow: hidden;
}

.product-card-img img { width: 100%; height: 100%; object-fit: cover; }

.product-card-img.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    background: repeating-linear-gradient(45deg, var(--color-border) 0 2px, transparent 2px 14px);
}

.product-card-body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.product-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.02rem;
}

.product-note {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.product-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex: 1;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.price {
    font-weight: 700;
    font-size: 1.05rem;
}

.price-original {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.btn-add-cart {
    margin-top: 0.7rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: var(--color-primary);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-add-cart:hover { background: var(--color-primary-dark); }

/* ---- About -------------------------------------------------------------- */

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}

.about-img img { width: 100%; height: 100%; object-fit: cover; }

.about-text p { color: var(--color-text-muted); }

@media (max-width: 820px) {
    .about-layout { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 3rem 0 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
    gap: 2.5rem;
}

@media (max-width: 820px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-col h3 {
    font-size: 1rem;
    margin-bottom: 0.9rem;
}

.footer-col p, .footer-col li {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.4rem; }

.footer-map {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.footer-map iframe { width: 100%; height: 100%; border: 0; }

.footer-map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    background: repeating-linear-gradient(45deg, var(--color-border) 0 2px, transparent 2px 14px);
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.footer-credit a { color: var(--color-text-muted); }

/* ---- Cart icon + floating mini-cart -------------------------------------
   A small floating panel, not a full-screen drawer — it has no page-dimming
   backdrop, so adding another product while it's open never blocks the
   rest of the page. It stays open across multiple "Add to cart" taps and
   only closes via its own × button, the cart icon again, Escape, or a
   click elsewhere on the page. */

.cart-toggle {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
}

.cart-toggle svg { width: 24px; height: 24px; }

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* A quick pulse on the badge when a product is added, so it still feels
   confirmed even though the cart panel itself no longer pops open. */
.cart-count-pulse {
    animation: cart-count-pulse 0.4s ease;
}

@keyframes cart-count-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cart-count-pulse { animation: none; }
}

.cart-drawer {
    position: fixed;
    top: calc(72px + 0.75rem);
    right: 1rem;
    width: min(380px, calc(100vw - 1.5rem));
    max-height: min(70vh, 560px);
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    z-index: 50;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cart-drawer.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

@media (max-width: 480px) {
    .cart-drawer {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        top: calc(72px + 0.5rem);
        max-height: min(75vh, 520px);
    }
}

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.cart-drawer-header h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
}

.cart-close-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.2rem;
}

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem 1.1rem;
    min-height: 0;
}

.cart-empty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 2rem 0;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { font-size: 0.9rem; font-weight: 600; }
.cart-item-price { font-size: 0.82rem; color: var(--color-text-muted); }

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.cart-item-remove {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 0.2rem;
}

.cart-fields {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cart-fields input, .cart-fields select, .cart-fields textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    background: var(--color-bg);
    color: var(--color-text);
}

.cart-drawer-footer {
    padding: 0.9rem 1.1rem 1.1rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.cart-checkout-btn {
    width: 100%;
    padding: 0.8rem;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

.cart-checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Floating WhatsApp button ------------------------------------------- */

.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    z-index: 30;
    text-decoration: none;
}

/* ---- Floating cart button (stacked above the WhatsApp button) ---------- */
/* Hidden entirely while the cart is empty; appears with a pop-in the
   moment something is added, via JS toggling .visible / .just-shown. */

.cart-float {
    position: fixed;
    bottom: 5.75rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-surface);
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 29;
    transition: transform 0.15s ease, background 0.15s ease;
}

.cart-float.visible { display: flex; }

.cart-float:hover {
    background: var(--color-primary-dark);
    transform: scale(1.07);
}

.cart-float svg { width: 26px; height: 26px; }

/* A white, higher-contrast badge — the default .cart-count colors (primary
   bg + surface text) would blend straight into this button's own fill. */
.cart-float .cart-count {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    top: -5px;
    right: -5px;
}

@keyframes cart-float-pop {
    0%   { transform: scale(0); }
    65%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.cart-float.just-shown { animation: cart-float-pop 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
    .cart-float.just-shown { animation: none; }
    .cart-float:hover { transform: none; }
}

.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }

/* ---- Accessibility & motion -------------------------------------------- */

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}