/* Instolla Commerce Fashion Template cart and wishlist */

.commerce-main{overflow:clip;background:var(--background)}
.commerce-hero{padding:clamp(62px,8vw,112px) 0 clamp(38px,5vw,68px);background:radial-gradient(circle at 13% 14%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),var(--background)}
html[dir="rtl"] .commerce-hero{background:radial-gradient(circle at 87% 14%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),var(--background)}
.commerce-hero__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:end;gap:clamp(28px,7vw,105px)}
.commerce-hero__inner>p{grid-column:1;margin:0 0 12px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.commerce-hero h1{grid-column:1;margin:0;font-size:clamp(50px,7.5vw,110px);font-weight:950;letter-spacing:-.065em;line-height:.92}
html[lang="ar"] .commerce-hero h1{letter-spacing:0;line-height:1.08}
.commerce-hero__inner>span{grid-column:2;grid-row:1/span 2;color:var(--muted);font-size:clamp(15px,1.3vw,19px);line-height:1.9}
.commerce-section{padding-bottom:clamp(90px,10vw,150px)}
.commerce-message{margin-bottom:22px;padding:15px 18px;border:1px solid transparent;border-radius:14px;font-size:13px;font-weight:750}
.commerce-message--success{color:#126943;background:#ebfbf2;border-color:#bdebd1}
.commerce-message--error{color:#a42323;background:#fff0f0;border-color:#f3c0c0}
html[data-theme="dark"] .commerce-message--success{color:#83e7b7;background:rgba(22,131,95,.12);border-color:rgba(83,205,145,.28)}
html[data-theme="dark"] .commerce-message--error{color:#ff999c;background:rgba(239,52,56,.12);border-color:rgba(255,90,94,.28)}
.commerce-empty{display:grid;min-height:500px;place-items:center;align-content:center;padding:58px 24px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:28px}
.commerce-empty>span{display:grid;width:94px;height:94px;place-items:center;color:var(--accent);background:var(--accent-soft);border-radius:50%}
.commerce-empty svg{width:48px;height:48px}
.commerce-empty h2{margin:24px 0 8px;font-size:clamp(28px,4vw,46px)}
.commerce-empty p{max-width:520px;margin:0 0 25px;color:var(--muted)}

.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);align-items:start;gap:clamp(26px,4vw,56px)}
.cart-items{display:grid;gap:18px}
.cart-item{position:relative;display:grid;grid-template-columns:128px minmax(170px,1fr) minmax(105px,auto) auto minmax(105px,auto);grid-template-areas:"image details price quantity total" "image details remove quantity total";align-items:center;gap:15px 20px;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:20px}
.cart-item.is-unavailable{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.cart-item__image{grid-area:image;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--surface-strong);border:1px solid var(--border);border-radius:13px;text-decoration:none}
.cart-item__image img{width:100%;height:100%;object-fit:cover}
.cart-item__image span{display:grid;height:100%;place-items:center;color:var(--muted);font-size:9px;font-weight:900}
.cart-item__details{grid-area:details;min-width:0}
.cart-item__details>p{margin:0 0 5px;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.cart-item__details h2{margin:0 0 12px;font-size:clamp(15px,1.3vw,19px);line-height:1.35}
.cart-item__details h2 a{text-decoration:none}.cart-item__details h2 a:hover{color:var(--accent)}
.cart-item__options{display:flex;flex-wrap:wrap;gap:8px 15px;color:var(--muted);font-size:10px}
.cart-item__options span{display:inline-flex;align-items:center;gap:5px}.cart-item__options strong{color:var(--text)}
.cart-item__options i{width:15px;height:15px;background:var(--item-color);border:2px solid var(--surface);border-radius:50%;box-shadow:0 0 0 1px var(--border)}
.cart-item__availability{margin-top:10px;color:#16835f;font-size:10px;font-weight:850}.cart-item.is-unavailable .cart-item__availability{color:var(--accent)}
.cart-item__price{grid-area:price;display:grid;gap:4px}
.cart-item__price small,.cart-item__line-total small{color:var(--muted);font-size:9px}
.cart-item__price strong,.cart-item__line-total strong{font-size:12px}
.cart-item__quantity{grid-area:quantity;display:grid;justify-items:center;gap:6px}
.cart-item__quantity>span{color:var(--muted);font-size:9px;font-weight:800}
.cart-item__quantity>div{display:grid;min-height:40px;grid-template-columns:32px 38px 32px;align-items:center;background:var(--surface-strong);border:1px solid var(--border);border-radius:999px}
.cart-item__quantity button{display:grid;height:100%;place-items:center;padding:0;color:var(--text);background:transparent;border:0;cursor:pointer}
.cart-item__quantity input{width:38px;padding:0;color:var(--text);background:transparent;border:0;outline:0;font-size:11px;font-weight:850;text-align:center;appearance:textfield}
.cart-item__update{padding:0;color:var(--accent);background:transparent;border:0;font-size:9px;font-weight:850;cursor:pointer}
.cart-item__line-total{grid-area:total;display:grid;gap:4px;text-align:end}
.cart-item__remove{grid-area:remove}
.cart-item__remove button{display:inline-flex;align-items:center;gap:6px;padding:0;color:var(--muted);background:transparent;border:0;font-size:9px;font-weight:750;cursor:pointer}
.cart-item__remove button:hover{color:var(--accent)}.cart-item__remove svg{width:15px;height:15px}
.cart-summary{position:sticky;top:calc(var(--header-height) + 24px);padding:25px;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-soft)}
.cart-summary h2{margin:0 0 20px;font-size:22px}.cart-summary dl{margin:0}
.cart-summary dl div{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:13px 0;border-bottom:1px solid var(--border)}
.cart-summary dt{color:var(--muted);font-size:11px}.cart-summary dd{margin:0;font-size:11px;font-weight:800;text-align:end}
.cart-summary__total{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}
.cart-summary__total span{font-size:13px;font-weight:850}.cart-summary__total strong{font-size:20px}
.cart-checkout,.cart-summary>.button--secondary{width:100%}.cart-checkout:disabled{opacity:.55;cursor:not-allowed;transform:none}
.cart-summary>p{margin:10px 0 14px;color:var(--muted);font-size:9px;line-height:1.7;text-align:center}

.wishlist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,4vw,50px) clamp(13px,2vw,28px)}
.wishlist-card{position:relative;min-width:0;padding-bottom:24px;border-bottom:2px solid var(--border)}
.wishlist-card::after{position:absolute;bottom:-2px;inset-inline-start:0;width:46px;height:2px;content:"";background:var(--accent)}
.wishlist-card__image{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--surface-strong);border:1px solid var(--border);border-radius:17px;text-decoration:none}
.wishlist-card__image img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.22,1,.36,1)}
.wishlist-card__image:hover img{transform:scale(1.03)}.wishlist-card__image>span{display:grid;height:100%;place-items:center;color:var(--muted);font-size:10px;font-weight:900}
.wishlist-card__image em{position:absolute;top:12px;inset-inline-start:12px;padding:5px 8px;border-radius:999px;font-size:8px;font-style:normal;font-weight:900;text-transform:uppercase}
.wishlist-card__image em.is-stock{color:#146c48;background:rgba(235,255,245,.9)}.wishlist-card__image em.is-out{color:#a42323;background:rgba(255,238,238,.92)}
.wishlist-card__body{padding-top:14px}.wishlist-card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase}
.wishlist-card h2{margin:7px 0 11px;overflow:hidden;font-size:16px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.wishlist-card h2 a{text-decoration:none}.wishlist-card h2 a:hover{color:var(--accent)}
.wishlist-card__price{display:flex;min-height:28px;align-items:center;gap:9px;margin-bottom:13px}.wishlist-card__price strong{font-size:14px}
.wishlist-card__price del{color:var(--accent);font-size:10px;font-weight:750;text-decoration-thickness:1.5px}
.wishlist-card__actions{display:grid;gap:8px}.wishlist-card__actions .button,.wishlist-card__actions form,.wishlist-card__actions form .button{width:100%}
.wishlist-card__actions .button{min-height:42px;padding:9px 12px;font-size:10px}

@media(max-width:1120px){
.cart-item{grid-template-columns:112px minmax(160px,1fr) auto minmax(105px,auto);grid-template-areas:"image details quantity total" "image price quantity total" "image remove quantity total"}
.wishlist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
.commerce-hero__inner{grid-template-columns:1fr;gap:20px}.commerce-hero__inner>p,.commerce-hero h1,.commerce-hero__inner>span{grid-column:1;grid-row:auto}
.cart-layout{grid-template-columns:1fr}.cart-summary{position:relative;top:auto}
}
@media(max-width:720px){
.cart-item{grid-template-columns:94px minmax(0,1fr) auto;grid-template-areas:"image details remove" "image price price" "quantity quantity total";gap:12px;padding:13px}
.cart-item__quantity{justify-items:start}.cart-item__line-total{align-self:end}
.wishlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 10px}
}
@media(max-width:480px){
.commerce-hero{padding:50px 0 34px}.commerce-hero h1{font-size:clamp(44px,14vw,66px)}
.cart-item{grid-template-columns:82px minmax(0,1fr);grid-template-areas:"image details" "price price" "quantity total" "remove remove"}
.cart-item__remove{padding-top:10px;border-top:1px solid var(--border)}
.wishlist-card h2{font-size:13px}.wishlist-card__actions .button{font-size:9px}
}


/* INSTOLLA_COMMERCE_UI_COMPAT_V1_2 */
.cart-item__update {
    display: inline-flex;
    min-width: 104px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 3px;
    padding: 7px 12px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid
        color-mix(
            in srgb,
            var(--accent) 42%,
            var(--border)
        );
    border-radius: 999px;
    box-shadow:
        0 7px 18px
        rgba(239, 52, 56, .10);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.cart-item__update svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.cart-item__update:hover,
.cart-item__update:focus-visible {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow:
        0 10px 24px
        rgba(239, 52, 56, .22);
    transform: translateY(-1px);
}

.cart-item__update:active {
    transform: translateY(0);
}

@media (max-width: 720px) {
    .cart-item__update {
        min-width: 110px;
        min-height: 36px;
    }
}