/* ==========================================================================
   Woo blocks pages (cart / checkout), light brand smoothing.
   Scope stays deliberately small until the consignment surface decides what
   these pages become. For now: keep default-Woo leaks out of sight.
   ========================================================================== */

/* Empty cart: no default sad-face icon, no "New in store" cross-sell grid of
   raw product pages. The collection is one nav click away. */

.wp-block-woocommerce-empty-cart-block .wp-block-heading.with-empty-cart-icon::before {
    display: none;
}

.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.with-empty-cart-icon),
.wp-block-woocommerce-empty-cart-block .wp-block-product-new {
    display: none;
}

/* Primary cart + checkout buttons in brand teal, matching the site's CTA
   (.design-purchase__cta). Woo's block "contained" buttons otherwise fall back
   to WordPress's default slate (#32373c) with an inconsistent text colour
   (teal on the cart's Proceed link, white on checkout's Place Order). */

.wc-block-components-button.wp-element-button.contained {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-ivory);
}

.wc-block-components-button.wp-element-button.contained .wc-block-components-button__text {
    color: var(--color-ivory);
}

.wc-block-components-button.wp-element-button.contained:hover,
.wc-block-components-button.wp-element-button.contained:focus {
    background-color: #1c484d;
    border-color: #1c484d;
    color: var(--color-ivory);
}

/* Classic Woo primary buttons (coupon apply, any non-block surface) follow suit. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-ivory);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: #1c484d;
    border-color: #1c484d;
    color: var(--color-ivory);
}

/* ==========================================================================
   Cart + checkout: bring the Woo blocks into the brand's editorial language.
   They otherwise inherit the theme's narrow 720px page wrapper (which strands
   them in whitespace and forces a single column) and render at ~13px type.
   ========================================================================== */

/* Widen out of the generic page wrapper so the cart can use its two-column
   layout (line items + order summary) and stop floating in a narrow column. */
.woocommerce-cart .site-main article,
.woocommerce-checkout .site-main article {
    max-width: 1140px;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    max-width: 100%;
}

/* The Woo cart block carries its own headings; the page H1 ("Cart") on top
   reads as an orphaned, left-aligned duplicate above the centered content.
   Keep it for a11y + SEO, hide it visually. */
.woocommerce-cart .site-main > article > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Type: lift off the ~13px default onto the site's body scale ----------- */

.wc-block-cart-items,
.wc-block-components-order-summary,
.wc-block-components-totals-item,
.wc-block-components-order-summary__content {
    font-size: 1.05rem;
}

.wc-block-components-product-name {
    font-family: var(--font-heading) !important;
    font-size: 1.3rem !important;
    line-height: 1.25;
    color: var(--color-text) !important;
}

/* Names read as editorial headings, not webby teal underlines. */
a.wc-block-components-product-name,
.wc-block-cart-item__product .wc-block-components-product-name {
    text-decoration: none !important;
}

a.wc-block-components-product-name:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-components-order-summary-item__total-price,
.wc-block-cart-item__prices {
    font-size: 1.1rem !important;
    color: var(--color-text);
}

/* The made-to-order design / size meta: legible, softly de-emphasised. */
.wc-block-components-product-details,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description {
    font-size: 0.98rem !important;
    line-height: 1.5;
    color: rgba(30, 30, 32, 0.7);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    font-size: 1.05rem !important;
    color: var(--color-text);
}

/* Grand total reads as the page's anchor, in the heading face. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-heading) !important;
    font-size: 1.4rem !important;
    color: var(--color-text);
}

.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button {
    font-size: 1.02rem !important;
}

/* The stated quality bar needs an explicit mobile guard, not just Woo's
   defaults: guarantee side padding so the widened cart/checkout never bleeds to
   the screen edge at small widths. */
