/**
 * The Provenance — prov-production.css
 * Production hardening: gaps vs Luma/Blank/Hyvä standards
 *
 * Load order: 5 of 5 — loads LAST, after all other prov-*.css files.
 *
 * What this file covers (grouped by audit category):
 *   A. Accessibility — focus indicators, touch targets, reduced-motion
 *   B. Magento UI gaps — modals, minicart, messages, swatches, tooltips
 *   C. Checkout — progress bar, steps, address form, payment, order summary
 *   D. Typography robustness — print, overflow, word-break
 *   E. Forms — checkboxes, radios, fieldsets, password strength
 *   F. Loading / skeleton states — spinners, ajax loaders
 *   G. Magento notices — cookie notice, compare bar
 *   H. Purpletree — seller profile page, product create/edit page
 *   I. Performance hints — font-display, contain, will-change
 */


/* ═════════════════════════════════════════════════════════════
   A. ACCESSIBILITY
   WCAG 2.1 AA required. Every interactive element needs a
   visible focus indicator. Luma's default outline is invisible
   on dark backgrounds. We use a gold box-shadow that works on
   any background colour and matches the brand.
═════════════════════════════════════════════════════════════ */

/* Visible focus ring — gold, 2px offset, works on light and dark */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.action:focus-visible,
[tabindex]:focus-visible {
    outline:        2px solid var(--gold) !important;
    outline-offset: 3px !important;
    box-shadow:     none !important;
}

/* For browsers that don't support :focus-visible yet */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.action:focus {
    outline: 2px solid var(--gold) !important;
    outline-offset: 3px !important;
}

/* Suppress outline only on mouse interaction (JS adds .mouse-user to body) */
.mouse-user a:focus,
.mouse-user button:focus,
.mouse-user input:focus,
.mouse-user select:focus,
.mouse-user textarea:focus,
.mouse-user .action:focus {
    outline: none !important;
}

/* Touch target minimum 44×44px (WCAG 2.5.5)
   Applies to icon-only buttons that are visually small */
.action.towishlist,
.action.tocompare,
.action.action-delete,
.action.edit,
.btn-remove,
.pages .item a,
.pages .item strong {
    min-height: 44px !important;
    min-width:  44px !important;
}

/* Pagination items — keep them compact visually but meet touch target */
.pages .item a,
.pages .item strong {
    display:        inline-flex !important;
    align-items:    center !important;
    justify-content: center !important;
    min-height:     40px !important;
    min-width:      40px !important;
}

/* Reduced motion — respect user's OS preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto !important;
    }
}

/* Skip navigation link (rendered in phtml header) */
.skip-link {
    position:    absolute !important;
    left:        -9999px !important;
    top:         0 !important;
    background:  var(--brown) !important;
    color:       var(--cream) !important;
    padding:     12px 20px !important;
    z-index:     99999 !important;
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
.skip-link:focus {
    left: 0 !important;
}

/* Visually hidden utility (for screen-reader-only text) */
.sr-only {
    position:   absolute !important;
    width:      1px !important;
    height:     1px !important;
    padding:    0 !important;
    margin:     -1px !important;
    overflow:   hidden !important;
    clip:       rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border:     0 !important;
}


/* ═════════════════════════════════════════════════════════════
   B. MAGENTO UI — MODALS, MINICART, SWATCHES, TOOLTIPS
   Luma ships these fully styled. Our CSS doesn't override them
   which means they fall back to Luma's blue/grey defaults.
   We bring them into the Provenance palette here.
═════════════════════════════════════════════════════════════ */

/* ── Modal overlay ── */
.modals-overlay {
    background: rgba(20,12,5,0.65) !important;
    backdrop-filter: blur(2px) !important;
}

/* ── Modal popup ── */
.modal-popup .modal-inner-wrap {
    background:    var(--white) !important;
    border:        1px solid var(--cream-deeper) !important;
    box-shadow:    0 16px 64px rgba(20,12,5,0.25) !important;
    border-radius: 0 !important;
    max-width:     min(640px, calc(100vw - 32px)) !important;
}

.modal-popup .modal-header {
    background:    var(--cream-dark) !important;
    border-bottom: 1px solid var(--cream-deeper) !important;
    padding:       20px 24px !important;
}
.modal-popup .modal-title {
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-lg) !important;
    font-weight: 400 !important;
    color:       var(--brown) !important;
    border:      none !important;
    padding:     0 !important;
    margin:      0 !important;
}
.modal-popup .action-close {
    background:  transparent !important;
    border:      none !important;
    color:       var(--text-muted) !important;
    transition:  color 0.2s !important;
    padding:     4px !important;
    top:         16px !important;
    right:       20px !important;
}
.modal-popup .action-close:hover { color: var(--brown) !important; }
.modal-popup .action-close::before {
    font-size: 22px !important;
    color:     inherit !important;
}

