/* Koenig Galerie reference pass - 2026-06-20 */
:root {
    --cc-ink: #050505;
    --cc-muted: #8f8f8f;
    --cc-line: #e6e6e6;
    --cc-paper: #fff;
    --cc-field: #f6f6f4;
    /* Work title. König sets artist and title identically, which makes the two run
       together; dark grey separates them without breaking the typographic system.
       Artist stays black, the title of the piece is subdued. */
    --cc-worktitle: #6b6b6b;
}

html { background: var(--cc-paper); }
body,
.wp-site-blocks,
.woocommerce,
.woocommerce-page {
    background: var(--cc-paper) !important;
    color: var(--cc-ink) !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 13px;
    letter-spacing: 0;
}

body::before { height: 92px !important; margin: 0 !important; }

/* The block theme still emits its own header template part — site title plus a page list
   (Cart / Checkout / My account / Sample Page / Shop / Terms …). Its links were already
   hidden, but the container kept holding 240px of empty height directly under the real
   header, which is what pushed every page down. .choichoi-header replaces it completely
   and body::before already reserves the space for it, so the leftover goes. */
.wp-site-blocks > header.wp-block-template-part { display: none !important; }

.choichoi-header {
    height: 92px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    padding: 22px 30px 0 !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.choichoi-header-primary,
.choichoi-header-right {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    flex-wrap: wrap;
    padding-top: 1px;
}

.choichoi-header-right { justify-content: flex-end; }
.choichoi-header-center { justify-self: center; text-align: center; }

.choichoi-logo {
    align-items: center !important;
    gap: 6px !important;
}

.choichoi-logo .choichoi-logo-img {
    height: 34px !important;
    max-width: 220px !important;
    object-fit: contain;
}

.choichoi-logo-shop,
.choichoi-nav-link,
.choichoi-gallery-link,
.choichoi-wishlist-link,
.choichoi-cart-link,
.choichoi-toolbar-cats a,
.choichoi-filter,
.choichoi-search input {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--cc-ink) !important;
}

.choichoi-logo-shop {
    color: var(--cc-muted) !important;
    letter-spacing: .18em !important;
}

.choichoi-nav-link,
.choichoi-gallery-link,
.choichoi-wishlist-link,
.choichoi-cart-link {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
}

.choichoi-nav-link:hover,
.choichoi-nav-link.active,
.choichoi-gallery-link:hover,
.choichoi-wishlist-link:hover,
.choichoi-cart-link:hover { color: var(--cc-muted) !important; }

.choichoi-toolbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 30px 18px !important;
    border-top: 1px solid var(--cc-line) !important;
    border-bottom: 1px solid var(--cc-line) !important;
}

.choichoi-toolbar-cats { gap: 22px !important; }
.choichoi-toolbar-controls { gap: 10px !important; }
.choichoi-toolbar-cats a { color: var(--cc-muted) !important; }
.choichoi-toolbar-cats a.active,
.choichoi-toolbar-cats a:hover {
    color: var(--cc-ink) !important;
    border-bottom: 1px solid var(--cc-ink) !important;
}

.choichoi-filter,
.choichoi-search input {
    min-height: 32px;
    border: 1px solid var(--cc-line) !important;
    border-radius: 0 !important;
    background: var(--cc-paper) !important;
}

body.woocommerce-shop .wp-block-woocommerce-product-collection,
.wp-block-woocommerce-product-collection,
.wp-block-woocommerce-product-template,
ul.products,
.woocommerce ul.products,
.wc-block-product-template {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    /* König: 50px page gutters, generous bottom air. */
    padding: 0 50px 100px !important;
    padding-top: 0 !important;
}

/* Twenty Twenty-Five wraps the content in a 50px "global padding". König's 50px gutter
   lives on the grid and the PDP themselves, so the wrapper padding is zeroed on shop
   screens — otherwise the two stack and the grid sits 100px in from each edge. */
body.woocommerce-shop .wp-site-blocks > main.has-global-padding,
body.post-type-archive-product .wp-site-blocks > main.has-global-padding,
body.tax-product_cat .wp-site-blocks > main.has-global-padding,
body.single-product .wp-site-blocks > main.has-global-padding,
body.woocommerce-cart .wp-site-blocks > main.has-global-padding,
body.woocommerce-checkout .wp-site-blocks > main.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* König collection header: heading left, SORT right, on one baseline. */
.choichoi-collection-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: 40px 50px 34px !important;
}

