/* ==========================================================================
   Giassaris — Cart / Checkout / Thank you
   ========================================================================== */

/* No footer on the cart page — fill the viewport (gray rail stretches too) */
.cart-layout { display: grid; grid-template-columns: 300px 1fr 370px; gap: 48px; align-items: start; align-content: start; min-height: 100vh; padding-block: 32px 64px; position: relative; --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
/* Full-height gray rail behind the summary, bleeding to the right viewport edge.
   Only the summary's own padding keeps its content off the edges. */
.cart-layout::before { content: ''; position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--bleed)); width: calc(370px + var(--bleed)); background: var(--c-grey-100); z-index: 0; }
/* same cap as .checkout-form on the next step — the products column shouldn't get
   wider just because this page has no right-hand address form to balance it */
/* width:100% first — a lone grid item sizes to its content by default, so
   max-width alone has nothing to clamp until the box actually fills its track */
.cart-layout .cart-items { width: 100%; max-width: 737px; margin-inline: auto; }

/* ---- Left intro column ---- */
.cart-intro h1 { font-size: 34px; font-weight: var(--fw-bold); }
.cart-intro p { color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: 14px; line-height: 1.6; }
.cart-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: var(--fs-sm); }
.cart-back span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 100%;
}
.cart-back:hover { color: var(--c-accent); }

/* ---- Middle products ---- */
.free-ship-bar { background: var(--c-grey-100); border-radius: var(--radius); text-align: center; padding: 16px; font-size: var(--fs-sm); }
.free-ship-bar b { color: var(--c-accent); }
.cart-count { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 24px 0 12px; }

.cart-item { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 20px; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; position: relative; }
.cart-item__thumb { width: 120px; height: 120px; border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.cart-item__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
/* body: 2-col grid — text (left) lines up row-by-row with controls (right) */
.cart-item__body { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 14px; column-gap: 16px; height: 100%;}
.cart-item__title { grid-column: 1; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cart-item__opts { grid-column: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.opt-chip { background: var(--c-grey-150); border-radius: var(--radius-pill); padding: 5px 12px; font-size: var(--fs-xs); color: var(--c-text-muted); }
.cart-item__wish { grid-column: 1; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--c-text-muted); }
.cart-item__wish:hover { color: var(--c-accent); }
.cart-item__del { grid-column: 2; justify-self: end; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--c-grey-500); }
.cart-item__del:hover { color: var(--c-accent); }
.cart-item__del-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-grey-150); color: var(--c-grey-700); font-size: 9px; line-height: 1; }
.cart-item__del:hover .cart-item__del-x { background: var(--c-grey-300); }
.cart-item__price { grid-column: 2; justify-self: end; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; font-weight: var(--fw-bold); font-size: var(--fs-book); color: var(--c-accent); }
.cart-item__price del { color: var(--c-grey-500); font-weight: var(--fw-bold); font-size: 13px; text-decoration: line-through; }
.qty-sm { grid-column: 2; justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.qty-sm button { width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--c-grey-150); display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--c-ink); cursor: pointer; transition: background var(--t); }
.qty-sm button:hover { background: var(--c-grey-300); }
.qty-sm input { width: 28px; text-align: center; border: none; background: transparent; height: 100%; font-weight: var(--fw-medium); }

