/**
 * Custom Cart Page — Deen Core
 *
 * Colors, radius, and widths are fixed values in this file (the admin-editable
 * Design tab was removed). The only settings-driven CSS left is the sticky
 * Order Summary offset — see .deen-ccp-summary-wrap, and deen_ccp_dynamic_css()
 * in custom-cart-page.php.
 */

/* The gray "Cart" banner above this template isn't ours — it's an Elementor
   section built directly on the Cart page (post 4390), sitting above where
   [woocommerce_cart] renders. Hidden here rather than edited in Elementor so
   it stays reversible and scoped to the cart page only (this file only
   enqueues when is_cart()). */
.elementor-4390 > .elementor-element-4feb71c {
    display: none !important;
}

.deen-ccp {
    background: #fff;
    color: #101828;
    padding: 30px 60px 60px;
    box-sizing: border-box;
}

.deen-ccp *,
.deen-ccp *::before,
.deen-ccp *::after {
    box-sizing: border-box;
}

.deen-ccp-container {
    max-width: 1140px;
    margin: 0 auto;
}

.deen-ccp-sticky-top {
    padding-top: 48px;
    background: #fff;
}

/* ── Page heading ─────────────────────────────────────────────────────────── */

.deen-ccp-page-title {
    margin: 0 0 28px;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: #101828;
}

/* ── Step strip ───────────────────────────────────────────────────────────── */

.deen-ccp-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0 0 44px;
    padding: 0;
    list-style: none;
}

.deen-ccp-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    color: #8a8f98;
    font-size: 14px;
    border-bottom: 2px solid transparent;
}

.deen-ccp-step.is-current {
    color: #101828;
    font-weight: 500;
    border-bottom-color: #2b2b2b;
}

/* The number and label moved inside an <a> (or a <span> for the steps that go
   nowhere), so the row's flex layout has to move with them — the <li> is now a
   single-child container and its own gap no longer separates anything.
   Inheriting color keeps one source of truth for the step's state: only the
   <li> classes decide how a step looks. */
.deen-ccp-step-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

/* Only the steps that actually navigate react to the pointer. */
.deen-ccp-step.is-linked .deen-ccp-step-link:hover,
.deen-ccp-step.is-linked .deen-ccp-step-link:focus-visible {
    color: #101828;
}

.deen-ccp-step.is-linked .deen-ccp-step-link:hover .deen-ccp-step-num,
.deen-ccp-step.is-linked .deen-ccp-step-link:focus-visible .deen-ccp-step-num {
    background: #e9e9ec;
    color: #101828;
}

.deen-ccp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 0px;
    background: #f7f7f8;
    color: #8a8f98;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.deen-ccp-step.is-current .deen-ccp-step-num {
    background: #2b2b2b;
    color: #fff;
}

/* ── Section heading ──────────────────────────────────────────────────────── */

.deen-ccp-section-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: #101828;
}

/* ── Inline notice ────────────────────────────────────────────────────────── */

.deen-ccp-notice {
    display: none;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 0px;
    font-size: 14px;
    background: #f7f7f8;
    border: 1px solid #ececef;
}

.deen-ccp-notice.is-visible { display: block; }

.deen-ccp-notice.is-error {
    background: rgba(229, 55, 46, .07);
    border-color: rgba(229, 55, 46, .25);
    color: #e5372e;
}

/* ── Two-column layout ────────────────────────────────────────────────────── */

/* No align-items:start here on purpose — the default stretch is what makes
   .deen-ccp-side (the summary column) as tall as .deen-ccp-main (the item
   list), giving .deen-ccp-summary-wrap's position:sticky a containing block
   taller than itself to move within. Without that extra height, the sticky
   card would already be pinned at the bottom of its own box and could never
   engage while the page scrolls. */
.deen-ccp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
}

.deen-ccp-main { min-width: 0; }

