/**
 * Hamper House — Global Brand CSS
 * Loaded after Hyva's base styles.
 * Place at: app/design/frontend/Hamper/default/web/css/custom.css
 *
 * Import via default_head_blocks.xml (see layout/ folder).
 */

/* ── Google Fonts ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* ── CSS custom properties (mirrors Tailwind config) ──────────────── */
:root {
    --color-brand-primary:   #FF6B1A;
    --color-brand-accent:    #FF3D00;
    --color-brand-secondary: #FFB800;
    --color-brand-dark:      #1A1A1A;
    --color-brand-bg:        #FFF5EE;
    --color-brand-hover:     #FF9E5A;
    --color-brand-pale:      #FFD4B3;
    --font-display:          'Cormorant Garamond', Georgia, serif;
    --font-sans:             'Jost', system-ui, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    background-color: var(--color-brand-bg);
    color: var(--color-brand-dark);
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: var(--font-display);
    font-weight: 400;
}

/* ── Navigation ────────────────────────────────────────────────────── */
.nav-sections,
header.page-header {
    background-color: rgba(255, 245, 238, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-brand-pale);
}

/* Logo */
.logo strong,
.logo img + strong {
    font-family: var(--font-display);
    font-size: 1.55rem;
    color: var(--color-brand-dark);
}

/* Nav links hover */
.navigation a:hover,
.nav-sections .navigation > ul > li > a:hover {
    color: var(--color-brand-primary) !important;
}

/* Active nav item */
.navigation > ul > li.active > a,
.navigation > ul > li > ul > li.active > a {
    color: var(--color-brand-primary);
    border-bottom: 2px solid var(--color-brand-primary);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

/* Primary CTA */
.action.primary,
button.action-primary,
.btn-primary {
    background-color: var(--color-brand-dark) !important;
    color: #FFF5EE !important;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 0.9rem 2rem;
    transition: background-color 0.2s ease;
}
.action.primary:hover,
button.action-primary:hover,
.btn-primary:hover {
    background-color: var(--color-brand-primary) !important;
}

/* Secondary / outline */
.action.secondary,
button.action-secondary,
.btn-outline {
    background-color: transparent !important;
    color: var(--color-brand-dark) !important;
    border: 1px solid var(--color-brand-dark) !important;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 0.9rem 2rem;
    transition: all 0.2s ease;
}
.action.secondary:hover,
button.action-secondary:hover,
.btn-outline:hover {
    border-color: var(--color-brand-primary) !important;
    color: var(--color-brand-primary) !important;
}

/* Add to cart */
.action.tocart {
    background-color: var(--color-brand-dark) !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease;
}
.action.tocart:hover {
    background-color: var(--color-brand-primary) !important;
}

/* ── Product cards ─────────────────────────────────────────────────── */
.product-item {
    border: 1px solid var(--color-brand-pale);
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(255, 107, 26, 0.1);
}

.product-item-name a {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-brand-dark);
}
.product-item-name a:hover {
    color: var(--color-brand-primary);
}

.price-box .price {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-brand-primary);
}

/* ── Product labels / badges ───────────────────────────────────────── */
.product-label-new,
.new-badge {
    background-color: var(--color-brand-accent);
    color: #fff;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 0;
}
.product-label-sale,
.sale-badge {
    background-color: var(--color-brand-primary);
    color: #fff;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
}
.product-label-featured {
    background-color: var(--color-brand-secondary);
    color: var(--color-brand-dark);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
}

/* ── Forms & inputs ────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
    border: 1px solid var(--color-brand-pale);
    border-radius: 0;
    background-color: var(--color-brand-bg);
    font-family: var(--font-sans);
    color: var(--color-brand-dark);
    transition: border-color 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-brand-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 107, 26, 0.15);
}

/* ── Checkout steps ────────────────────────────────────────────────── */
.checkout-index-index .step-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    border-bottom: 1px solid var(--color-brand-pale);
}
.checkout-index-index .opc-progress-bar-item._active span {
    background-color: var(--color-brand-primary);
}
.checkout-index-index .opc-progress-bar-item._complete span {
    background-color: var(--color-brand-secondary);
    color: var(--color-brand-dark);
}

/* ── Messages / alerts ─────────────────────────────────────────────── */
.message.success,
.message-success {
    background-color: #FFF0D9;
    border-left: 4px solid var(--color-brand-secondary);
    color: var(--color-brand-dark);
}
.message.notice {
    background-color: #FFD4B3;
    border-left: 4px solid var(--color-brand-primary);
    color: var(--color-brand-dark);
}
.message.error {
    background-color: #FFD0C0;
    border-left: 4px solid var(--color-brand-accent);
    color: var(--color-brand-dark);
}

/* ── Minicart ──────────────────────────────────────────────────────── */
.minicart-wrapper .action.showcart .counter.qty {
    background-color: var(--color-brand-primary);
}
.block-minicart .block-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
}
.minicart-items .product-item-name a {
    font-family: var(--font-display);
}

/* ── Footer ────────────────────────────────────────────────────────── */
.page-footer {
    background-color: var(--color-brand-dark);
    color: #c8b09a;
}
.page-footer a {
    color: #8c7060;
    transition: color 0.2s;
}
.page-footer a:hover {
    color: var(--color-brand-hover);
}
.page-footer .footer-heading,
.page-footer strong {
    color: var(--color-brand-primary);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ── Section labels (reusable utility class) ───────────────────────── */
.section-label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-brand-primary);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}
.section-label::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-brand-primary);
}

