/* Checkout and gift-card forms keep the same quiet retail grammar. The bag
   itself has no inline page: it lives entirely in the canvas below. */
.storefront-gift-card {padding-bottom:var(--section-space);
}

.storefront-gift-card__layout {align-items:start;display:grid;gap:clamp(var(--space-l), var(--space-xs) + var(--fluid-menu), var(--space-3xl));grid-template-columns:var(--columns-checkout);
}

.storefront-gift-card__form {display:grid;gap:var(--space-m);
}

/* ------------------------------------------------------------- cart line */
/* One compact line used by the bag canvas. The --canvas modifier only changes
   the layout context; product, quantity, and removal semantics stay in one
   component. Type is deliberately near body
   size: this is a receipt row, not a product card. */

.storefront-cart-line {border-top:var(--line-width) solid var(--border-subtle);display:grid;gap:var(--space-2xs);grid-template-columns:var(--cart-media-column) minmax(0, 1fr);padding-block:var(--space-2xs);
}

.storefront-cart-line:last-child {border-bottom:var(--line-width) solid var(--border-subtle);
}

.storefront-cart-line__media {aspect-ratio:var(--ratio-square);background:var(--bg-card);display:block;overflow:hidden;text-decoration:none;
}

.storefront-cart-line__media picture,
.storefront-cart-line__media img {display:block;height:var(--size-full);width:var(--size-full);
}

.storefront-cart-line__media img {object-fit:cover;transition:transform var(--motion-slow) var(--ease-image);
}

.storefront-cart-line__media:hover img,
.storefront-cart-line__media:focus-visible img {transform:scale(var(--scale-hover-subtle));
}

/* Placeholder text must not try to render a full product name at card size in
   a 64px thumbnail; it is clamped to a couple of lines and quietened. */
.storefront-cart-line__media .storefront-media-placeholder,
.storefront-cart-line__gift-card-mark {-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--text-subtle);display:-webkit-box;font-size:var(--text-xs);line-height:var(--leading-copy-tight);overflow:hidden;padding:var(--space-3xs);
}

.storefront-cart-line__media--gift-card {align-items:end;display:flex;
}

.storefront-cart-line__content {display:grid;gap:var(--space-4xs);min-width:0;
}

.storefront-cart-line__head {align-items:start;display:flex;gap:var(--space-2xs);justify-content:space-between;
}

.storefront-cart-line h2,
.storefront-cart-line p {margin:0;
}

.storefront-cart-line h2 {font-family:var(--font-body);font-size:var(--text-s);font-weight:var(--weight-medium);line-height:var(--leading-copy-tight);
}

.storefront-cart-line h2 a {color:inherit;text-decoration:none;
}

.storefront-cart-line h2 a:hover,
.storefront-cart-line h2 a:focus-visible {text-decoration:underline;text-underline-offset:var(--underline-offset);
}

.storefront-cart-line__head strong {font-size:var(--text-s);font-weight:var(--weight-medium);white-space:nowrap;
}

.storefront-cart-line__variant,
.storefront-cart-line__detail {color:var(--text-muted);font-size:var(--text-s);line-height:var(--leading-copy);
}

.storefront-cart-line__variant {align-items:center;display:flex;gap:var(--space-4xs);
}

.storefront-cart-line__swatch {background:var(--swatch-dark);border:var(--line-width) solid var(--border-control);border-radius:var(--radius-circle);display:inline-block;flex:0 0 var(--swatch-size);height:var(--swatch-size);width:var(--swatch-size);
}

.storefront-cart-line__actions {align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-3xs);
}

/* Remove is the only destructive action here, so it sits apart from the
   quantity controls rather than beside them. */
.storefront-cart-line__remove-form {margin-left:auto;
}

/* A bordered stepper reads as one control instead of a bare number floating
   beside two links. The native spin buttons are unusable at this size and
   invisible on touch, so -/+ replace them: they are submit buttons carrying
   their own quantity, which keeps incrementing working without JS. */
.storefront-cart-line__form {align-items:center;display:flex;gap:var(--space-3xs);
}

.storefront-cart-line__stepper {align-items:center;border:var(--line-width) solid var(--border-control);display:inline-flex;height:var(--cart-stepper-size);
}

.storefront-cart-line__stepper:focus-within,
.storefront-cart-line__stepper:hover {border-color:var(--text-body);
}

.storefront-cart-line__form label {display:block;
}

/* The field is sized to the two digits it can hold rather than to a control
   default, so the whole stepper stays narrow enough to sit on one line. */
