/*
 * VELD Lifestyle presentation pass.
 * Loaded after the main theme stylesheet so classic WooCommerce and
 * WooCommerce Blocks share the same visual grid.
 */

:root {
    --veld-shell: 1200px;
    --veld-reading-wide: 920px;
    --veld-commerce: 1200px;
    --veld-checkout: 980px;
    --veld-mobile-gutter: 1.25rem;
    --veld-section-space: clamp(3.75rem, 7vw, 6.5rem);
}

.header-inner {
    grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
}

.site-brand {
    justify-self: start;
}

.header-tools {
    justify-self: end;
}

/* Make navigation hierarchy unmistakable without turning the submenu into a second header. */
.primary-navigation .menu > .menu-item-has-children {
    position: relative;
}

.primary-navigation .menu > .menu-item-has-children > a {
    padding-right: 1rem;
}

.primary-navigation .menu > .menu-item-has-children > a::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 6px;
    content: "";
    border-right: 1.5px solid var(--veld-gold);
    border-bottom: 1.5px solid var(--veld-gold);
    transform: translateY(-70%) rotate(45deg);
}

.primary-navigation .sub-menu {
    top: calc(100% - .3rem);
    left: -.9rem;
    min-width: 260px;
    padding: .45rem;
    border-top: 3px solid var(--veld-gold);
    box-shadow: 0 18px 42px rgba(16, 42, 30, .16);
}

.primary-navigation .sub-menu li + li {
    border-top: 1px solid var(--veld-border);
}

.primary-navigation .sub-menu a {
    display: flex;
    padding: .78rem .85rem;
    align-items: center;
    gap: .65rem;
    color: var(--veld-green-dark);
    background: transparent;
    transition: color .18s ease, background .18s ease, padding-left .18s ease;
}

.primary-navigation .sub-menu a::before {
    flex: 0 0 16px;
    color: var(--veld-gold);
    content: "↳";
    font-size: .95rem;
    line-height: 1;
}

.primary-navigation .sub-menu a:hover,
.primary-navigation .sub-menu .current-menu-item > a {
    padding-left: 1rem;
    color: var(--veld-green-dark);
    background: var(--veld-cream);
}

.primary-navigation .current-menu-ancestor > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

.veld-section {
    padding-top: var(--veld-section-space);
    padding-bottom: var(--veld-section-space);
}

.journal-grid:has(.journal-card:only-child) {
    grid-template-columns: minmax(280px, 390px);
    justify-content: center;
}

.single-story-footer,
.post-navigation {
    width: min(var(--veld-reading-wide), calc(100% - 2.5rem));
}

.commerce-shell {
    width: min(var(--veld-commerce), calc(100% - 4rem));
}

.woocommerce div.product div.summary {
    padding: clamp(1rem, 2vw, 1.75rem);
    background: #fff;
    border-top: 3px solid var(--veld-gold);
    box-shadow: 0 16px 45px rgba(16, 42, 30, .07);
}

.woocommerce div.product .woocommerce-tabs {
    width: min(100%, var(--veld-reading-wide));
    margin-inline: auto;
}

@media (min-width: 1081px) {
    :root {
        --veld-shell: 1360px;
        --veld-commerce: 1360px;
        --veld-reading-wide: 1040px;
    }

    .woocommerce div.product {
        grid-template-columns: minmax(0, 1.15fr) minmax(400px, .85fr);
        column-gap: clamp(2.5rem, 4vw, 4.5rem);
    }

    .woocommerce div.product .woocommerce-tabs {
        padding-top: 1.5rem;
    }
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    border-top: 3px solid var(--veld-gold);
}

/*
 * Cart and checkout can use either WooCommerce shortcodes or Blocks.
 * Both now align with the same centred VELD shell.
 */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
    width: min(var(--veld-checkout), calc(100% - 4rem));
    max-width: none;
    margin-inline: auto;
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.woocommerce-cart .entry-content > *,
.woocommerce-checkout .entry-content > * {
    max-width: none;
}

