/**
 * The Provenance — prov-shop.css
 * PLP · PDP · Cart · Checkout · Search Results
 *
 * Load order: 2 of 4
 * Requires: prov-base.css (tokens)
 */


/* ─────────────────────────────────────────────────────────────
   PRODUCT LISTING PAGE + SEARCH RESULTS
───────────────────────────────────────────────────────────── */
.catalog-category-view .page-main,
.catalogsearch-result-index .page-main {
    max-width:  var(--max-w);
    margin:     0 auto !important;
    padding:    0 var(--gutter) 64px !important;
    float:      none !important;
    width:      100% !important;
    box-sizing: border-box !important;
    clear:      both;
}

/* Sidebar blocks on PLP */
.catalog-category-view .sidebar .block,
.catalogsearch-result-index .sidebar .block {
    background:    transparent !important;
    border:        1px solid var(--cream-deeper) !important;
    box-shadow:    none !important;
    margin-bottom: 12px !important;
    overflow:      hidden !important;
}
.catalog-category-view .sidebar .block .block-title,
.catalogsearch-result-index .sidebar .block .block-title {
    background:      var(--cream-dark) !important;
    border-left:     none !important;
    border-bottom:   1px solid var(--cream-deeper) !important;
    padding:         10px 16px !important;
    display:         block !important;
    justify-content: unset !important;
}
.catalog-category-view .sidebar .block .block-title strong,
.catalogsearch-result-index .sidebar .block .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(--text-muted) !important;
    font-weight:    500 !important;
}
.catalog-category-view .sidebar .block .block-content,
.catalogsearch-result-index .sidebar .block .block-content {
    padding:               12px 16px !important;
    font-family:           var(--font-sans) !important;
    font-size:             var(--ui-sm) !important;
    background:            transparent !important;
    display:               block !important;
    grid-template-columns: unset !important;
}

/* Column widths */
.catalog-category-view .column.main,
.catalogsearch-result-index .column.main {
    width: 75% !important;
}
.catalog-category-view .sidebar-main,
.catalog-category-view .sidebar-additional,
.catalogsearch-result-index .sidebar-main,
.catalogsearch-result-index .sidebar-additional {
    width: 22% !important;
}

/* Page title */
.catalog-category-view .page-title-wrapper,
.catalogsearch-result-index .page-title-wrapper {
    padding:       16px 0 12px !important;
    border-bottom: 1px solid var(--cream-deeper) !important;
    margin:        0 !important;
}
.catalog-category-view .page-title-wrapper .page-title,
.catalogsearch-result-index .page-title-wrapper .page-title {
    margin:  0 !important;
    padding: 0 !important;
}
.catalog-category-view .page-title span,
.catalogsearch-result-index .page-title span {
    font-family: var(--font-serif) !important;
    font-size:   36px !important;
    font-weight: 400 !important;
    color:       var(--brown) !important;
    line-height: 1.15 !important;
}

/* Zero out gap between breadcrumbs, title, and grid */
.catalog-category-view .breadcrumbs,
.catalogsearch-result-index .breadcrumbs {
    padding-bottom: 0 !important;
    margin-bottom:  0 !important;
}
.catalog-category-view .columns,
.catalogsearch-result-index .columns {
    margin-top:  0 !important;
    padding-top: 0 !important;
}
.catalog-category-view .page-title-wrapper,
.catalogsearch-result-index .page-title-wrapper {
    margin-top: 0 !important;
}

/* Category description */
.category-description:empty,
.category-description > .value:empty,
.category-description > .value:only-child:empty {
    display: none !important;
}
.category-description {
    font-family:  var(--font-serif) !important;
    font-size:    var(--ui-md) !important;
    color:        var(--text-muted) !important;
    max-width:    640px !important;
    line-height:  1.75 !important;
    margin:       12px 0 0 !important;
}

