/**
 * The Provenance — prov-account.css
 * Account Dashboard · Orders · Addresses · Wishlist · Login · Register
 *
 * Load order: 3 of 4
 * Requires: prov-base.css (tokens)
 */


/* ─────────────────────────────────────────────────────────────
   PAGE WRAPPER
───────────────────────────────────────────────────────────── */
.account .page-main {
    max-width:  var(--max-w) !important;
    margin:     0 auto !important;
    padding:    0 var(--gutter) 64px !important;
    box-sizing: border-box !important;
}

.account .page-title-wrapper {
    background:    var(--cream-dark) !important;
    border-bottom: 1px solid var(--cream-deeper) !important;
    padding:       var(--sp-7) var(--gutter) var(--sp-6) !important;
    margin:        0 calc(-1 * var(--gutter)) var(--sp-7) !important;
}
.account .page-title-wrapper .page-title {
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-2xl) !important;
    font-weight: 400 !important;
    color:       var(--brown) !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    line-height: 1.2 !important;
}


/* ─────────────────────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────────────────────── */
.account .block-collapsible-nav {
    background: var(--white) !important;
    border:     1px solid var(--cream-deeper) !important;
    box-shadow: 0 4px 24px rgba(58,44,27,0.08) !important;
    border-top: 3px solid var(--gold) !important;
    position:   sticky !important;
    top:        calc(var(--header-h) + var(--nav-h) + 16px) !important;
}
.account .block-collapsible-nav .title {
    font-family:    var(--font-sans) !important;
    font-size:      var(--ui-xs) !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color:          var(--gold) !important;
    background:     var(--cream-dark) !important;
    border:         none !important;
    border-bottom:  1px solid var(--cream-deeper) !important;
    padding:        var(--sp-4) var(--sp-5) var(--sp-3) !important;
    margin:         0 !important;
    display:        block !important;
}
.account .block-collapsible-nav .content {
    background: var(--white) !important;
    padding:    var(--sp-2) 0 var(--sp-3) !important;
}
.account .block-collapsible-nav .delimiter {
    border-top: 1px solid var(--cream-dark) !important;
    margin:     2px 0 !important;
}
.account .sidebar-main .block-collapsible-nav + .block-collapsible-nav {
    border-top: none !important;
    margin-top: -1px !important;
}
.account .block-collapsible-nav .item a,
.account .block-collapsible-nav .item a:visited {
    font-family:     var(--font-sans) !important;
    font-size:       13px !important;
    letter-spacing:  0.04em !important;
    color:           var(--brown-mid) !important;
    text-decoration: none !important;
    padding:         10px 20px !important;
    display:         block !important;
    border-left:     3px solid transparent !important;
    transition:      color 0.25s, border-color 0.25s, background 0.25s !important;
    line-height:     1.4 !important;
}
.account .block-collapsible-nav .item a:hover {
    color:             var(--brown) !important;
    border-left-color: var(--gold) !important;
    background:        var(--cream) !important;
}
.account .block-collapsible-nav .item.current a,
.account .block-collapsible-nav .item.current strong {
    font-family:     var(--font-sans) !important;
    font-size:       13px !important;
    letter-spacing:  0.04em !important;
    color:           var(--brown) !important;
    font-weight:     500 !important;
    border-left:     3px solid var(--gold) !important;
    background:      var(--cream-dark) !important;
    padding:         10px 20px !important;
    display:         block !important;
    line-height:     1.4 !important;
    text-decoration: none !important;
}

@media (max-width: 767px) {
    .account .block-collapsible-nav {
        position:      static !important;
        border-top:    3px solid var(--gold) !important;
        margin-bottom: 20px !important;
    }
    .account .block-collapsible-nav .title {
        cursor:          pointer !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: space-between !important;
        padding:         16px 20px !important;
    }
    .account .block-collapsible-nav .title::after {
        content:     '+';
        font-family: var(--font-serif);
        font-size:   1.4rem;
        color:       var(--gold);
        line-height: 1;
        flex-shrink: 0;
    }
    .account .block-collapsible-nav.active .title::after { content: '−'; }
    .account .block-collapsible-nav,
    .account .block-collapsible-nav .content { background: var(--white) !important; }
    .account .block-collapsible-nav .item a,
    .account .block-collapsible-nav .item a:visited { color: var(--brown-mid) !important; }
    .account .block-collapsible-nav .item.current a,
    .account .block-collapsible-nav .item.current strong { color: var(--brown) !important; }
}