@media (max-width: 600px) {
    .woocommerce-cart .site-main article,
    .woocommerce-checkout .site-main article {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

/* The order-summary sidebar sticks on desktop (nice), but Woo pins it at
   top:24px, which slides under the site's fixed 68px header on scroll. Offset
   the stick point to clear the header, plus the announcement bar (44px) when
   it is showing. Compound selector + !important to beat Woo's own top. */
.wc-block-components-sidebar.wc-block-checkout__sidebar,
.wc-block-components-sidebar.wc-block-cart__sidebar {
    top: calc(68px + var(--space-sm)) !important;
}

.bb-show-announcement .wc-block-components-sidebar.wc-block-checkout__sidebar,
.bb-show-announcement .wc-block-components-sidebar.wc-block-cart__sidebar {
    top: calc(68px + 44px + var(--space-sm)) !important;
}

/* ==========================================================================
   Empty cart: a full editorial state, centered in the viewport. Statement,
   then two photo panels routing into each half of the shop (images resolved
   from the live catalog at render, text-only fallback).
   ========================================================================== */
.bb-empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 880px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) var(--space-lg);
    text-align: center;
}

.bb-empty-cart__label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: var(--space-sm);
}

.bb-empty-cart__rule {
    width: 40px;
    height: 1px;
    background: var(--color-gold);
    margin: 0 auto var(--space-sm);
}

.bb-empty-cart__title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

.bb-empty-cart__text {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.7;
    color: rgba(30, 30, 32, 0.66);
    max-width: 52ch;
    text-wrap: balance;
    margin: 0 auto;
}

/* Every constrained-width centered paragraph in these components needs its
   auto side-margins restated ABOVE .entry-content p { margin: 0 } (global.css,
   specificity 0-1-1): that reset silently pins the narrower text box to the
   container's left edge while the text inside stays center-aligned, which
   reads as a paragraph drifting left of the heading axis. */
.entry-content .bb-thankyou__lede,
.entry-content .bb-empty-cart__text {
    margin: 0 auto;
}

/* Full shorthand, not just the sides: the reset zeroes margin-bottom too,
   which is the text-to-buttons gap. */
.entry-content .bb-thankyou__next-text {
    margin: 0 auto var(--space-md);
}

/* Spacing hangs on the panels div, not the <p> above it: the Woo empty-cart
   block wrapper zeroes paragraph margins, so a margin-bottom on __text
   silently computes to 0. */
.bb-empty-cart__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    width: 100%;
    margin-top: var(--space-md);
}

.bb-empty-cart__panel {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    border: 1px solid rgba(30, 30, 32, 0.12);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.bb-empty-cart__panel:hover {
    border-color: rgba(36, 91, 97, 0.55);
}

.bb-empty-cart__panel-photo {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.bb-empty-cart__panel-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.bb-empty-cart__panel:hover .bb-empty-cart__panel-photo img {
    transform: scale(1.04);
}

.bb-empty-cart__panel-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + 0.35rem);
    text-align: left;
}

.bb-empty-cart__panel--bare .bb-empty-cart__panel-text {
    align-items: center;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

.bb-empty-cart__panel-eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

.bb-empty-cart__panel-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.bb-empty-cart__panel-name svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.bb-empty-cart__panel:hover .bb-empty-cart__panel-name {
    color: var(--color-primary);
}

.bb-empty-cart__panel:hover .bb-empty-cart__panel-name svg {
    transform: translateX(4px);
}

@media (max-width: 700px) {
    .bb-empty-cart {
        padding: var(--space-sm) var(--space-sm) var(--space-lg);
    }

    .bb-empty-cart__panels {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        max-width: 420px;
        margin: var(--space-md) auto 0;
    }
}
}

/* ==========================================================================
   Order received (thank-you): confirmation hero, meta strip, itemized card,
   address cards, route back into the shop. Markup in the theme's
   woocommerce/checkout/thankyou.php override.
   ========================================================================== */
.bb-thankyou {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-xl);
}

/* The hero owns the headline on the order-received endpoint; the page
   wrapper's the_title() H1 ("Order received") would double it. Scoped to
   the endpoint body class so /checkout proper keeps its page title. */
body.woocommerce-order-received .site-main article > h1 {
    display: none;
}

.bb-thankyou__hero {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.bb-thankyou__label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: var(--space-sm);
}

.bb-thankyou__rule {
    width: 40px;
    height: 1px;
    background: var(--color-gold);
    margin: 0 auto var(--space-sm);
}

.bb-thankyou__title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.5vw, 3.2rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

.bb-thankyou__lede {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.7;
    color: rgba(30, 30, 32, 0.72);
    max-width: 60ch;
    text-wrap: balance;
    margin: 0 auto;
}