/* König collection heading — 28px / 400 / uppercase / .02em. */
.choichoi-collection-heading {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--cc-ink) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* style.css hides .woocommerce-ordering globally; it is wanted here, as König's SORT.
   Stripped back to a plain uppercase label. */
.choichoi-collection-header .woocommerce-ordering {
    display: block !important;
    margin: 0 !important;
}
.choichoi-collection-header .woocommerce-ordering select.orderby {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--cc-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

body.woocommerce-shop .wc-block-product-template,
ul.products,
.woocommerce ul.products,
.wc-block-product-template {
    display: grid !important;
    /* König: 4 columns on desktop, 60px gutters both ways. */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 60px !important;
    row-gap: 60px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* WooCommerce's float clearfix (ul.products::before/::after { content:" "; display:table })
   becomes a real grid item once the list is a grid, leaving the first cell empty. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

body.woocommerce-shop .wc-block-product-template .wc-block-product,
body.woocommerce-shop .wc-block-product-template li,
ul.products li.product,
.woocommerce ul.products li.product,
.wc-block-product-template .product,
.wc-block-product-template li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    overflow: visible !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.koenig-product-link,
.wc-block-product-template .wc-block-product a,
.wc-block-product-template li a {
    color: var(--cc-ink) !important;
    text-decoration: none !important;
}

/* Square image field. White, not grey — König's artwork photography is shot on white
   and the field has to disappear into it. */
.koenig-product-image,
.wc-block-product-template .wc-block-components-product-image {
    position: relative !important;
    display: block !important;
    background: var(--cc-paper) !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

.koenig-product-image > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* `contain`, not `cover`: the whole artwork stays visible and centred in the square,
   whatever its aspect ratio. `cover` was cropping every non-square work. */
.koenig-img,
.koenig-product-image img,
body.woocommerce-shop .wc-block-product-template .wc-block-components-product-image img,
.wc-block-product-template .wc-block-components-product-image img,
ul.products li.product a img,
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    transition: opacity .18s ease !important;
}

.koenig-product-link:hover img,
.wc-block-product-template li:hover img { opacity: .82; }

/* König: caption sits 20px under the image, left-aligned. */
.koenig-product-info,
.wc-block-product-template .wp-block-post-title,
.wc-block-product-template .wc-block-components-product-price {
    position: relative !important;
    padding-top: 0 !important;
    margin-top: 20px !important;
    text-align: left !important;
}

/* Artist and title are identical in König: 16px / 400 / caps / .02em / 1.4. */
.koenig-vendor,
.koenig-title,
.koenig-title a,
.wc-block-product-template .wp-block-post-title,
.wc-block-product-template .wc-block-components-product-title {
    display: block !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    letter-spacing: .02em !important;
    color: var(--cc-ink) !important;
    margin: 0 0 4px !important;
    text-transform: uppercase !important;
}

.koenig-title a { margin: 0 !important; text-decoration: none !important; }

/* Price block: 12px / 300, with the net figure at 400. */
.koenig-price,
.wc-block-components-product-price {
    display: block !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    color: var(--cc-ink) !important;
    margin-top: 0 !important;
}

.koenig-price .choichoi-price-net,
.koenig-price .choichoi-price-from {
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
}

.koenig-price .choichoi-price-gross,
.koenig-price .choichoi-price-vat-note,
.koenig-price .choichoi-price-request { font-weight: 300 !important; }

.koenig-price .woocommerce-Price-amount,
.koenig-price bdi {
    display: inline !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    margin: 0 !important;
}

.koenig-sold {
    display: inline-block !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--cc-muted) !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 4px !important;
}

.choichoi-heart {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--cc-ink) !important;
    width: 28px !important;
    height: 28px !important;
}
/* König keeps the wishlist heart in the caption block, top right. */
.koenig-product-item .choichoi-heart {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-product .wp-site-blocks,
.single-product .choichoi-pdp { background: var(--cc-paper) !important; }
/* style.css still carries the pre-custom-PDP layout (`.single-product div.product`,
   `.single-product .wp-block-group` → flex, max-width 1000px, 28px padding). Those
   selectors outrank the ones here, so they are unwound rather than deleted — other
   screens still lean on that stylesheet. */
body.single-product .wp-site-blocks main.wp-block-group {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.single-product div.product.choichoi-pdp {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    /* König: image column starts 50px from the left, meta column ends ~100px from the right.
       Top padding is tighter than König's 50px so the first artwork clears the fixed
       header and still lands whole on the opening screen. */
    padding: 24px 100px 80px 50px !important;
    font-family: Helvetica, Arial, sans-serif !important;
}

.choichoi-pdp-inner {
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 400px !important;
    column-gap: 50px !important;
    align-items: start !important;
}

/* König stacks every image vertically at full column width — no grey field, no shadow. */
.choichoi-pdp-image {
    min-height: 0 !important;
    background: var(--cc-paper) !important;
    padding: 0 !important;
    display: block !important;
    scroll-margin-top: 120px;
}

/* Each image is sized to fit one screenful and centred in its column, so opening a work
   shows it whole and immediately — and every scroll brings up the next image rather than
   the rest of the first one. 116px = fixed header (92) + the 24px top padding above. */
.choichoi-pdp-image img,
.choichoi-pdp-img,
.single-product .woocommerce-product-gallery img {
    display: block !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 156px) !important;
    object-fit: contain !important;
    margin: 0 auto 40px !important;
}
.choichoi-pdp-image img:last-child { margin-bottom: 0 !important; }

.choichoi-pdp-details {
    position: sticky !important;
    top: 116px !important;
    max-width: none;
    padding-top: 0;
}

/* König: artist and title are the same 18px / 400 / caps / .02em. */
.choichoi-pdp-artist,
.choichoi-pdp-artist a,
.choichoi-pdp-title {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--cc-ink) !important;
    text-decoration: none !important;
}