/* Toolbar */
.catalog-category-view .toolbar-products,
.catalogsearch-result-index .toolbar-products {
    overflow:      hidden !important;
    margin-top:    10px !important;
    margin-bottom: 12px !important;
    padding:       0 !important;
    border:        none !important;
}
.catalog-category-view .toolbar-amount,
.catalogsearch-result-index .toolbar-amount {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.1em !important;
    color:          var(--text-muted) !important;
    float:          left !important;
    margin:         0 !important;
    padding:        8px 0 !important;
    line-height:    1 !important;
}
.catalog-category-view .toolbar-sorter,
.catalogsearch-result-index .toolbar-sorter {
    float:       right !important;
    margin:      0 !important;
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
}
.catalog-category-view .modes,
.catalogsearch-result-index .modes {
    display: none !important;
}

/* Search results count */
.catalogsearch-result-index .search.found {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-sm) !important;
    color:          var(--text-muted) !important;
    margin-bottom:  16px !important;
    display:        block !important;
    letter-spacing: 0.06em !important;
}
.catalogsearch-result-index .search.found strong { color: var(--brown) !important; }


/* ── Product grid ── */
.products-grid .product-items {
    display:     grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:         24px !important;
    list-style:  none !important;
    margin:      0 !important;
    padding:     0 !important;
    align-items: start !important;
}
.products-grid .product-item {
    margin:    0 !important;
    width:     100% !important;
    min-width: 0 !important;
}

/* Card shell */
.products-grid .product-item-info {
    background:     #FFFFFF !important;
    border:         1px solid var(--cream-deeper) !important;
    box-shadow:     0 2px 8px rgba(58,44,27,0.07) !important;
    overflow:       visible !important;
    /* Refined luxury hover: lift is subtle, shadow deepens elegantly */
    transition:     box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease !important;
    position:       relative !important;
    cursor:         pointer !important;
    display:        flex !important;
    flex-direction: column !important;
    width:          100% !important;
    min-width:      0 !important;
}
.products-grid .product-item-info:hover {
    /* Restrained lift — 2px, not 4px. Shadow grows but stays warm. */
    box-shadow:   0 8px 32px rgba(58,44,27,0.12) !important;
    border-color: var(--gold) !important;
    transform:    translateY(-2px) !important;
    z-index:      2 !important;
}

/* Image */
.products-grid .product-item-photo {
    display:     block !important;
    overflow:    hidden !important;
    position:    relative !important;
    flex-shrink: 0 !important;
    background:  var(--cream) !important;
    width:       100% !important;
}
.products-grid .product-item-photo .product-image-container {
    width:   100% !important;
    display: block !important;
}
.products-grid .product-item-photo .product-image-wrapper {
    padding-bottom: 100% !important;
    position:       relative !important;
    overflow:       hidden !important;
    display:        block !important;
    width:          100% !important;
}
.products-grid .product-item-photo img {
    position:   absolute !important;
    inset:      0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display:    block !important;
}
.products-grid .product-item-info:hover img { transform: scale(1.04) !important; }

/* Hover overlay — very subtle darkening, not heavy */
.products-grid .product-item-photo::after {
    content:        '' !important;
    position:       absolute !important;
    inset:          0 !important;
    background:     rgba(30,15,5,0) !important;
    transition:     background 0.4s ease !important;
    pointer-events: none !important;
    z-index:        1 !important;
}
.products-grid .product-item-info:hover .product-item-photo::after {
    background: rgba(30,15,5,0.05) !important;
}

/* Details */
.products-grid .product-item-details {
    padding:    16px 16px 8px !important;
    border-top: 1px solid var(--cream-dark) !important;
    background: #FFFFFF !important;
    flex:       1 !important;
}
.products-grid .product-item-name { margin-bottom: 6px !important; }
.products-grid .product-item-name a,
.products-grid .product-item-name a:visited {
    font-family:           var(--font-serif) !important;
    font-size:             15px !important;
    color:                 var(--brown) !important;
    text-decoration:       none !important;
    line-height:           1.4 !important;
    transition:            color 0.2s !important;
    display:               -webkit-box !important;
    -webkit-line-clamp:    2 !important;
    -webkit-box-orient:    vertical !important;
    overflow:              hidden !important;
}
.products-grid .product-item-name a:hover { color: var(--gold) !important; }

