#woo-cart-panel {
    --dn-tanc-cart-panel-pad: var(--panel-padding, 35px);
    --dn-tanc-cart-thumb-size: 92px;
    --dn-tanc-cart-row-gap: 18px;
    --dn-tanc-cart-divider: #e8e8e8;
}

#woo-cart-panel .ct-panel-actions {
    align-items: center;
    justify-content: space-between;
}

#woo-cart-panel .ct-panel-heading {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
}

#woo-cart-panel .ct-panel-content-inner {
    --horizontal-alignment: stretch;
    align-items: stretch;
    overflow-y: auto;
}

#woo-cart-panel .woocommerce-mini-cart {
    /* Fill the free height between the heading and the totals/slider so the item
       list occupies the full upper area (items pinned to the top), instead of
       leaving a gap when the cart is short / the viewport is tall. flex-basis:0
       (not auto) so the list takes the remaining space rather than its own tall
       content height — otherwise the flex algorithm shrinks it to a sliver. */
    flex: 1 1 0;
    min-height: 120px;
    margin: 0 calc(var(--dn-tanc-cart-panel-pad) * -1) 24px;
    padding: 6px calc(var(--dn-tanc-cart-panel-pad) + 10px) 18px var(--dn-tanc-cart-panel-pad);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: auto;
}

#woo-cart-panel .woocommerce-mini-cart::-webkit-scrollbar {
    width: 6px;
}

#woo-cart-panel .woocommerce-mini-cart::-webkit-scrollbar-track {
    background: transparent;
}

#woo-cart-panel .woocommerce-mini-cart::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 20%, transparent);
}

#woo-cart-panel .woocommerce-mini-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--dn-tanc-cart-thumb-size) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    padding-bottom: var(--dn-tanc-cart-row-gap);
    border-bottom: 1px solid var(--dn-tanc-cart-divider, #e8e8e8);
}

/* The last (or only) cart item needs no divider under it. */
#woo-cart-panel .woocommerce-mini-cart .woocommerce-mini-cart-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

#woo-cart-panel .woocommerce-mini-cart-item > a:not(.remove) {
    grid-column: 1;
    grid-row: 1;
    /* Pin the thumbnail (and its quantity badge) to the top of the row — the row
       can be taller than the thumbnail once the personalize accordion is present,
       and align-items:center would otherwise float the badge above the image. */
    align-self: start;
    width: var(--dn-tanc-cart-thumb-size);
    height: var(--dn-tanc-cart-thumb-size);
    display: block;
    overflow: visible;
    /* Unified cart thumbnail rounding (matches checkout + suggested slider). */
    border-radius: 15px;
}

#woo-cart-panel .woocommerce-mini-cart-item > a:not(.remove) .ct-media-container,
#woo-cart-panel .woocommerce-mini-cart-item > a:not(.remove) img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

#woo-cart-panel .woocommerce-mini-cart-item > a:not(.remove) .ct-media-container {
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Gift-card indicator badge on the mini-cart (drawer) thumbnail — circular,
   top-right corner. No quantity badge here (per the Figma cart). */