.woocommerce-cart .wp-block-shortcode,
.woocommerce-checkout .wp-block-shortcode,
.wc-block-cart,
.wc-block-checkout {
    width: 100%;
    max-width: none !important;
    margin-inline: auto !important;
}

.wc-block-components-sidebar-layout {
    align-items: start;
    column-gap: clamp(2rem, 5vw, 5rem);
}

.wc-block-components-sidebar {
    padding: clamp(1.25rem, 2.5vw, 2rem) !important;
    background: var(--veld-cream);
    border-top: 3px solid var(--veld-gold);
}

.wc-block-components-totals-wrapper {
    border-color: var(--veld-border) !important;
}

.wc-block-components-button {
    min-height: 52px;
    color: #fff !important;
    background: var(--veld-green) !important;
    border: 1px solid var(--veld-green) !important;
    border-radius: var(--veld-radius) !important;
    font-weight: 750;
}

.wc-block-components-button:hover {
    color: var(--veld-green-dark) !important;
    background: var(--veld-gold-light) !important;
    border-color: var(--veld-gold-light) !important;
}

.wc-block-checkout__main .wc-block-components-checkout-step {
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: #fff;
    border: 1px solid var(--veld-border);
}

.wc-block-checkout__main .wc-block-components-checkout-step__heading {
    margin-bottom: 1rem;
}

/*
 * Centre the empty-cart recommendations and replace WooCommerce's generic
 * sad face with the existing VELD mark.
 */
.wp-block-woocommerce-empty-cart-block {
    width: min(var(--veld-shell), calc(100% - 4rem));
    max-width: none !important;
    margin-inline: auto !important;
    padding-block: clamp(3rem, 6vw, 5.5rem);
    text-align: center;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
    margin-bottom: 3.5rem;
    color: var(--veld-green-dark);
    font-family: var(--wp--preset--font-family--veld-serif, Georgia, "Times New Roman", serif);
    font-size: 1.15rem;
    font-weight: 500;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 1.25rem;
    content: "";
    background: url("../images/veld-logo-tm.png") center / contain no-repeat;
}

.wp-block-woocommerce-empty-cart-block > .wp-block-heading {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid,
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    justify-content: center;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    flex: 0 1 320px;
    max-width: 320px;
    text-align: left;
}

/* Campaign content sits on the same centred reading grid as its page intro. */
.entry-content > .veld-101-linked-campaigns,
.entry-content > .veld-101-current-campaigns,
.entry-content > .veld-101-campaign {
    width: min(var(--veld-reading-wide), calc(100% - 2.5rem));
    max-width: none;
    margin: clamp(3rem, 6vw, 5rem) auto;
}

.veld-101-linked-campaigns,
.veld-101-current-campaigns {
    display: grid;
    gap: 2rem;
}

.veld-101-campaign {
    padding: clamp(1.75rem, 4vw, 3rem);
    background: #fff;
    border: 1px solid var(--veld-border);
    border-top: 4px solid var(--veld-gold);
    box-shadow: var(--veld-shadow);
}

.veld-101-campaign header {
    max-width: 720px;
}

.veld-101-campaign header h2 {
    margin-bottom: 1rem;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
}

.veld-101-campaign .veld-101-progress {
    height: 18px;
    margin-block: .55rem .75rem;
}

.veld-101-campaign .veld-101-progress-heading {
    margin-top: 1.75rem;
}

.veld-101-campaign .veld-101-summary {
    margin-bottom: 1.75rem;
    color: var(--veld-muted);
}

.veld-101-campaign .veld-101-number-grid {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    margin-block: 1.5rem 1rem;
}

.veld-101-campaign .veld-101-number {
    min-height: 38px;
    padding: .55rem .35rem;
}

.veld-101-campaign .veld-101-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    color: var(--veld-muted);
    font-size: .82rem;
}

.veld-101-campaign .veld-101-legend span {
    display: inline-flex;
    padding: .25rem .55rem;
    align-items: center;
    border: 1px solid var(--veld-border);
    border-radius: 99px;
}