.storefront-body .storefront-cart-line__form input[type="number"]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {-moz-appearance:textfield;appearance:textfield;background:transparent;border:0;border-radius:0;font-size:var(--text-xs);height:var(--size-full);min-height:0;padding:0;text-align:center;width:var(--cart-stepper-field);
}

.storefront-cart-line__form input::-webkit-outer-spin-button,
.storefront-cart-line__form input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;
}

.storefront-body .storefront-cart-line__form input[type="number"]:not([type="submit"]):not([type="button"]):focus {outline:0;
}

/* The visible box is small, but the hit area is padded out to the 44px target
   so the control stays usable on touch without growing the stepper. */
.storefront-cart-line__step {align-items:center;background:transparent;border:0;color:var(--text-muted);cursor:pointer;display:inline-flex;height:var(--size-full);justify-content:center;padding:0;position:relative;width:var(--cart-stepper-size);
}

.storefront-cart-line__step::after {content:"";height:var(--control-min-height);left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:var(--control-min-height);
}

.storefront-cart-line__step svg {fill:none;height:var(--cart-stepper-icon);stroke:currentColor;stroke-linecap:round;stroke-width:var(--icon-stroke-width);width:var(--cart-stepper-icon);
}

.storefront-cart-line__step:hover,
.storefront-cart-line__step:focus-visible {color:var(--text-body);
}

/* Update and Remove are recovery actions, not primary ones, so they stay
   small and quiet while still meeting the 44px target via padding. */
.storefront-cart-line__actions .link-button,
.storefront-cart-line__update {color:var(--text-muted);font-size:var(--text-xs);min-height:var(--control-min-height);
}

.storefront-cart-line__actions .link-button:hover,
.storefront-cart-line__actions .link-button:focus-visible,
.storefront-cart-line__update:hover,
.storefront-cart-line__update:focus-visible {color:var(--text-body);
}

.storefront-cart-line__digital-label {color:var(--text-muted);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;
}

/* --------------------------------------------------------------- cart canvas */

.storefront-cart-canvas {background:var(--light);border:0;color:var(--text-body);height:var(--viewport-small-height);inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin-inline-end:0;margin-inline-start:auto;max-height:none;max-width:none;padding:0;position:fixed;width:min(var(--measure-cart-panel), calc(var(--viewport-width) - var(--space-l)));
}

.storefront-cart-canvas::backdrop {background:var(--overlay-dark-deep);
}

/* The script sets this while the canvas is open so the page behind the panel
   does not scroll under the pointer or the caret. */
.storefront-cart-canvas-open {overflow:hidden;
}

.storefront-cart-canvas__surface {display:grid;grid-template-rows:auto minmax(0, 1fr);height:var(--size-full);min-height:0;
}

.storefront-cart-canvas__header {align-items:center;border-bottom:var(--line-width) solid var(--border-subtle);display:flex;gap:var(--space-s);justify-content:space-between;padding:var(--space-2xs) var(--space-m);
}

.storefront-cart-canvas__close-form {margin:0;
}

.storefront-cart-canvas__close,
.storefront-cart-canvas__utility-link {align-items:center;background:transparent;border:0;color:inherit;display:inline-flex;font-size:var(--text-xs);font-weight:var(--weight-medium);gap:var(--space-4xs);letter-spacing:var(--tracking-label);line-height:var(--leading-none);min-height:var(--control-min-height);text-transform:uppercase;
}

.storefront-cart-canvas__close {cursor:pointer;padding:var(--space-3xs) 0;
}

.storefront-cart-canvas__close svg {fill:none;height:var(--control-icon-size);stroke:currentColor;stroke-linecap:round;stroke-width:var(--icon-stroke-width);width:var(--control-icon-size);
}

.storefront-cart-canvas__close:hover,
.storefront-cart-canvas__close:focus-visible,
.storefront-cart-canvas__utility-link:hover,
.storefront-cart-canvas__utility-link:focus-visible {opacity:var(--opacity-hover);
}

.storefront-cart-canvas__utility {align-items:center;display:flex;gap:var(--space-s);justify-content:flex-end;min-width:0;
}

.storefront-cart-canvas__utility-link {color:inherit;text-decoration:underline;text-underline-offset:var(--underline-offset);white-space:nowrap;
}

.storefront-cart-canvas__utility-link svg {fill:none;height:var(--control-icon-size);stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--icon-stroke-width);width:var(--control-icon-size);
}

.storefront-cart-canvas__utility-link--disabled {color:var(--text-muted);cursor:default;opacity:var(--opacity-disabled);
}

.storefront-cart-canvas__utility-link--disabled:hover,
.storefront-cart-canvas__utility-link--disabled:focus-visible {opacity:var(--opacity-disabled);
}

.storefront-cart-canvas__utility-link--current {color:var(--text-body);
}