#woo-cart-panel .ct-media-container .dn-tanc-gc-thumb-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106 106' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M53 88C50.3332 88 33 75.6666 33 63C33 57.4815 37.4815 53 43 53C51 53 53 61 53 61C53 61 55 53 63 53C68.5201 53 73 57.4815 73 63C73 75.6666 55.6668 88 53 88Z'/%3E%3Cpath d='M103 29.6665C103 27.8982 102.298 26.2032 101.048 24.9532C99.7983 23.7016 98.1017 22.9999 96.3332 22.9999H9.66681C7.9 22.9999 6.20332 23.7016 4.95332 24.9532C3.70332 26.2032 3 27.8982 3 29.6665V32.9999C3 34.7682 3.70332 36.4632 4.95332 37.7132C6.20332 38.9648 7.9 39.6665 9.66681 39.6665H96.3332C98.1017 39.6665 99.7983 38.9648 101.048 37.7132C102.298 36.4632 103 34.7682 103 32.9999V29.6665Z'/%3E%3Cpath d='M96.3324 39.6666H9.66602V96.3332C9.66602 100.015 12.6507 103 16.3324 103H89.6658C93.3492 103 96.3324 100.015 96.3324 96.3332V39.6666Z'/%3E%3Cpath d='M53.0014 23.0001H29.668C24.1497 23.0001 19.668 18.5184 19.668 13.0001C19.668 7.48186 24.1497 3.00012 29.668 3.00012C43.0014 3.00012 53.0014 23.0001 53.0014 23.0001Z'/%3E%3Cpath d='M53 23H76.3334C81.8533 23 86.3334 18.5183 86.3334 13C86.3334 7.48174 81.8533 3 76.3334 3C63 3 53 23 53 23Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

/* Hide any stale inline <svg> left in the badge by a cached mini-cart fragment
   — the glyph is painted via background-image now, so an inline one would
   double-stack (seen when the browser still holds the pre-1.6.253 fragment). */
#woo-cart-panel .dn-tanc-gc-thumb-badge svg {
    display: none !important;
}

#woo-cart-panel .woocommerce-mini-cart-item .product-data {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#woo-cart-panel .woocommerce-mini-cart-item .product-title {
    min-width: 0;
    padding-right: 30px;
    color: var(--theme-link-initial-color, inherit);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
}

#woo-cart-panel .woocommerce-mini-cart-item .product-title:hover {
    color: var(--theme-link-hover-color, var(--theme-link-initial-color, inherit));
}

#woo-cart-panel .woocommerce-mini-cart-item .variation,
#woo-cart-panel .woocommerce-mini-cart-item .wc-item-meta {
    grid-column: 1;
    grid-row: 2;
    display: block;
    margin: 0;
    padding: 0;
    color: var(--theme-text-color, inherit);
    font-size: 13px;
    line-height: 1.35;
    list-style: none;
}

#woo-cart-panel .woocommerce-mini-cart-item .variation dt,
#woo-cart-panel .woocommerce-mini-cart-item .wc-item-meta-label {
    display: inline;
    float: none;
    clear: none;
    margin: 0 4px 0 0;
    padding: 0;
    font-weight: 400;
}

#woo-cart-panel .woocommerce-mini-cart-item .variation dd,
#woo-cart-panel .woocommerce-mini-cart-item .variation dd p,
#woo-cart-panel .woocommerce-mini-cart-item .wc-item-meta p {
    display: inline;
    float: none;
    clear: none;
    margin: 0;
    padding: 0;
}

#woo-cart-panel .woocommerce-mini-cart-item .variation dd::after,
#woo-cart-panel .woocommerce-mini-cart-item .wc-item-meta p::after {
    content: "";
    display: block;
}

/* Quantity stepper + price share the bottom row of the content column. */
#woo-cart-panel .woocommerce-mini-cart-item .ct-product-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

#woo-cart-panel .woocommerce-mini-cart-item .ct-product-multiply-symbol {
    display: none;
}

#woo-cart-panel .woocommerce-mini-cart-item .ct-product-actions .woocommerce-Price-amount {
    margin-left: auto;
    color: var(--theme-text-color, inherit);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

/* Remove -> trash icon. JS moves it into .product-data so it pins to the
   top-right of the content column: level with the title row and flush to the
   same right edge as the price below. */
#woo-cart-panel .woocommerce-mini-cart-item .remove.remove_from_cart_button {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #111;
    opacity: 0.75;
    background: transparent;
    border: 0;
    text-decoration: none;
}

#woo-cart-panel .woocommerce-mini-cart-item .remove.remove_from_cart_button:hover,
#woo-cart-panel .woocommerce-mini-cart-item .remove.remove_from_cart_button:focus-visible {
    opacity: 1;
}