/* Price */
.products-grid .price-box {
    display:       flex !important;
    align-items:   baseline !important;
    gap:           8px !important;
    margin-bottom: 6px !important;
}
.products-grid .price-box .price {
    font-family:    var(--font-sans) !important;
    font-size:      14px !important;
    letter-spacing: 0.04em !important;
    color:          var(--brown) !important;
    font-weight:    500 !important;
}
.products-grid .price-box .old-price .price {
    font-size:       12px !important;
    color:           var(--text-muted) !important;
    text-decoration: line-through !important;
    font-weight:     400 !important;
}
.products-grid .product-reviews-summary { display: none !important; }

/*
   Seller name — Purpletree outputs seller info with various class names.
   We target known specific classes only (no wildcard — too risky).
   Shown below price as a small muted attribution line.
*/
.products-grid .product-item-details .pts-seller-name,
.products-grid .product-item-details .seller-name,
.products-grid .product-item-details .product-item-seller,
.products-grid .product-item-details .purpletree-seller-name {
    font-family:    var(--font-sans) !important;
    font-size:      10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
    opacity:        0.7 !important;
    margin-top:     4px !important;
    margin-bottom:  8px !important;
    display:        block !important;
    white-space:    nowrap !important;
    overflow:       hidden !important;
    text-overflow:  ellipsis !important;
}
.products-grid .product-item-details .pts-seller-name a,
.products-grid .product-item-details .seller-name a,
.products-grid .product-item-details .product-item-seller a,
.products-grid .product-item-details .purpletree-seller-name a {
    color:           inherit !important;
    text-decoration: none !important;
    transition:      color 0.2s, opacity 0.2s !important;
}
.products-grid .product-item-details .pts-seller-name a:hover,
.products-grid .product-item-details .seller-name a:hover,
.products-grid .product-item-details .product-item-seller a:hover,
.products-grid .product-item-details .purpletree-seller-name a:hover {
    color:   var(--gold) !important;
    opacity: 1 !important;
}

/* Add to cart */
.products-grid .product-item-actions {
    padding:    0 16px 12px !important;
    background: #FFFFFF !important;
}
.products-grid .product-item-actions .action.tocart {
    width:          100% !important;
    text-align:     center !important;
    padding:        10px 16px !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.18em !important;
}

/* Wishlist + Compare */
.products-grid .product-item-actions .actions-secondary {
    display:    flex !important;
    gap:        4px !important;
    margin-top: 8px !important;
}
.products-grid .action.towishlist,
.products-grid .action.tocompare {
    width:          36px !important;
    height:         36px !important;
    background:     var(--cream-dark) !important;
    border:         1px solid var(--cream-deeper) !important;
    color:          var(--text-muted) !important;
    display:        flex !important;
    align-items:    center !important;
    justify-content: center !important;
    cursor:         pointer !important;
    transition:     background 0.25s, border-color 0.25s, color 0.25s !important;
    padding:        0 !important;
    font-size:      14px !important;
    border-radius:  0 !important;
    text-decoration: none !important;
}
.products-grid .action.towishlist:hover,
.products-grid .action.tocompare:hover {
    background:   var(--cream-deeper) !important;
    border-color: var(--gold) !important;
    color:        var(--gold) !important;
}


/* ─────────────────────────────────────────────────────────────
   COLUMNS CLEARFIX
   Luma floats .column.main and .sidebar-main inside .columns.
   Without this the page collapses below them.
───────────────────────────────────────────────────────────── */
.columns::after {
    content: '';
    display: table;
    clear:   both;
}

