/* =============================================================
   patterns/patterns.css — Pattern component styles

   ALL component CSS lives here, in one labelled section per
   pattern (or per WooCommerce template). Pages never carry
   <style> blocks. When a pattern is translated to WordPress,
   its section here is appended to the theme's style.css.

   Rules for this file:
   - Only var(--wp--preset--*) for colours, spacing, font sizes
   - One section per pattern, matching the fragment filename
   - Structural/base styles belong in style.css, not here
   ============================================================= */


/* ============================================================
   Shared: eyebrow label
   Small uppercase caption above section headings.
   ============================================================ */
.eyebrow {
    color: var(--wp--preset--color--forest);
}

.is-style-forest .eyebrow,
.is-style-slate .eyebrow,
.is-style-soft-black .eyebrow,
.is-style-forest-tile .eyebrow,
.is-style-forest-lines .eyebrow,
.is-style-forest-flow .eyebrow,
.is-style-forest-wordmark .eyebrow {
    color: var(--wp--preset--color--lemon);
}

/* Lemon eyebrows clash with the lemon linework / gradient — stay white */
.is-style-forest-lines-lemon .eyebrow,
.is-style-gradient-forest .eyebrow {
    color: var(--wp--preset--color--white);
}


/* ============================================================
   Shared: tooltip / pop-up
   The accent blues are reserved for pop-up text and attention
   moments (brand guide, Colour Usage p13) — tooltips are their
   home in the UI. Two treatments from the guide's examples:
   - .tooltip          solid cobalt pill, white text (numbered
                       step markers, inline hints)
   - .tooltip--light   white card, cornflower text (safety notes,
                       "pause here" call-outs)
   One short sentence max. In WordPress these ship as component
   CSS with the theme (title-attribute / custom-block driven).
   ============================================================ */
.tooltip {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--xxxs);
    background-color: var(--wp--preset--color--cobalt);
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
    border-radius: 8px;
    max-width: 32ch;
}

.tooltip--light {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--cornflower);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   Pattern: page-hero
   ============================================================ */
section.page-hero {
    padding-top: var(--wp--preset--spacing--xl);
    padding-bottom: var(--wp--preset--spacing--xl);
}


/* ============================================================
   Pattern: home-hero
   ============================================================ */
section.home-hero {
    padding-top: var(--wp--preset--spacing--xl);
}


/* ============================================================
   Pattern: section-cta
   ============================================================ */
.section-cta__inner {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section-cta__inner .button-group {
    justify-content: center;
}


/* ============================================================
   Pattern: feature-grid
   (card internals use .feature-card from tokens.css)
   ============================================================ */


/* ============================================================
   Pattern: product-grid
   ul/li structure matches woocommerce/product-collection output
   ============================================================ */
.wc-block-product-template {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--md);
}

.wc-block-product-template.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .wc-block-product-template,
    .wc-block-product-template.columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .wc-block-product-template,
    .wc-block-product-template.columns-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Product card extras (base card styles live in style.css) */
.product-card__category {
    color: var(--wp--preset--color--dark-grey);
}

/* Shop archive: sort/results bar above the grid */
.shop-toolbar {
    border-bottom: 1px solid var(--wp--preset--color--pale-grey);
    padding-bottom: var(--wp--preset--spacing--xs);
}

/* Pagination placeholder — mirrors wp-block-query-pagination */
.wp-block-query-pagination {
    display: flex;
    gap: var(--wp--preset--spacing--xs);
    justify-content: center;
}

.wp-block-query-pagination a,
.wp-block-query-pagination span {
    padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
    border: 1px solid var(--wp--preset--color--pale-grey);
    border-radius: 8px;
}

.wp-block-query-pagination .current {
    background-color: var(--wp--preset--color--forest);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--forest);
}


/* ============================================================
   Pattern: contact-form
   (field/input base styles come from style.css)
   ============================================================ */


/* ============================================================
   Template: single-product (standard)
   Maps to templates/single-product.html — gallery blocks are
   woocommerce/product-image-gallery, summary is post-title +
   product-price + add-to-cart-form.
   ============================================================ */
main.product-single {
    padding-top: var(--wp--preset--spacing--xl);
    padding-bottom: var(--wp--preset--spacing--xl);
}

.wp-block-woocommerce-product-image-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xs);
}

.product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--xs);
}

.product-single__summary {
    padding-left: var(--wp--preset--spacing--xl);
}

@media (max-width: 900px) {
    .product-single__summary {
        padding-left: 0;
    }
}

.product-single__price {
    color: var(--wp--preset--color--forest);
}

/* Add-to-cart form — mirrors woocommerce/add-to-cart-form output */
.wc-block-add-to-cart-form {
    display: flex;
    gap: var(--wp--preset--spacing--xs);
    align-items: stretch;
}

.wc-block-add-to-cart-form .quantity input {
    width: 5rem !important;
    text-align: center;
}

.product-single__meta {
    border-top: 1px solid var(--wp--preset--color--pale-grey);
    padding-top: var(--wp--preset--spacing--ms);
}


/* ============================================================
   Template: single-product (configurator)
   Maps to a two-panel template like alouvre's single-product:
   image panel + config panel, with a sticky summary footer.
   The form itself becomes a custom block in WordPress.
   ============================================================ */
main.configurator-layout {
    display: flex;
    align-items: stretch;
}

@media (max-width: 900px) {
    main.configurator-layout {
        flex-direction: column;
    }
}

