/* ==========================================================================
   AGRIYANA — Cart and saved-for-later pages

   The header drawer is for a glance and a fast jump to checkout. These are the
   full-page versions, where there is room to change a quantity without a
   fiddle, see what the delivery threshold is doing, and move things between the
   cart and the saved list.

   Loads after craft.css.
   ========================================================================== */

/* ==================================================================== layout */
.cart-layout { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 960px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(32px, 4vw, 64px); }
}

/* ==================================================================== ship meter
   Shown only while free delivery is still reachable and not yet met. A bar that
   is always empty or always full is decoration, not information. */
.ship-meter {
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.ship-meter.is-done { background: var(--brand-soft); border-color: transparent; }
.ship-meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--s-3);
}
.ship-meter.is-done .ship-meter-top { color: var(--brand-ink); }
/* --fg-subtle, not --fg-faint: faint is calibrated against --bg, and this sits
   on --surface-2, which is a step darker. It measured 4.04:1 there and failed. */
.ship-meter-val { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-subtle); }
.ship-bar { height: 5px; border-radius: 99px; background: var(--border); overflow: hidden; }
.ship-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-3) var(--ease-soil);
}

/* ==================================================================== cart line */
.cart-lines { display: grid; }

.cline {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
}
.cline:first-child { padding-top: 0; }
.cline:last-child { border-bottom: 0; }

.cline-media {
  width: 96px; height: 96px;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: block;
}
.cline-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-soil); }
.cline-media:hover img { transform: scale(1.06); }
.cline-media[data-contain] { background: #fff; }
.cline-media[data-contain] img { object-fit: contain; }
.cline-media .specimen-tag { display: none; }
.cline-media .specimen svg { width: 46%; }

.cline-body { display: grid; gap: 3px; align-content: start; min-width: 0; }
.cline-name { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; letter-spacing: var(--tr-snug); margin: 0; line-height: 1.25; }
.cline-name a { color: inherit; text-decoration: none; }
.cline-name a:hover { color: var(--brand-ink); }
.cline-meta { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-faint); margin: 0; }
.cline-unit { font-size: var(--t-sm); color: var(--fg-muted); margin: 2px 0 0; }
.cline-unit s { color: var(--fg-faint); margin-left: 4px; }

.cline-tools { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); }
.cline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--fg-subtle);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.cline-link:hover { color: var(--brand-ink); }
.cline-link.is-danger:hover { color: var(--danger); }
.cline-link .ico { transition: transform var(--dur-1) var(--ease-spring); }
.cline-link:hover .ico { transform: scale(1.15); }

.cline-right { display: grid; gap: var(--s-3); justify-items: end; align-content: start; }
.cline-total {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.cart-saved { margin-top: var(--s-11); padding-top: var(--s-8); border-top: 1px solid var(--border); }

.cart-empty { padding-block: var(--s-11); }

/* ==================================================================== summary */
.summary {
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 960px) { .summary { position: sticky; top: calc(var(--nav-h) + var(--s-5)); } }

.summary-title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  letter-spacing: var(--tr-snug);
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.summary-rows { display: grid; gap: var(--s-3); margin: 0 0 var(--s-4); }
.summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.summary-row dt { font-size: var(--t-sm); color: var(--fg-muted); }
.summary-row dd { margin: 0; font-family: var(--font-mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.summary-n { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-faint); }
.summary-row.is-save dt, .summary-row.is-save dd { color: var(--success); font-weight: 600; }
.summary-row.is-total {
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.summary-row.is-total dt { font-size: var(--t-md); font-weight: 700; color: var(--fg); }
.summary-row.is-total dd {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: var(--tr-tight);
}
.summary-tax {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--fg-faint);
  margin: 0 0 var(--s-5);
  line-height: 1.5;
}

.btn.is-disabled { opacity: .45; pointer-events: none; }

.summary-trust { list-style: none; margin: var(--s-5) 0 0; padding: var(--s-5) 0 0; display: grid; gap: var(--s-3); border-top: 1px solid var(--hairline); }
.summary-trust li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.45; }
.summary-trust .ico { color: var(--brand); flex: none; margin-top: 1px; }

/* ==================================================================== wishlist */
.wish-count { display: grid; justify-items: end; gap: 2px; }
.wish-count-n {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--tr-flat);
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.wish-count-l {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.wish-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--hairline);
}

/* the header's saved button carries the same badge as the cart */
.save-btn { position: relative; }
.save-btn .cart-count { background: var(--danger); color: #fff; }

/* ==================================================================== responsive */
@media (max-width: 620px) {
  /* the thumbnail shrinks and the quantity control moves under the copy, or
     three columns at 375px leaves the name about 90px to live in */
  .cline {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--s-3);
    padding: var(--s-4) 0;
  }
  .cline-media { width: 72px; height: 72px; }
  .cline-right {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-2);
  }
  .cline-total { justify-self: end; }
  .cart-actions { flex-direction: column; align-items: stretch; }
  .cart-actions .btn { width: 100%; justify-content: center; }
  .wish-bar { flex-direction: column; align-items: stretch; }
  .wish-bar .cluster { display: grid; gap: var(--s-3); }
  .wish-bar .btn { width: 100%; justify-content: center; }
  .wish-count { justify-items: start; margin-top: var(--s-5); }
}