/*
 * The Barrel Store — brand override CSS.
 *
 * Loaded last, after Bason's style.css/custom.css, to re-skin the template with
 * the store's colours/logo (spec §14.1). Patterned on Bason's assets/css/index/*
 * preset override files. Brand assets (logo + palette) are pending — open
 * question 7 — so this is intentionally a near-empty placeholder for now.
 *
 * When assets arrive, override the template's accent variables/classes here,
 * e.g. .accent-color, .accent-color-bg, .btn-accent, link colours, etc.
 */

/* Text logo until brand assets land (open question 7). Colour comes from the
   template's .navbar-brand rule; swap this block for an <img> when the real
   logo arrives. */
.navbar-brand .brand-text {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 48px;            /* matches the template's logo slot height */
    white-space: nowrap;
}

/* Hero background: solid dark (template dark-1-color-bg) until brand assets
   land. To use a photo hero, set:
   .hero-slide-bg { background-image: url(../images/hero.jpg);
                    background-size: cover; background-position: center; }   */
.hero-slide-bg {
    background-color: #16161e;
}

/* Homepage slider — "cover" image mode (admin: Settings → Navigation & homepage
   → Image mode). The slide image is set as a full-bleed background (inline
   style, per slide) and a dark scrim is laid over it so the always-white slide
   text stays readable over ANY image, light or dark — rather than trying to
   detect per-image brightness. Left-biased so left-aligned desktop text gets the
   most contrast; still dark enough (>=45%) for centred text on mobile. */
.hero-slide-cover {
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-slide-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .45) 100%);
    z-index: 0;
}
.hero-slide-cover > .container {
    position: relative;
    z-index: 1;
}

/* Cart table: the template ships pre-sized 80x96 thumbnail files; our images
   come from the Square CDN at full size, so constrain them here. */
.cart-table .product-thumbnail img {
    width: 80px;
    height: auto;
}
.cart-table .product-name a {
    display: inline-block;
    line-height: 1.4;
}
.cart-table .product-name .product-sku {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 2px;
}

/* Account bar under the main menu (top bar removed). */
.header-account-bar {
    padding: 6px 0;
    font-size: 13px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.header-account-bar a { text-decoration: none; }

/* Product-card thumbnails: Square CDN images vary wildly in dimensions, so pin
   every card's image area to one fixed box and letterbox the image inside it
   (contain — never crop model parts) so listings line up. Selectors match the
   template's own specificity (.shop-block .shop-block-header …) and win by load
   order (brand.css is last). */
.shop-block .shop-block-header a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    background: #fff;
    overflow: hidden;
}
.shop-block .shop-block-header a img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
}

/* Account dropdown in the header buttons row (Bootstrap dropdown). */
.header-menu-buttons-account .dropdown-menu {
    z-index: 1080;
    min-width: 180px;
}
.header-menu-buttons-account .dropdown-item { padding: 6px 18px; }

/* Admin menubar — always-visible horizontal nav (the storefront .desktop-menu
   is display:none outside the shop header, which hid the admin menu). */
.admin-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin: 0 0 4px;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.admin-nav a {
    display: inline-block;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .02em;
    font-size: 14px;
    border-bottom: 2px solid transparent;
}
.admin-nav a:hover { color: #000; }
.admin-nav li.active a {
    color: #4672d8;                 /* site accent */
    border-bottom-color: #4672d8;
}
.admin-nav i { margin-right: 6px; opacity: .65; }

/* Cart hover panel suppressed while the account dropdown is open (app.js
   toggles .cart-suppressed) so a drifting cursor can't pop it under the menu. */
.header-menu-buttons-cart.cart-suppressed .shop-mini-cart {
    display: none !important;
}

/* Footer payment icons (Visa / Mastercard / PayPal). */
.footer-payment-icons i {
    font-size: 30px;
    margin-left: 10px;
    opacity: .85;
    vertical-align: middle;
}

/* Account label: hidden on desktop (icon-only), shown in the cloned mobile
   menu — same show/hide pattern as the cart's .cart-wd. Uppercased so it
   matches the other (uppercase) mobile-menu items. */
.header-menu-buttons .nav-item .nav-link .account-wd { display: inline-block; text-transform: uppercase; }
.desktop-menu .header-menu-buttons .nav-item .nav-link .account-wd { display: none; }

/* Footer legal links (Terms / Privacy / Shipping and Discounts). Inline after
   the copyright on wide screens (min lg, joined by the separator); on their own
   line below the copyright on narrow screens. Styled to match the other footer
   links: muted, no underline (Bason underlines every anchor by default), with a
   hover underline. Bason ships none of the display utilities, so scope here. */
.footer-legal-links { display: block; }
.footer-legal-sep { display: none; }
.footer-section-copyright .footer-legal-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    white-space: nowrap;
}
.footer-section-copyright .footer-legal-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}
@media (min-width: 992px) {
    .footer-legal-links { display: inline; }
    .footer-legal-sep { display: inline; }
}

/* --- Brand variable layer (Phase 16) --------------------------------------
   The layout injects a :root{--brand-*} block (from settings) AFTER this file;
   the values below are the fallback defaults (= current template colours) so
   the variables are always defined. The template's accent surfaces are routed
   through them, so an owner palette re-skins the brand without touching Bason's
   ~173 hard-coded hexes. Fallbacks in each var() keep today's look if unset. */
:root {
    --brand-accent: #4672d8;
    --brand-accent-hover: #2b5bcc;
    --brand-link: #292929;
    --brand-header-bg: #ffffff;
    --brand-footer-bg: #1a1a1a;
    --brand-on-accent: #ffffff;
}

/* Accent colour (icons, active states, price, link hover) */
.accent-color,
a:hover,
.btn-accent.btn-outline,
.btn-accent.btn-outline-reverse:hover {
    color: var(--brand-accent, #4672d8);
}
.accent-color-bg,
.btn-accent,
.btn-accent.btn-outline:hover {
    background-color: var(--brand-accent, #4672d8);
}
.accent-color-border,
.btn-accent {
    border-color: var(--brand-accent, #4672d8);
}

/* Text on accent-filled buttons/bars + the darker hover state */
.btn-accent,
.btn-accent:hover {
    color: var(--brand-on-accent, #ffffff);
}
.btn-accent:not(.btn-outline):not(.btn-outline-reverse):hover {
    background-color: var(--brand-accent-hover, #2b5bcc);
    border-color: var(--brand-accent-hover, #2b5bcc);
}

/* Body links */
a {
    color: var(--brand-link, #292929);
}

/* Header + footer bars */
.header-top-section-container,
.header-middle-section-container,
.header-menu-section-container {
    background-color: var(--brand-header-bg, #ffffff);
}
.footer-section-top,
.footer-section-copyright {
    background-color: var(--brand-footer-bg, #1a1a1a);
}

/* Uploaded logo image (Phase 16): fit the template's 48px logo slot. */
.navbar-brand .brand-logo { display: block; max-height: 48px; width: auto; }

/* Digital wallet buttons (Phase 17). Apple Pay uses the native button styling;
   Google Pay renders its own button via the SDK's attach(). */
#apple-pay-button {
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: plain;
    -apple-pay-button-style: black;
    height: 44px;
    max-width: 320px;
    cursor: pointer;
}
#google-pay-button { max-width: 320px; }