.modal-popup .modal-content {
    padding:     24px !important;
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    color:       var(--text-body) !important;
    line-height: 1.75 !important;
}

.modal-popup .modal-footer {
    border-top:  1px solid var(--cream-deeper) !important;
    padding:     16px 24px !important;
    background:  var(--cream-dark) !important;
    display:     flex !important;
    gap:         12px !important;
    flex-wrap:   wrap !important;
    justify-content: flex-end !important;
}

/* ── Modal slide (used for mobile cart sidebar etc) ── */
.modal-slide .modal-inner-wrap {
    background: var(--white) !important;
    box-shadow: -8px 0 32px rgba(20,12,5,0.20) !important;
}
.modal-slide .modal-header {
    background:    var(--cream-dark) !important;
    border-bottom: 1px solid var(--cream-deeper) !important;
    padding:       20px 24px !important;
}
.modal-slide .modal-title {
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-lg) !important;
    font-weight: 400 !important;
    color:       var(--brown) !important;
    border:      none !important;
    padding:     0 !important;
}

/* ── Minicart ── */
.minicart-wrapper .action.showcart {
    color: var(--brown) !important;
}
.minicart-wrapper .action.showcart:hover { color: var(--gold) !important; }

.minicart-wrapper .action.showcart .counter.qty {
    background:  var(--gold) !important;
    color:       var(--brown) !important;
    font-family: var(--font-sans) !important;
    font-size:   10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    min-width:   18px !important;
    height:      18px !important;
    border-radius: 9px !important;
}

/* Minicart dropdown */
.block-minicart {
    background: var(--white) !important;
    border:     1px solid var(--cream-deeper) !important;
    box-shadow: 0 8px 32px rgba(20,12,5,0.14) !important;
    border-top: 3px solid var(--gold) !important;
}
.block-minicart .block-title {
    font-family:   var(--font-sans) !important;
    font-size:     var(--ui-xs) !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color:         var(--text-muted) !important;
    border-bottom: 1px solid var(--cream-deeper) !important;
    padding:       14px 20px !important;
}
.block-minicart .minicart-items-wrapper {
    border-top: none !important;
}
.block-minicart .product-item-name a {
    font-family:     var(--font-serif) !important;
    font-size:       15px !important;
    color:           var(--brown) !important;
    text-decoration: none !important;
}
.block-minicart .product-item-name a:hover { color: var(--gold) !important; }

.block-minicart .price {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-sm) !important;
    color:          var(--brown) !important;
    font-weight:    500 !important;
}
.block-minicart .subtotal .price-container {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-sm) !important;
}
.block-minicart .subtotal .label {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
}
.block-minicart .actions .action.primary {
    width: 100% !important;
    text-align: center !important;
}
.block-minicart .action.delete {
    color: var(--text-muted) !important;
    transition: color 0.2s !important;
}
.block-minicart .action.delete:hover { color: var(--red) !important; }

/* Minicart::before arrow — match border */
.block-minicart::before {
    border-bottom-color: var(--cream-deeper) !important;
}
.block-minicart::after {
    border-bottom-color: var(--white) !important;
}

/* ── Swatches (color/size options on PDP and PLPs) ── */
.swatch-option {
    border:      1px solid var(--cream-deeper) !important;
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-xs) !important;
    color:       var(--text-muted) !important;
    min-width:   36px !important;
    min-height:  36px !important;
    transition:  border-color 0.2s, color 0.2s !important;
}
.swatch-option:hover,
.swatch-option.selected {
    border-color: var(--brown) !important;
    color:        var(--brown) !important;
    outline:      none !important;
}
.swatch-option.selected {
    font-weight: 500 !important;
}

/* ── Tooltips ── */
.tooltip-content,
div[data-ui-id$="-tooltip-content"] {
    background:  var(--brown) !important;
    color:       var(--cream) !important;
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-xs) !important;
    border:      none !important;
    padding:     8px 12px !important;
}

