/* ==========================================================
   NISSI: cart page
   Table (remove, photo, product, price, quantity, subtotal) + a tinted totals panel.
   Under 760px every row becomes a small card. Markup: woocommerce/cart/cart.php
   ========================================================== */
.cart-layout{grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,3.4vw,56px);padding-block:clamp(28px,3.4vw,48px) clamp(56px,8vw,104px)}

/* ---------- table ---------- */
.cart-table{width:100%;border-collapse:collapse}
.cart-table thead th{padding:0 0 .9rem;text-align:left;font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line-soft)}
.cart-table td{padding:18px 0;vertical-align:middle;border-bottom:1px solid var(--line-soft);font-size:1rem}
.cart-table .product-remove{width:40px;padding-right:4px}
.cart-table .product-thumbnail{width:90px;padding-right:14px}
.cart-table .product-price{width:104px;padding-right:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cart-table .product-quantity{width:132px}
.cart-table .product-subtotal{width:112px;text-align:right;white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
.cart-table thead .product-subtotal{text-align:right}

.cart-remove{display:grid;place-items:center;width:32px;height:32px;color:var(--muted);transition:color .2s,background-color .2s}
.cart-remove:hover{color:var(--accent);background:var(--bg-deep)}
.cart-remove:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cart-img{display:block;width:76px;aspect-ratio:1;background:var(--case);overflow:hidden}
.cart-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.cart-name{display:block;font-size:1.125rem;font-weight:400;line-height:1.3}
a.cart-name:hover{color:var(--accent-hi)}
.cart-type{display:block;margin-top:2px;font-size:.875rem;color:var(--muted)}
.cart-table dl.variation{margin-top:4px;font-size:.8125rem;color:var(--muted)}

/* ---------- discount code ---------- */
.cart-actions{justify-content:flex-start;margin-top:1.2rem}
.cart-actions .coupon .button{background:#fff;color:var(--accent);letter-spacing:.14em}
.cart-actions .coupon .button:hover{background:var(--accent);color:#fff}

/* ---------- totals panel ---------- */
.cart-collaterals{background:#f4f2ec;padding:clamp(20px,2.2vw,28px)}
.cart_totals h2{margin-bottom:1rem;font-family:var(--font);font-size:1.25rem;font-weight:500;letter-spacing:0}

/* ---------- phones and small tablets: a row is a card ---------- */
@media (max-width:760px){
  .cart-layout{grid-template-columns:minmax(0,1fr)}
  .cart-table,.cart-table tbody{display:block}
  .cart-table thead{display:none}
  .cart-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"img name rm" "img price price" "img qty sub";gap:4px 14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-soft)}
  .cart-table td{padding:0;border:0;width:auto}
  .cart-table .product-thumbnail{grid-area:img;align-self:start;padding:0}
  .cart-img{width:72px}
  .cart-table .product-name{grid-area:name}
  .cart-table .product-remove{grid-area:rm;align-self:start;justify-self:end;margin:-6px -6px 0 0}
  .cart-table .product-price{grid-area:price;width:auto;padding:0;font-size:.875rem;color:var(--muted)}
  .cart-table .product-quantity{grid-area:qty;width:auto;padding-top:6px}
  .cart-table .product-subtotal{grid-area:sub;width:auto}
}

/* ---------- delivery block: "Shipping to ... Change" first, then the options ---------- */
.cart_totals tr.woocommerce-shipping-totals td{display:flex;flex-direction:column}
.cart_totals .woocommerce-shipping-destination{order:-3;margin:0;font-size:.9375rem;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.cart_totals .woocommerce-shipping-destination strong{color:var(--ink);font-weight:500}
.cart_totals .woocommerce-shipping-calculator{order:-2;margin:.15rem 0 1rem}
.cart_totals .shipping-calculator-button{display:inline-block;padding-bottom:.15em;font-size:.875rem;font-weight:500;color:var(--accent);background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;transition:background-size .4s var(--ease),color .2s}
.cart_totals .shipping-calculator-button:hover{background-size:100% 1px,100% 1px;color:var(--accent-hi)}

/* the address form that "Change address" opens */
.cart_totals .shipping-calculator-form{margin-top:.9rem;padding:16px;background:#fff;border:1px solid var(--line-soft)}
.cart_totals .shipping-calculator-form .form-row{display:grid;gap:.4rem;float:none;width:100%;margin:0 0 .85rem;padding:0}
.cart_totals .shipping-calculator-form label{font-size:.875rem;font-weight:500}
.cart_totals .shipping-calculator-form input.input-text,
.cart_totals .shipping-calculator-form select{width:100%;min-height:46px;padding:0 .9rem;border:1px solid #aab6b0;border-radius:0;background:#fff;font:inherit;color:var(--ink)}
.cart_totals .shipping-calculator-form input.input-text:focus,
.cart_totals .shipping-calculator-form select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cart_totals .shipping-calculator-form .select2-container{width:100% !important;display:block}
.cart_totals .shipping-calculator-form .select2-container .select2-selection--single{height:46px;border:1px solid #aab6b0;border-radius:0}
.cart_totals .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0 2rem 0 .9rem;line-height:44px;color:var(--ink)}
.cart_totals .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px}
.cart_totals .shipping-calculator-form .select2-container--open .select2-selection--single,
.cart_totals .shipping-calculator-form .select2-container--focus .select2-selection--single{border-color:var(--accent)}
.cart_totals .shipping-calculator-form button[name=calc_shipping]{width:100%;min-height:48px;margin:.2rem 0 0}
.select2-dropdown{border-color:#aab6b0;border-radius:0}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--accent)}