/* ================================= CART =================================
   Single column: line items, then the order summary. */

.ct_page{
    --ct-line:   #e4e4e4;
    --ct-muted:  #545454;   /* dark enough for the page background, not just the cards */
    --ct-card:   #ffffff;
    --ct-accent: #4a6b12;
    /* this codebase keeps --text-color dark in both themes and flips colours
       per selector, so the page carries its own ink token */
    --ct-ink:    var(--text-color);

    max-width: 1000px; margin: 0 auto; box-sizing: border-box;
    color: var(--ct-ink);
}
.ct_page *, .ct_page *::before, .ct_page *::after{ box-sizing: border-box; }

.dark .ct_page{
    --ct-line:   rgba(255,255,255,0.14);
    --ct-muted:  #c2c2c2;
    --ct-card:   #262626;
    --ct-accent: var(--primary-color);
    --ct-ink:    var(--light-grey);
}

/* headings and emphasised figures are coloured explicitly upstream, so
   inheriting the page ink is not enough for them */
.ct_page h1,
.ct_page h2,
.ct_page h3,
.ct_page strong{ color: var(--ct-ink); }

/* -------------------------------- header -------------------------------- */
.ct_back{
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 15px; font-weight: 700; color: var(--text-color);
    text-decoration: none; padding: 0 0 10px;
}
.dark .ct_back{ color: var(--light-grey); }
.ct_back:hover{ opacity: 0.7; }
.ct_back .material-symbols-outlined{ font-size: 20px; }

.ct_head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; padding: 0 0 22px;
}
.ct_head h1{ padding: 0; letter-spacing: -0.03em; }

.ct_currency{ display: flex; align-items: center; gap: 12px; }
/* sits on the page background rather than a card, where the muted tone drops
   under AA in both themes */
.ct_currency_label{ font-size: 15px; color: var(--ct-ink); }
.ct_page #currency_select{
    height: 44px; padding: 0 16px; border-radius: 22px;
    border: 1px solid var(--ct-line); background: var(--ct-card);
    color: inherit; font-family: inherit; font-size: 15px; cursor: pointer;
}

.ct_notice{
    padding: 12px 16px; margin-bottom: 16px; border-radius: 10px;
    background: rgba(214,141,23,0.12); border: 1px solid rgba(214,141,23,0.3);
    font-size: 14px;
}

/* --------------------------------- line --------------------------------- */
.ct_line{
    display: grid; grid-template-columns: 350px minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--ct-line); border-radius: 14px;
    background: var(--ct-card); overflow: hidden;
    margin-bottom: 22px;
}

.ct_art{
    background: var(--light-grey2); background-size: cover; background-position: center;
    min-height: 240px; display: grid; place-items: center;
}
.dark .ct_art{ background-color: #333; }
.ct_art .material-symbols-outlined{ font-size: 44px; opacity: 0.35; }

.ct_body{ padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; }

.ct_body_top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ct_naming{ min-width: 0; }
.ct_eyebrow{
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ct-accent); padding: 0 0 6px;
}
.ct_body h2{ font-size: 30px; letter-spacing: -0.03em; padding: 0; }
.ct_sub{
    font-size: 15px; color: var(--ct-muted); padding: 6px 0 0; line-height: 1.45em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ct_unit{ text-align: right; white-space: nowrap; }
.ct_unit_price{ font-size: 30px; font-weight: 700; letter-spacing: -0.02em; padding: 0; color: var(--ct-ink); }
.ct_unit_note{ font-size: 13px; color: var(--ct-muted); padding: 2px 0 0; }
.ct_was{ font-size: 16px; color: var(--ct-muted); text-decoration: line-through; padding: 0 0 2px; }
.ct_unit_price.is_promo{ color: var(--ct-accent); }
.ct_qty_fixed{
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ct-muted);
}