.bb-thankyou__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    border: 1px solid rgba(30, 30, 32, 0.12);
    background: #fff;
    margin: 0 0 var(--space-lg);
    padding: var(--space-sm) 0;
}

.bb-thankyou__meta-item {
    flex: 1 1 0;
    min-width: 130px;
    text-align: center;
    padding: var(--space-xs) var(--space-md);
}

.bb-thankyou__meta-item + .bb-thankyou__meta-item {
    border-left: 1px solid rgba(30, 30, 32, 0.1);
}

.bb-thankyou__meta-item dt {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(30, 30, 32, 0.5);
    margin-bottom: 0.3rem;
}

.bb-thankyou__meta-item dd {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.bb-thankyou__heading {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

.bb-thankyou__details {
    border: 1px solid rgba(30, 30, 32, 0.12);
    background: #fff;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.bb-thankyou__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-thankyou__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(30, 30, 32, 0.08);
}

.bb-thankyou__item-photo {
    flex: 0 0 64px;
}

.bb-thankyou__item-photo img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.bb-thankyou__item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.bb-thankyou__item-name {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-text);
}

.bb-thankyou__item-qty {
    font-weight: 500;
    color: rgba(30, 30, 32, 0.55);
}

.bb-thankyou__item-meta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(30, 30, 32, 0.6);
}

.bb-thankyou__item-meta p,
.bb-thankyou__item-meta .wc-item-meta {
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
}

.bb-thankyou__item-meta .wc-item-meta li {
    display: block;
}

.bb-thankyou__item-meta .wc-item-meta p {
    display: inline;
}

.bb-thankyou__item-total {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-text);
}

.bb-thankyou__totals {
    margin: var(--space-sm) 0 0;
    padding: 0;
}

.bb-thankyou__totals-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
}

.bb-thankyou__totals-row dt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(30, 30, 32, 0.6);
}

.bb-thankyou__totals-row dd {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    text-align: right;
}

.bb-thankyou__totals-row--grand {
    border-top: 1px solid rgba(30, 30, 32, 0.12);
    margin-top: 0.35rem;
    padding-top: 0.7rem;
}

.bb-thankyou__totals-row--grand dt,
.bb-thankyou__totals-row--grand dd {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.bb-thankyou__note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(30, 30, 32, 0.6);
    border-top: 1px solid rgba(30, 30, 32, 0.08);
    margin: var(--space-sm) 0 0;
    padding-top: var(--space-sm);
}

.bb-thankyou__note span {
    font-weight: 600;
    color: var(--color-text);
}

.bb-thankyou__addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.bb-thankyou__address {
    border: 1px solid rgba(30, 30, 32, 0.12);
    background: #fff;
    padding: var(--space-md);
}

.bb-thankyou__address address {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-style: normal;
    line-height: 1.7;
    color: rgba(30, 30, 32, 0.72);
}

.bb-thankyou__next {
    text-align: center;
    border-top: 1px solid rgba(30, 30, 32, 0.1);
    margin-top: var(--space-lg);
    padding: var(--space-lg) 0 var(--space-md);
}

.bb-thankyou__next-text {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: rgba(30, 30, 32, 0.72);
    max-width: 52ch;
    text-wrap: balance;
    margin: 0 auto var(--space-md);
}

.bb-thankyou__next-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bb-thankyou__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.bb-thankyou .bb-thankyou__cta,
.bb-thankyou .bb-thankyou__alt {
    text-decoration: none !important;
}

.bb-thankyou__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.95rem 1.9rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-ivory) !important;
    background: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.bb-thankyou__cta:hover {
    background: var(--color-charcoal);
    border-color: var(--color-charcoal);
    color: var(--color-ivory) !important;
}

.bb-thankyou__alt {
    display: inline-flex;
    align-items: center;
    padding: 0.95rem 1.9rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: transparent;
    border: 1.5px solid rgba(36, 91, 97, 0.4);
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.bb-thankyou__alt:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 700px) {
    .bb-thankyou {
        padding: var(--space-md) var(--space-sm) var(--space-lg);
    }

    .bb-thankyou__meta {
        flex-wrap: wrap;
        row-gap: var(--space-xs);
    }

    .bb-thankyou__meta-item {
        flex: 1 1 40%;
        border: none !important;
    }

    .bb-thankyou__addresses {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .bb-thankyou__item-total {
        align-self: flex-start;
    }
}