/* ─────────────────────────────────────────────────────────────
   CONTENT BLOCKS AS CARDS
   overflow:visible on the outer .block — overflow:hidden would
   clip date pickers, address autocomplete dropdowns, and any
   overlay spawned from inside a form field in an account block.
   We clip only specific inner elements (image containers) that
   actually need it.
───────────────────────────────────────────────────────────── */
.account .column.main .block {
    background:    var(--card-bg) !important;
    border:        1px solid var(--card-border) !important;
    box-shadow:    var(--card-shadow) !important;
    margin-bottom: var(--sp-5) !important;
    padding:       0 !important;
    overflow:      visible !important;
}
.account .column.main .block .block-title {
    background:      var(--cream-dark) !important;
    border-bottom:   1px solid var(--cream-deeper) !important;
    border-left:     3px solid var(--gold) !important;
    padding:         14px 24px !important;
    margin:          0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    flex-wrap:       wrap !important;
    gap:             8px !important;
}
.account .column.main .block .block-title strong {
    font-family:    var(--font-sans) !important;
    font-size:      16px !important;
    font-weight:    500 !important;
    color:          var(--brown) !important;
    letter-spacing: 0.02em !important;
}
.account .column.main .block .block-title a,
.account .column.main .block .block-title .action {
    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;
    text-decoration: none !important;
    background:      transparent !important;
    border:          none !important;
    border-bottom:   1px solid var(--gold) !important;
    padding:         0 0 2px !important;
    transition:      color 0.25s, border-color 0.25s !important;
    cursor:          pointer !important;
}
.account .column.main .block .block-title a:hover,
.account .column.main .block .block-title .action:hover {
    color:        var(--brown) !important;
    border-color: var(--brown) !important;
}
.account .column.main .block .block-content {
    padding:     var(--sp-6) !important;
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    color:       var(--text-muted) !important;
    line-height: 1.75 !important;
    background:  transparent !important;
}
.account .block-dashboard-info  .block-content::before,
.account .block-dashboard-addresses .block-content::before {
    display: none !important;
}
.account .block-dashboard-info  .block-content,
.account .block-dashboard-addresses .block-content {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   var(--sp-4) !important;
    padding:               var(--sp-4) !important;
    background:            var(--cream-dark) !important;
}
.account .box {
    background: var(--white) !important;
    border:     1px solid var(--cream-deeper) !important;
    padding:    var(--sp-5) !important;
}
.account .box-title {
    display:        block !important;
    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;
    margin-bottom:  var(--sp-3) !important;
    padding-bottom: var(--sp-3) !important;
    border-bottom:  1px solid var(--cream-deeper) !important;
}
.account .box-content {
    font-family: var(--font-sans) !important;
    font-size:   var(--ui-sm) !important;
    color:       var(--text-body) !important;
    line-height: 1.75 !important;
}
.account .box-actions {
    margin-top:  var(--sp-3) !important;
    padding-top: var(--sp-3) !important;
    border-top:  1px solid var(--cream-deeper) !important;
    display:     flex !important;
    gap:         var(--sp-4) !important;
    flex-wrap:   wrap !important;
}
.account .box-actions .action,
.account .box-actions a {
    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;
    text-decoration: none !important;
    background:      none !important;
    border:          none !important;
    padding:         0 !important;
    cursor:          pointer !important;
    transition:      color 0.25s !important;
}
.account .box-actions .action:hover,
.account .box-actions a:hover { color: var(--gold) !important; }