.ct_features{
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    padding: 16px 0; border-top: 1px solid var(--ct-line); border-bottom: 1px solid var(--ct-line);
}
.ct_feature{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.ct_feature .material-symbols-outlined{ font-size: 18px; color: var(--ct-accent); }

.ct_line_foot{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.ct_qty{ display: flex; align-items: center; gap: 18px; }
.ct_qty_label{
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ct-muted);
}
.ct_stepper{
    display: inline-flex; align-items: center;
    border: 1px solid var(--ct-line); border-radius: 22px; height: 44px; padding: 0 6px;
}
.ct_step{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: inherit; text-decoration: none; }
.ct_step:hover{ background: var(--light-grey2); }
.dark .ct_step:hover{ background: rgba(255,255,255,0.08); }
.ct_step .material-symbols-outlined{ font-size: 18px; }
.ct_stepper input{
    width: 40px; text-align: center; border: 0; background: transparent;
    color: inherit; font-family: inherit; font-size: 17px; font-weight: 700; outline: 0;
}
.ct_line_total{ font-size: 20px; font-weight: 700; color: var(--ct-ink); }

.ct_remove{
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; color: var(--ct-muted); text-decoration: none;
}
.ct_remove:hover{ color: var(--text-color); }
.dark .ct_remove:hover{ color: white; }
.ct_remove .material-symbols-outlined{ font-size: 18px; }

.ct_callout{
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    background: var(--light-grey2); color: var(--ct-muted);
    font-size: 14px; line-height: 1.45em;
}
.dark .ct_callout{ background: rgba(255,255,255,0.06); }
.ct_callout .material-symbols-outlined{ font-size: 18px; flex: none; opacity: 0.7; }

.ct_discounts{ border-top: 1px solid var(--ct-line); padding-top: 14px; }
.ct_discount{ display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--ct-accent); padding: 0; }

/* -------------------------------- summary ------------------------------- */
.ct_summary{
    border: 1px solid var(--ct-line); border-radius: 14px;
    background: var(--ct-card); padding: 26px 28px; margin-bottom: 22px;
}
.ct_summary h2{ font-size: 24px; letter-spacing: -0.02em; padding: 0 0 18px; }

.ct_summary_rows{ border-top: 1px solid var(--ct-line); padding-top: 16px; }
.ct_srow{ display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 16px; padding: 0 0 12px; color: var(--ct-ink); }
.ct_amount{ font-weight: 700; white-space: nowrap; color: var(--ct-ink); }
.ct_muted{ font-weight: 400; color: var(--ct-muted); }
.ct_srow_discount{ color: var(--ct-accent); }

.ct_total{
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    border-top: 2px solid var(--text-color); padding: 18px 0 22px;
}
.dark .ct_total{ border-top-color: var(--light-grey); }
.ct_total_label{ font-size: 22px; font-weight: 700; color: var(--ct-ink); }
.ct_total_value{ text-align: right; }
.ct_total_value strong{ display: block; font-size: 34px; letter-spacing: -0.03em; color: var(--ct-ink); }
.ct_total_currency{ font-size: 13px; color: var(--ct-muted); }

/* Centring by line-height meant matching it to height minus padding and
   borders, and a 52px line box inside a 42px content box sat 5px low. Flex
   centres it whatever the button's own padding turns out to be. */
.ct_page .button.ct_continue{
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 56px; line-height: 1; border-radius: 28px;
    font-size: 17px; margin: 0;
}
.ct_secure{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; color: var(--ct-muted); padding: 14px 0 0;
}
.ct_secure .material-symbols-outlined{ font-size: 16px; }

/* ------------------------------ extra blocks ---------------------------- */
.ct_cancellation{
    border: 1px solid var(--ct-line); border-radius: 14px;
    background: var(--ct-card); padding: 22px 28px; margin-bottom: 18px;
}
.ct_cancellation h3{ font-size: 18px; padding: 0 0 6px; }
.ct_cancellation p{ font-size: 15px; color: var(--ct-muted); padding: 0; line-height: 1.5em; }

.ct_promo{ font-size: 15px; color: var(--ct-muted); padding: 0 4px 6px; }
.ct_promo a{ color: var(--ct-accent); font-weight: 700; margin-left: 6px; }
.ct_promo_form{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 4px 20px; }
.ct_promo_form input{
    height: 44px; padding: 0 16px; border-radius: 22px;
    border: 1px solid var(--ct-line); background: var(--ct-card);
    color: inherit; font-family: inherit; font-size: 15px; min-width: 220px;
}
.ct_page .ct_promo_form .button{ margin: 0; }
.ct_promo_msg{ font-size: 14px; color: var(--ct-muted); }

.ct_empty{ text-align: center; padding: 80px 20px; color: var(--ct-muted); }
.ct_empty .material-symbols-outlined{ font-size: 48px; opacity: 0.4; }
.ct_empty p{ padding: 12px 0 20px; font-size: 16px; }

/* ------------------------------ responsive ------------------------------ */
@media(max-width: 860px){
    .ct_line{ grid-template-columns: 1fr; }
    .ct_art{ min-height: 200px; }
    .ct_body{ padding: 22px 20px; }
    .ct_body_top{ flex-direction: column; gap: 12px; }
    .ct_unit{ text-align: left; }
    .ct_body h2{ font-size: 24px; }
    .ct_unit_price{ font-size: 24px; }
    .ct_summary, .ct_cancellation{ padding: 20px; }
    .ct_line_foot{ align-items: flex-start; }
}