/*
 * HŌMU — palette, type and base styles, from the brand guide
 * (BRAND IDENTITY MASTER.pdf, V1 2025).
 *
 * Every colour on the site is one of these variables (style_v2.css and the
 * <style> blocks in the Blade views refer to them), so a colour change is an
 * edit here and nowhere else. Emails are the exception: mail clients don't
 * support CSS variables, so resources/views/emails/layout.blade.php repeats
 * the hex values.
 *
 * Primary colours are the guide's four; the neutrals in between (text, lines,
 * muted) are derived from them. The secondary colours are, in the guide's
 * words, "dictated by campaign and seasonal colour palettes" — here they are
 * hero bands and the sale colour, not general UI.
 */
:root {
    /* Primary (brand guide) */
    --homu-paper:        #F4F3EE;  /* primary #1 — page background */
    --homu-cream:        #FFFCF1;  /* primary #2 — light bands and panels */
    --homu-brown:        #563E24;  /* primary #3 — dark bands, accents */
    --homu-lime:         #C1FF72;  /* primary #4 — highlight, sparingly */

    /* Secondary (brand guide) — campaigns and seasons */
    --homu-yellow:       #EFBD40;
    --homu-red:          #C6312C;
    --homu-green:        #097D4C;
    --homu-blue:         #004EAD;

    /* Copy and neutrals. The guide sets type in black on the off-white. */
    --homu-ink:          #1A1A1A;  /* headings, buttons, logo */
    --homu-ink-hover:    #3A3835;
    --homu-white:        #FFFFFF;
    --homu-text:         #2B2926;  /* body copy */
    --homu-muted:        #66625B;  /* secondary text — 5.5:1 on the page */
    --homu-line:         #DEDAD1;
    --homu-line-strong:  #BDB8AD;
    --homu-stone:        #E4E0D6;  /* legacy poster band; prefer the guide's colours */

    /* Jess's website design (Nov 2026) */
    --homu-header:       #DEDED3;  /* header band */
    --homu-black:        #111111;  /* announcement bar, footer, solid buttons */
    --homu-tile:         #E7E6E0;  /* behind product photos while they load */

    /* Status */
    --homu-sale:         var(--homu-red);
    --homu-success:      var(--homu-green);
    --homu-success-bg:   #E3F0E8;
    --homu-success-line: #B9D9C6;
    --homu-error:        #A1261F;
    --homu-error-bg:     #F7E3E1;
    --homu-error-line:   #E9BDB9;
    --homu-warn:         #7A5A12;
    --homu-warn-bg:      #FBEFCF;

    /* Type — the guide's Helvetica (Bold for headings, Regular for copy).
       System fonts, nothing downloaded: real Helvetica on Apple devices,
       Arial (near-identical metrics) on Windows. To use a licensed web font
       later, add its @font-face and put its name first here. */
    --homu-font:         'Helvetica Neue', Helvetica, Arial, sans-serif;
    --homu-font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Big editorial headlines (hero, section titles) in Jess's design. Berbati
       is the brand serif; until its web font files are on the site, Instrument
       Serif (Google Fonts, loaded in the layout) stands in. To switch, add
       Berbati's @font-face — nothing else changes. */
    --homu-font-serif:   Berbati, 'Instrument Serif', 'Times New Roman', serif;
    --homu-tracking:     0.12em;   /* spaced capitals for labels and buttons */
}

body {
    background: var(--homu-paper);
    color: var(--homu-text);
    font-family: var(--homu-font);
    font-weight: 400;
}

/* The guide's headings: Helvetica Bold, in capitals. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--homu-font-display);
    font-weight: 700;
    color: var(--homu-ink);
}
h1, h2, h3 {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

a { color: var(--homu-ink); }
a:hover { color: var(--homu-ink-hover); }

/* Logo */
/* Height comes from the brand (config/brand.php, set in the layout's <head>):
   Homu's spaced capitals and Tinka's monogram need different heights to read
   at the same weight. */