.configurator-layout__image-panel {
    width: 50%;
    background-color: var(--wp--preset--color--pale-grey);
}

.configurator-layout__image-panel .img-placeholder {
    position: sticky;
    top: 0;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
}

.configurator-layout__config-panel {
    width: 50%;
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xxl);
}

@media (max-width: 900px) {
    .configurator-layout__image-panel,
    .configurator-layout__config-panel {
        width: 100%;
    }

    .configurator-layout__image-panel .img-placeholder {
        position: static;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

.configurator-step {
    border-top: 1px solid var(--wp--preset--color--pale-grey);
    padding-top: var(--wp--preset--spacing--ms);
}

.configurator-step__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--xs);
}

@media (max-width: 600px) {
    .configurator-step__options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.configurator-option {
    border: 1px solid var(--wp--preset--color--pale-grey);
    border-radius: 8px;
    padding: var(--wp--preset--spacing--xs);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xxxs);
    transition: border-color ease 0.2s;
    background: var(--wp--preset--color--white);
}

.configurator-option:hover {
    border-color: var(--wp--preset--color--mid-grey);
}

/* Selected state — cobalt accent ("buttons needing explicit attention") */
.configurator-option.is-selected {
    border-color: var(--wp--preset--color--cobalt);
    background-color: rgba(24, 54, 217, 0.05);
}

.configurator-option__swatch {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    background-color: var(--wp--preset--color--pale-grey);
}

/* Sticky total + add-to-cart bar */
.configurator-footer {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background-color: var(--wp--preset--color--white);
    border-top: 1px solid var(--wp--preset--color--pale-grey);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.05);
    padding-top: var(--wp--preset--spacing--xs);
    padding-bottom: var(--wp--preset--spacing--xs);
}


/* ============================================================
   Template: page-cart
   Class names match the woocommerce/cart block DOM so styles
   carry over to the real cart block unchanged.
   ============================================================ */
main.cart-page,
main.checkout-page {
    padding-top: var(--wp--preset--spacing--xl);
    padding-bottom: var(--wp--preset--spacing--xl);
}

.wc-block-cart-items {
    width: 100%;
    border-collapse: collapse;
}

.wc-block-cart-items th {
    text-align: left;
    padding-bottom: var(--wp--preset--spacing--xs);
    border-bottom: 1px solid var(--wp--preset--color--pale-grey);
}

.wc-block-cart-items__row td {
    padding-top: var(--wp--preset--spacing--ms);
    padding-bottom: var(--wp--preset--spacing--ms);
    border-bottom: 1px solid var(--wp--preset--color--pale-grey);
    vertical-align: top;
}

.wc-block-cart-item__image {
    width: 96px;
}

.wc-block-cart-item__image .img-placeholder {
    width: 80px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}

.wc-block-cart-item__quantity input {
    width: 4.5rem !important;
    text-align: center;
}

.wc-block-cart-item__remove-link {
    color: var(--wp--preset--color--dark-grey);
    text-decoration: underline;
    cursor: pointer;
}

.wc-block-cart__sidebar-panel,
.wc-block-checkout__sidebar-panel {
    background-color: var(--wp--preset--color--soft-grey);
    border-radius: 12px;
    padding: var(--wp--preset--spacing--md);
}

.wc-block-components-totals-item {
    display: flex;
    justify-content: space-between;
    padding-top: var(--wp--preset--spacing--xxs);
    padding-bottom: var(--wp--preset--spacing--xxs);
}

.wc-block-components-totals-item.is-total {
    border-top: 1px solid var(--wp--preset--color--pale-grey);
    margin-top: var(--wp--preset--spacing--xxs);
    padding-top: var(--wp--preset--spacing--xs);
}

.wc-block-cart__submit-button,
.wc-block-checkout__submit-button {
    display: block;
    text-align: center;
    margin-top: var(--wp--preset--spacing--ms);
}


/* ============================================================
   Template: page-checkout
   Class names match the woocommerce/checkout block DOM.
   ============================================================ */
.wc-block-components-checkout-step {
    border-top: 1px solid var(--wp--preset--color--pale-grey);
    padding-top: var(--wp--preset--spacing--ms);
}

.wc-block-components-checkout-step__heading {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--xs);
}

.wc-block-components-checkout-step__number {
    color: var(--wp--preset--color--mid-grey);
}

.wc-block-components-radio-control__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--xs);
    border: 1px solid var(--wp--preset--color--pale-grey);
    border-radius: 8px;
    padding: var(--wp--preset--spacing--xs);
    cursor: pointer;
}

/* Selected state — cobalt accent ("buttons needing explicit attention") */
.wc-block-components-radio-control__option.is-selected {
    border-color: var(--wp--preset--color--cobalt);
    background-color: rgba(24, 54, 217, 0.05);
}

.wc-block-components-order-summary-item {
    display: flex;
    gap: var(--wp--preset--spacing--xs);
    align-items: flex-start;
    padding-bottom: var(--wp--preset--spacing--xs);
}

.wc-block-components-order-summary-item .img-placeholder {
    width: 56px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    flex-shrink: 0;
}


/* ============================================================
   Prototype-only: pattern library viewer (patterns/index.html)
   NOT translated to WordPress.
   ============================================================ */
.pl-pattern-label {
    background-color: var(--wp--preset--color--soft-black);
    color: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--wp--preset--spacing--xs);
    flex-wrap: wrap;
}

.pl-pattern-label code {
    color: var(--wp--preset--color--lemon);
    font-size: var(--wp--preset--font-size--small);
}