.storefront-cart-canvas__content {display:grid;grid-template-rows:minmax(0, 1fr) auto;min-height:0;
}

.storefront-cart-canvas__main {min-height:0;overflow-y:auto;padding:var(--space-m) var(--space-m) var(--space-l);
}

.storefront-cart-canvas__heading h2 {font-size:var(--text-l);line-height:var(--leading-tight);margin:0;
}

.storefront-cart-canvas__heading h2 span {color:var(--text-muted);font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:0;
}

.storefront-cart-canvas__lines {display:grid;margin-top:var(--space-s);
}

.storefront-cart-line--canvas {gap:var(--space-s);
}

.storefront-cart-canvas__empty {align-content:start;border-top:var(--line-width) solid var(--border-subtle);display:grid;gap:var(--space-s);margin-top:var(--space-s);padding-top:var(--space-m);
}

.storefront-cart-canvas__empty p {font-size:var(--text-m);line-height:var(--leading-copy);margin:0;
}

.storefront-cart-canvas__empty .button {justify-self:start;
}

.storefront-cart-canvas__summary {background:var(--light);border-top:var(--line-width) solid var(--border-subtle);display:grid;gap:var(--space-2xs);padding:var(--space-m);
}

.storefront-cart-canvas__summary dl {display:grid;gap:var(--space-4xs);margin:0;
}

.storefront-cart-canvas__summary dl > div,
.storefront-cart-canvas__total {align-items:baseline;display:flex;gap:var(--space-s);justify-content:space-between;
}

.storefront-cart-canvas__summary dt,
.storefront-cart-canvas__summary dd {font-size:var(--text-s);margin:0;
}

.storefront-cart-canvas__summary dd {text-align:right;
}

.storefront-cart-canvas__total {border-top:var(--line-width) solid var(--border-subtle);font-size:var(--text-s);font-weight:var(--weight-medium);margin-top:var(--space-3xs);padding-top:var(--space-2xs);
}

.storefront-cart-canvas__total strong {font-family:var(--font-display);font-size:var(--text-l);font-weight:var(--weight-regular);
}

.storefront-cart-canvas__summary .button {justify-content:space-between;margin-top:var(--space-3xs);width:var(--size-full);
}

.storefront-cart-canvas__summary .button span {font-size:var(--text-m);line-height:var(--leading-none);
}

.link-button {background:none;border:0;color:var(--text-muted);font-size:var(--text-s);min-height:var(--control-min-height);padding:var(--space-3xs) 0;text-decoration:underline;text-underline-offset:var(--underline-offset);
}

.storefront-gift-card__form fieldset {border:var(--line-width) solid var(--border-primary);display:grid;gap:var(--space-s);margin:0;padding:var(--space-m);
}

.storefront-gift-card__form legend {background:var(--bg-surface);font-family:var(--font-display);font-size:var(--text-l);font-weight:var(--weight-regular);letter-spacing:var(--tracking-tight);padding-inline:var(--space-3xs);
}

.storefront-field-grid-2 {display:grid;gap:var(--space-s);grid-template-columns:var(--columns-two);
}

.storefront-cart-line__digital-label {color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;
}

.storefront-gift-card__form {margin-bottom:0;min-width:0;
}

.storefront-gift-card__form .button {justify-self:start;
}

.storefront-gift-card__aside {display:grid;gap:var(--space-s);position:sticky;top:calc(var(--header-height) + var(--space-s));
}

.storefront-gift-card__preview {display:grid;gap:var(--space-s);margin:0;
}

/* The storefront is square-cornered by system rule; this one element is a
   depiction of a physical payment card, so it takes the credit-card corner. */
.storefront-gift-card__card {aspect-ratio:var(--ratio-payment-card);background:var(--brand-surface);border-radius:var(--radius-lg);color:var(--text-on-brand-surface);display:flex;flex-direction:column;justify-content:space-between;max-width:var(--measure-summary);overflow:hidden;padding:var(--space-m);
}

.storefront-gift-card__card-top {align-items:flex-start;display:flex;gap:var(--space-s);justify-content:space-between;
}

.storefront-gift-card__card-mark {display:block;max-height:var(--space-xl);max-width:60%;object-fit:contain;width:auto;
}

.storefront-gift-card__card-wordmark {font-family:var(--font-display);font-size:var(--text-xl);line-height:var(--leading-tight);
}

.storefront-gift-card__card-title {font-size:var(--text-xs);letter-spacing:var(--tracking-label);opacity:var(--opacity-secondary);text-transform:uppercase;white-space:nowrap;
}

.storefront-gift-card__card-foot {display:grid;gap:var(--space-4xs);
}

