/**
 * Pet Band Tee child theme — brand polish on top of theme.json.
 * Tokens mirror landing-page/SETUP-NOTES.md; keep the two in sync.
 */

/* ---------- Wordmark: the site title is the blackletter logo ---------- */
.wp-block-site-title a {
    font-family: 'Pirata One', 'Oswald', serif;
    font-size: 1.65rem; /* matches .pbt-brand-text on the landing pages */
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    text-decoration: none;
    color: #EDE5D0;
    text-shadow: 2px 2px 0 rgba(193, 56, 40, 0.45);
}
.wp-block-site-title a:hover {
    color: #EDE5D0;
    text-decoration: none;
}

/* ---------- Header navigation ----------
   Scoped to any nav inside the header so DB-customized template parts
   (which may drop the pbt-nav class) get the same treatment. Resting =
   muted bone; hover + current page = full bone at the active weight;
   current page adds the red underline (mockup). */
/* The doubled .wp-block-navigation-item__content mirrors core's own
   specificity trick (core sets `color: inherit` with the same doubled
   class from wp-block-navigation-inline-css) — a single class loses. */
.pbt-nav .wp-block-navigation-item__content.wp-block-navigation-item__content,
header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    color: #B8AE95;
    text-decoration: none; /* global styles underline links on hover */
}
.pbt-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
    color: #EDE5D0;
    /* weight stays 500 — a hover weight change makes the text shift */
    text-decoration: none;
}
.pbt-nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.pbt-nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"],
header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
    color: #EDE5D0;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #C13828;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

/* The Single Product template (as customized on the original site) wraps
   the title in a leftover inner Columns > Column with a fixed width,
   pinning the title (and the eyebrow/subhead we anchor to it) at half
   width. Flatten it.
   The leading .wp-block-column descendant scope is load-bearing: it means
   "a title column nested INSIDE another column" (the leftover wrapper).
   On an uncustomized template the post title sits directly in the outer
   details column — without this scope the flatten would hit that column
   and collapse the whole page to one column. */
.single-product .wp-block-column .wp-block-columns:has(> .wp-block-column > .wp-block-post-title) {
    display: block;
}
.single-product .wp-block-column .wp-block-column:has(> .wp-block-post-title) {
    flex-basis: auto !important;
    width: 100%;
}

/* Header CTA: identical geometry to the landing pages' header button, so
   navigating landing → product doesn't reflow the header. !important beats
   any padding/size customizations stored on the button block in the Site
   Editor. Hover lift matches the landing .pbt-btn effect. */
