/**
 * The gift table: the cart drawn as a list of gifts rather than of line items.
 *
 * A gift is a run of rows — its title, what kind of gift it is, its variants,
 * then any fee or credit — separated from the next gift by a rule at the top
 * of each block rather than a border on every row, so a gift reads as one
 * thing.
 */

/**
 * The gift list, with what is owed and the way out beside it.
 *
 * The panel stays with the customer as they scroll a long cart, so the total
 * and the Checkout button are never off screen.
 */
/**
 * The theme's desktop header is FIXED and 100px tall, so a sticky panel pinned
 * to the top of the viewport disappears behind the navigation. Same reasoning,
 * and the same figures, as .tl-checkout in css/order-tables.css — the two pages
 * wear the same layout and must behave the same way when scrolled.
 */
.tl-cart {
  --tl-header: 100px;
  --tl-gap: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding-top: 1.5rem;
}

/* The admin toolbar pushes the header down; customers see neither. */
body.toolbar-fixed .tl-cart {
  --tl-header: 139px;
}

body.toolbar-fixed.toolbar-tray-open.toolbar-horizontal .tl-cart {
  --tl-header: 180px;
}

/* The gift list is NOT framed. Each gift now carries its own panel, and a
   panel of panels made every card look like a compartment of one big box
   instead of a thing of its own. What frames this column is the coloured
   ground the cards sit on (body.path-cart in order-tables.css).

   The summary beside it keeps its frame: it is one panel, holding one figure
   and the way out. */
.tl-cart-side {
  border: 1px solid #9e9e9e;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: #fff;
}

/**
 * The cart's own width, independent of the checkout's.
 *
 * order-tables.css lifts both pages off the theme's 960px cap and explains why
 * the two figures are deliberately separate. This is the cart's.
 *
 * WIDENED 2026-08-30, measured rather than guessed. A variant line had 474px to
 * sit in and the longest real one — "1 ⚠ 4x6 Print - Brown Wooden Frame - With
 * Mat", quantity and low-resolution warning included — needs 462px. Twelve
 * pixels of headroom is not headroom; one longer product name or a
 * two-digit quantity and it wrapped. The gift list now gets 940px, which leaves
 * that line 554px to sit in, and 1492 of container carries it: 940 + 32 of gap
 * + 400 of summary panel + 120 of the theme's own gutters.
 */
body.path-cart .main-container.container {
  max-width: 1492px;
}

.tl-cart-main {
  flex: 1 1 auto;
  min-width: 0;
  /* Grows to 940 where there is room and shrinks below it where there is not,
     rather than being pinned and overflowing on a narrower screen. */
  max-width: 940px;
}

/* Wide enough for the buttons to sit full width without their labels wrapping
   — "Create Another Keepsake Gift" is what sets it. */
.tl-cart-side {
  flex: 0 0 400px;
  position: sticky;
  /* Below the fixed header, not at the top of the window. */
  top: calc(var(--tl-header, 100px) + var(--tl-gap, 1rem));
}

.tl-cart-side-label {
  white-space: nowrap;
}

.tl-cart-side-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #9e9e9e;
}