/* ── Dropdown menus (customer/account nav) ── */
.customer-welcome .customer-menu {
    background: var(--white) !important;
    border:     1px solid var(--cream-deeper) !important;
    box-shadow: 0 4px 16px rgba(20,12,5,0.10) !important;
}
.customer-welcome .customer-menu li a {
    font-family:     var(--font-sans) !important;
    font-size:       var(--ui-sm) !important;
    color:           var(--brown-mid) !important;
    padding:         10px 20px !important;
    display:         block !important;
    text-decoration: none !important;
    transition:      color 0.2s, background 0.2s !important;
}
.customer-welcome .customer-menu li a:hover {
    color:      var(--brown) !important;
    background: var(--cream) !important;
}


/* ═════════════════════════════════════════════════════════════
   C. CHECKOUT — FULL STYLING PASS
   Luma's checkout is a complex single-page app.
   Our prov-shop.css only touches opc-wrapper step titles
   and progress bar. The full checkout needs proper form
   styling, payment method selection, and order summary.
═════════════════════════════════════════════════════════════ */

.checkout-index-index .page-title-wrapper { display: none !important; }

/* Checkout layout — constrain width, keep centred */
.checkout-index-index .checkout-container {
    max-width:  1100px !important;
    margin:     0 auto !important;
    padding:    var(--sp-6) var(--gutter) var(--sp-9) !important;
    box-sizing: border-box !important;
}

/* Progress bar */
.opc-progress-bar {
    margin-bottom: var(--sp-7) !important;
    counter-reset: i !important;
    display:       flex !important;
    gap:           0 !important;
}
.opc-progress-bar-item {
    flex:       1 !important;
    position:   relative !important;
    text-align: center !important;
}
.opc-progress-bar-item::before {
    background:  var(--cream-deeper) !important;
    height:      2px !important;
    content:     '' !important;
    position:    absolute !important;
    top:         14px !important;
    left:        50% !important;
    width:       100% !important;
}
.opc-progress-bar-item:last-child::before { display: none !important; }

.opc-progress-bar-item > span::before {
    background:  var(--cream-dark) !important;
    border:      2px solid var(--cream-deeper) !important;
    color:       var(--text-muted) !important;
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-xs) !important;
    width:       28px !important;
    height:      28px !important;
    line-height: 24px !important;
}
.opc-progress-bar-item._active > span::before {
    background:   var(--brown) !important;
    border-color: var(--brown) !important;
    color:        var(--cream) !important;
}
.opc-progress-bar-item._complete > span::before {
    background:   var(--gold) !important;
    border-color: var(--gold) !important;
    color:        var(--brown) !important;
}
.opc-progress-bar-item > span {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
    padding-top:    8px !important;
    display:        block !important;
}
.opc-progress-bar-item._active > span  { color: var(--brown) !important; font-weight: 500 !important; }
.opc-progress-bar-item._complete > span { color: var(--gold) !important; }

/* OPC wrapper — constrain form column */
.opc-wrapper {
    max-width: 680px !important;
}

/* Step titles */
.opc-wrapper .step-title {
    font-family:    var(--font-serif) !important;
    font-size:      var(--ui-xl) !important;
    font-weight:    400 !important;
    color:          var(--brown) !important;
    border-bottom:  1px solid var(--cream-deeper) !important;
    padding-bottom: var(--sp-4) !important;
    margin-bottom:  var(--sp-5) !important;
}

/* Shipping address form */
.checkout-shipping-address .fieldset,
.billing-address-form .fieldset {
    border:  none !important;
    padding: 0 !important;
    margin:  0 !important;
}
.checkout-shipping-address .field.street .field .label { display: none !important; }
.checkout-shipping-address .field.street .field:first-child .label { display: block !important; }

/* Shipping methods table */
.table-checkout-shipping-method tbody td {
    vertical-align: middle !important;
    padding:        14px 16px !important;
    border-bottom:  1px solid var(--cream-dark) !important;
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-sm) !important;
    color:          var(--text-body) !important;
}
.table-checkout-shipping-method tbody tr:hover td {
    background: var(--cream-dark) !important;
    cursor:     pointer !important;
}
.table-checkout-shipping-method .col-method input[type="radio"] {
    accent-color: var(--gold) !important;
}