/* ─────────────────────────────────────────────────────────────
   PRODUCT DETAIL PAGE
───────────────────────────────────────────────────────────── */
.catalog-product-view .page-main {
    max-width:  var(--max-w) !important;
    margin:     0 auto !important;
    padding:    var(--sp-6) var(--gutter) 64px !important;
    float:      none !important;
    width:      100% !important;
    box-sizing: border-box !important;
    clear:      both;
}

/* Explicit 2-column float layout for PDP.
   Luma sets .product-media at ~57% and .product-info-main at ~40%.
   Without these our CSS leaves them stacked.                    */
.catalog-product-view .product.media {
    float:      left !important;
    width:      57% !important;
    box-sizing: border-box !important;
}
.catalog-product-view .product-info-main {
    float:      right !important;
    width:      40% !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}
/* Clearfix for the PDP columns wrapper */
.catalog-product-view .product-info-wrapper::after,
.catalog-product-view .product-info-price::after {
    content: '';
    display: table;
    clear:   both;
}

/* Title */
.catalog-product-view .page-title span {
    font-family: var(--font-serif) !important;
    font-size:   clamp(1.5rem, 3vw, 2.25rem) !important;
    font-weight: 400 !important;
    color:       var(--brown) !important;
    line-height: 1.2 !important;
}

/* Price */
.catalog-product-view .product-info-price .price-box {
    padding:       var(--sp-5) 0 !important;
    border-top:    1px solid var(--cream-deeper) !important;
    border-bottom: 1px solid var(--cream-deeper) !important;
    margin:        var(--sp-5) 0 !important;
}
.catalog-product-view .product-info-price .price {
    font-family:    var(--font-sans) !important;
    font-size:      1.375rem !important;
    letter-spacing: 0.04em !important;
    color:          var(--brown) !important;
    font-weight:    500 !important;
}

/* Description */
.catalog-product-view .product.attribute.description {
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-md) !important;
    color:       var(--text-muted) !important;
    line-height: 1.8 !important;
    margin-top:  var(--sp-6) !important;
}
.catalog-product-view .product.attribute.description .value p {
    margin-bottom: 1em !important;
}

/* Qty + Add to Cart row — explicit flex so layout holds if Luma styles are overridden */
.catalog-product-view .box-tocart {
    display:     flex !important;
    align-items: flex-end !important;
    gap:         var(--sp-4) !important;
    flex-wrap:   wrap !important;
    margin-top:  var(--sp-5) !important;
}
.catalog-product-view .box-tocart .field.qty {
    flex-shrink: 0 !important;
}
.catalog-product-view .box-tocart .actions {
    flex: 1 !important;
}
.catalog-product-view .box-tocart .action.tocart {
    width:      100% !important;
    text-align: center !important;
}

/* Qty */
.catalog-product-view .box-tocart .qty {
    border:        1px solid var(--cream-deeper) !important;
    border-radius: 0 !important;
    font-family:   var(--font-sans) !important;
    width:         56px !important;
    text-align:    center !important;
    padding:       11px 8px !important;
}

/* Tabs */
.product.info.detailed .data.item.title a {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
    border:         none !important;
    border-bottom:  2px solid transparent !important;
    padding:        14px 0 !important;
    margin-right:   var(--sp-6) !important;
    background:     transparent !important;
    transition:     color 0.2s, border-color 0.2s !important;
    display:        inline-block !important;
}
.product.info.detailed .data.item.title.active a,
.product.info.detailed .data.item.title a:hover {
    color:               var(--brown) !important;
    border-bottom-color: var(--gold) !important;
}
.product.info.detailed .data.item.content {
    border:      none !important;
    border-top:  1px solid var(--cream-deeper) !important;
    padding:     var(--sp-6) 0 !important;
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-md) !important;
    color:       var(--text-muted) !important;
    line-height: 1.8 !important;
    background:  transparent !important;
}

