/* Artwork Empire — WooCommerce Blocks design overlay
 * Targets the WC Blocks cart/checkout classes captured from the live site.
 * Shapes only: colors, typography, spacing, borders — no layout rewrites.
 * Depends on tokens.css for CSS vars.
 *
 * Convention: high specificity (.wc-page-wrap scope) to beat WC's own CSS
 * without !important where possible.
 */

/* ═══════════════════════════════════════════════════════════════════
   PAGE WRAPPER (shared by cart + checkout)
   ═══════════════════════════════════════════════════════════════════ */
.wc-page-wrap{
    max-width: var(--content);
    margin: 0 auto;
    padding: clamp(32px,4vw,56px) var(--outer) clamp(56px,6vw,96px);
}
.wc-page-header{margin-bottom:clamp(24px,3vw,40px);}
.wc-page-header .lbl{display:block;margin-bottom:10px;font-size:11px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--col-grey);}
.wc-page-title{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,5vw,56px);font-weight:400;line-height:1.05;margin-bottom:0;letter-spacing:-0.02em;color:var(--col-primary);}

.wc-page-content{font-family:'DM Sans',sans-serif;}

/* ═══════════════════════════════════════════════════════════════════
   SHARED — buttons, inputs, cards
   ═══════════════════════════════════════════════════════════════════ */

/* All WC buttons → match .btn-green design */
.wc-page-wrap .wc-block-components-button:not(.is-link),
.wc-page-wrap .wp-element-button{
    background:var(--cta-primary);
    color:#fff;
    border:1.5px solid var(--cta-primary);
    border-radius:0;
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:0 28px;
    min-height:48px;
    box-shadow:none;
    transition:background 0.2s ease,border-color 0.2s ease;
    cursor:pointer;
}
.wc-page-wrap .wc-block-components-button:not(.is-link):hover,
.wc-page-wrap .wp-element-button:hover{
    background:var(--cta-primary-h);
    border-color:var(--cta-primary-h);
}
.wc-page-wrap .wc-block-components-button.is-link,
.wc-page-wrap .wc-block-components-button--secondary{
    background:transparent;
    color:var(--col-green-deep);
    border:none;
    padding:0;
    text-transform:none;
    letter-spacing:0;
    font-weight:500;
}

/* Text inputs + selects */
.wc-page-wrap input[type="text"],
.wc-page-wrap input[type="email"],
.wc-page-wrap input[type="tel"],
.wc-page-wrap input[type="number"],
.wc-page-wrap input[type="password"],
.wc-page-wrap select,
.wc-page-wrap textarea,
.wc-page-wrap .wc-block-components-text-input input,
.wc-page-wrap .wc-block-components-select select{
    border:1.5px solid var(--col-border);
    border-radius:0;
    background:var(--col-lite);
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:var(--col-primary);
    padding:12px 14px;
    box-shadow:none;
    transition:border-color 0.2s ease;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
.wc-page-wrap input:focus,
.wc-page-wrap select:focus,
.wc-page-wrap textarea:focus,
.wc-page-wrap .wc-block-components-text-input input:focus{
    border-color:var(--col-green-deep);
    outline:none;
}

/* Labels on address form / checkout steps */
.wc-page-wrap .wc-block-components-text-input label,
.wc-page-wrap .wc-block-components-select label,
.wc-page-wrap .wc-block-components-textarea label,
.wc-page-wrap .wc-block-components-checkbox__label{
    font-family:'DM Sans',sans-serif;
    font-size:12px;
    font-weight:500;
    color:var(--col-grey);
    letter-spacing:0.04em;
}

/* Checkboxes — circle.
   WC DOM: <label><input.wc-block-components-checkbox__input><svg.wc-block-components-checkbox__mark><span.__label></label>.
   The input sits as a sibling of the mark. To avoid it rendering as a
   second visible circle, we absolute-position it behind the mark at
   opacity 0 (still clickable). The mark SVG becomes the sole visual. */
.wc-page-wrap .wc-block-components-checkbox{position:relative;}
.wc-page-wrap .wc-block-components-checkbox > label{
    display:flex !important;
    align-items:center;
    gap:10px;
    cursor:pointer;
}
.wc-page-wrap .wc-block-components-checkbox__input{
    position:absolute !important;
    opacity:0 !important;
    width:20px !important;
    height:20px !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    border-radius:0 !important;
    pointer-events:auto;
    cursor:pointer;
    z-index:1;
    left:0;
    top:50%;
    transform:translateY(-50%);
}
.wc-page-wrap .wc-block-components-checkbox__mark{
    display:inline-block !important;
    flex-shrink:0;
    width:20px !important;
    height:20px !important;
    border:1.5px solid var(--col-border) !important;
    border-radius:50% !important;
    background:var(--col-white);
    padding:3px;
    box-sizing:border-box;
    fill:transparent !important;
    transition:background 0.15s ease, border-color 0.15s ease, fill 0.15s ease;
    position:relative;
}
.wc-page-wrap .wc-block-components-checkbox__input:checked ~ .wc-block-components-checkbox__mark,
.wc-page-wrap .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark{
    background:var(--col-green-deep) !important;
    border-color:var(--col-green-deep) !important;
    fill:#fff !important;
}

/* Radio buttons (payment methods, shipping options) — tint native radios */
.wc-page-wrap .wc-block-components-radio-control__option-layout input[type="radio"]{
    accent-color:var(--col-green-deep);
}

/* Totals rows — padded horizontally so content doesn't touch the card edges.
   !important because WC ships default .wc-block-components-totals-item with
   its own padding. */
.wc-page-wrap .wc-block-components-totals-item{
    padding:14px 24px !important;
    border-bottom:1px solid var(--col-border);
    font-size:13px;
    margin:0;
    box-sizing:border-box;
}
.wc-page-wrap .wc-block-components-totals-item:last-of-type{border-bottom:none;}
.wc-page-wrap .wc-block-components-totals-item__label{color:var(--col-grey);}
.wc-page-wrap .wc-block-components-totals-item__value,
.wc-page-wrap .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    font-weight:500;
    color:var(--col-primary);
}
.wc-page-wrap .wc-block-components-totals-footer-item{
    border-top:2px solid var(--col-primary) !important;
    border-bottom:none !important;
    padding:20px 24px !important;
    margin:8px 0 0 !important;
}
.wc-page-wrap .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--col-primary);
}
.wc-page-wrap .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    font-family:'Cormorant Garamond',serif;
    font-size:28px;
    font-weight:400;
    color:var(--col-primary);
}