/* --ccp-header-offset (auto-measured in JS — see deen_ccp_summary_offset_sync()
   in custom-cart-page.php) accounts for whatever the theme and/or the WP
   admin bar pins to the top of the viewport above our content, so the card
   sticks flush underneath instead of landing partway behind it.
   --ccp-header-offset-extra is an admin-configurable nudge on top of that
   auto-detected value, and --ccp-sticky-gap is the breathing room below
   both — both settings-driven (Order Summary tab), both default to values
   that work without ever being touched. */
.deen-ccp-summary-wrap {
    position: sticky;
    top: calc(var(--ccp-header-offset, 0px) + var(--ccp-header-offset-extra, 0px) + var(--ccp-sticky-gap, 24px));
}

/* ── Select all / bulk delete toolbar ─────────────────────────────────────── */

.deen-ccp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px 12px 20px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 0px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.deen-ccp-selectall,
.deen-ccp-item-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.deen-ccp-selectall-text {
    font-size: 14px;
    color: #101828;
}

/* Native input stays in the accessibility tree but is visually replaced. */
.deen-ccp-selectall input[type="checkbox"],
.deen-ccp-item-check input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.deen-ccp-checkbox {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid #8a8f98;
    border-radius: 0px;
    background: transparent;
    transition: background .15s, border-color .15s;
}

.deen-ccp-checkbox::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5.5px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s;
}

.deen-ccp-selectall input:checked ~ .deen-ccp-checkbox,
.deen-ccp-item-check input:checked ~ .deen-ccp-checkbox {
    background: #2b2b2b;
    border-color: #2b2b2b;
}

.deen-ccp-selectall input:checked ~ .deen-ccp-checkbox::after,
.deen-ccp-item-check input:checked ~ .deen-ccp-checkbox::after {
    transform: rotate(45deg) scale(1);
}

.deen-ccp-selectall input:focus-visible ~ .deen-ccp-checkbox,
.deen-ccp-item-check input:focus-visible ~ .deen-ccp-checkbox {
    outline: 2px solid #2b2b2b;
    outline-offset: 2px;
}

.deen-ccp-bulk-delete {
    padding: 9px 26px;
    border: none;
    border-radius: 0px;
    background: #2b2b2b;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity .15s;
}

.deen-ccp-bulk-delete:hover { opacity: .85; }

/* ── Item list ────────────────────────────────────────────────────────────── */

.deen-ccp-items {
    padding: 4px 20px;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 0px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

/* Item rows and the column-label row above them share one grid template —
   built in PHP from the same has-check/has-thumb flags — so the "Count" and
   "Price" labels line up exactly over their columns regardless of which
   optional columns (checkbox, thumbnail) are on. */
.deen-ccp-item,
.deen-ccp-items-head-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px 90px 28px;
    align-items: center;
    gap: 16px;
}

.deen-ccp-item.has-check,
.deen-ccp-items-head-row.has-check {
    grid-template-columns: 18px minmax(0, 1fr) 116px 90px 28px;
}

.deen-ccp-item.has-thumb,
.deen-ccp-items-head-row.has-thumb {
    grid-template-columns: 74px minmax(0, 1fr) 116px 90px 28px;
}

.deen-ccp-item.has-check.has-thumb,
.deen-ccp-items-head-row.has-check.has-thumb {
    grid-template-columns: 18px 74px minmax(0, 1fr) 116px 90px 28px;
}

.deen-ccp-items-head {
    flex-shrink: 0;
    padding-top: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ececef;
}

.deen-ccp-col-label {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #8a8f98;
}

.deen-ccp-col-count { justify-self: center; }
.deen-ccp-col-price { justify-self: end; }

.deen-ccp-col-total {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.deen-ccp-item {
    padding: 20px 0;
    border-bottom: 1px solid #ececef;
}

.deen-ccp-item:last-child { border-bottom: none; }

.deen-ccp-item-check { align-self: center; }

.deen-ccp-item-thumb {
    width: 74px;
    border-radius: 0px;
    overflow: hidden;
    background: #f7f7f8;
}

.deen-ccp-item-thumb img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.deen-ccp-item-info {
    min-width: 0;
}

.deen-ccp-item-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    color: #101828;
}