#woo-cart-panel .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 18px;
    color: var(--theme-text-color, inherit);
    font-size: 15px;
    line-height: 1.35;
}

#woo-cart-panel .woocommerce-mini-cart__total strong {
    font-weight: 500;
}

#woo-cart-panel .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0px 0 10px;
}

#woo-cart-panel .woocommerce-mini-cart__buttons .button {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--theme-palette-color-3, #0f0f0f) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    transition: background 0.18s ease;
}

#woo-cart-panel .woocommerce-mini-cart__buttons .button:hover,
#woo-cart-panel .woocommerce-mini-cart__buttons .button:focus-visible {
    background: var(--theme-palette-color-1, #00bbd4) !important;
    color: #fff !important;
}

/* Proceed To Checkout sits above Continue Shopping (DOM order is View cart, Checkout). */
#woo-cart-panel .woocommerce-mini-cart__buttons .button.checkout {
    order: 0;
}

#woo-cart-panel .woocommerce-mini-cart__buttons .button:not(.checkout) {
    order: 1;
}

@media (max-width: 480px) {
    #woo-cart-panel {
        --dn-tanc-cart-thumb-size: 82px;
    }

    #woo-cart-panel .woocommerce-mini-cart-item {
        column-gap: 14px;
    }
}

/* ============ "You May Also Like" (suggested products) redesign ============ */

/* Push the suggested slider to the very bottom of the drawer (below totals +
   checkout buttons) and let it bleed full-width behind a grey backdrop. */
#woo-cart-panel .ct-panel-content-inner > .ct-suggested-products--mini-cart {
    order: 10;
    margin: 10px calc(var(--dn-tanc-cart-panel-pad) * -1) calc(var(--dn-tanc-cart-panel-pad) * -1);
    padding: 24px var(--dn-tanc-cart-panel-pad) 30px;
    background: #eaeaea;
}

#woo-cart-panel .ct-suggested-products--mini-cart .ct-module-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    color: #111;
    font-size: 18px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Slider prev/next -> circular buttons. Shared by the cart drawer slider
   (--mini-cart) and the checkout order-review slider (--checkout). */
#woo-cart-panel .ct-suggested-products--mini-cart .ct-slider-arrows,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .ct-slider-arrows {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
}

#woo-cart-panel .ct-suggested-products--mini-cart .ct-arrow-prev,
#woo-cart-panel .ct-suggested-products--mini-cart .ct-arrow-next,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .ct-arrow-prev,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .ct-arrow-next {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #111;
    border-radius: 50%;
    background: transparent;
    color: #111;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

#woo-cart-panel .ct-suggested-products--mini-cart .ct-arrow-prev:hover,
#woo-cart-panel .ct-suggested-products--mini-cart .ct-arrow-next:hover,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .ct-arrow-prev:hover,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .ct-arrow-next:hover {
    background: #111;
    color: #fff;
}

#woo-cart-panel .ct-suggested-products--mini-cart .ct-arrow-prev svg,
#woo-cart-panel .ct-suggested-products--mini-cart .ct-arrow-next svg,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .ct-arrow-prev svg,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .ct-arrow-next svg {
    width: 9px;
    height: 9px;
}

/* Each product card -> white rounded panel with inner padding. (The checkout
   slider card gets the same 25px/10px from blocksy-suggested-products.css, which
   also handles its horizontal layout.) */
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-item {
    box-sizing: border-box;
    padding: 25px;
    background: #fff;
    /* Breathing room between slides. The track gap has to stay 0 (see below), so
       the space is carved out of the slide itself with a transparent border: the
       slide box keeps its exact width, leaving Blocksy's paging maths untouched,
       while the white card is inset 8px a side — 16px of air between two cards.
       `background-clip` keeps the white off the transparent border, and the outer
       radius is the visible 10px plus that border. */
    border: 8px solid transparent;
    background-clip: padding-box;
    border-radius: 18px;
}