/* Attributes table */
.product.info.detailed .additional-attributes {
    width:           100% !important;
    border-collapse: collapse !important;
}
.product.info.detailed .additional-attributes th {
    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;
    font-weight:    400 !important;
    width:          38% !important;
    padding:        12px var(--sp-5) 12px 0 !important;
    border-bottom:  1px solid var(--cream-dark) !important;
    vertical-align: top !important;
    background:     transparent !important;
}
.product.info.detailed .additional-attributes td {
    font-family:   var(--font-sans) !important;
    font-size:     var(--ui-base) !important;
    color:         var(--brown) !important;
    padding:       12px 0 !important;
    border-bottom: 1px solid var(--cream-dark) !important;
    background:    transparent !important;
}

/* Related / Upsell */
.block.related .block-title strong,
.block.upsell  .block-title strong {
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-lg) !important;
    font-weight: 400 !important;
    color:       var(--brown) !important;
}


/* ─────────────────────────────────────────────────────────────
   CART PAGE
───────────────────────────────────────────────────────────── */
.checkout-cart-index .page-main {
    max-width:  var(--max-w) !important;
    margin:     0 auto !important;
    padding:    var(--sp-6) var(--gutter) 64px !important;
    float:      none !important;
    width:      100% !important;
    box-sizing: border-box !important;
    clear:      both;
}
.checkout-cart-index .page-title span {
    font-family:    var(--font-serif) !important;
    font-size:      var(--ui-2xl) !important;
    font-weight:    400 !important;
    color:          var(--brown) !important;
    display:        block !important;
    padding-bottom: var(--sp-5) !important;
    border-bottom:  1px solid var(--cream-deeper) !important;
    margin-bottom:  var(--sp-6) !important;
}

/* Cart item cell — thumbnail left, details right at ALL widths.
   The image-over-text bug occurs whenever the table column is
   narrow enough that Luma's float causes overlap.
   This flex override must NOT be inside a media query.          */
.cart.items .col.item {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    flex-start !important;
    gap:            16px !important;
}
.cart.items .col.item .product-item-photo {
    flex-shrink: 0 !important;
    width:       88px !important;
    float:       none !important;
}
.cart.items .col.item .product-item-photo img {
    width:      88px !important;
    height:     88px !important;
    object-fit: cover !important;
    display:    block !important;
    position:   static !important;
}
.cart.items .col.item .product-item-details {
    flex:      1 !important;
    min-width: 0 !important;
    float:     none !important;
    margin:    0 !important;
    padding:   0 !important;
}


.cart.items thead th {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
    font-weight:    400 !important;
    border-bottom:  1px solid var(--cream-deeper) !important;
    padding-bottom: var(--sp-3) !important;
    background:     transparent !important;
}
.cart.items .cart.item { border-bottom: 1px solid var(--cream-dark) !important; }
.cart.items .cart.item td {
    background:     transparent !important;
    vertical-align: middle !important;
    padding:        var(--sp-6) var(--sp-4) var(--sp-6) 0 !important;
}
.cart.items .product-item-name a,
.cart.items .product-item-name a:visited {
    font-family:     var(--font-serif) !important;
    font-size:       var(--ui-md) !important;
    color:           var(--brown) !important;
    text-decoration: none !important;
    transition:      color 0.2s !important;
}
.cart.items .product-item-name a:hover { color: var(--gold) !important; }
.cart.items .col.price .price,
.cart.items .col.subtotal .price {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-sm) !important;
    color:          var(--brown) !important;
    font-weight:    500 !important;
}
.cart.items .col.qty .input-text {
    width:      52px !important;
    text-align: center !important;
    padding:    8px !important;
}
.cart.items .action.action-delete {
    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;
    background:     none !important;
    border:         none !important;
    cursor:         pointer !important;
    transition:     color 0.2s !important;
}
.cart.items .action.action-delete:hover { color: var(--red) !important; }