.veld-101-campaign .veld-101-legend .veld-101-sold {
    border-color: var(--veld-green);
}

.veld-101-selector {
    margin-block: 1.5rem;
    padding: 1.25rem;
    background: var(--veld-cream);
    border: 1px solid var(--veld-border);
    border-left: 3px solid var(--veld-gold);
}

.veld-101-selector select {
    max-width: none;
}

.site-footer {
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.footer-column li:not(.footer-policy-link) + li.footer-policy-link {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/*
 * Keep the major page surfaces on one optical grid. Full-width image and
 * colour sections remain full bleed; their inner content follows this grid.
 */
.veld-page-hero .wp-block-group,
.veld-page-intro > *,
.veld-dark-hero > *,
.entry-content > .alignwide {
    width: min(var(--veld-shell), calc(100% - 4rem));
    margin-right: auto;
    margin-left: auto;
}

.veld-page-intro > *,
.veld-dark-hero > * {
    max-width: 920px !important;
}

.woocommerce div.product > *,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs .panel {
    min-width: 0;
    max-width: 100%;
}

.woocommerce div.product .product_meta,
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs .panel {
    overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
    .header-inner {
        grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
    }
}

@media (max-width: 900px) {
    .header-inner {
        grid-template-columns: auto 1fr auto;
    }

    .commerce-shell,
    .woocommerce-cart .entry-content,
    .woocommerce-checkout .entry-content,
    .wp-block-woocommerce-empty-cart-block {
        width: min(var(--veld-shell), calc(100% - 2.5rem));
    }

    .wc-block-components-sidebar-layout {
        row-gap: 2rem;
    }

    .primary-navigation {
        overscroll-behavior: contain;
    }

    .primary-navigation[aria-hidden="true"]:not(.is-open) {
        pointer-events: none;
    }

    .primary-navigation .menu > .menu-item-has-children > a {
        padding-right: 1.5rem;
    }

    .primary-navigation .menu > .menu-item-has-children > a::before {
        right: .25rem;
    }

    .primary-navigation .sub-menu {
        margin: .15rem 0 .75rem;
        padding: .25rem 0 .25rem .85rem;
        background: var(--veld-cream);
        border-top: 0;
        border-left: 3px solid var(--veld-gold);
        box-shadow: none;
    }

    .primary-navigation .sub-menu li + li {
        border-top: 0;
    }

    .primary-navigation .sub-menu a {
        padding: .72rem .65rem;
        color: var(--veld-green-dark);
        border-bottom-color: rgba(23, 59, 42, .14);
    }

    .woocommerce div.product {
        display: block;
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100%;
    }
}

@media (max-width: 680px) {
    :root {
        --veld-section-space: 3.25rem;
    }

    body {
        font-size: 15px;
        line-height: 1.6;
    }

    h1 {
        font-size: clamp(2.25rem, 11vw, 3.2rem);
    }

    h2 {
        font-size: clamp(1.85rem, 8.5vw, 2.55rem);
    }

    h3 {
        font-size: clamp(1.3rem, 6vw, 1.65rem);
    }

    .site-shell,
    .entry-content > .alignwide,
    .veld-page-hero .wp-block-group {
        width: 100%;
        padding-right: var(--veld-mobile-gutter);
        padding-left: var(--veld-mobile-gutter);
    }

    .veld-page-intro > *,
    .veld-dark-hero > * {
        width: 100%;
        max-width: none !important;
    }

    .veld-dark-hero,
    .veld-page-intro {
        padding: 3.75rem var(--veld-mobile-gutter);
    }

    .veld-page-hero {
        min-height: 500px !important;
    }

    .veld-page-hero .wp-block-cover__inner-container {
        width: 100%;
    }

    .veld-section {
        padding-top: var(--veld-section-space);
        padding-bottom: var(--veld-section-space);
    }

    .veld-section .wp-block-columns {
        gap: 2.25rem;
    }

    .veld-prose blockquote {
        margin-block: 2.25rem;
        padding: 1rem 0 1rem 1.25rem;
    }

    .commerce-shell,
    .woocommerce-cart .entry-content,
    .woocommerce-checkout .entry-content,
    .wp-block-woocommerce-empty-cart-block {
        width: 100%;
        padding-right: var(--veld-mobile-gutter);
        padding-left: var(--veld-mobile-gutter);
    }

    .wc-block-components-sidebar,
    .wc-block-checkout__main .wc-block-components-checkout-step {
        padding: 1rem !important;
    }

    .veld-101-campaign {
        padding: 1.25rem;
    }

    .entry-content > .veld-101-linked-campaigns,
    .entry-content > .veld-101-current-campaigns,
    .entry-content > .veld-101-campaign {
        width: calc(100% - (2 * var(--veld-mobile-gutter)));
        margin-block: 2.5rem;
    }

    .veld-101-campaign .veld-101-number-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .4rem;
    }

    .veld-101-campaign .veld-101-number {
        min-height: 36px;
        padding: .45rem .2rem;
        font-size: .72rem;
    }

    .woocommerce .woocommerce-breadcrumb {
        margin-bottom: 1.5rem;
    }

    .commerce-main {
        padding-block: 2.5rem 3.5rem;
    }

    .commerce-archive-header {
        margin-bottom: 2rem;
    }

    .woocommerce .woocommerce-result-count {
        float: none;
        margin-bottom: 1rem;
    }

    .woocommerce .woocommerce-ordering {
        float: none;
        width: 100%;
    }

    .woocommerce .woocommerce-ordering select {
        width: 100%;
        min-width: 0;
    }

    .woocommerce ul.products:has(li.product:only-child) {
        grid-template-columns: minmax(0, 300px);
    }

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        min-width: 0;
    }

    .woocommerce div.product div.images {
        margin-bottom: 2rem;
    }

    .woocommerce div.product div.images .flex-control-thumbs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .6rem;
    }

    .woocommerce div.product div.images .flex-control-thumbs li {
        float: none;
        width: auto;
    }

    .woocommerce div.product div.summary {
        padding: 1.25rem;
    }

    .woocommerce div.product .product_title {
        font-size: clamp(2.1rem, 10vw, 3rem);
    }

    .woocommerce div.product form.cart .variations,
    .woocommerce div.product form.cart .variations tbody,
    .woocommerce div.product form.cart .variations tr,
    .woocommerce div.product form.cart .variations th,
    .woocommerce div.product form.cart .variations td {
        display: block;
        width: 100%;
    }

    .woocommerce div.product form.cart .variations th {
        padding-bottom: .2rem;
    }

    .woocommerce div.product form.cart .variations td {
        padding-top: 0;
    }

    .woocommerce div.product .woocommerce-tabs {
        padding-top: 2.5rem;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        display: flex;
        padding: 0;
        flex-wrap: wrap;
        gap: .15rem 1rem;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        margin-right: 0;
    }

    .woocommerce div.product .woocommerce-tabs table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .woocommerce div.product .woocommerce-tabs img,
    .woocommerce div.product .woocommerce-tabs iframe {
        max-width: 100%;
    }

    .error-404 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .error-404 .wp-block-buttons {
        display: grid;
        gap: .75rem;
    }

    .error-404 .wp-block-button,
    .error-404 .wp-block-button__link {
        width: 100%;
    }

    .site-footer {
        padding-top: 3rem;
    }

    .footer-grid {
        gap: 2.25rem;
    }

    .footer-brand {
        margin-bottom: .75rem;
        font-size: 1.75rem;
    }

    .footer-intro > p {
        margin-bottom: .8rem;
        font-size: 1rem;
    }

    .footer-heading {
        margin-bottom: .75rem;
    }

    .footer-column li {
        margin-bottom: .3rem;
    }

    .footer-column p {
        margin-bottom: .75rem;
    }

    .footer-bottom {
        margin-top: 2.5rem;
        padding: 1.1rem var(--veld-mobile-gutter) 1.4rem;
        gap: .65rem;
        font-size: .66rem;
    }
}