/* Suggested card thumbnail — unified 15px rounding across all cart thumbnails. */
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-item .ct-media-container,
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-item .ct-media-container img {
    border-radius: 15px;
}

/* Blocksy's flexy track pulls itself outward with a negative margin
   (`margin-inline: calc(var(--flexy-items-gap) / -2)`), which clips the padded
   white card against the overflow-hidden viewport (cut on both sides). Zero the
   gap so the single visible card fills the viewport without being cropped. */
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-items,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .flexy-items {
    --flexy-items-gap: 0px;
}

/* Custom trash icon sizing */
#woo-cart-panel .woocommerce-mini-cart-item > .remove .dn-tanc-trash-icon {
    display: block;
    width: 15px;
    height: 19px;
}

/* Slider pagination dots (built in JS) */
#woo-cart-panel .ct-suggested-products--mini-cart .dn-tanc-flexy-dots,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .dn-tanc-flexy-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

#woo-cart-panel .ct-suggested-products--mini-cart .dn-tanc-flexy-dot,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .dn-tanc-flexy-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c4c4c4;
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

#woo-cart-panel .ct-suggested-products--mini-cart .dn-tanc-flexy-dot.is-active,
body.dn-tanc-checkout-active .ct-suggested-products--checkout .dn-tanc-flexy-dot.is-active {
    width: 22px;
    background: #111;
}

/* Quantity stepper -> horizontal "− 1 +" box matching the design */
#woo-cart-panel .ct-product-actions .quantity {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    background: #fff;
    border: 1px solid #111;
    border-radius: 8px;
    overflow: hidden;
}

#woo-cart-panel .ct-product-actions .quantity .ct-increase,
#woo-cart-panel .ct-product-actions .quantity .ct-decrease {
    position: static;
    inset: auto;
    width: 32px;
    height: 100%;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #111;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 0;
}

#woo-cart-panel .ct-product-actions .quantity .ct-decrease {
    order: 0;
}

#woo-cart-panel .ct-product-actions .quantity .ct-increase {
    order: 2;
}

#woo-cart-panel .ct-product-actions .quantity .ct-decrease::before,
#woo-cart-panel .ct-product-actions .quantity .ct-increase::before {
    content: "";
    display: block;
    width: 11px;
    height: 1.5px;
    background: #111;
    border: 0;
    transform: none;
}

#woo-cart-panel .ct-product-actions .quantity .ct-increase::after {
    content: "";
    position: absolute;
    width: 1.5px;
    height: 11px;
    background: #111;
}

#woo-cart-panel .ct-product-actions .quantity input.qty {
    order: 1;
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Hide the native number spinners so only the − / + buttons drive quantity. */
#woo-cart-panel .ct-product-actions .quantity input.qty::-webkit-outer-spin-button,
#woo-cart-panel .ct-product-actions .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============ Personalize add-ons accordion (built in JS from PHP payload) ==== */

/* Spans the full item width, sitting below the thumbnail + product row. */
#woo-cart-panel .woocommerce-mini-cart-item .dn-tanc-cart-addons {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--dn-tanc-cart-divider, #e8e8e8);
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon + .dn-tanc-cart-addon {
    border-top: 1px solid #f0f0f0;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__toggle {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__caret {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(135deg);
    transition: transform 0.2s ease;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon.is-collapsed .dn-tanc-cart-addon__caret {
    transform: rotate(-45deg);
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__price {
    flex: 0 0 auto;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__remove {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #111;
    opacity: 0.75;
    cursor: pointer;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__remove:hover,
:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__remove:focus-visible {
    opacity: 1;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__remove .dn-tanc-trash-icon {
    display: block;
    width: 13px;
    height: 16px;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 0 9px 16px;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon.is-collapsed .dn-tanc-cart-addon__body {
    display: none;
}

:is(#woo-cart-panel, body.dn-tanc-checkout-active) .dn-tanc-cart-addon__detail {
    color: #555;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}