/* ─────────────────────────────────────────────────────────────
   PURPLETREE SELLER MENU
───────────────────────────────────────────────────────────── */
.block-collapsible-nav.pts-main {
    background:    var(--white) !important;
    border:        1px solid var(--cream-deeper) !important;
    border-top:    3px solid var(--gold) !important;
    box-shadow:    0 2px 8px rgba(58,44,27,0.06) !important;
    margin-bottom: 4px !important;
}
.block-collapsible-nav + .block-collapsible-nav,
.sidebar .block-collapsible-nav ~ .block-collapsible-nav {
    border-top: none !important;
    margin-top: -1px !important;
    box-shadow: none !important;
}
.block-collapsible-nav.pts-main .title {
    font-family:     var(--font-sans) !important;
    font-size:       var(--ui-xs) !important;
    letter-spacing:  0.22em !important;
    text-transform:  uppercase !important;
    color:           var(--gold) !important;
    background:      var(--cream-dark) !important;
    border:          none !important;
    border-bottom:   1px solid var(--cream-deeper) !important;
    padding:         14px 20px 12px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    cursor:          pointer !important;
}
.block-collapsible-nav.pts-main .item a,
.block-collapsible-nav.pts-main .item a:visited {
    font-family:     var(--font-sans) !important;
    font-size:       13px !important;
    color:           var(--brown-mid) !important;
    padding:         10px 20px !important;
    display:         block !important;
    border-left:     3px solid transparent !important;
    transition:      color 0.25s, border-color 0.25s, background 0.25s !important;
    text-decoration: none !important;
}
.block-collapsible-nav.pts-main .item a:hover {
    color:             var(--brown) !important;
    border-left-color: var(--gold) !important;
    background:        var(--cream) !important;
}
.block-collapsible-nav.pts-main .item.current a,
.block-collapsible-nav.pts-main .item.current strong {
    font-family: var(--font-sans) !important;
    font-size:   13px !important;
    color:       var(--brown) !important;
    font-weight: 500 !important;
    border-left: 3px solid var(--gold) !important;
    background:  var(--cream-dark) !important;
    padding:     10px 20px !important;
    display:     block !important;
}

@media (max-width: 768px) {
    .account .page-main,
    .account .column.main { overflow-x: hidden !important; }
}


/* ─────────────────────────────────────────────────────────────
   ORDERS / DATA TABLES
───────────────────────────────────────────────────────────── */
.account .column.main .block .table-wrapper {
    padding:    0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.account .data.table .action {
    color:        var(--gold) !important;
    border-color: var(--gold) !important;
}
.account .data.table .action:hover {
    color:        var(--brown) !important;
    border-color: var(--brown) !important;
}
.account .data.table .order-status {
    font-family:    var(--font-sans) !important;
    font-size:      9px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    background:     rgba(184,150,90,0.12) !important;
    border:         1px solid var(--gold) !important;
    color:          var(--brown-mid) !important;
    padding:        3px 10px !important;
    display:        inline-block !important;
    white-space:    nowrap !important;
}


/* ─────────────────────────────────────────────────────────────
   WISHLIST PAGE

   Magento wishlist DOM:
     ol.product-items
       li.product-item
         .product-item-info         ← photo + details
           .product-item-photo
           .product-item-details
         .product-item-actions      ← SIBLING to .product-item-info

   Layout: Horizontal card. Image left (fixed 200×200px),
   content centre, actions right (fixed 160px column).

   Image fix: The product-image-wrapper uses padding-bottom:100%
   only when the parent has a width. For a fixed-height container
   we use position:absolute on the wrapper AND img to fill it.
   The container is position:relative with explicit width+height.
───────────────────────────────────────────────────────────── */
.wishlist-index-index .page-main {
    max-width:  var(--max-w) !important;
    margin:     0 auto !important;
    padding:    0 var(--gutter) 64px !important;
    box-sizing: border-box !important;
}
.wishlist-index-index .page-title span {
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-2xl) !important;
    font-weight: 400 !important;
    color:       var(--brown) !important;
}
.wishlist-index-index .toolbar {
    border-top:  1px solid var(--cream-deeper) !important;
    padding-top: var(--sp-4) !important;
    margin-top:  var(--sp-4) !important;
}