/* Formatted money amounts */
.wc-page-wrap .wc-block-components-formatted-money-amount{
    font-weight:500;
    color:var(--col-primary);
}

/* Coupon / collapsible panels */
.wc-page-wrap .wc-block-components-panel{
    padding:16px 24px !important;
    border-bottom:1px solid var(--col-border);
    margin:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.wc-page-wrap .wc-block-components-panel__button{
    font-size:13px;
    color:var(--col-green-deep);
    font-weight:500;
    padding:0 !important;
    margin:0;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    line-height:1.2;
}
.wc-page-wrap .wc-block-components-panel__button-icon{margin:0;}
/* Expanded content spacing */
.wc-page-wrap .wc-block-components-panel__content{padding-top:14px;margin:0;}
/* Collapsed content must take zero vertical space (was leaking padding below the title) */
.wc-page-wrap .wc-block-components-panel__content[hidden],
.wc-page-wrap .wc-block-components-panel__content[aria-hidden="true"]{
    display:none !important;
    padding:0 !important;
    margin:0 !important;
    height:0 !important;
}
.wc-page-wrap .wc-block-components-totals-coupon input[type="text"]{
    background:var(--col-lite);
}
.wc-page-wrap .wc-block-components-totals-coupon{
    padding:0;
}

/* ═══════════════════════════════════════════════════════════════════
   CART PAGE
   WC inserts a notice container as the first child, so grid would misalign.
   Flexbox lets main + sidebar sit side-by-side regardless of siblings.
   ═══════════════════════════════════════════════════════════════════ */
.wc-page-wrap .wc-block-cart{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    align-items:flex-start;
}
.wc-page-wrap .wc-block-cart > .wc-block-components-notices,
.wc-page-wrap .wc-block-cart > div[class=""]{
    flex:0 0 100%;
}
.wc-page-wrap .wc-block-cart__main{
    background:var(--col-white);
    padding:0;
    margin:0;
    flex:1 1 500px;
    min-width:0;
}
.wc-page-wrap .wc-block-cart__sidebar{
    background:var(--col-white);
    padding:0;
    margin:0;
    flex:0 0 360px;
    position:sticky;
    top:90px;
    align-self:flex-start;
}

/* Cart items header row ("Product / Subtotal") */
.wc-page-wrap .wc-block-cart-items__header{
    padding:14px 20px;
    border-bottom:1px solid var(--col-border);
}
.wc-page-wrap .wc-block-cart-items__header th,
.wc-page-wrap .wc-block-cart-items__header-product,
.wc-page-wrap .wc-block-cart-items__header-total{
    font-size:10px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--col-grey);
}