.homu-logo { display: block; height: var(--homu-logo-h, 26px); width: auto; }
.homu-logo--mobile { height: calc(var(--homu-logo-h, 26px) * .78); }
.homu-logo--drawer { height: calc(var(--homu-logo-h, 26px) * .62); }
.checkout-logo .homu-logo { height: calc(var(--homu-logo-h, 26px) * .85); }

/* Buttons: pills (Jess's design), ink, spaced capitals */
.btn {
    border-radius: 999px;
    border-width: 1.5px;
    padding: .7rem 1.8rem;
    font-family: var(--homu-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
}
.btn-primary, .btn-dark {
    background: var(--homu-ink);
    border-color: var(--homu-ink);
    color: var(--homu-paper);
}
.btn-primary:hover, .btn-primary:focus,
.btn-dark:hover, .btn-dark:focus {
    background: var(--homu-ink-hover);
    border-color: var(--homu-ink-hover);
    color: var(--homu-paper);
}
.btn-outline-primary, .btn-outline-dark {
    color: var(--homu-ink);
    border-color: var(--homu-ink);
}
.btn-outline-primary:hover, .btn-outline-dark:hover {
    background: var(--homu-ink);
    color: var(--homu-paper);
}

.form-control { border-radius: 0; border-color: var(--homu-line-strong); }
.form-control:focus {
    border-color: var(--homu-ink);
    box-shadow: 0 0 0 1px var(--homu-ink);
}

/* Staff-only strip while previewing the other brand (BrandPreview middleware) */
.brand-preview-bar {
    background: var(--homu-warn-bg); color: var(--homu-warn); text-align: center;
    font-size: 13px; padding: 7px 16px; border-bottom: 1px solid var(--homu-line-strong);
}
.brand-preview-bar a { color: var(--homu-warn); text-decoration: underline; margin-left: 8px; }

::selection { background: var(--homu-cream); color: var(--homu-ink); }

/* ==========================================================================
   Homepage heroes — one block per LAYOUT in WEB_HERO
   --------------------------------------------------------------------------
   Templates in resources/views/partials/hero/, chosen by App\Services\
   HeroResolver. Staff pick a layout and a tone in the intranet, never a font
   or a colour, so every hero stays inside the palette above.
   ========================================================================== */
.homu-wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }

/* The guide's small labels ("ONE. ABOUT US"): bold capitals. */
.homu-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: var(--homu-tracking);
    text-transform: uppercase; color: var(--homu-ink); margin: 0;
}

/* Shared headline and body type for every layout */
/* Jess's design: big serif headlines in sentence case ("Your table, your
   expression."), not bold capitals. */
[class^="homu-hero"] h1 {
    font-family: var(--homu-font-serif); font-weight: 400; font-style: italic;
    font-size: clamp(2.6rem, 5.4vw, 5.25rem); line-height: 1.0;
    letter-spacing: 0; text-transform: none; color: var(--homu-ink);
    max-width: 16ch; margin: .6rem 0 0;
}
/* <em> marks a word to accent: brown on light grounds, lime on dark. */
[class^="homu-hero"] h1 em { font-style: normal; color: var(--homu-brown); }
[class^="homu-hero"] p { margin-top: 1rem; max-width: 50ch; font-size: 16px; line-height: 1.6; color: var(--homu-text); }

/* Buttons (partials/hero/ctas) */
.homu-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.homu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 30px; border: 1.5px solid transparent; border-radius: 999px;
    font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.homu-btn:hover { text-decoration: none; }
.homu-btn--solid { background: var(--homu-ink); color: var(--homu-paper); border-color: var(--homu-ink); }
.homu-btn--solid:hover { background: var(--homu-ink-hover); color: var(--homu-paper); }
.homu-btn--ghost { color: var(--homu-ink); border-color: var(--homu-ink); }
.homu-btn--ghost:hover { background: var(--homu-ink); color: var(--homu-paper); }
.homu-btn--light { background: var(--homu-paper); color: var(--homu-ink); border-color: var(--homu-paper); }
.homu-btn--light:hover { background: var(--homu-cream); color: var(--homu-ink); }
.homu-btn--ghost-light { color: var(--homu-paper); border-color: var(--homu-paper); }
.homu-btn--ghost-light:hover { background: var(--homu-paper); color: var(--homu-ink); }
.homu-hero-note { font-size: 14px; }
.homu-hero-note a { text-decoration: underline; text-underline-offset: 3px; }