/* Payment methods */
.payment-method {
    border-bottom: 1px solid var(--cream-dark) !important;
    padding:       16px 0 !important;
}
.payment-method._active { background: transparent !important; }
.payment-method-title .label {
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    color:       var(--brown) !important;
    font-weight: 400 !important;
    cursor:      pointer !important;
}
.payment-method-title input[type="radio"] {
    accent-color: var(--gold) !important;
}
.payment-method-content {
    padding: 16px 0 16px 28px !important;
}

/* Order summary sidebar */
.opc-block-summary {
    background: var(--white) !important;
    border:     1px solid var(--cream-deeper) !important;
    box-shadow: var(--card-shadow) !important;
    padding:    0 !important;
    overflow:   hidden !important;
}
.opc-block-summary > .title {
    font-family:   var(--font-serif) !important;
    font-size:     var(--ui-lg) !important;
    font-weight:   400 !important;
    color:         var(--brown) !important;
    background:    var(--cream-dark) !important;
    border-bottom: 1px solid var(--cream-deeper) !important;
    border-left:   3px solid var(--gold) !important;
    padding:       var(--sp-4) var(--sp-5) !important;
    margin:        0 !important;
    display:       block !important;
}
.opc-block-summary .items-in-cart > .title {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
    cursor:         pointer !important;
    padding:        12px 20px !important;
    border-bottom:  1px solid var(--cream-dark) !important;
}
.opc-block-summary .table-totals {
    padding: 0 20px !important;
}
.opc-block-summary .table-totals .mark {
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    color:       var(--text-muted) !important;
    padding:     8px 0 !important;
}
.opc-block-summary .table-totals .amount {
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    color:       var(--brown) !important;
    font-weight: 500 !important;
    text-align:  right !important;
}
.opc-block-summary .grand.totals .mark,
.opc-block-summary .grand.totals .amount {
    font-size:   var(--ui-base) !important;
    color:       var(--brown) !important;
    font-weight: 500 !important;
    border-top:  2px solid var(--cream-deeper) !important;
    padding-top: 14px !important;
}

/* Checkout mobile */
@media (max-width: 768px) {
    .checkout-index-index .checkout-container {
        padding: 20px 16px 56px !important;
    }
    .opc-wrapper { max-width: 100% !important; }
}


/* ═════════════════════════════════════════════════════════════
   D. TYPOGRAPHY ROBUSTNESS
═════════════════════════════════════════════════════════════ */

/* Prevent long product names / URLs from breaking layouts */
.product-item-name,
.product-item-name a,
.cart.items .product-item-name,
.opc-block-summary .product-item-name {
    word-break:      break-word !important;
    overflow-wrap:   break-word !important;
    hyphens:         auto !important;
}