/* List — vertical stack of horizontal cards */
.wishlist-index-index .products-list .product-items,
.wishlist-index-index .products-grid .product-items,
.wishlist-index-index ol.product-items {
    display:        flex !important;
    flex-direction: column !important;
    gap:            16px !important;
    list-style:     none !important;
    margin:         0 !important;
    padding:        0 !important;
    width:          100% !important;
}

/* li = visual card
   overflow:visible so nothing clips the card border on hover.
   overflow:hidden on .product-item-photo handles image clipping. */
.wishlist-index-index .product-item {
    display:        flex !important;
    flex-direction: row !important;
    width:          100% !important;
    min-width:      0 !important;
    margin:         0 !important;
    background:     var(--white) !important;
    border:         1px solid var(--cream-deeper) !important;
    box-shadow:     0 1px 6px rgba(58,44,27,0.06) !important;
    overflow:       visible !important;
    position:       relative !important;
    transition:     box-shadow 0.3s, border-color 0.3s !important;
}
.wishlist-index-index .product-item:hover {
    box-shadow:   0 4px 20px rgba(58,44,27,0.10) !important;
    border-color: var(--gold) !important;
}

/* .product-item-info: fills the card between photo and actions */
.wishlist-index-index .product-item-info {
    display:    flex !important;
    flex:       1 !important;
    min-width:  0 !important;
    background: transparent !important;
    border:     none !important;
    box-shadow: none !important;
    overflow:   visible !important;
}
.wishlist-index-index .product-item-info:hover {
    box-shadow:   none !important;
    border-color: transparent !important;
    transform:    none !important;
}

/* Image column — fixed 200×200px, clips with overflow:hidden */
.wishlist-index-index .product-item-photo {
    flex-shrink:  0 !important;
    width:        200px !important;
    height:       200px !important;
    position:     relative !important;
    overflow:     hidden !important;
    background:   var(--cream) !important;
    display:      block !important;
    border-right: 1px solid var(--cream-deeper) !important;
}
/* The wrapper Magento injects — fill the photo container */
.wishlist-index-index .product-item-photo .product-image-container,
.wishlist-index-index .product-item-photo .product-image-wrapper {
    position:       absolute !important;
    inset:          0 !important;
    width:          100% !important;
    height:         100% !important;
    padding-bottom: 0 !important;
    display:        block !important;
    overflow:       hidden !important;
}
/* The actual img — fill its container absolutely */
.wishlist-index-index .product-item-photo img {
    position:   absolute !important;
    inset:      0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    transition: transform 0.5s ease !important;
}
.wishlist-index-index .product-item:hover .product-item-photo img {
    transform: scale(1.04) !important;
}

/* Details column — Garamond name as hero */
.wishlist-index-index .product-item-details {
    flex:           1 !important;
    min-width:      0 !important;
    padding:        24px !important;
    background:     var(--white) !important;
    display:        flex !important;
    flex-direction: column !important;
    border-top:     none !important;
}
.wishlist-index-index .product-item-name {
    margin-bottom: 8px !important;
}
.wishlist-index-index .product-item-name a {
    font-family:     var(--font-serif) !important;
    font-size:       22px !important;
    font-weight:     400 !important;
    color:           var(--brown) !important;
    text-decoration: none !important;
    line-height:     1.25 !important;
    transition:      color 0.2s !important;
    display:         block !important;
    word-break:      break-word !important;
}
.wishlist-index-index .product-item-name a:hover { color: var(--gold) !important; }

.wishlist-index-index .price-box { margin-bottom: 12px !important; }
.wishlist-index-index .price-box .price {
    font-family:    var(--font-sans) !important;
    font-size:      18px !important;
    font-weight:    500 !important;
    color:          var(--brown) !important;
    letter-spacing: 0.04em !important;
}

.wishlist-index-index .product-item-comment {
    font-family:   var(--font-sans) !important;
    font-size:     var(--ui-sm) !important;
    color:         var(--text-muted) !important;
    margin-top:    auto !important;
    resize:        vertical !important;
    width:         100% !important;
    max-width:     380px !important;
    box-sizing:    border-box !important;
    min-height:    52px !important;
}