.storefront-gift-card__card-amount {font-family:var(--font-display);font-size:var(--text-xl);line-height:var(--leading-none);margin:0;
}

.storefront-gift-card__card-note {font-size:var(--text-s);margin:0;opacity:var(--opacity-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.storefront-gift-card__availability {color:var(--text-muted);font-size:var(--text-s);line-height:var(--leading-copy);margin:0;max-width:var(--measure-summary);
}

.storefront-gift-card__terms {border-top:var(--line-width) solid var(--border-primary);margin-top:var(--section-space);max-width:var(--measure-copy);padding-top:var(--space-l);
}

.storefront-gift-card__terms h2 {font-size:var(--text-xl);line-height:var(--leading-tight);margin:0;
}

.storefront-gift-card__terms h3 {font-size:var(--text-l);line-height:var(--leading-snug);margin:var(--space-l) 0 var(--space-3xs);
}

.storefront-gift-card__terms p {color:var(--text-body);font-size:var(--text-m);line-height:var(--leading-body);margin:var(--space-3xs) 0 0;
}

/* Cart page.
   Server-rendered fallback for /cart: a bookmark, a plain form post, or a
   visit with JavaScript disabled land here directly rather than depending on
   script to open the bag dialog. Reuses the same line/summary proportions as
   checkout, since both are a lines-plus-recap split task. */

.storefront-cart-page__layout {align-items:start;display:grid;gap:clamp(var(--space-l), var(--fluid-medium), var(--space-2xl));grid-template-columns:var(--columns-checkout);margin-top:var(--section-space);
}

.storefront-cart-page__lines {display:grid;
}

.storefront-cart-page__summary {background:var(--light);border:var(--line-width) solid var(--border-subtle);display:grid;gap:var(--space-2xs);padding:var(--space-m);
}

.storefront-cart-page__summary dl {display:grid;gap:var(--space-4xs);margin:0;
}

.storefront-cart-page__summary dl > div,
.storefront-cart-page__total {align-items:baseline;display:flex;gap:var(--space-s);justify-content:space-between;
}

.storefront-cart-page__summary dt,
.storefront-cart-page__summary dd {font-size:var(--text-s);margin:0;
}

.storefront-cart-page__summary dd {text-align:right;
}

.storefront-cart-page__total {border-top:var(--line-width) solid var(--border-subtle);font-size:var(--text-s);font-weight:var(--weight-medium);margin-top:var(--space-3xs);padding-top:var(--space-2xs);
}

.storefront-cart-page__total strong {font-family:var(--font-display);font-size:var(--text-l);font-weight:var(--weight-regular);
}

.storefront-cart-page__summary .button {justify-content:space-between;margin-top:var(--space-3xs);width:var(--size-full);
}

.storefront-cart-page__summary .button span {font-size:var(--text-m);line-height:var(--leading-none);
}

@media (max-width: 900px) {
  .storefront-cart-page__layout {gap:var(--space-2xl);grid-template-columns:var(--columns-one);
  }

  .storefront-gift-card__layout {gap:var(--space-2xl);grid-template-columns:var(--columns-one);
  }

  .storefront-gift-card__aside {order:-1;position:static;
  }

  .storefront-gift-card__card {max-width:none;
  }

  .storefront-gift-card__availability {max-width:none;
  }
}

@media (max-width: 760px) {
  .storefront-cart-line {grid-template-columns:minmax(0, var(--cart-media-column)) minmax(0, 1fr);
  }

  .storefront-cart-line--canvas {grid-template-columns:minmax(0, var(--cart-media-column)) minmax(0, 1fr);
  }

  .storefront-cart-canvas__main {padding-top:var(--space-l);
  }
}

@media (max-width: 1024px) {
  .storefront-cart-canvas {width:var(--viewport-width);
  }
}

@media (max-width: 480px) {
  .storefront-cart-canvas__header {align-items:start;gap:var(--space-4xs);padding-inline:var(--space-xs);
  }

  .storefront-cart-canvas__utility {gap:var(--space-xs);
  }

  .storefront-cart-canvas__utility-link {letter-spacing:var(--tracking-subtle);
  }

  .storefront-cart-line {grid-template-columns:minmax(0, var(--cart-media-column)) minmax(0, 1fr);
  }

  .storefront-cart-line__head {align-items:start;display:grid;gap:var(--space-4xs);
  }

  .storefront-field-grid-2 {grid-template-columns:var(--columns-one);
  }

  .storefront-gift-card__form > .button {width:var(--size-full);
  }
}

@media (max-width: 360px) {
  .storefront-cart-canvas__utility-link--disabled {display:none;
  }
}