/* Line item row */
.wc-page-wrap .wc-block-cart-items__row{
    padding:20px;
    border-bottom:1px solid var(--col-border);
    align-items:center;
}
.wc-page-wrap .wc-block-cart-item__image img,
.wc-page-wrap .wc-block-cart-item__image a{
    width:72px;
    height:72px;
    object-fit:cover;
    background:var(--col-border);
    border-radius:0;
    display:block;
}

/* Item name + attributes */
.wc-page-wrap .wc-block-components-product-name{
    font-size:14px;
    font-weight:500;
    color:var(--col-primary);
    line-height:1.3;
    margin-bottom:4px;
    text-decoration:none;
}
.wc-page-wrap .wc-block-components-product-details{
    font-size:12px;
    color:var(--col-grey);
    line-height:1.6;
}
.wc-page-wrap .wc-block-components-product-details__name{color:var(--col-grey);}

/* Qty selector */
.wc-page-wrap .wc-block-components-quantity-selector{
    border:1.5px solid var(--col-border);
    border-radius:0;
    background:var(--col-white);
    overflow:hidden;
    height:36px;
}
.wc-page-wrap .wc-block-components-quantity-selector__button{
    color:var(--col-primary);
    background:transparent;
    font-size:16px;
    font-weight:300;
    width:30px;
    height:34px;
    border:none;
    transition:background 0.15s;
}
.wc-page-wrap .wc-block-components-quantity-selector__button:hover{
    background:var(--col-parchment);
}
.wc-page-wrap .wc-block-components-quantity-selector__input{
    font-size:13px;
    font-weight:500;
    color:var(--col-primary);
    background:transparent;
    border:none;
    width:36px;
    text-align:center;
}

/* Remove link */
.wc-page-wrap .wc-block-cart-item__remove-link{
    color:var(--col-grey);
    font-size:12px;
    text-decoration:underline;
    transition:color 0.2s;
}
.wc-page-wrap .wc-block-cart-item__remove-link:hover{color:var(--col-sienna);}

/* Line item prices */
.wc-page-wrap .wc-block-cart-item__total .wc-block-components-formatted-money-amount{
    font-size:14px;
    font-weight:600;
    color:var(--col-primary);
}

/* Cart totals title */
.wc-page-wrap .wc-block-cart__totals-title,
.wc-page-wrap .wc-block-components-order-summary__title{
    padding:20px 24px;
    margin:0;
    border-bottom:1px solid var(--col-border);
    font-family:'Cormorant Garamond',serif;
    font-size:22px;
    font-weight:400;
    color:var(--col-primary);
    text-transform:none;
    letter-spacing:0;
}

/* Cart order summary items (line rows in the sidebar) — horizontal padding
   so the content aligns with the "Cart totals" header above. */
.wc-page-wrap .wc-block-cart__sidebar .wc-block-components-order-summary-item{
    padding:16px 24px;
}

/* Proceed-to-checkout button — full width, tall */
.wc-page-wrap .wc-block-cart__submit-container,
.wc-page-wrap .wc-block-cart__submit{
    padding:0 24px 24px;
}
.wc-page-wrap .wc-block-cart__submit-button{
    width:100%;
    min-height:56px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.1em;
}