/* Cart summary card */
.cart-summary {
    background: var(--card-bg) !important;
    border:     1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    padding:    0 !important;
    overflow:   hidden !important;
}
.cart-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-6) !important;
    margin:        0 !important;
    display:       block !important;
}
.cart-summary .table-wrapper,
.cart-summary .block,
.cart-summary .fieldset { padding: 0 var(--sp-6) !important; }
.cart-summary .totals th,
.cart-summary .totals td {
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    color:       var(--text-muted) !important;
    padding:     7px 0 !important;
    border:      none !important;
    background:  transparent !important;
}
.cart-summary .totals.grand th,
.cart-summary .totals.grand td {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-sm) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color:          var(--brown) !important;
    font-weight:    500 !important;
    border-top:     1px solid var(--cream-deeper) !important;
    padding-top:    var(--sp-4) !important;
    padding-bottom: var(--sp-4) !important;
}
.cart-summary .action.checkout {
    width:      100% !important;
    text-align: center !important;
    margin:     var(--sp-5) 0 !important;
}
.cart-discount .block-title > span,
.discount .block-title > span {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color:          var(--gold) !important;
}
.cart-container .action.continue {
    font-family:     var(--font-sans) !important;
    font-size:       var(--ui-xs) !important;
    letter-spacing:  0.16em !important;
    text-transform:  uppercase !important;
    color:           var(--text-muted) !important;
    text-decoration: none !important;
    border-bottom:   1px solid var(--cream-deeper) !important;
    padding-bottom:  2px !important;
    transition:      color 0.2s, border-color 0.2s !important;
}
.cart-container .action.continue:hover {
    color:        var(--gold) !important;
    border-color: var(--gold) !important;
}


/* ─────────────────────────────────────────────────────────────
   CHECKOUT
───────────────────────────────────────────────────────────── */
.checkout-index-index,
.checkout-index-index .page-wrapper { background: var(--cream) !important; }

.opc-wrapper .step-title {
    font-family:    var(--font-serif) !important;
    font-size:      var(--ui-lg) !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;
}
.opc-progress-bar-item > span {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
}
.opc-progress-bar-item._active > span   { color: var(--gold) !important; }
.opc-progress-bar-item._complete > span { color: var(--brown) !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;
    border-bottom:  1px solid var(--cream-deeper) !important;
    padding-bottom: var(--sp-3) !important;
    margin-bottom:  var(--sp-4) !important;
}
.opc-block-summary .product-item-name {
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-base) !important;
    color:       var(--brown) !important;
}
.opc-block-summary .price {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-sm) !important;
    color:          var(--brown) !important;
    font-weight:    500 !important;
}


/* ─────────────────────────────────────────────────────────────
   DATA TABLES
───────────────────────────────────────────────────────────── */
.table-wrapper {
    display:    block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width:      100% !important;
    max-width:  100% !important;
}

.data.table {
    width:           100% !important;
    min-width:       0 !important;
    border-collapse: collapse !important;
    table-layout:    auto !important;
}

/* Force correct table display — scoped AWAY from cart items table
   to prevent overriding the flex layout on .col.item              */
.data.table:not(.cart.items) > tbody > tr > td,
.data.table:not(.cart.items) > tbody > tr > th,
.data.table:not(.cart.items) > thead > tr > th,
.data.table:not(.cart.items) > tfoot > tr > td { display: table-cell !important; }
.data.table:not(.cart.items) > tbody > tr      { display: table-row !important; }
.data.table:not(.cart.items) > thead            { display: table-header-group !important; }
.data.table:not(.cart.items) > tbody            { display: table-row-group !important; }
.data.table thead th                            { white-space: nowrap !important; }

.data.table td[data-th]::before { display: none !important; }

@media (max-width: 768px) {
    .table-wrapper {
        overflow-x:  scroll !important;
        width:       calc(100vw - 38px) !important;
        max-width:   calc(100vw - 38px) !important;
    }
    .data.table {
        width:     auto !important;
        min-width: 500px !important;
    }
}

/* Thead */
.data.table thead {
    background: var(--brown) !important;
}
.data.table thead 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;
    font-weight:    500 !important;
    padding:        14px 20px !important;
    border:         none !important;
    white-space:    nowrap !important;
    background:     transparent !important;
}
.data.table thead th:first-child {
    border-left:  3px solid var(--gold) !important;
    padding-left: 17px !important;
}