.choichoi-pdp-artist { margin: 0 !important; }
.choichoi-pdp-title { margin: 0 !important; }

/* Artist in black, work title in dark grey — same size and weight, so the pairing still
   reads as one block, but you can tell at a glance which line is which. Applies to both
   the product page and the grid cards. */
.choichoi-pdp-title,
.koenig-title,
.koenig-title a { color: var(--cc-worktitle) !important; }

.choichoi-pdp-specs {
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    color: var(--cc-ink) !important;
    margin: 15px 0 20px !important;
}

.choichoi-pdp-price,
.choichoi-pdp .choichoi-acc-row {
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    color: var(--cc-ink) !important;
}

.choichoi-pdp-price { margin-bottom: 22px !important; }

/* König sells editions one at a time — no quantity spinner. */
.choichoi-pdp .quantity { display: none !important; }
.choichoi-pdp-price .choichoi-price-gross,
.choichoi-pdp-price .choichoi-price-vat-note { color: var(--cc-muted) !important; }

/* "Shipping" in the VAT note is a link to the policy page, König-style: same grey as the
   rest of the note, underlined so it still reads as clickable. */
.choichoi-price-vat-note a {
    color: inherit !important;
    text-decoration: underline !important;
}

.choichoi-pdp-buy select,
.single-product .variations select,
.choichoi-pdp-buy .single_add_to_cart_button,
.choichoi-pdp-buy button[type="submit"],
.choichoi-pdp-buy .choichoi-inquire-btn,
.choichoi-form-submit,
.choichoi-mailing-btn,
.woocommerce-cart .button,
.woocommerce-cart input.button {
    border-radius: 0 !important;
    font-family: Helvetica, Arial, sans-serif !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.choichoi-pdp-buy select,
.single-product .variations select {
    height: 50px !important;
    border: 1px solid var(--cc-ink) !important;
    background-color: var(--cc-paper) !important;
    font-size: 12px !important;
}

.choichoi-pdp-buy .single_add_to_cart_button,
.choichoi-pdp-buy button[type="submit"],
.choichoi-pdp-buy .choichoi-inquire-btn {
    height: 50px !important;
    line-height: 50px !important;
    font-size: 11px !important;
    background: var(--cc-ink) !important;
}

/* König accordion rows: 14px / 300, 11px 16px padding, hairline separators. */
.choichoi-pdp .choichoi-accordion {
    border-top: 1px solid var(--cc-line) !important;
    margin-top: 24px !important;
}
.choichoi-pdp .choichoi-acc-row {
    display: block !important;
    border-bottom: 1px solid var(--cc-line) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    color: var(--cc-ink) !important;
    text-decoration: none !important;
}
.choichoi-pdp .choichoi-acc-row > summary,
.choichoi-pdp a.choichoi-acc-row {
    padding: 11px 16px !important;
    cursor: pointer;
}
.choichoi-pdp .choichoi-acc-body { padding: 0 16px 14px !important; }

.choichoi-footer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
    text-align: left !important;
    background: var(--cc-paper) !important;
    border-top: 1px solid var(--cc-line) !important;
    padding: 34px 30px 42px !important;
}
.choichoi-footer-title,
.choichoi-footer-subtitle,
.choichoi-footer-mailing-link,
.choichoi-footer-copy {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--cc-ink) !important;
    margin: 0 !important;
}
.choichoi-footer-mailing-link { border: 0 !important; justify-self: start; }
.choichoi-footer-social { justify-content: flex-start !important; margin: 0 !important; gap: 14px !important; }
.choichoi-footer-copy { color: var(--cc-muted) !important; grid-column: 1 / -1; margin-top: 12px !important; }