/* Staff-only strip above a ?hero= preview */
.homu-hero-preview {
    background: var(--homu-ink); color: var(--homu-paper); text-align: center;
    font-size: 12px; letter-spacing: .06em; padding: .55rem 1rem;
}

/* editorial: copy block, then the photograph full width */
.homu-hero { padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(1.4rem, 2.4vw, 2rem); }
.homu-hero-staged-sec { padding-bottom: clamp(2rem, 4vw, 3rem); }
.homu-hero-staged img { display: block; width: 100%; max-height: 72vh; object-fit: cover; }

/* split: one photograph beside the copy */
.homu-hero-split-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, min(30rem, 45%));
    gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
    padding-block: clamp(1.6rem, 3.4vw, 3rem);
}
.homu-hero-split--rtl .homu-hero-split-media { order: 2; }
.homu-hero-split--rtl .homu-hero-split-grid { grid-template-columns: minmax(18rem, min(30rem, 45%)) minmax(0, 1fr); }
.homu-hero-split.is-textonly .homu-hero-split-grid { grid-template-columns: minmax(0, 1fr); }
.homu-hero-split-media img {
    display: block; width: 100%; height: auto;
    max-height: clamp(320px, 40vw, 580px); object-fit: contain;
}

/* overlay: copy on a scrim over one full-bleed photograph */
.homu-hero-overlay { position: relative; isolation: isolate; }
.homu-hero-overlay-img { display: block; width: 100%; height: clamp(340px, 48vw, 620px); object-fit: cover; }
.homu-hero-overlay-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(26,26,26,.62) 0%, rgba(26,26,26,.28) 55%, rgba(26,26,26,0) 100%);
}
.homu-hero-overlay-in { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.homu-hero-overlay-copy h1,
.homu-hero-overlay-copy p,
.homu-hero-overlay-copy .homu-eyebrow,
.homu-hero-overlay-copy .homu-hero-note,
.homu-hero-overlay-copy .homu-hero-note a { color: var(--homu-paper); }
.homu-hero-overlay-copy h1 em { color: var(--homu-lime); }

/* poster: a solid band, type only. Tone picks the band. */
.homu-hero-poster { padding-block: clamp(2.6rem, 6vw, 5rem); text-align: center; }
.homu-hero-poster-in { display: flex; flex-direction: column; align-items: center; }
.homu-hero-poster h1 { margin-inline: auto; }
.homu-hero-poster p { margin-inline: auto; }
.homu-hero-poster .homu-hero-cta { justify-content: center; }
/* Bands: the guide's primary colours, then its seasonal ones. The dark bands
   take cream type; partials/hero/poster.blade.php gives them light buttons. */
.homu-hero-poster--cream  { background: var(--homu-cream); }
.homu-hero-poster--brown  { background: var(--homu-brown); }
.homu-hero-poster--lime   { background: var(--homu-lime); }
.homu-hero-poster--yellow { background: var(--homu-yellow); }
.homu-hero-poster--red    { background: var(--homu-red); }
.homu-hero-poster--green  { background: var(--homu-green); }
.homu-hero-poster--blue   { background: var(--homu-blue); }
.homu-hero-poster--brown h1, .homu-hero-poster--brown p, .homu-hero-poster--brown .homu-eyebrow,
.homu-hero-poster--brown .homu-hero-note, .homu-hero-poster--brown .homu-hero-note a,
.homu-hero-poster--red h1,   .homu-hero-poster--red p,   .homu-hero-poster--red .homu-eyebrow,
.homu-hero-poster--red .homu-hero-note,   .homu-hero-poster--red .homu-hero-note a,
.homu-hero-poster--green h1, .homu-hero-poster--green p, .homu-hero-poster--green .homu-eyebrow,
.homu-hero-poster--green .homu-hero-note, .homu-hero-poster--green .homu-hero-note a,
.homu-hero-poster--blue h1,  .homu-hero-poster--blue p,  .homu-hero-poster--blue .homu-eyebrow,
.homu-hero-poster--blue .homu-hero-note,  .homu-hero-poster--blue .homu-hero-note a { color: var(--homu-cream); }
.homu-hero-poster--brown h1 em { color: var(--homu-lime); }

/* feature: the brand guide's photo placement — a bold tagline at the top,
   the headline (or the logo) in the middle, a short line at the foot, all
   centred in white over one photograph. */
.homu-hero-feature { position: relative; isolation: isolate; overflow: hidden; }
.homu-hero-feature-img {
    display: block; width: 100%; height: clamp(420px, 56vw, 760px); object-fit: cover;
}
/* An even, light tint so white type holds on any photo without hiding it. */
.homu-hero-feature-tint { position: absolute; inset: 0; z-index: 1; background: rgba(26, 26, 26, .22); }
.homu-hero-feature-in {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    text-align: center; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px);
}
.homu-hero-feature .homu-eyebrow { color: var(--homu-white); font-size: clamp(12px, 1.2vw, 15px); max-width: 32ch; }
.homu-hero-feature-mid { display: flex; flex-direction: column; align-items: center; }
.homu-hero-feature h1 { color: var(--homu-white); margin: 0 auto; max-width: 16ch; }
.homu-hero-feature h1 em { color: var(--homu-lime); }
.homu-hero-feature-logo { display: block; width: clamp(180px, 30vw, 420px); height: auto; }
.homu-hero-feature-foot { display: flex; flex-direction: column; align-items: center; }
.homu-hero-feature-foot p { color: var(--homu-white); margin: 0; font-size: 15px; }
.homu-hero-feature .homu-hero-cta { justify-content: center; margin-top: 1rem; }
.homu-hero-feature .homu-hero-note, .homu-hero-feature .homu-hero-note a { color: var(--homu-white); }