/* ---- Right summary sidebar ---- */
.cart-summary { position: sticky; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 32px 40px; padding-right: 0; padding-top: 0;}
.discount-toggle { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px 20px; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; }
.discount-toggle svg { width: 14px; height: 14px; transition: transform var(--t); }
.discount-toggle.is-open svg { transform: rotate(180deg); }
.discount-body { display: none; gap: 10px; }
.discount-body.is-open { display: flex; flex-direction: column; }
.discount-body input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); padding: 0 14px; outline: none; }
.discount-body .btn { flex: 0 0 auto; }
/* min-width: 0 everywhere — long select options (region names) must not set the sidebar's width */
.discount-body > * { min-width: 0; }
.discount-row { display: flex; gap: 10px; }
.discount-body select { width: 100%; min-width: 0; height: 44px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); padding: 0 12px; background: #fff; outline: none; }
.discount-shipping { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.discount-shipping__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-top: 6px; }
.discount-alert { background: #fdecec; color: #b3261e; border: 1px solid #f3c2c0; border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--fs-sm); }
.cart-warning { margin-bottom: 14px; }
.cart-freeship { background: var(--c-grey-100); border-radius: var(--radius); padding: 18px 20px; text-align: center; font-size: var(--fs-sm); margin-bottom: 24px; }
.cart-freeship b { color: var(--c-accent); }
.cart-item__stock-warn { display: block; color: #b3261e; font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-bottom: 6px; }
#shipping-quotes { display: grid; gap: 8px; }
#shipping-quotes:empty { display: none; }
.ship-quote__group { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ship-quote__opt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }
.ship-quote__opt input { flex: 0 0 auto; height: auto; accent-color: var(--c-accent); }

.summary-box { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 22px 20px; }
.summary-box h4 { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.summary-line { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 10px 0; border-bottom: 1px solid var(--c-border); }
.summary-total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.summary-total span { font-weight: var(--fw-bold); font-size: var(--fs-sm);}
.summary-total b { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-accent); }
/* override the global .btn uppercase — "Ολοκλήρωση Παραγγελίας" reads better in
   its natural case than shouted caps */
.summary-box .btn { height: 56px; margin-top: 18px; text-transform: capitalize; }
.secure { text-align: center; margin-top: 8px; }
.secure__label { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: 10px; font-weight: bold;}
.secure__logos { display: flex; justify-content: center; }
.secure__logos img { max-width: 100%; height: auto; }

/* Laptop: the full 3-col (300 + 1fr + 370) only fits comfortably ≥1500, so
   below that use a 2-col layout (items + summary) with the intro on top and
   the summary as a self-contained grey card (no bleed). */
@media (min-width: 1024px) and (max-width: 1499px) {
  .cart-layout { grid-template-columns: 1fr 360px; gap: 32px; }
  .cart-intro { grid-column: 1 / -1; }
  .cart-layout::before { display: none; }
  .cart-summary { background: var(--c-grey-100); border-radius: var(--radius-lg); padding: 24px; }
}
@media (max-width: 1023px) {
  .cart-layout { grid-template-columns: 1fr; gap: 28px; }
  .cart-layout::before { display: none; }
  .cart-summary { position: static; background: var(--c-grey-100); border-radius: var(--radius-lg); padding: 20px; }
}
@media (max-width: 560px) {
  .cart-intro h1 { font-size: 28px; }
  /* Stacked layout — image + title on top, then options / wishlist / qty+price
     in full-width rows below. display:contents lets the body's children join
     the card grid so they can span the full width under the thumbnail. */
  .cart-item {
    grid-template-columns: 72px 1fr;
    column-gap: 12px;
    row-gap: 12px;
    align-items: start;
    padding: 14px;
  }
  .cart-item__thumb { width: 72px; height: 72px; grid-column: 1; grid-row: 1; }
  .cart-item__body { display: contents; }
  .cart-item__title { grid-column: 2; grid-row: 1; padding-right: 30px; min-width: 0; }
  /* delete sits in the card's top-right corner, out of the grid flow — keep just
     the ✕ circle (hide the "Διαγραφή" label) so it doesn't crowd the title */
  .cart-item__del { position: absolute; top: 12px; right: 12px; gap: 0; font-size: 0; }
  .cart-item__opts { grid-column: 1 / -1; grid-row: 2; }
  .cart-item__wish { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
  /* qty + price share the bottom row, pinned to opposite edges */
  .qty-sm { grid-column: 1 / -1; grid-row: 4; justify-self: start; align-self: center; }
  .cart-item__price { grid-column: 1 / -1; grid-row: 4; justify-self: end; align-self: center; }
  /* stock warning was unplaced → auto-dropped into the narrow 72px column; span it full width */
  .cart-item__stock-warn { grid-column: 1 / -1; grid-row: 5; }
}

.cart-back i { font-size: 10px; }