/* Actions column — right strip */
.wishlist-index-index .product-item-actions {
    flex-shrink:     0 !important;
    width:           152px !important;
    padding:         20px 16px !important;
    background:      var(--cream-dark) !important;
    border-left:     1px solid var(--cream-deeper) !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             8px !important;
    align-items:     stretch !important;
    justify-content: flex-start !important;
}
.wishlist-index-index .action.tocart {
    width:          100% !important;
    flex:           none !important;
    text-align:     center !important;
    padding:        11px 6px !important;
    font-size:      10px !important;
    letter-spacing: 0.16em !important;
    display:        block !important;
}
.wishlist-index-index .btn-remove,
.wishlist-index-index .action.delete,
.wishlist-index-index .action.edit {
    width:           100% !important;
    height:          34px !important;
    background:      var(--white) !important;
    border:          1px solid var(--cream-deeper) !important;
    color:           var(--text-muted) !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    cursor:          pointer !important;
    transition:      background 0.2s, border-color 0.2s, color 0.2s !important;
    padding:         0 !important;
    border-radius:   0 !important;
    font-size:       12px !important;
    text-decoration: none !important;
    flex-shrink:     0 !important;
    box-sizing:      border-box !important;
}
.wishlist-index-index .btn-remove:hover,
.wishlist-index-index .action.delete:hover {
    background: #fbf0f0 !important; border-color: var(--red) !important; color: var(--red) !important;
}
.wishlist-index-index .action.edit:hover {
    background: var(--cream-deeper) !important; border-color: var(--gold) !important; color: var(--gold) !important;
}

/* Bottom toolbar (Update / Share / Add All) */
.wishlist-index-index .actions-toolbar {
    display:     flex !important;
    flex-wrap:   wrap !important;
    gap:         var(--sp-3) !important;
    margin-top:  var(--sp-5) !important;
    padding-top: var(--sp-5) !important;
    border-top:  1px solid var(--cream-deeper) !important;
}


/* ─────────────────────────────────────────────────────────────
   LOGIN / REGISTER / FORGOT PASSWORD

   The ::before pseudo-element Magento injects on .login-container
   (and on .column.main as a float clearfix) shifts the grid right.
   We must kill it explicitly, AND force .column.main off float.
───────────────────────────────────────────────────────────── */
.customer-account-login .page-main,
.customer-account-create .page-main,
.customer-account-forgotpassword .page-main,
.customer-account-createpassword .page-main {
    max-width:  860px !important;
    margin:     0 auto !important;
    padding:    var(--sp-8) var(--gutter) var(--sp-7) !important;
    float:      none !important;
    width:      100% !important;
    box-sizing: border-box !important;
    position:   static !important;
    left:       auto !important;
}
.customer-account-login .columns,
.customer-account-create .columns,
.customer-account-forgotpassword .columns,
.customer-account-createpassword .columns {
    display:  block !important;
    width:    100% !important;
    float:    none !important;
    overflow: hidden !important;
    padding:  0 !important;
    margin:   0 !important;
}
.customer-account-login .column.main,
.customer-account-create .column.main,
.customer-account-forgotpassword .column.main,
.customer-account-createpassword .column.main {
    float:      none !important;
    width:      100% !important;
    padding:    0 !important;
    margin:     0 !important;
    box-sizing: border-box !important;
}

/* Kill ::before clearfix on login container and its ancestors */
.customer-account-login .login-container::before,
.customer-account-login .column.main::before,
.customer-account-login .columns::before {
    display: none !important;
    content: none !important;
    float:   none !important;
    clear:   none !important;
    height:  0 !important;
    width:   0 !important;
}