/* ==========================================================================
   CART + CHECKOUT — König treatment
   The block cart and checkout already lay out as two columns (details left,
   order summary right), which is the same shape König's checkout uses. So this
   is a typography and control pass, not a rebuild: square corners throughout,
   hairline borders, and a single black button in the PURCHASE style.
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 50px 100px !important;
    font-family: Helvetica, Arial, sans-serif !important;
    color: var(--cc-ink) !important;
}

.choichoi-cart-heading {
    padding: 40px 50px 34px !important;
    margin: 0 !important;
}

/* Step headings ("Contact information", "Payment options") — König's u-h5. */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-totals-item__label {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--cc-ink) !important;
}

.wc-block-components-checkout-step__description,
.wc-block-components-text-input label,
.wc-block-components-address-card,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description {
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--cc-ink) !important;
}

/* Fields: square, hairline, no rounded corners anywhere. */
.wc-block-checkout__main input[type="text"],
.wc-block-checkout__main input[type="email"],
.wc-block-checkout__main input[type="tel"],
.wc-block-checkout__main input[type="number"],
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-textarea,
.wc-block-components-form input,
.wc-block-cart input[type="text"] {
    border-radius: 0 !important;
    border: 1px solid var(--cc-line) !important;
    background-color: var(--cc-paper) !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--cc-ink) !important;
}

.wc-block-components-text-input.is-active input:focus,
.wc-block-checkout__main input:focus,
.wc-blocks-components-select__select:focus {
    outline: 0 !important;
    border-color: var(--cc-ink) !important;
    box-shadow: none !important;
}

.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input { border-radius: 0 !important; }

/* One black button, identical to PURCHASE on the artwork page. */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained {
    border-radius: 0 !important;
    border: 0 !important;
    background-color: var(--cc-ink) !important;
    color: var(--cc-paper) !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 14px 28px !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

.wc-block-components-button .wc-block-components-button__text,
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
    color: var(--cc-paper) !important;
}

.wc-block-components-button:hover { opacity: .84; }

/* Text-style links (Return to cart, Edit) must not inherit the black slab above. */
.wc-block-components-button.is-link,
.wc-block-components-button.text,
a.wc-block-components-button.wc-block-cart__submit-button--placeholder {
    background: transparent !important;
    color: var(--cc-ink) !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13px !important;
}

/* Order summary: quiet, hairline separators, no panel fill. */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary__content {
    background: transparent !important;
    border-color: var(--cc-line) !important;
}

.wc-block-components-product-name,
.wc-block-components-totals-item__value {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    color: var(--cc-ink) !important;
}

.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-size: 15px !important;
    font-weight: 400 !important;
}

/* Empty cart — König: one line, one black button. */
.wp-block-woocommerce-empty-cart-block h2,
.wp-block-woocommerce-empty-cart-block h3 {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--cc-ink) !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none !important; }