/* Tbody */
.data.table tbody td {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-sm) !important;
    color:          var(--text-muted) !important;
    padding:        16px 20px !important;
    border-bottom:  1px solid var(--cream-dark) !important;
    vertical-align: middle !important;
    background:     transparent !important;
}
.data.table tbody tr:last-child td { border-bottom: none !important; }
.data.table tbody tr:nth-child(even) td {
    background: rgba(232,223,201,0.25) !important;
}
.data.table tbody tr:hover td {
    background: var(--cream-dark) !important;
}

/* Table actions */
.data.table .action {
    font-family:     var(--font-sans) !important;
    font-size:       var(--ui-xs) !important;
    letter-spacing:  0.14em !important;
    text-transform:  uppercase !important;
    color:           var(--gold) !important;
    text-decoration: none !important;
    border-bottom:   1px solid var(--gold) !important;
    padding-bottom:  1px !important;
    white-space:     nowrap !important;
    transition:      color 0.2s, border-color 0.2s !important;
}
.data.table .action:hover {
    color:        var(--brown) !important;
    border-color: var(--brown) !important;
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .products-grid .product-items { grid-template-columns: repeat(2, 1fr) !important; }
    .catalog-category-view .page-main,
    .catalogsearch-result-index .page-main,
    .catalog-product-view .page-main,
    .checkout-cart-index .page-main { padding-left: 32px !important; padding-right: 32px !important; }
}