/* Empty cart state */
.wc-page-wrap .wp-block-woocommerce-empty-cart-block{
    background:var(--col-white);
    padding:80px 40px;
    text-align:center;
}
.wc-page-wrap .wc-block-cart__empty-cart__title{
    font-family:'Cormorant Garamond',serif;
    font-size:28px;
    font-weight:400;
    color:var(--col-primary);
    margin-bottom:12px;
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT PAGE — same flex strategy as cart (WC adds notice siblings)
   ═══════════════════════════════════════════════════════════════════ */
.wc-page-wrap .wc-block-checkout{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    align-items:flex-start;
}
.wc-page-wrap .wc-block-checkout > .wc-block-components-notices,
.wc-page-wrap .wc-block-checkout > div[class=""]{
    flex:0 0 100%;
}
.wc-page-wrap .wc-block-checkout__main{
    margin:0;
    flex:1 1 520px;
    min-width:0;
}
.wc-page-wrap .wc-block-checkout__sidebar{
    background:var(--col-white);
    position:sticky;
    top:20px;
    padding:0;
    flex:0 0 380px;
    align-self:flex-start;
}

/* Step cards */
.wc-page-wrap .wc-block-components-checkout-step{
    background:var(--col-white);
    padding:28px;
    margin-bottom:3px;
    border:none;
    box-shadow:none;
}
.wc-page-wrap .wc-block-components-checkout-step__title,
.wc-page-wrap .wc-block-components-checkout-step__heading{
    font-family:'Cormorant Garamond',serif;
    font-size:22px;
    font-weight:400;
    color:var(--col-primary);
    margin-bottom:22px;
    padding-bottom:14px;
    border-bottom:1px solid var(--col-border);
    text-transform:none;
    letter-spacing:0;
}

/* Address form layout already handled by WC grid — just tighten the field bg */
.wc-page-wrap .wc-block-components-address-form input,
.wc-page-wrap .wc-block-components-address-form select{
    background:var(--col-lite);
}

/* Login prompt */
.wc-page-wrap .wc-block-checkout__guest-checkout-notice{
    background:var(--col-parchment);
    padding:14px 18px;
    font-size:13px;
    color:rgba(44,58,46,0.7);
    border:none;
    border-radius:0;
    margin-bottom:3px;
}
.wc-page-wrap .wc-block-checkout__guest-checkout-notice a{
    color:var(--col-green-deep);
    font-weight:500;
}

/* Payment options */
.wc-page-wrap .wc-block-components-payment-method{
    border:1.5px solid var(--col-border);
    background:var(--col-lite);
    padding:16px 18px;
    margin-bottom:3px;
    border-radius:0;
}
.wc-page-wrap .wc-block-components-payment-method--checked{
    border-color:var(--col-primary);
    background:var(--col-white);
}

/* Shipping options */
.wc-page-wrap .wc-block-checkout__shipping-option{
    border:1.5px solid var(--col-border);
    background:var(--col-lite);
    padding:14px 18px;
    margin-bottom:3px;
    border-radius:0;
}
.wc-page-wrap .wc-block-checkout__shipping-option--free{
    border-color:var(--col-green-deep);
    background:rgba(61,107,74,0.05);
}

/* Order summary items (checkout sidebar) */
.wc-page-wrap .wc-block-components-order-summary-item{
    padding:16px 24px;
    border-bottom:1px solid var(--col-border);
    gap:14px;
}
.wc-page-wrap .wc-block-components-order-summary-item:last-child{border-bottom:none;}
.wc-page-wrap .wc-block-components-order-summary-item__image img,
.wc-page-wrap .wc-block-components-order-summary-item__image{
    width:56px;
    height:56px;
    object-fit:cover;
    border-radius:0;
}
.wc-page-wrap .wc-block-components-order-summary-item__description .wc-block-components-product-name{
    font-size:13px;
    margin-bottom:3px;
}
.wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount{
    font-size:13px;
    font-weight:600;
}

/* Place order button */
.wc-page-wrap .wc-block-components-checkout-place-order-button{
    width:100%;
    min-height:56px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    background:var(--cta-primary);
}
.wc-page-wrap .wc-block-checkout__actions{padding:24px;}

/* Terms and conditions line */
.wc-page-wrap .wc-block-checkout__terms{
    font-size:11px;
    color:var(--col-grey);
    line-height:1.6;
    padding:0 24px 16px;
}
.wc-page-wrap .wc-block-checkout__terms a{color:var(--col-green-deep);}

/* Express payment (Apple Pay / Google Pay blocks, if enabled) */
.wc-page-wrap .wc-block-components-express-payment__content{padding:16px 0;}
.wc-page-wrap .wc-block-components-express-payment-continue-rule{
    color:var(--col-grey);
    font-size:12px;
    letter-spacing:0.08em;
}

/* Error + success notices */
.wc-page-wrap .wc-block-components-notices .wc-block-components-notice-banner{
    border-radius:0;
    font-family:'DM Sans',sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
    .wc-page-wrap .wc-block-cart,
    .wc-page-wrap .wc-block-checkout{
        gap:24px;
    }
    .wc-page-wrap .wc-block-cart__main,
    .wc-page-wrap .wc-block-checkout__main{flex-basis:100%;}
    .wc-page-wrap .wc-block-cart__sidebar,
    .wc-page-wrap .wc-block-checkout__sidebar{
        position:static;
        flex-basis:100%;
    }
}