/* König: 3 columns on tablet, 1 on phone. */
@media screen and (max-width: 1023px) {
    body.woocommerce-shop .wc-block-product-template,
    ul.products,
    .woocommerce ul.products,
    .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 30px !important; row-gap: 40px !important; }
    .choichoi-pdp-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
    .choichoi-pdp-details { position: static !important; max-width: none !important; }
    body.single-product div.product.choichoi-pdp { padding: 34px 30px 72px !important; }
    .choichoi-cart-heading { padding: 34px 30px 24px !important; }
    .wp-block-woocommerce-cart,
    .wp-block-woocommerce-checkout { padding: 0 30px 72px !important; }
}

@media screen and (max-width: 767px) {
    body::before { height: 132px !important; }
    .choichoi-header {
        height: 132px !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 12px !important;
        padding: 14px 16px 0 !important;
    }
    .choichoi-header-center { order: 1; }
    .choichoi-header-primary { order: 2; justify-content: center; gap: 14px !important; }
    .choichoi-header-right { order: 3; justify-content: center; gap: 14px !important; }
    .choichoi-logo .choichoi-logo-img { height: 28px !important; }
    .choichoi-nav-link,
    .choichoi-gallery-link,
    .choichoi-wishlist-link,
    .choichoi-cart-link { font-size: 10px !important; }
    body.woocommerce-shop .wp-block-woocommerce-product-collection,
    .wp-block-woocommerce-product-collection,
    ul.products,
    .woocommerce ul.products,
    .wc-block-product-template { padding: 24px 16px 56px !important; }
    body.woocommerce-shop .wc-block-product-template,
    ul.products,
    .woocommerce ul.products,
    .wc-block-product-template { grid-template-columns: 1fr !important; row-gap: 36px !important; }
    .choichoi-collection-header { padding: 24px 16px 20px !important; }
    .choichoi-collection-heading { font-size: 21px !important; }
    .choichoi-cart-heading { padding: 24px 16px 20px !important; }
    .wp-block-woocommerce-cart,
    .wp-block-woocommerce-checkout { padding: 0 16px 56px !important; }
    .choichoi-toolbar { padding: 18px 16px !important; }
    .choichoi-toolbar-controls { width: 100%; }
    .choichoi-filter,
    .choichoi-search,
    .choichoi-search input { width: 100% !important; }
    body.single-product div.product.choichoi-pdp { padding: 24px 16px 64px !important; }
    .choichoi-pdp-image { padding: 0 !important; }
    .choichoi-pdp-image img,
    .choichoi-pdp-img,
    .single-product .woocommerce-product-gallery img { max-height: calc(100vh - 190px) !important; margin-bottom: 24px !important; }
    .choichoi-footer { grid-template-columns: 1fr !important; padding: 28px 16px !important; gap: 16px !important; }
}
/* Single-bar refinement - 2026-06-20 */
body::before { height: 82px !important; }

.choichoi-header {
    height: 82px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: flex-start !important;
    gap: 34px !important;
    padding: 18px 30px 0 !important;
    border-bottom: 0 !important;
}

.choichoi-header > .choichoi-logo {
    justify-self: start !important;
    align-items: flex-start !important;
    min-width: 190px;
}

.choichoi-logo .choichoi-logo-img {
    height: 32px !important;
    max-width: 210px !important;
}

.choichoi-logo-shop {
    font-size: 9px !important;
    letter-spacing: .2em !important;
    padding-left: 1px;
}

.choichoi-header-nav,
.choichoi-header-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 18px !important;
    padding-top: 3px;
}

.choichoi-header-nav {
    justify-content: flex-start !important;
}

.choichoi-header-actions {
    justify-content: flex-end !important;
    white-space: nowrap;
}

.choichoi-header-center,
.choichoi-header-right,
.choichoi-header-primary {
    display: contents !important;
}

.choichoi-toolbar,
.choichoi-category-tabs {
    display: none !important;
}

/* (A stale `padding-top: 18px` override lived here to stand in for the removed archive
   toolbar. The collection header now provides that space.) */

@media screen and (max-width: 1024px) {
    body::before { height: 108px !important; }
    .choichoi-header {
        height: 108px !important;
        grid-template-columns: auto 1fr !important;
        gap: 14px 24px !important;
    }
    .choichoi-header > .choichoi-logo { grid-column: 1; grid-row: 1 / span 2; }
    .choichoi-header-nav { grid-column: 2; grid-row: 1; justify-content: flex-end !important; }
    .choichoi-header-actions { grid-column: 2; grid-row: 2; }
}

