@font-face {
    font-family: "ITC Garamond Std Book Condensed";
    src: url("../fonts/itc-garamond-std-book-condensed.woff2") format("woff2"),
        url("../fonts/itc-garamond-std-book-condensed.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bebas Neue";
    src: url("../fonts/bebas-neue.woff2") format("woff2"),
        url("../fonts/bebas-neue.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-beige-1: #e5e2d6;
    --color-beige-2: #f5f3eb;
    --color-cream: #fffefa;
    --color-grey-1: #2c301f;
    --color-grey-2: #42462f;
    --color-grey-3: #6B6E62;
    --color-grey-4: #9B9C8F;
    --color-grey-5: #B8B5A9;
    --color-orange-dark: #d88c23;

    --color-text: var(--color-grey-1);
    --color-background: var(--color-beige-2);
    --color-primary: var(--color-orange-dark);
    --color-border: var(--color-beige-1);

    --font-family-base: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-family-heading: "ITC Garamond Std Book Condensed", Garamond, "Times New Roman", serif;
    --font-family-display: "Bebas Neue", "Lato", system-ui, sans-serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    --container-width: 1200px;
    --container-width-wide: 1440px;
    --radius: 0.375rem;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.5;

    /* Touch browsers paint a translucent block over anything they consider
       tappable. On these cards and slider handles it flashes on every touch and
       reads as a rendering fault rather than feedback. Note that dropping
       `cursor: pointer` would not help here — cursors are never drawn on a
       touch screen, so the highlight is the only thing actually visible. */
    -webkit-tap-highlight-color: transparent;
}

/* Set while a modal owns the screen — the menu popup and the video lightbox.
   Both used to leave the page scrollable underneath, so the site slid away
   behind an open overlay.
   padding-right cancels out the scrollbar that overflow: hidden removes —
   without it, losing the scrollbar narrowed the viewport and the whole page
   jumped left the instant a modal opened. --sk-scrollbar-width is measured
   and set in global.js right before this class is added; it comes out 0 on
   an overlay scrollbar (macOS, touch), so this is a no-op there. */
body.has-scroll-lock {
    overflow: hidden;
    padding-right: var(--sk-scrollbar-width, 0px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-family-heading);
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-text);
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-3);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Links that came from a rich-text field rather than a template.
   The stylesheet had no `a` selector at all, so every link an editor typed into
   a description or tagline fell back to the browser default — blue, underlined,
   no hover, no focus ring, none of the theme's colours. Scoped with
   :not([class]) so it only picks up editor output: every anchor the templates
   render carries a class and keeps its own styling untouched. */
a:not([class]) {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

a:not([class]):hover,
a:not([class]):focus-visible {
    color: var(--color-text);
}

.button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

/* This class advertised itself as clickable with cursor: pointer but had no
   hover or focus state of its own. */
.button:hover,
.button:focus-visible {
    opacity: 0.85;
}
/* WooCommerce product grid gutter.
   Woo's own stylesheet pairs a -8px inline margin on .wc-block-grid__products
   with +8px of padding on each .wc-block-grid__product to make the gutter. Only
   the negative half arrives here — the products compute to padding: 0 — so the
   container ended up 8px wider than the page and scrolled it sideways at every
   width. Measured on /cart/ (the empty-cart block renders this grid): container
   391px inside a 375px viewport, left edge at -8px.
   Nothing is being aligned by the negative margin, so it goes.
   Qualified with `body` purely to out-specify Woo's own rule, which is a single
   class and is enqueued after this file — an unqualified selector here tied on
   specificity and lost on order. */
body .wc-block-grid__products {
    margin-inline: 0;
}