.deen-ccp-item-name a {
    color: inherit;
    text-decoration: none;
}

.deen-ccp-item-name a:hover { text-decoration: underline; }

.deen-ccp-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #e5372e;
    border-radius: 0px;
    cursor: pointer;
    transition: background .15s;
}

.deen-ccp-remove:hover { background: rgba(229, 55, 46, .09); }

.deen-ccp-item-meta {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #8a8f98;
}

/* WooCommerce renders variation data as <dl><dt>Size:</dt><dd><p>Small</p></dd>.
   Collapse each pair onto one line, then break after the value. */
.deen-ccp-item-meta dl,
.deen-ccp-item-meta dt,
.deen-ccp-item-meta dd,
.deen-ccp-item-meta p {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.deen-ccp-item-meta dt {
    display: inline;
    font-weight: 400;
}

.deen-ccp-item-meta dt::after { content: " "; }

.deen-ccp-item-meta dd,
.deen-ccp-item-meta dd p {
    display: inline;
}

/* Ends the line after the value without relying on a <br> in WooCommerce's markup. */
.deen-ccp-item-meta dd::after {
    content: "";
    display: block;
}

.deen-ccp-item-sku {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #8a8f98;
    word-break: break-all;
}

.deen-ccp-item-sku-label {
    margin-right: 3px;
}

.deen-ccp-item-count { justify-self: center; }

.deen-ccp-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    text-align: right;
}

.deen-ccp-item-price-total {
    font-size: 15px;
    font-weight: 600;
    color: #101828;
}

.deen-ccp-item-price-unit {
    margin-top: 2px;
    font-size: 12px;
    color: #8a8f98;
}

.deen-ccp-item-price del {
    margin-right: 5px;
    font-weight: 400;
    color: #8a8f98;
}

.deen-ccp-qty-single {
    font-size: 13px;
    color: #8a8f98;
}

/* ── Quantity stepper ─────────────────────────────────────────────────────── */

/* Segments sit flush (no gap/padding) inside a clipped wrapper — `overflow:
   hidden` on a border-radius:0 box guarantees a square outline no matter
   what radius a theme (Astra's global button-radius customizer, in this
   case) tries to force onto the button/input elements inside it. Divider
   lines between segments are drawn with box-shadow, not extra borders, so
   nothing pokes past that clip. */
.deen-ccp-qty {
    display: inline-flex;
    align-items: center !important;
    align-items: stretch;
    border-radius: 0 !important;
    overflow: hidden;
    background: #f1f1f1;
}

.deen-ccp-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 35.5px;
    padding: 0;
    border: none;
    border-radius: 0 !important;
    background: transparent;
    color: #000;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.deen-ccp-qty-btn:hover { background: #000; }

.deen-ccp-qty-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: transparent;
}

.deen-ccp-qty-input {
    width: 32px;
    height: 35.5px;
    padding: 10px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f1f1f1 !important;
    color: #101828;
    font-size: 13px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.deen-ccp-qty-input::-webkit-outer-spin-button,
.deen-ccp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.deen-ccp-qty-input:focus {
    outline: none;
    box-shadow: none;
}

/* ── Promotional banner ───────────────────────────────────────────────────── */

/* Lives in .deen-ccp-main, under the item list — part of the left column's
   normal document flow, not the sticky right-hand summary. */
.deen-ccp-banner {
    margin-top: 20px;
    border-radius: 0px;
    overflow: hidden;
}

.deen-ccp-banner a {
    display: block;
}

.deen-ccp-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Order summary ────────────────────────────────────────────────────────── */

.deen-ccp-summary {
    padding: 20px;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 0px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.deen-ccp-summary-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #101828;
}

.deen-ccp-coupon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 12px;
    margin-bottom: 18px;
    border: 1px solid #ececef;
    border-radius: 0px;
    background: #fff;
}

.deen-ccp-coupon-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #8a8f98;
}

.deen-ccp-coupon-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: #101828;
    font-size: 13.5px;
}