.customer-account-login .login-container {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   var(--sp-5) !important;
    align-items:           start !important;
    width:                 100% !important;
}
.customer-account-login .block-customer-login,
.customer-account-login .block-new-customer {
    width:      100% !important;
    min-width:  0 !important;
    box-sizing: border-box !important;
    float:      none !important;
}
.customer-account-login .block-customer-login {
    background: var(--card-bg) !important;
    border:     1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    overflow:   hidden !important;
}
.customer-account-login .block-new-customer {
    background: var(--cream-dark) !important;
    border:     1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    overflow:   hidden !important;
}
.customer-account-login .block-title,
.customer-account-create .block-title,
.customer-account-forgotpassword .block-title {
    background:    var(--brown) !important;
    border-left:   3px solid var(--gold) !important;
    padding:       var(--sp-5) var(--sp-6) !important;
    margin:        0 !important;
    border-bottom: none !important;
    border-top:    none !important;
    border-right:  none !important;
}
.customer-account-login .block-title strong,
.customer-account-create .block-title strong,
.customer-account-forgotpassword .block-title strong {
    font-family: var(--font-serif) !important;
    font-size:   var(--ui-lg) !important;
    font-weight: 400 !important;
    color:       var(--cream) !important;
}
.customer-account-login .block-customer-login .block-content,
.customer-account-login .block-new-customer .block-content,
.customer-account-create .block-content,
.customer-account-forgotpassword .block-content {
    padding: var(--sp-6) !important;
}
.customer-account-login .block-new-customer .block-content p {
    font-family:   var(--font-sans) !important;
    font-size:     var(--ui-sm) !important;
    color:         var(--text-muted) !important;
    line-height:   1.75 !important;
    margin-bottom: 1.2em !important;
}
.customer-account-login .actions-toolbar,
.customer-account-create .actions-toolbar {
    display:     flex !important;
    align-items: center !important;
    gap:         var(--sp-5) !important;
    flex-wrap:   wrap !important;
    margin-top:  var(--sp-2) !important;
}
.customer-account-login .action.remind {
    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;
    text-decoration: none !important;
    border-bottom:   1px solid var(--cream-deeper) !important;
    padding-bottom:  2px !important;
    transition:      color 0.25s, border-color 0.25s !important;
}
.customer-account-login .action.remind:hover {
    color:        var(--gold) !important;
    border-color: var(--gold) !important;
}
.customer-account-create .form.create.account,
.customer-account-forgotpassword .form.password.forget,
.customer-account-createpassword .form.password.reset {
    background:  var(--card-bg) !important;
    border:      1px solid var(--card-border) !important;
    box-shadow:  var(--card-shadow) !important;
    padding:     var(--sp-6) !important;
    max-width:   560px !important;
    width:       100% !important;
    box-sizing:  border-box !important;
}


/* ─────────────────────────────────────────────────────────────
   ACCOUNT RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .account .page-main {
        padding-left:  32px !important;
        padding-right: 32px !important;
    }
    .account .page-title-wrapper {
        padding-left:  32px !important;
        padding-right: 32px !important;
        margin-left:   -32px !important;
        margin-right:  -32px !important;
    }
    .customer-account-login .page-main,
    .customer-account-create .page-main,
    .customer-account-forgotpassword .page-main {
        padding-left:  32px !important;
        padding-right: 32px !important;
    }
    /* Wishlist horizontal card — shrink image/action panel at tablet */
    .wishlist-index-index .product-item-photo {
        width:  160px !important;
        height: 160px !important;
    }
    .wishlist-index-index .product-item-actions {
        width:   130px !important;
        padding: 20px 14px !important;
    }
    .wishlist-index-index .product-item-name a { font-size: 19px !important; }
}