/* mosaic: copy beside a tall photograph and two squares */
.homu-hero-mosaic-grid {
    display: grid; grid-template-columns: minmax(18rem, 30rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
    padding-block: clamp(1.6rem, 3.4vw, 3rem);
}
.homu-hero-mosaic-media {
    display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr;
    gap: 10px; height: clamp(340px, 42vw, 560px);
}
.homu-hero-mosaic-fig { margin: 0; overflow: hidden; }
.homu-hero-mosaic-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.homu-hero-mosaic-fig--1 { grid-row: 1 / 3; }
.homu-hero-mosaic-media.is-two .homu-hero-mosaic-fig--2 { grid-row: 1 / 3; }

/* Phones: every two-column layout stacks, photograph first */
@media (max-width: 767px) {
    .homu-hero-split-grid,
    .homu-hero-split--rtl .homu-hero-split-grid,
    .homu-hero-mosaic-grid { grid-template-columns: minmax(0, 1fr); }
    .homu-hero-split--rtl .homu-hero-split-media { order: 0; }
    .homu-hero-mosaic-media { order: -1; height: 72vw; }
    .homu-hero-overlay-scrim { background: rgba(26,26,26,.5); }
    .homu-hero-feature-img { height: 125vw; }
}

/* The category mega menu: one row of columns at its natural width, capped
   to the screen so it never runs past the right edge (with the wider
   Helvetica it could). Columns only wrap to a second row on a screen too
   narrow for them all, and a very short screen scrolls the menu itself.
   width: max-content matters — without it an absolutely positioned flex box
   shrinks to its narrowest column and stacks every column in one tall strip. */
.mega-menu {
    width: max-content; max-width: calc(100vw - 100px);
    flex-wrap: wrap; row-gap: 24px;
    max-height: calc(100vh - 140px); overflow-y: auto;
}
/* Belt and braces: nothing should ever scroll the page sideways. `clip`
   rather than `hidden` so the sticky header keeps working. */
html, body { overflow-x: clip; }

/* ----------------------------------------------------------------------------
   Product variant options (product page): Finish, Size … as pill buttons, per
   Jess's design. Each pill is a link to that variant's page. A pill marked
   .is-other also changes another option (no exact match), so it is dimmed.
   ------------------------------------------------------------------------- */
.variant-options { display: flex; flex-direction: column; gap: 18px; margin: 10px 0 20px; }
.variant-dim-label {
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--homu-ink); margin-bottom: 10px;
}
.variant-values { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-pill {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
    border: 1.5px solid var(--homu-line-strong); border-radius: 999px;
    background: transparent; color: var(--homu-ink); font-size: 14px;
    text-decoration: none; transition: border-color .15s, background .15s, color .15s;
}
.variant-pill:hover { border-color: var(--homu-ink); color: var(--homu-ink); text-decoration: none; }
.variant-pill.is-selected { background: var(--homu-ink); border-color: var(--homu-ink); color: var(--homu-cream); }
.variant-pill.is-other:not(.is-selected) { opacity: .6; }
.variant-pill:focus-visible { outline: 2px solid var(--homu-brown); outline-offset: 2px; }

/* ----------------------------------------------------------------------------
   Jess's website design (Nov 2026) — site-wide pieces
   ------------------------------------------------------------------------- */

/* Add to cart / Choose options on cards and the product page: outlined pill
   that fills black on hover (style_v2.css had a small rounded box). */
.add-to-cart-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 26px; border: 1.5px solid var(--homu-black); border-radius: 999px;
    background: transparent; color: var(--homu-black); opacity: 1;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
    transition: background .2s, color .2s;
}
.add-to-cart-button:hover, .add-to-cart-button:focus {
    background: var(--homu-black); color: var(--homu-cream); text-decoration: none;
}