.deen-ccp-coupon-input:focus {
    outline: none;
    box-shadow: none;
}

.deen-ccp-coupon-apply {
    flex-shrink: 0;
    padding: 7px 20px;
    border: none;
    border-radius: 0px;
    background: #2b2b2b;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity .15s;
}

.deen-ccp-coupon-apply:hover { opacity: .85; }

.deen-ccp-coupon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 16px;
    padding: 0;
    list-style: none;
}

.deen-ccp-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 0px;
    background: #f7f7f8;
    font-size: 12px;
    color: #101828;
}

.deen-ccp-coupon-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 0px;
    background: transparent;
    color: #8a8f98;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.deen-ccp-coupon-remove:hover { color: #e5372e; }

.deen-ccp-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-size: 13.5px;
}

.deen-ccp-row-label { color: #8a8f98; }

.deen-ccp-row-value {
    font-weight: 500;
    color: #101828;
    text-align: right;
    white-space: nowrap;
}

.deen-ccp-row.is-discount .deen-ccp-row-value {
    color: #e5372e;
}

.deen-ccp-total {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #ececef;
    font-size: 16px;
}

.deen-ccp-total .deen-ccp-row-label {
    color: #101828;
    font-weight: 600;
}

.deen-ccp-total .deen-ccp-row-value {
    font-size: 19px;
    font-weight: 700;
}

.deen-ccp-checkout-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    border: none;
    border-radius: 0px;
    background: #2b2b2b;
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}

.deen-ccp-checkout-btn:hover,
.deen-ccp-checkout-btn:focus {
    opacity: .88;
    color: #fff;
}

.deen-ccp-continue-link {
    display: block;
    margin-top: 12px;
    color: #8a8f98;
    font-size: 13.5px;
    text-align: center;
    text-decoration: none;
}

.deen-ccp-continue-link:hover {
    color: #101828;
    text-decoration: underline;
}

/* ── Busy state ───────────────────────────────────────────────────────────── */

.deen-ccp-items.is-loading,
.deen-ccp-summary.is-loading {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s;
}

/* ── Empty cart ───────────────────────────────────────────────────────────── */

.deen-ccp-empty {
    max-width: 460px;
    margin: 0 auto;
    padding: 56px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 0px;
}

.deen-ccp-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    border-radius: 0px;
    background: #f7f7f8;
    color: #8a8f98;
}

.deen-ccp-empty-heading {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #101828;
}

.deen-ccp-empty-text {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.6;
    color: #8a8f98;
}

.deen-ccp-empty-btn {
    display: inline-block;
    width: auto;
    margin-top: 0;
    padding: 13px 32px;
}

.deen-ccp-empty-inline {
    padding: 40px 0;
    text-align: center;
    color: #8a8f98;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .deen-ccp-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 900px) {
    .deen-ccp-layout { grid-template-columns: minmax(0, 1fr); }
    .deen-ccp-summary-wrap { position: static; }
}

@media (max-width: 560px) {
    .deen-ccp { padding: 0; }

    .deen-ccp-steps {
        gap: 14px;
        margin-bottom: 32px;
    }

    .deen-ccp-step { font-size: 12.5px; }
    .deen-ccp-step-num { width: 24px; height: 24px; font-size: 12px; }

    .deen-ccp-items { padding: 4px 14px; }

    /* Column labels only make sense over a grid; drop them once rows stack. */
    .deen-ccp-items-head { display: none; }

    .deen-ccp-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        position: relative;
        padding-right: 36px;
    }

    .deen-ccp-item-check { order: 1; }
    .deen-ccp-item-thumb { order: 2; width: 60px; }
    .deen-ccp-item-info { order: 3; flex: 1 1 160px; min-width: 0; }
    .deen-ccp-item-count { order: 4; }
    .deen-ccp-item-price { order: 5; margin-left: auto; }

    .deen-ccp-remove {
        order: 6;
        position: absolute;
        top: 20px;
        right: 0;
    }
}