header .pbt-header-cta a {
    border-radius: 10px;
    font-size: 0.82rem !important;
    padding: 0.8em 1.3em !important;
    line-height: 1 !important;
    letter-spacing: 0.09em;
    /* landing .pbt-btn carries a 2px transparent border — match it so both
       buttons compute to the identical height */
    border: 2px solid transparent !important;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
header .pbt-header-cta a:hover {
    transform: translateY(-1px);
}
header .pbt-header-cta a:active {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    header .pbt-header-cta a,
    header .pbt-header-cta a:hover {
        transition: none;
        transform: none;
    }
}

/* Uniform header height across the site (landing pages run a flat 64px).
   The header template part carries inline 14px top/bottom paddings from the
   Site Editor — flatten them (!important beats inline) and let the inner
   row's 64px min-height define the header, exactly like the landing pages. */
header.wp-block-group.alignfull {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
header .wp-block-group.alignwide {
    min-height: 64px;
    align-items: center;
}

/* ---------- Mobile header: one row, no stacking ----------
   Logo left; burger + cart (+ CTA) right, all on a single line. The
   account icon is hidden everywhere — the My Account link belongs in
   the menu (add it to the navigation in the Site Editor). */
header .wp-block-woocommerce-customer-account {
    display: none;
}
@media (max-width: 782px) {
    header .wp-block-group.alignwide {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    header .wp-block-group.alignwide > .wp-block-group {
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
    }
    .wp-block-site-title a {
        /* same 1.65rem as desktop and the landing pages — the account icon
           removal + compact CTA made room; do not shrink the wordmark */
        white-space: nowrap;
    }
}
/* Smaller phones: the CTA collapses to a red square with a palette icon.
   The label text stays in the DOM (screen readers + the smart product-page
   CTA still work) — it's just visually replaced by the icon. */
@media (max-width: 600px) {
    header .pbt-header-cta a {
        font-size: 0;
        letter-spacing: 0;
        box-sizing: border-box;
        /* !important: the Buttons block's own width-100% rule
           (.wp-block-buttons .wp-block-button__link) outranks us */
        width: 46px !important;
        height: 46px !important;
        min-height: 0;
        line-height: 0;
        padding: 0 !important; /* global-styles button padding otherwise wins */
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    header .pbt-header-cta a::before {
        content: '';
        display: block;
        width: 22px;
        height: 22px;
        background-color: #FBF6EA;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c1.4 0 2.4-1.1 2.4-2.4 0-.6-.2-1.1-.6-1.6-.4-.4-.6-1-.6-1.6 0-1.3 1.1-2.4 2.4-2.4H18c2.2 0 4-1.8 4-4 0-4.4-4.5-8-10-8zM6.5 12c-.8 0-1.5-.7-1.5-1.5S5.7 9 6.5 9 8 9.7 8 10.5 7.3 12 6.5 12zm3-4C8.7 8 8 7.3 8 6.5S8.7 5 9.5 5s1.5.7 1.5 1.5S10.3 8 9.5 8zm5 0c-.8 0-1.5-.7-1.5-1.5S13.7 5 14.5 5s1.5.7 1.5 1.5S15.3 8 14.5 8zm3 4c-.8 0-1.5-.7-1.5-1.5S16.7 9 17.5 9s1.5.7 1.5 1.5-.7 1.5-1.5 1.5z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c1.4 0 2.4-1.1 2.4-2.4 0-.6-.2-1.1-.6-1.6-.4-.4-.6-1-.6-1.6 0-1.3 1.1-2.4 2.4-2.4H18c2.2 0 4-1.8 4-4 0-4.4-4.5-8-10-8zM6.5 12c-.8 0-1.5-.7-1.5-1.5S5.7 9 6.5 9 8 9.7 8 10.5 7.3 12 6.5 12zm3-4C8.7 8 8 7.3 8 6.5S8.7 5 9.5 5s1.5.7 1.5 1.5S10.3 8 9.5 8zm5 0c-.8 0-1.5-.7-1.5-1.5S13.7 5 14.5 5s1.5.7 1.5 1.5S15.3 8 14.5 8zm3 4c-.8 0-1.5-.7-1.5-1.5S16.7 9 17.5 9s1.5.7 1.5 1.5-.7 1.5-1.5 1.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    }
}

/* ---------- Collapse header nav to the overlay menu below 1100px ----------
   The nav block's built-in hamburger breakpoint is 600px; with this many
   items the row starts wrapping and shoving long before that. These
   overrides extend "mobile menu mode" up to 1099px. */
@media (min-width: 600px) and (max-width: 1099px) {
    header .pbt-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    header .pbt-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

/* ---------- Overlay (hamburger) menu: on-brand dark styling ---------- */
.pbt-nav .wp-block-navigation__responsive-container-open,
.pbt-nav .wp-block-navigation__responsive-container-close {
    color: #EDE5D0;
}
/* !important needed: core paints the overlay white for nav blocks without
   an explicit background (`:where(:not(.has-background))` rule) and wins
   the cascade tie against the theme stylesheet. */
.pbt-nav .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #0F0D0B !important;
    color: #EDE5D0 !important;
    padding: 28px 24px;
}

/* Tablet/small-laptop range (hamburger, but not phone-sized): the menu
   becomes a right-side DRAWER and the rest of the viewport shows a dark
   scrim with the page visible behind it. Phones (<600px) keep the
   full-width overlay above. */
@media (min-width: 600px) and (max-width: 1099px) {
    .pbt-nav .wp-block-navigation__responsive-container.is-menu-open {
        background-color: rgba(8, 7, 6, 0.65) !important;
        padding: 0;
    }
    .pbt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
        width: min(400px, 85vw);
        margin-left: auto !important;
        margin-right: 0 !important; /* core sets margin-right:auto to center the dialog — kill it so the drawer pins right */
        height: 100%;
        overflow-y: auto;
        background: #0F0D0B;
        border-left: 1px solid #2E2A23;
        box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
        padding: 28px 24px;
    }
}
.pbt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 1.05rem;
    color: #B8AE95;
    padding: 0.55em 0.6em; /* horizontal breathing room inside hover/focus outlines */
}
.pbt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    color: #EDE5D0;
}
.pbt-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
    color: #E4523D;
}

/* Mini-cart button inherits the bone ink */
.wc-block-mini-cart__button {
    color: #EDE5D0;
}

/* ---------- Footer nav ---------- */
.pbt-footer-nav .wp-block-navigation-item__content {
    color: #9A9180;
    font-size: 0.9rem;
}
.pbt-footer-nav .wp-block-navigation-item__content:hover {
    color: #EDE5D0;
}

/* ---------- WooCommerce essentials on the dark canvas ---------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wc-block-components-product-price {
    color: #EDE5D0;
}
.woocommerce span.onsale {
    background: #C13828;
    color: #FBF6EA;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
    background-color: #C13828;
    color: #FBF6EA;
    font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 10px;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
    background-color: #AD3120;
    color: #FBF6EA;
}

/* ---------- Money pages: parchment panel for legibility ----------
   The cart/checkout/account block components assume a light context;
   rather than fight every input and panel, those pages get a light
   "paper" surface sitting on the dark site — on-brand and readable. */
body.woocommerce-cart .wp-site-blocks main,
body.woocommerce-checkout .wp-site-blocks main,
body.woocommerce-account .wp-site-blocks main {
    background: #F5F1E6;
    color: #1C1916;
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
    margin-bottom: 32px;
}
body.woocommerce-cart .wp-site-blocks main a:not(.wp-element-button),
body.woocommerce-checkout .wp-site-blocks main a:not(.wp-element-button),
body.woocommerce-account .wp-site-blocks main a:not(.wp-element-button) {
    color: #1C1916;
}
body.woocommerce-cart .wp-site-blocks main a:not(.wp-element-button):hover,
body.woocommerce-checkout .wp-site-blocks main a:not(.wp-element-button):hover,
body.woocommerce-account .wp-site-blocks main a:not(.wp-element-button):hover {
    color: #C13828;
}

/* ---------- Product page form controls on the dark canvas ---------- */
.woocommerce div.product form.cart select,
.woocommerce div.product form.cart input.qty,
.woocommerce div.product form.cart .quantity .qty {
    background: #1B1815;
    color: #EDE5D0;
    border: 1px solid #2E2A23;
    border-radius: 4px;
    padding: 0.5em 0.65em;
}
.woocommerce div.product form.cart label,
.woocommerce div.product form.cart .variations th {
    color: #B8AE95;
}
/* Woo reveals a variation price/availability block above Add to Cart once
   options are selected. On this store it's redundant (uniform variation
   pricing, POD = no stock counts), so it only causes a layout jump.
   REVISIT if variations ever carry different prices (e.g. +$2 for 2XL)
   or stock-based availability messaging — then this should show again. */
.woocommerce div.product form.cart .woocommerce-variation.single_variation {
    /* !important: Woo's JS re-shows this with an inline display:block; even
       empty it carries a block-gap bottom margin that pushes Add to Cart down */
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The variations markup is a legacy <table>; flatten it to flex rows so
   the attribute label sits inline with its pills regardless of what else
   (e.g., the "Clear" link) shares the cell. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody {
    display: block;
}
.woocommerce div.product form.cart table.variations tr {
    /* label ABOVE the pills (mockup): the label text grows when it echoes
       the selection ("SIZE — 2XL"), and stacking keeps the pills from
       shifting sideways as it does */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}
.woocommerce div.product form.cart table.variations th.label {
    padding: 0;
    flex: 0 0 auto;
}
.woocommerce div.product form.cart table.variations td.value {
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.woocommerce div.product form.cart .reset_variations {
    color: #9A9180;
}
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
    color: #9A9180;
}
.woocommerce .woocommerce-breadcrumb a:hover {
    color: #EDE5D0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #B8AE95;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #EDE5D0;
}
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a {
    color: #9A9180;
}
.woocommerce div.product .product_meta a:hover {
    color: #EDE5D0;
}

/* ---------- Product hero image: mockup rounding ----------
   Radius on the gallery frame; overflow clips the photo, the hero
   overlay (badges/caption scrim) and the zoom layer to the same shape. */
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
    border-radius: 16px;
}
.single-product .woocommerce-product-gallery__image {
    overflow: hidden;
}

/* Two-column product layout: nudge the details column down so the
   eyebrow/title top-align with the product image */
@media (min-width: 782px) {
    .single-product .wp-block-column:has(> .wp-block-post-title) {
        padding-top: 1rem;
    }
}

/* ---------- Desktop: product gallery follows the scroll ----------
   Sticky needs TRAVEL ROOM: the image column must be as tall as the
   summary column, so first force the columns row to stretch (overriding
   any "vertical alignment: top" on the template's Columns block), then
   pin the gallery. It un-pins automatically at the end of its column. */
@media (min-width: 782px) {
    .single-product .wp-block-columns,
    .single-product .wp-block-columns.are-vertically-aligned-top {
        align-items: stretch;
    }
    .single-product .wp-block-column.is-vertically-aligned-top {
        align-self: stretch;
    }
    .single-product .woocommerce-product-gallery,
    .single-product .wp-block-woocommerce-product-image-gallery {
        position: sticky;
        top: 1rem;
        margin-top: 0; /* rest position: align the image top with the title */
    }
    body.admin-bar .single-product .woocommerce-product-gallery,
    body.admin-bar .single-product .wp-block-woocommerce-product-image-gallery {
        top: calc(1rem + 32px); /* clear the WP admin bar when logged in */
    }
}

/* ---------- Store notices ("added to your cart" etc.) ----------
   Covers both notice systems: classic .woocommerce-* and the block
   banner markup newer Woo renders (white/green by default). */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info {
    background: #1B1815;
    color: #EDE5D0;
    border: 1px solid #2E2A23;
    border-left: 3px solid #4F7A4F;
    border-radius: 4px;
}
.woocommerce-info,
.wc-block-components-notice-banner.is-info {
    border-left-color: #B8AE95;
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
    background: #1B1815;
    color: #EDE5D0;
    border: 1px solid #2E2A23;
    border-left: 3px solid #E4523D;
    border-radius: 4px;
}
.wc-block-components-notice-banner.is-success > svg {
    fill: #4F7A4F;
    background: transparent;
}
.wc-block-components-notice-banner.is-error > svg {
    fill: #E4523D;
    background: transparent;
}
.wc-block-components-notice-banner.is-info > svg {
    fill: #B8AE95;
    background: transparent;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.wc-block-components-notice-banner a {
    color: #EDE5D0;
    font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.wc-block-components-notice-banner a:hover {
    color: #E4523D;
}

/* ---------- Scrollbars: dark chrome to match the theme ----------
   Applies to the page scrollbar and every inner scroll area (mini-cart
   drawer, the generator's recent-designs list, motif lists, etc.). */
* {
    scrollbar-width: thin;                 /* Firefox */
    scrollbar-color: #4A443B #151210;      /* thumb, track */
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: #151210;
}
*::-webkit-scrollbar-thumb {
    background: #4A443B;
    border-radius: 5px;
    border: 2px solid #151210;
}
*::-webkit-scrollbar-thumb:hover {
    background: #5A5347;
}
*::-webkit-scrollbar-corner {
    background: #151210;
}

/* ---------- Small conveniences ---------- */
::selection {
    background: #C13828;
    color: #FBF6EA;
}