.tl-cart-side-amount {
  font-weight: 700;
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * A gift as a card — the shopping cart's arrangement
 *
 * One panel per gift instead of a run of table rows. The rows inside a card
 * are a grid rather than a table so the picture column can line up across
 * every card on the page while each card is still its own element in the
 * markup: a table would have had to be one table to line its columns up, which
 * is the very thing this replaces.
 *
 * The checkout keeps the table below. Same builder, same blocks, same class
 * names for everything inside a row — only the arrangement differs.
 * ------------------------------------------------------------------------ */
.tl-gift-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tl-gift-card {
  background: #fff;
  border: 1px solid #9e9e9e;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

/**
 * A card is a different surface from the thing it sits on — that difference is
 * the whole point of it, and it is what says "this is one gift" rather than
 * "this is a compartment of the box around it".
 *
 * The two pages give it different grounds, so the fill follows the ground
 * rather than being fixed:
 *  - the cart lays its cards straight onto the page's #ced1cd, so they are
 *    white;
 *  - the checkout lays them inside the white order panel, beside the shipping
 *    and payment forms, so they take the site's own panel grey — the same
 *    #efefef the two builders use. White on white would have left nothing but
 *    a border matching the panel's own, which is the nested-box look the cart
 *    dropped.
 *
 * Everything else about the card — border, radius, padding, spacing, the rows
 * inside it — is identical on both pages.
 */
.tl-order-detail .tl-gift-card {
  background: #efefef;
}

/* The kind of gift leads, as a coloured line of its own: it is the one thing
   on the card that says which of the three products this is.
   Centred across the card (the merchant's choice, 2026-08-28) so it reads as a
   heading for the whole card rather than as the first item in a left-hand
   column. The title and the price below it keep their edges — the price has to
   stay on the edge the figures line up on. Scoped to the card: the table
   arrangement puts this line in a column, where centring it would be wrong. */
.tl-gift-card-head .tl-gift-type {
  font-size: 0.95em;
  text-align: center;
}

/* Just the name now. The total left this line on 2026-08-30 and closes the
   card instead, so the title has the width to itself — which is what a
   customer scans for when hunting one gift in a full cart. */
.tl-gift-card-title {
  margin-top: 0.15rem;
}

/**
 * What the gift comes to, closing the card.
 *
 * Under a rule and hard against the right-hand edge, which is the edge every
 * amount above it already lines up on — so the rows and their total read as one
 * sum. It sat beside the title at the top until the merchant moved it: there it
 * was the answer arriving before the working.
 */
.tl-gift-card-total-line {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.9rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e0e0e0;
}

.tl-gift-card-total {
  font-weight: 700;
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The actions follow the total, so they need no rule of their own — two
   hairlines a few pixels apart read as a mistake. */
.tl-gift-card-total-line + .tl-gift-card-actions {
  margin-top: 0.65rem;
  padding-top: 0;
  border-top: 0;
}

.tl-gift-card-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

/* Picture then the line itself. The 240px matches .tl-col-image in the table,
   so a photo gift renders at exactly the same size on the cart as it does at
   checkout — that width is reserved rather than fitted, because the theme's
   .img-fluid would otherwise shrink the image whenever its column was tight. */
/* Picture, then the line itself, then what it cost.
   The third track is `auto`, so it takes no width at all on a gift whose rows
   carry no money — a keepsake's — and the name keeps the space instead. */
.tl-gift-card-row {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 1rem;
  align-items: center;
}

.tl-gift-card-row .tl-col-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The gift's own charge, above the prints it paid for. A little heavier than a
   print row, because it is the product and they are copies of it. */
.tl-gift-card-extra .tl-extra-label {
  color: var(--tl-extra-label, #333);
  font-weight: 600;
}

.tl-gift-card-extra .tl-col-amount {
  font-weight: 600;
}

.tl-gift-card-row .tl-variant-name {
  color: #555;
  margin-left: 0.5rem;
}

/* The flag sits between the count and the variant it warns about, so it needs
   the same gap on its left the variant name would otherwise have had. Size and
   colour stay in the flag's own stylesheet. */
.tl-gift-card-row .tl-quality-flag {
  margin-left: 0.5rem;
}

/* Edit and Remove close the card, under a rule — the same job the rule under
   the last row of a block does in the table. */
.tl-gift-card-actions {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e0e0e0;
}

.tl-gift-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}

.tl-gift-table th {
  font-weight: 600;
  text-align: right;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid #9e9e9e;
  white-space: nowrap;
}

.tl-gift-table th.tl-col-image,
.tl-gift-table th.tl-col-gift {
  text-align: left;
}

/* The picture and gift columns carry no visible heading, but a screen reader
   still needs to know which column it is in. Defined here rather than relying
   on the theme, so the words can never turn up on screen if the theme's own
   copy of this class is not loaded. */
.tl-gift-table .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.tl-gift-table td {
  padding: 0.35rem 0.5rem;
  vertical-align: middle;
}

/* Plain white throughout. The theme stripes any .table it finds, so that is
   turned off here — one gift is several rows and striping them cut across the
   thing it was meant to separate. The rule under each gift does that job. */
.tl-gift-table,
.tl-gift-table > tbody > tr > td {
  background: #fff;
}

.tl-col-image {
  width: 240px;
  padding-right: 1rem !important;
}

.tl-col-price,
.tl-col-total {
  text-align: right;
  white-space: nowrap;
  /* Money lines up on the decimal point rather than drifting with the digits. */
  font-variant-numeric: tabular-nums;
  width: 120px;
}

/* A gift is closed off by a rule under its last row, so each one reads as a
   single thing. The rule is on the block, not on every row — otherwise the
   variants inside one gift would look like separate purchases. */
.tl-block-start td {
  padding-top: 1rem !important;
}

/* Stated at table > row > cell weight, and on the cell rather than the row,
   because a bare <table> here picks up the theme's own table rules and a
   single-class selector loses to them. Grey enough to actually see on white —
   the hairline this started as was invisible in place. */
.tl-gift-table tbody tr.tl-block-end > td {
  border-bottom: 1px solid #9e9e9e;
  padding-bottom: 1rem !important;
}

.tl-gift-name {
  font-style: italic;
  font-weight: 700;
  font-size: 1.05em;
}

.tl-gift-untitled {
  font-weight: 400;
  opacity: 0.7;
}

/* Heads the picture column, above that gift's thumbnails. Wraps rather than
   forcing the column wider, since "Keepsake Label Reorder" is the longest of
   the three and the column is sized for a photo. */
.tl-gift-type {
  font-weight: 600;
  display: block;
  white-space: normal;
}

/* Colour says which of the three things this gift is, at a glance. Darkened
   from the mockup's own palette so each one carries on white. */
.tl-gift-type-keepsake {
  color: #1f7a4d;
}

.tl-gift-type-reorder {
  color: #a85800;
}

.tl-gift-type-photo {
  color: #1a5fa8;
}

.tl-variant-row .tl-variant-name {
  color: #555;
  margin-left: 0.5rem;
}

.tl-variant-quantity {
  display: inline-block;
  min-width: 2.5em;
  font-variant-numeric: tabular-nums;
}

/* The flag sits between the count and the variant it warns about, so it needs
   the same gap on its left that the variant name would otherwise have had —
   without it the triangle butts straight up against the number. Size, colour
   and the gap on its right stay in the flag's own stylesheet, so the three
   tiers cannot drift apart between this page, the checkout and the order
   table. */
.tl-variant-row .tl-quality-flag {
  margin-left: 0.5rem;
}

.tl-extra-row .tl-extra-label {
  color: #555;
}

.tl-col-image img {
  max-width: 220px;
  height: auto;
  display: block;
}

.tl-cart-totals {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  border-top: 1px solid #ddd;
  padding-top: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 1.05em;
}

.tl-cart-totals-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 6em;
  text-align: right;
}

/* Stacked in the panel: one action per line, Checkout at the top. */
.tl-cart-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/**
 * All three buttons identical: same width, same padding, no margins.
 *
 * Every property is stated rather than inherited, because the three do not
 * start equal — Checkout and the two below it pick up different rules from the
 * theme and from cart.css, which is what left them looking misaligned. The
 * selector is written at three classes deep so it outranks
 * `a.button.btn-primary.tl-cart-actions-extra` in cart.css, and this file is
 * attached after that one so the tie goes this way.
 */
.tl-cart-actions a.button,
.tl-cart-actions a.button.btn,
.tl-cart-actions a.button.btn-primary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  text-align: center;
  white-space: nowrap;
}

/* Edit and Remove close the gift they act on. Underlined, because they are the
   only things on this page a customer can click and nothing else about them
   says so.
   Both carry the same colour: the theme's own link colour left Edit too faint to
   pick out against the table, and there is no reason for the two controls on a
   gift to differ — Remove is guarded by its own confirmation, not by looking
   more dangerous. */
.tl-gift-link,
.tl-gift-link-remove {
  color: #8a2b23;
  font-size: 0.9em;
  margin-right: 1.25rem;
  text-decoration: underline;
}

.tl-gift-link:hover,
.tl-gift-link:focus {
  color: #8a2b23;
  text-decoration: underline;
}

/* Heads the picture column above that gift's thumbnails. Wraps rather than
   forcing the column wider, since the column is sized for a photo. */
.tl-gift-type {
  display: block;
  white-space: normal;
}

/* Same theme colour the cart's own buttons use. This theme mixes two Bootstrap
   stylesheets and an <a> loses to a.button on specificity, so the colour has to
   be stated at this weight or the links render transparent. */
.tl-cart-actions a.button.btn-primary {
  background: rgb(177, 181, 246);
  color: rgb(0, 0, 0);
  border-color: rgb(177, 181, 246);
}

@media (max-width: 900px) {
  /* The panel stops being a column and sits under the list. */
  .tl-cart {
    display: block;
  }

  .tl-cart-side {
    position: static;
    margin-top: 1.5rem;
  }
}

@media (max-width: 700px) {
  .tl-col-image {
    width: 110px;
    padding-right: 0.5rem !important;
  }

  .tl-col-image img {
    max-width: 100px;
  }

  /* The picture column narrows with it, or the card's own rows would keep
     reserving 240px for a 100px image. */
  .tl-gift-card-row {
    grid-template-columns: 110px 1fr;
    gap: 0.5rem;
  }

  .tl-gift-card {
    padding: 0.85rem 1rem;
  }

  /* The price drops under the name rather than squeezing beside it. */
  .tl-gift-card-title {
    display: block;
  }

  .tl-gift-card-total {
    display: block;
    margin-top: 0.25rem;
  }

  .tl-col-price,
  .tl-col-total {
    width: auto;
  }

  /* The variant name drops under the stepper rather than squeezing beside it. */
  .tl-variant-row .tl-variant-name {
    display: block;
    margin-left: 0;
    margin-top: 0.25rem;
  }
}