@media (max-width: 768px) {
    .account .page-main {
        padding-left:   20px !important;
        padding-right:  20px !important;
        padding-bottom: 48px !important;
        overflow-x:     hidden !important;
    }
    .account .page-title-wrapper {
        padding:       28px 20px 24px !important;
        margin-left:   -20px !important;
        margin-right:  -20px !important;
        margin-bottom: 24px !important;
    }
    .account .page-title-wrapper .page-title { font-size: 28px !important; }
    .account .block-dashboard-info  .block-content,
    .account .block-dashboard-addresses .block-content {
        grid-template-columns: 1fr !important;
    }
    .account .data.table th,
    .account .data.table td {
        padding-left:  16px !important;
        padding-right: 12px !important;
    }

    .customer-account-login .login-container {
        grid-template-columns: 1fr !important;
        gap:                   16px !important;
    }
    .customer-account-login .page-main,
    .customer-account-create .page-main,
    .customer-account-forgotpassword .page-main {
        padding: 32px 20px 48px !important;
    }

    /* Wishlist mobile — fix column.main float that collapses card width */
    .wishlist-index-index .column.main {
        float:      none !important;
        width:      100% !important;
        min-width:  0 !important;
        box-sizing: border-box !important;
    }
    .wishlist-index-index .page-main {
        padding:    16px 16px 48px !important;
        overflow-x: hidden !important;
    }
    /* Stack the card vertically on mobile */
    .wishlist-index-index .product-item {
        flex-direction: column !important;
    }
    .wishlist-index-index .product-item-info {
        flex-direction: column !important;
        width:          100% !important;
    }
    /* Full-width image using padding-bottom ratio (no aspect-ratio needed) */
    .wishlist-index-index .product-item-photo {
        width:        100% !important;
        height:       0 !important;
        padding-bottom: 66.666% !important; /* 3:2 ratio — 100/1.5 */
        border-right:  none !important;
        border-bottom: 1px solid var(--cream-deeper) !important;
        position:     relative !important;
        overflow:     hidden !important;
    }
    /* Wrappers and img fill the padded container */
    .wishlist-index-index .product-item-photo .product-image-container,
    .wishlist-index-index .product-item-photo .product-image-wrapper {
        position: absolute !important;
        inset:    0 !important;
        width:    100% !important;
        height:   100% !important;
        padding:  0 !important;
    }
    .wishlist-index-index .product-item-photo img {
        position:   absolute !important;
        inset:      0 !important;
        width:      100% !important;
        height:     100% !important;
        object-fit: cover !important;
    }
    /* Details */
    .wishlist-index-index .product-item-details {
        padding: 16px !important;
    }
    .wishlist-index-index .product-item-name a {
        font-size:   18px !important;
        line-height: 1.25 !important;
    }
    .wishlist-index-index .price-box .price { font-size: 16px !important; }
    .wishlist-index-index .product-item-comment { max-width: 100% !important; }
    /* Actions — horizontal strip at bottom */
    .wishlist-index-index .product-item-actions {
        width:          100% !important;
        flex-direction: row !important;
        flex-wrap:      wrap !important;
        border-left:    none !important;
        border-top:     1px solid var(--cream-deeper) !important;
        padding:        12px 16px !important;
        gap:            8px !important;
        align-items:    center !important;
        background:     var(--cream-dark) !important;
    }
    .wishlist-index-index .action.tocart {
        flex:      1 !important;
        width:     auto !important;
        min-width: 100px !important;
        padding:   11px 10px !important;
    }
    .wishlist-index-index .btn-remove,
    .wishlist-index-index .action.delete,
    .wishlist-index-index .action.edit {
        width:  36px !important;
        height: 36px !important;
        flex:   none !important;
    }
    /* No hover on touch */
    .wishlist-index-index .product-item:hover {
        box-shadow:   0 1px 6px rgba(58,44,27,0.06) !important;
        border-color: var(--cream-deeper) !important;
    }
    .wishlist-index-index .product-item:hover .product-item-photo img {
        transform: none !important;
    }
    /* Bottom toolbar stacks */
    .wishlist-index-index .actions-toolbar {
        flex-direction: column !important;
        gap:            var(--sp-2) !important;
    }
    .wishlist-index-index .actions-toolbar .action {
        width: 100% !important; text-align: center !important;
    }
}

@media (max-width: 400px) {
    /* Very small phones — compact the wishlist action row further */
    .wishlist-index-index .product-item-name a { font-size: 16px !important; }
    .wishlist-index-index .price-box .price    { font-size: 14px !important; }
    .wishlist-index-index .product-item-actions { padding: 10px 12px !important; }
    .wishlist-index-index .action.tocart {
        font-size:      10px !important;
        padding:        10px 8px !important;
        letter-spacing: 0.14em !important;
    }
}