/* ── Breadcrumbs ───────────────────────────────────────────────────── */
.breadcrumbs a:hover {
    color: var(--color-brand-primary);
}
.breadcrumbs .item.active {
    color: var(--color-brand-primary);
}

/* ── Pagination ────────────────────────────────────────────────────── */
.pages-item-next .action.next,
.pages-item-previous .action.previous {
    color: var(--color-brand-primary);
}
.pages .item.current > strong {
    background-color: var(--color-brand-primary);
    color: #fff;
    border-radius: 0;
}

/* ── Swatches ──────────────────────────────────────────────────────── */
.swatch-option.selected,
.swatch-option:hover {
    border-color: var(--color-brand-primary) !important;
    outline: 2px solid var(--color-brand-primary);
}

/* ── Rating stars ──────────────────────────────────────────────────── */
.rating-result > span::before {
    color: var(--color-brand-secondary);
}

/* ── Header background — blaze orange ─────────────────────────────── */
header.page-header,
.page-header,
.nav-sections,
.header.content {
    background-color: #FF6B1A !important;
    border-bottom: none;
}

/* Black text in header */
.header.content a,
.header.content span,
.header.content button,
.header.content .logo strong,
.page-header a,
.page-header span {
    color: #1A1A1A !important;
}

/* Cart, search icons in header */
.header.content .action {
    color: #1A1A1A !important;
}

/* ── St Andrews hero banner ────────────────────────────────────────── */
.st-andrews-banner {
    width: 100%;
    height: 420px;
    background-image: url('/pub/media/stadrews.png');
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    position: relative;
}

.st-andrews-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.25) 100%
    );
}

/* ── Header orange background ──────────────────────────────────────── */
#header,
#header .bg-white,
header.page-header {
    background-color: #FF6B1A !important;
    border-color: #E55A0D !important;
}

/* Black text and icons in header */
#header a, #header button, #header span, #header svg {
    color: #1A1A1A !important;
    stroke: #1A1A1A !important;
}

/* ── St Andrews banner ─────────────────────────────────────────────── */
.st-andrews-banner {
    width: 100%;
    height: 380px;
    background-image: url('/pub/media/stadrews.png');
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
}

/* ── Force header orange ───────────────────────────────────────────── */
#header.relative,
div#header,
div#header.bg-white {
    background-color: #fb5509 !important;
    border-color: #e04a00 !important;
}
div#header * {
    color: #1A1A1A !important;
    stroke: #1A1A1A !important;
}

/* ── Header orange — nuclear override ─────────────────────────────── */
[id="header"],
[id="header"].bg-white,
[id="header"].relative,
[id="header"].z-30,
[id="header"].shadow {
    background-color: #fb5509 !important;
    border-color: #e04a00 !important;
}

/* ── Nav links bold ────────────────────────────────────────────────── */
.navigation a,
nav[aria-label="Main menu"] a,
.level-0,
ul.flex a {
    font-weight: 700 !important;
    color: #1A1A1A !important;
}

/* ── Header — absolute override using attribute selector ───────────── */
div[id="header"] {
    background-color: #fb5509 !important;
    border-color: #e04a00 !important;
}

/* ── Also override the Tailwind bg-white utility directly ──────────── */
#header.bg-white {
    --tw-bg-opacity: 1 !important;
    background-color: #fb5509 !important;
}

/* ── Nav links bold and black ──────────────────────────────────────── */
div[id="header"] a,
div[id="header"] nav a,
div[id="header"] .level-0 a {
    color: #1A1A1A !important;
    font-weight: 700 !important;
}

/* ── Icons black ───────────────────────────────────────────────────── */
div[id="header"] svg {
    stroke: #1A1A1A !important;
    color: #1A1A1A !important;
}

/* ── Header — absolute override ───────────────────────────────────── */
div[id="header"] {
    background-color: #fb5509 !important;
    border-color: #e04a00 !important;
}
#header.bg-white {
    --tw-bg-opacity: 1 !important;
    background-color: #fb5509 !important;
}
div[id="header"] a,
div[id="header"] nav a,
div[id="header"] .level-0 a {
    color: #1A1A1A !important;
    font-weight: 700 !important;
}
div[id="header"] svg {
    stroke: #1A1A1A !important;
    color: #1A1A1A !important;
}

/* ── Override --color-white token on header so bg-white becomes orange ── */
#header {
    --color-white: #fb5509;
    --color-surface: #fb5509;
}

/* ── Footer orange ─────────────────────────────────────────────────── */
.page-footer div.bg-gray-100,
.page-footer div.bg-surface {
    --color-gray-100: #fb5509;
    --color-surface: #fb5509;
    background-color: #fb5509 !important;
    border-color: #e04a00 !important;
}
.page-footer a,
.page-footer p,
.page-footer h2,
.page-footer span,
.page-footer small {
    color: #1A1A1A !important;
}

/* ── Remove gap between header and banner ──────────────────────────── */
header.page-header {
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
.page-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.page-main .columns {
    padding-top: 0 !important;
}