@media screen and (max-width: 767px) {
    body::before { height: 154px !important; }
    .choichoi-header {
        height: 154px !important;
        grid-template-columns: 1fr !important;
        justify-items: start !important;
        align-items: start !important;
        gap: 10px !important;
        padding: 14px 16px 0 !important;
    }
    .choichoi-header > .choichoi-logo,
    .choichoi-header-nav,
    .choichoi-header-actions {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-content: flex-start !important;
    }
    .choichoi-header-nav,
    .choichoi-header-actions {
        gap: 13px !important;
        padding-top: 0 !important;
    }
    .choichoi-logo .choichoi-logo-img { height: 27px !important; }
}

/* ===== HOME (front page) =====
   The front page was the parent theme's blog index. These rules dress the landing page
   rendered by templates/front-page.html. The works grid inside it is the shop's own
   ul.products, so it inherits the König grid rules above untouched — nothing is redefined. */

.choichoi-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* align-content, not just align-items: with one row, align-items centres each item inside
       a track that is still sitting at the top. align-content centres the track itself, which
       is what puts the hero in the middle of the viewport below. */
    align-content: center;
    align-items: center;
    gap: 60px;
    padding: 40px 50px 56px;
}

.choichoi-home-eyebrow {
    margin: 0 0 26px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cc-muted);
}

/* Same family/weight/tracking as the collection heading, scaled up — the landing page is
   the one place in the shop that carries a display-size line. */
.choichoi-home-title {
    margin: 0 0 26px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 3.6vw, 52px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cc-ink);
}

.choichoi-home-lede {
    max-width: 46ch;
    margin: 0 0 34px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--cc-ink);
}

.choichoi-home-cta,
.choichoi-home-sectionlink {
    display: inline-block;
    padding-bottom: 3px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cc-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--cc-ink);
}

.choichoi-home-cta:hover,
.choichoi-home-sectionlink:hover {
    color: var(--cc-muted);
    border-bottom-color: var(--cc-muted);
}

.choichoi-home-figure { margin: 0; }

/* Portrait field rather than the grid's square: the hero is the one work shown large, and
   `contain` keeps it whole whatever its ratio — the same choice the product card makes. */
.choichoi-home-figure-link {
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--cc-paper);
    overflow: hidden;
}

.choichoi-home-figure-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.choichoi-home-figure-caption {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.choichoi-home-figure-artist { color: var(--cc-ink); }
.choichoi-home-figure-work { color: var(--cc-worktitle); }

/* Hairline between the hero and the grid, matching the toolbar rules on the shop. */
.choichoi-home-works { border-top: 1px solid var(--cc-line); }

.choichoi-home-sectionhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 40px 50px 34px;
}

/* The hero is sized to the viewport so the work sits dead centre on the screen when the page
   opens, and the works grid is reached by scrolling. body::before already reserves the fixed
   header's 92px, so that is what gets subtracted. svh follows the mobile browser chrome;
   the vh line above it is the fallback for anything that does not support svh.
   Phones are deliberately excluded — the hero stacks to one column there, and forcing a
   stacked hero to full height only squashes it. */
@media screen and (min-width: 768px) {
    .choichoi-home-hero {
        min-height: calc(100vh - 92px);
        min-height: calc(100svh - 92px);
    }
    /* Keeps a tall work from pushing the caption or the CTA off-screen. object-fit: contain
       means the capped box just gains white margins, which are invisible on white. */
    .choichoi-home-figure-link {
        max-height: calc(100vh - 242px);
        max-height: calc(100svh - 242px);
    }
}

/* Gutters step down with the grid's own: 50px / 30px / 16px. */
@media screen and (max-width: 1023px) {
    .choichoi-home-hero { gap: 36px; padding: 40px 30px 56px; }
    .choichoi-home-sectionhead { padding: 34px 30px 26px; }
}

@media screen and (max-width: 767px) {
    .choichoi-home-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 28px 16px 44px;
    }
    /* Image leads on a phone; the statement reads under it. */
    .choichoi-home-figure { order: -1; }
    .choichoi-home-eyebrow { margin-bottom: 16px; }
    .choichoi-home-title { margin-bottom: 18px; }
    .choichoi-home-lede { margin-bottom: 26px; }
    .choichoi-home-sectionhead { padding: 24px 16px 20px; }
}