/* Small spaced-capital section labels ("NEW IN STORE", "THE GIFT EDIT"). */
.homu-label {
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: inherit; margin: 0;
}
/* Serif display headings for editorial bands. */
.homu-serif {
    font-family: var(--homu-font-serif); font-weight: 400; text-transform: none;
    letter-spacing: 0; line-height: 1.05; color: inherit;
}
.homu-serif em, .homu-serif.is-italic { font-style: italic; }

/* Product cards (Jess's design): tall photo, name and price on one line,
   the sub-category or an action beneath. Shop grid and homepage rows. */
.shop-card { display: flex; flex-direction: column; gap: 12px; color: var(--homu-black); text-decoration: none; }
.shop-card:hover { color: var(--homu-black); text-decoration: none; }
.shop-card-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--homu-tile); }
.shop-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shop-card:hover .shop-card-img img { transform: scale(1.03); }
.shop-card-tag {
    position: absolute; top: 12px; left: 12px; background: var(--homu-cream); padding: 5px 10px;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.shop-card-tag.is-sale { color: var(--homu-sale); }
.shop-card-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.shop-card-price { white-space: nowrap; text-align: right; }
.shop-card-price s { color: var(--homu-muted); margin-right: 6px; }
.shop-card-price .is-sale { color: var(--homu-sale); }
.shop-card-type { font-size: 12px; color: var(--homu-muted); letter-spacing: 0.04em; text-transform: uppercase; }
/* The photo is a link on homepage cards: make it a block so the 4:5 box applies. */
a.shop-card-img { display: block; }
button.add-to-cart-button { font-family: inherit; cursor: pointer; }
.shop-card .add-to-cart-button { align-self: stretch; }
.shop-note { text-align: center; color: var(--homu-muted); font-size: 12px; padding: 0 16px 40px; }

/* Page numbers (Bootstrap pagination markup): small pills, ink on paper. */
.pagination { gap: 6px; flex-wrap: wrap; justify-content: center; }
.pagination .page-link {
    min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid #CFCEC6; border-radius: 999px !important; background: transparent;
    color: var(--homu-black); font-size: 13px; padding: 0 14px; margin: 0;
}
.pagination .page-link:hover { border-color: var(--homu-black); background: transparent; color: var(--homu-black); }
.pagination .page-item.active .page-link { background: var(--homu-black); border-color: var(--homu-black); color: var(--homu-cream); }
.pagination .page-item.disabled .page-link { opacity: .4; background: transparent; }
.pagination .page-link:focus { box-shadow: 0 0 0 2px var(--homu-brown); }