@media (max-width: 768px) {
    /* Page containers */
    .catalog-category-view .page-main,
    .catalogsearch-result-index .page-main {
        padding:    16px 16px 48px !important;
        overflow-x: hidden !important;
    }
    .catalog-product-view .page-main,
    .checkout-cart-index .page-main {
        padding:    16px 16px 48px !important;
        overflow-x: hidden !important;
    }

    /* Sidebar — hide on mobile */
    .catalog-category-view .sidebar-main,
    .catalog-category-view .sidebar-additional,
    .catalogsearch-result-index .sidebar-main,
    .catalogsearch-result-index .sidebar-additional {
        display: none !important;
    }

    /* Main column full width */
    .catalog-category-view .column.main,
    .catalogsearch-result-index .column.main {
        width: 100% !important;
        float: none !important;
    }

    /* Mobile toolbar — hide top toolbar's pagination/limiter clutter,
       but keep the SORTER visible — users on mobile still need to sort.
       We show a minimal bar: item count left, sort right.             */
    .catalog-category-view .toolbar-products,
    .catalogsearch-result-index .toolbar-products {
        display:         flex !important;
        align-items:     center !important;
        justify-content: space-between !important;
        padding:         10px 0 !important;
        border-bottom:   1px solid var(--cream-deeper) !important;
        margin-bottom:   14px !important;
        overflow:        hidden !important;
    }
    /* Show bottom toolbar for pagination only */
    .catalog-category-view .toolbar-products + .toolbar-products,
    .catalogsearch-result-index .toolbar-products + .toolbar-products {
        display:       block !important;
        margin-top:    16px !important;
        border-bottom: none !important;
        border-top:    1px solid var(--cream-deeper) !important;
        padding-top:   14px !important;
    }
    /* Item count */
    .catalog-category-view .toolbar-amount,
    .catalogsearch-result-index .toolbar-amount {
        display:        block !important;
        font-family:    var(--font-sans) !important;
        font-size:      11px !important;
        color:          var(--text-muted) !important;
        letter-spacing: 0.1em !important;
        padding:        0 !important;
        float:          none !important;
    }
    /* Sort dropdown — keep it, make it compact */
    .catalog-category-view .toolbar-sorter,
    .catalogsearch-result-index .toolbar-sorter {
        display:     flex !important;
        align-items: center !important;
        gap:         6px !important;
        float:       none !important;
    }
    .catalog-category-view .toolbar-sorter select,
    .catalogsearch-result-index .toolbar-sorter select {
        font-size:  11px !important;
        padding:    6px 28px 6px 8px !important;
        min-width:  0 !important;
        max-width:  140px !important;
        background-color: var(--cream-dark) !important;
    }
    .catalog-category-view .sorter-label,
    .catalogsearch-result-index .sorter-label {
        font-size: 10px !important;
    }
    /* Hide the sorter direction arrow (asc/desc) to save space */
    .catalog-category-view .sorter-action,
    .catalogsearch-result-index .sorter-action {
        display: none !important;
    }
    /* Hide limiter (per-page) from top toolbar on mobile */
    .catalog-category-view .toolbar-products:first-of-type .limiter,
    .catalogsearch-result-index .toolbar-products:first-of-type .limiter {
        display: none !important;
    }

    /* Product grid — 2 col on mobile */
    .products-grid .product-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap:     12px !important;
        padding: 0 !important;
        margin:  0 !important;
    }
    /* Every card fills its cell — critical for the image ratio trick */
    .products-grid .product-item,
    .products-grid .product-item-info {
        width:     100% !important;
        min-width: 0 !important;
    }
    /* Tighten card internals for narrow cells */
    .products-grid .product-item-details {
        padding: 10px 10px 6px !important;
    }
    .products-grid .product-item-actions {
        padding: 0 10px 10px !important;
    }
    .products-grid .product-item-name a {
        font-size:         13px !important;
        -webkit-line-clamp: 2 !important;
    }
    .products-grid .price-box .price {
        font-size: 12px !important;
    }
    .products-grid .product-item-actions .action.tocart {
        padding:        9px 8px !important;
        font-size:      10px !important;
        letter-spacing: 0.12em !important;
    }
    /* No lift/hover effects on touch — they fire on tap and look broken */
    .products-grid .product-item-info:hover {
        transform:    none !important;
        box-shadow:   0 2px 8px rgba(58,44,27,0.07) !important;
        border-color: var(--cream-deeper) !important;
    }
    .products-grid .product-item-info:hover img {
        transform: none !important;
    }

    /* PDP — stack columns vertically on mobile */
    .catalog-product-view .product.media,
    .catalog-product-view .product-info-main {
        float:      none !important;
        width:      100% !important;
        padding:    0 !important;
        box-sizing: border-box !important;
    }
    .catalog-product-view .product-info-main {
        padding-top: 24px !important;
    }

    /* Cart table — let it scroll inside page */
    .cart.table-wrapper {
        width:      100% !important;
        max-width:  100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .form-cart .cart.items {
        min-width: 520px !important;
    }
    /* On mobile, shrink the thumbnail to save space */
    .cart.items .col.item .product-item-photo { width: 64px !important; }
    .cart.items .col.item .product-item-photo img { width: 64px !important; height: 64px !important; }
    .cart.items .col.item { gap: 12px !important; }

    /* Cart summary — prevent totals row being clipped */
    .cart-container .cart-summary {
        width:      100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .cart-summary .totals th,
    .cart-summary .totals td {
        padding-right: 16px !important;
        white-space:   nowrap !important;
    }
    .cart-summary .table-wrapper,
    .cart-summary .block,
    .cart-summary .fieldset {
        padding-left:  16px !important;
        padding-right: 16px !important;
    }
    .cart-summary > .title { padding: 16px !important; }

    /* Seller pages */
    .marketplace-seller-view .page-main,
    .marketplace-index-productedit .page-main,
    .marketplace-index-productcreate .page-main {
        overflow-x:    hidden !important;
        padding-left:  16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 400px) {
    .products-grid .product-items {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .products-grid .product-item-details { padding: 12px 14px 8px !important; }
    .products-grid .product-item-actions { padding: 0 14px 12px !important; }
    .products-grid .product-item-name a  { font-size: 14px !important; }
    .products-grid .product-item-actions .action.tocart {
        font-size:      11px !important;
        letter-spacing: 0.16em !important;
        padding:        11px 12px !important;
    }
}