/* ==========================================================================
   overrides.css

   Single home for hand-authored CSS overrides. base.css and adjustments.css
   are treated as generated/base layers and are NOT edited directly; every
   adjustment is added here and loaded last so it wins the cascade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product overview positioning
   Overrides `.woocommerce ul.products--main li.product:nth-child(...)` from
   base.css. Base ships a 2-column staggered grid (4n pattern, >= 48em).

   Goal:
   - >= 1024px (64em): 3 items per row, with the middle item of every row
     (the 2nd item of the first row) sitting lowest.
   - >= 1600px (100em): 4 items per row, with the 2nd and 4th items lowered.
   -------------------------------------------------------------------------- */

/* 3 items per row from 1024px; middle column sits lowest. */
@media only screen and (min-width: 64em) {
    .woocommerce ul.products--main {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* Reset the base 4n stagger so every item starts at the top. */
    .woocommerce ul.products--main li.product:nth-child(4n + 1),
    .woocommerce ul.products--main li.product:nth-child(4n + 2),
    .woocommerce ul.products--main li.product:nth-child(4n + 3),
    .woocommerce ul.products--main li.product:nth-child(4n + 4) {
        padding-top: 0;
        align-items: flex-start;
        justify-content: center;
    }

    /* Lower the middle item of each row (2nd, 5th, 8th, ...). */
    .woocommerce ul.products--main li.product:nth-child(3n + 2) {
        padding-top: 8rem;
        align-items: flex-end;
    }
}

/* 4 items per row from 1600px; 2nd and 4th items lowered. */
@media only screen and (min-width: 100em) {
    .woocommerce ul.products--main {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    /* Reset the 64em 3n stagger so every item starts at the top. */
    .woocommerce ul.products--main li.product:nth-child(3n + 1),
    .woocommerce ul.products--main li.product:nth-child(3n + 2),
    .woocommerce ul.products--main li.product:nth-child(3n + 3) {
        padding-top: 0;
        align-items: flex-start;
        justify-content: center;
    }

    /* Lower the 2nd and 4th item of each row. */
    .woocommerce ul.products--main li.product:nth-child(4n + 2),
    .woocommerce ul.products--main li.product:nth-child(4n + 4) {
        padding-top: 8rem;
        align-items: flex-end;
    }
}

/* --------------------------------------------------------------------------
   Page theming
   Driven by the "Theme" sidebar field group (acf.php) and the wrapper class +
   inline custom properties output on `.page-modules` in page.php:

   - Default: untouched — page modules keep their #c2baad (`.theme--brown`) surface.
   - White:   page modules get a white surface.
   - Custom:  --page-background / --page-accent / --page-titles are set inline
              on `.page-modules.page-theme-custom` and consumed below.

   Page modules render as `.theme--brown` sections (e.g. `.text-columns`,
   `.text-header`); their brown surface, prefix/suffix accent and titles are
   what we re-colour here.
   -------------------------------------------------------------------------- */

/* Default accent used by the Text columns "Inverse" variant when no custom
   accent is set (Default/White themes). Matches the theme's brown accent. */
.page-modules {
    --page-accent-fallback: #8b573b;
}

/* White theme: page modules use a white surface instead of #c2baad. */
.page-modules.page-theme-white .theme--brown {
    background-color: #fff;
}

/* Custom theme: page modules use the chosen background colour. */
.page-modules.page-theme-custom .theme--brown {
    background-color: var(--page-background, #c2baad);
}

/* Custom theme: prefixes / suffixes use the chosen accent colour. */
.page-modules.page-theme-custom .prefix,
.page-modules.page-theme-custom .suffix,
.page-modules.page-theme-custom .prefix a,
.page-modules.page-theme-custom .suffix a {
    color: var(--page-accent);
}

/* Custom theme: larger titles use the chosen Titles colour. */
.page-modules.page-theme-custom h1,
.page-modules.page-theme-custom h2 {
    color: var(--page-titles);
}

/* Text columns "Inverse" variant: background uses the accent colour.
   In Custom theme this is the editor-chosen accent; otherwise the brown
   accent fallback above. */
.page-modules .text-columns--inverse {
    background-color: var(
        --page-accent,
        var(--page-accent-fallback)
    ) !important;
}

.page-modules .text-columns--inverse h1,
.page-modules .text-columns--inverse h2 {
    color: inherit;
}

/* Divider between consecutive Text columns modules.
   base.css adds `border-top` to every `.text-columns + .text-columns` inner.
   We only want that divider when both neighbours share the same variant
   (non-inverse → non-inverse, or inverse → inverse). When the variant changes
   across the boundary, drop the border so the colour change is the separator. */
.page-modules
    .text-columns:not(.text-columns--inverse)
    + .text-columns--inverse
    .text-columns__inner,
.page-modules
    .text-columns--inverse
    + .text-columns:not(.text-columns--inverse)
    .text-columns__inner {
    border-top: none;
}

/* --------------------------------------------------------------------------
   Products preview module (modules/products_preview.php)

   Centered sub-category title with a top-right sibling-category selector. The
   selector reuses the `.type-selector` dropdown styling from base.css, which is
   scoped to `.page-header`/`.product-header`; this module lives in a page so we
   re-declare the same rules under `.products-preview`. The product grid is
   wrapped in `.woocommerce` so it inherits the exact `ul.products--main`
   ordering/positioning used on the product overview templates.
   -------------------------------------------------------------------------- */
.products-preview {
    position: relative;
    padding: 5rem 4rem;
}

.products-preview__header {
    position: relative;
    min-height: 3rem;
}

.products-preview__title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: normal;
}

@media only screen and (min-width: 64em) {
    .products-preview__title {
        font-size: 3rem;
    }
}
@media only screen and (min-width: 80em) {
    .products-preview__title {
        font-size: 4rem;
    }
}

/* Top-right selector (mirrors .type-selectors, anchored right instead of left). */
.products-preview__selectors {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 4rem;
    font-size: 1.3rem;
    letter-spacing: 0.2rem;
    z-index: 10;
}

.products-preview .type-selector {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.products-preview .type-selector:hover .type-selector__box {
    display: block;
}

.products-preview .type-selector__box {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 30px;
    width: 200px;
    z-index: 100;
}

.products-preview .type-selector__box ul {
    background: #fff;
    border: 1px solid #181716;
    margin: 0;
    padding: 0;
    list-style: none;
}

.products-preview .type-selector__box ul a {
    text-decoration: none;
}

.products-preview .type-selector__box ul li a {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid #181716;
}

.products-preview .type-selector__box ul li a:hover,
.products-preview .type-selector__box ul li a.active {
    background: #c2baad;
}

.products-preview .type-selector__box ul li:last-child a {
    border-bottom: none;
}

.products-preview__footer {
    margin-top: 2rem;
    text-align: center;
}

.products-preview__more {
    letter-spacing: 0.2rem;
}

/* On small screens the selector drops below the centered title. */
@media only screen and (max-width: 47.9375em) {
    .products-preview__selectors {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 2rem;
        justify-content: center;
        font-size: 1.2rem;
    }

    .products-preview .type-selector__box {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}