/* Long prices / SKUs in narrow table cells */
.data.table td,
.data.table th {
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Font smoothing for retina screens */
body {
    -webkit-font-smoothing:  antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Garamond — ensure italic renders correctly (browser fallback protection) */
.font-serif-italic {
    font-family:  var(--font-serif) !important;
    font-style:   italic !important;
    font-weight:  400 !important;
}

/* Print styles */
@media print {
    .prov-header, .prov-nav, .prov-footer-wrap,
    .sidebar, .toolbar, .breadcrumbs,
    .action.tocart, .action.primary,
    .block-minicart, .modal-popup { display: none !important; }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt !important;
    }
    a { color: #000 !important; text-decoration: underline !important; }
    .page-main { max-width: 100% !important; padding: 0 !important; }

    .catalog-product-view .product-media,
    .catalog-product-view .product-info-main {
        float: none !important;
        width: 100% !important;
    }
    .data.table { font-size: 9pt !important; }
}


/* ═════════════════════════════════════════════════════════════
   E. FORMS — CHECKBOXES, RADIOS, FIELDSETS, PASSWORD STRENGTH
   Luma styles these fully. Without overrides they render in
   the browser's native blue/grey on our cream background.
═════════════════════════════════════════════════════════════ */

/* Custom checkbox and radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--gold) !important;
    width:        16px !important;
    height:       16px !important;
    cursor:       pointer !important;
    flex-shrink:  0 !important;
}

/* Fieldset reset */
fieldset {
    border:  none !important;
    padding: 0 !important;
    margin:  0 !important;
}
legend {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color:          var(--gold) !important;
    margin-bottom:  var(--sp-5) !important;
    padding-bottom: var(--sp-3) !important;
    border-bottom:  1px solid var(--cream-deeper) !important;
    width:          100% !important;
    display:        block !important;
}

/* Password strength meter */
#password-strength-meter-container {
    margin-top: var(--sp-2) !important;
}
.password-strength-meter {
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-xs) !important;
    color:       var(--text-muted) !important;
}
#password-strength-meter {
    height:        4px !important;
    background:    var(--cream-deeper) !important;
    margin-top:    4px !important;
    border-radius: 0 !important;
}
#password-strength-meter .password-strength-meter-bar {
    height:     100% !important;
    transition: width 0.3s ease !important;
}
.password-none     #password-strength-meter { background: var(--cream-deeper) !important; }
.password-weak     .password-strength-meter-bar { background: var(--red) !important; width: 25% !important; }
.password-medium   .password-strength-meter-bar { background: #E67E22 !important; width: 50% !important; }
.password-strong   .password-strength-meter-bar { background: var(--gold) !important; width: 75% !important; }
.password-very-strong .password-strength-meter-bar { background: #27AE60 !important; width: 100% !important; }

/* Inline field note / helper text */
.field-note,
.note {
    font-family:  var(--font-sans) !important;
    font-size:    var(--ui-xs) !important;
    color:        var(--text-muted) !important;
    margin-top:   4px !important;
    line-height:  1.5 !important;
    display:      block !important;
}

/* Address form layout — first/last side by side on desktop */
@media (min-width: 768px) {
    .form-address-edit .field.firstname,
    .checkout-shipping-address .field.firstname {
        float: left !important;
        width: calc(50% - 8px) !important;
        clear: left !important;
    }
    .form-address-edit .field.lastname,
    .checkout-shipping-address .field.lastname {
        float: right !important;
        width: calc(50% - 8px) !important;
    }
    .form-address-edit .field.firstname + .field.lastname + .field,
    .checkout-shipping-address .field.firstname + .field.lastname + .field {
        clear: both !important;
    }
}


/* ═════════════════════════════════════════════════════════════
   F. LOADING / AJAX STATES
═════════════════════════════════════════════════════════════ */
.loading-mask {
    background: rgba(242,236,223,0.75) !important;
    z-index:    9999 !important;
}
/* Reduce opacity on the spinner image — avoid complex filters that
   distort transparent PNGs. Let the cream overlay tint the page. */
.loading-mask .loader > img {
    opacity: 0.8 !important;
}
.loading-mask .loader > p {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
}

/* Ajax-loading state on buttons */
.action.tocart.loading,
.action.primary.loading {
    opacity: 0.65 !important;
    cursor:  wait !important;
    pointer-events: none !important;
}

/* body._has-modal is set by Magento JS and should not be re-declared
   in CSS — doing so can cause scroll lock conflicts on iOS Safari
   and interfere with Magento's own modal scroll management.
   (Removed — let Magento JS own this class entirely.) */


/* ═════════════════════════════════════════════════════════════
   G. MAGENTO NOTICES — COOKIE CONSENT, COMPARE BAR
═════════════════════════════════════════════════════════════ */

/* Cookie notice */
.message.global.cookie {
    background:    var(--brown) !important;
    color:         var(--cream) !important;
    font-family:   var(--font-sans) !important;
    font-size:     var(--ui-sm) !important;
    padding:       16px var(--gutter) !important;
    text-align:    left !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: space-between !important;
    gap:           var(--sp-5) !important;
    border:        none !important;
    border-top:    3px solid var(--gold) !important;
}
.message.global.cookie .content p {
    color:       var(--cream) !important;
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    margin:      0 !important;
}
.message.global.cookie .actions {
    flex-shrink: 0 !important;
}
.message.global.cookie .action.allow {
    background:     var(--gold) !important;
    border:         1px solid var(--gold) !important;
    color:          var(--brown) !important;
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    font-weight:    500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding:        10px 24px !important;
    white-space:    nowrap !important;
    transition:     background 0.3s, color 0.3s !important;
}
.message.global.cookie .action.allow:hover {
    background: transparent !important;
    color:      var(--gold) !important;
    border-color: var(--gold) !important;
}

/* Compare products bar (bottom of screen) */
.block-compare {
    background: var(--brown) !important;
    border-top: 2px solid var(--gold) !important;
}
.block-compare .block-title strong {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          var(--cream) !important;
}
.block-compare .product-item-name {
    font-family:     var(--font-sans) !important;
    font-size:       var(--ui-xs) !important;
    color:           var(--cream) !important;
    text-decoration: none !important;
}
.block-compare .action.delete { color: var(--gold) !important; }
.block-compare .action.compare {
    background:     var(--gold) !important;
    border:         1px solid var(--gold) !important;
    color:          var(--brown) !important;
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding:        10px 20px !important;
}
.block-compare .action.compare:hover {
    background: transparent !important;
    color:      var(--gold) !important;
}

/* Noscript notice */
.message.global.noscript {
    background:  #fbf0f0 !important;
    border:      1px solid var(--red) !important;
    color:       var(--red) !important;
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    padding:     12px 20px !important;
}

/* Demo store notice */
.message.global.demo {
    background:     var(--gold) !important;
    color:          var(--brown) !important;
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.12em !important;
    padding:        10px var(--gutter) !important;
    text-align:     center !important;
}


/* ═════════════════════════════════════════════════════════════
   H. PURPLETREE — SELLER PROFILE & PRODUCT EDIT
   The Purpletree plugin renders unique pages that need
   specific treatment beyond what prov-content.css covers.
═════════════════════════════════════════════════════════════ */

/* Seller profile page header */
.marketplace-seller-view .seller-profile-banner {
    width:           100% !important;
    max-height:      280px !important;
    object-fit:      cover !important;
    display:         block !important;
}
.marketplace-seller-view .seller-info {
    background:    var(--white) !important;
    border:        1px solid var(--cream-deeper) !important;
    padding:       var(--sp-6) !important;
    margin-bottom: var(--sp-5) !important;
    box-shadow:    var(--card-shadow) !important;
}

/* Seller product edit — section separators */
.marketplace-index-productedit .purpletree-seprator,
.marketplace-index-productcreate .purpletree-seprator {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color:          var(--gold) !important;
    border-bottom:  2px solid var(--cream-deeper) !important;
    padding-bottom: var(--sp-3) !important;
    margin-bottom:  var(--sp-5) !important;
    margin-top:     var(--sp-6) !important;
}

/* Product create/edit form — section background cards */
.marketplace-index-productedit .purpletree-content,
.marketplace-index-productcreate .purpletree-content {
    background:    var(--white) !important;
    border:        1px solid var(--cream-deeper) !important;
    padding:       var(--sp-5) !important;
    margin-bottom: var(--sp-4) !important;
}

/* Purpletree table styling (order table, commission table) */
.purpletree-tableproduct {
    background-color: var(--cream-dark) !important;
}
.purpletree-tableproduct th {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          rgba(242,236,223,0.8) !important;
    background:     var(--brown) !important;
    padding:        12px 16px !important;
    font-weight:    500 !important;
}

/* Seller store banner on PLP/search */
.pts-store-info-block {
    background:    var(--white) !important;
    border:        1px solid var(--cream-deeper) !important;
    border-left:   3px solid var(--gold) !important;
    padding:       var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
    box-shadow:    var(--card-shadow) !important;
}


/* ═════════════════════════════════════════════════════════════
   I. PERFORMANCE HINTS
   CSS contain and will-change to help the browser optimise
   paint and layout — standard on premium production themes.
═════════════════════════════════════════════════════════════ */

/* Contain layout for card grids — prevents layout thrashing */
.products-grid .product-item-info {
    contain: layout style !important;
}

/* Tell browser image transitions will use transform */
.products-grid .product-item-photo img,
.wishlist-index-index .product-item-photo img {
    will-change: transform !important;
}

/* Once transition completes, release will-change to avoid memory overhead */
.products-grid .product-item-info:not(:hover) img,
.wishlist-index-index .product-item:not(:hover) .product-item-photo img {
    will-change: auto !important;
}

/* Font display — already handled by Google Fonts ?display=swap
   but add explicit fallback for any self-hosted scenario */
@font-face {
    font-family:   'EB Garamond';
    font-display:  swap;
    src: local('EB Garamond');
}
@font-face {
    font-family:   'Montserrat';
    font-display:  swap;
    src: local('Montserrat');
}

/* Prevent layout shift from images before they load */
.product-item-photo .product-image-wrapper,
.wishlist-index-index .product-item-photo {
    background-color: var(--cream) !important;
}
.product-item-photo img[width][height] {
    height: auto !important;
}