:root {
      --primary: var(--wd-primary-color, var(--e-global-color-primary, #ff6a00));
      --secondary: var(--wd-alternative-color, var(--e-global-color-secondary, #f3ecd9));
      --text: var(--wd-text-color, var(--e-global-color-text, #374151));
      --title: var(--wd-title-color, var(--e-global-color-heading, #111));
      --border-color: var(--brdcolor-gray-300, #e5e7eb);
      --primary-light: color-mix(in srgb, var(--primary) 12%, #fff);
      --green-rgb: 107,142,35;
    }

    .df-offer-banner { position: relative; display: flex; align-items: stretch; background: var(--df-ob-bg, #111); color: var(--df-ob-text, #fff); overflow: hidden; }
    .df-offer-banner.is-dismissed { display: none !important; }
    .df-offer-banner-inner { flex: 1; min-width: 0; overflow: hidden; padding: 10px 40px 10px 14px; display: flex; align-items: center; }
    .df-offer-banner-track { width: 100%; }
    .df-offer-banner-msg { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; width: 100%; color: inherit; }
    .df-offer-banner-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
    .df-offer-banner-text { color: inherit; }
    .df-offer-banner-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
    .df-offer-banner-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 28px; height: 28px; min-width: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: inherit; opacity: 0.75; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
    .df-offer-banner-close:hover, .df-offer-banner-close:focus { opacity: 1; }

    .df-offer-scroll .df-offer-banner-inner { padding-left: 0; }
    .df-offer-scroll .df-offer-banner-msg { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; width: max-content; animation: df-offer-marquee 14s linear infinite; padding-left: 100%; }
    .df-offer-scroll:hover .df-offer-banner-msg { animation-play-state: paused; }
    @keyframes df-offer-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
    @media (prefers-reduced-motion: reduce) {
      .df-offer-scroll .df-offer-banner-msg { animation: none; padding-left: 0; white-space: normal; }
    }

    @media (max-width: 480px) {
      .df-offer-banner-inner { padding: 9px 36px 9px 10px; }
      .df-offer-banner-msg { font-size: 12px; gap: 5px; }
      .df-offer-banner-close { right: 4px; width: 26px; height: 26px; }
    }

    .df-sale-banner { margin-top: 4px; border-radius: 14px; overflow: hidden; background: var(--df-sb-bg, #f7f6f2); }
    .df-sale-banner-link { display: block; text-decoration: none; }
    .df-sale-banner-img { display: block; width: 100%; height: auto; }
    .df-sale-banner-caption { display: block; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--title); text-align: center; }

    .cart-widget-side { width: 420px !important; max-width: 95vw; right: 0; box-shadow: -10px 0 30px rgba(0,0,0,0.08); }
    @media (min-width: 1024px) { .cart-widget-side { width: 460px !important; } }
    .cart-widget-side .widget_shopping_cart_content { padding: 12px !important; }
    .cart-widget-side .widgettitle { padding: 12px !important; margin: 0; font-size: 16px !important; }
    .woocommerce-mini-cart-item { padding: 8px 0 !important; border-bottom: 1px solid #f1f1f1; display: flex; gap: 8px !important; align-items: center; }
    .woocommerce-mini-cart-item img { width: 70px !important; border-radius: 8px; }
    .woocommerce-mini-cart__total { margin: 0 !important; padding: 0px 0 !important; font-size: 16px; }
    .woocommerce-mini-cart__buttons { margin: 0 !important; padding: 4px 0 10px !important; }
    .woocommerce-mini-cart__buttons .checkout { height: 48px; border-radius: 10px; font-size: 15px; font-weight: 600; }
    .woocommerce-mini-cart__buttons a:not(.checkout) { margin-bottom: 0px; display: block; }

    @media (max-width: 768px) {
      .cart-widget-side { width: 100% !important; max-width: 100% !important; right: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; height: 100vh; transform: translateX(0); }
      .cart-widget-side .widget_shopping_cart_content { padding: 16px !important; }
      .cart-widget-side .widgettitle { padding: 16px !important; }
      .woocommerce-mini-cart__total { display: none; padding: 0px 0 !important; font-size: 15px !important; }
      .woocommerce-mini-cart__buttons a:not(.checkout) { display: none !important; }
      .woocommerce-mini-cart-item { padding: 10px 0 !important; gap: 10px !important; align-items: flex-start !important; }
      .woocommerce-mini-cart-item img { width: 58px !important; min-width: 58px !important; border-radius: 8px; }
      .woocommerce-mini-cart-item .mini_cart_item,
      .woocommerce-mini-cart-item .product-title,
      .woocommerce-mini-cart-item .cart-item-link,
      .woocommerce-mini-cart-item a:not(.remove) { font-size: 14px !important; line-height: 1.35 !important; }
      .woocommerce-mini-cart-item .quantity { font-size: 12px !important; margin-top: 6px !important; }
      .woocommerce-mini-cart-item .quantity .minus,
      .woocommerce-mini-cart-item .quantity .plus,
      .woocommerce-mini-cart-item .quantity input.qty { height: 34px !important; min-height: 34px !important; width: 34px !important; font-size: 18px !important; line-height: 34px !important; padding: 0 !important; }
      .woocommerce-mini-cart-item input.qty { width: 42px !important; font-size: 16px !important; }
      .woocommerce-mini-cart-item .amount,
      .woocommerce-mini-cart-item .woocommerce-Price-amount { font-size: 13px !important; }
      .woocommerce-mini-cart-item .remove { font-size: 20px !important; top: 6px !important; right: 0 !important; }
      .woocommerce-mini-cart__buttons { padding: 6px 0 14px !important; }
      .woocommerce-mini-cart__buttons .checkout { width: 100%; height: 54px; font-size: 14px !important; border-radius: var(--df-btn-radius, 14px) !important; }

      /* Larger, thumb-friendly tap targets */
      .df-qty { height: 34px; }
      .df-qty button { width: 34px !important; height: 34px; font-size: 16px; }
      .df-num { min-width: 32px; font-size: 15px; }
      .df-delete { height: 34px !important; width: 34px !important; min-height: 34px !important; max-height: 34px !important; }
      .df-delete-icon { height: 16px !important; width: 16px !important; }
      .apply-manual { width: 36px; height: 36px; }
      .remove-coupon { padding: 6px; font-size: 18px; }
      .df-coupon-toggle { padding: 12px 10px; }
      .df-cross-tab { padding: 4px 0 6px; }

      /* Keep milestone labels from colliding on narrow phones */
      .df-ms-offer { font-size: 10px; width: 76px; }
      .df-ms-price { font-size: 12px; }
      .df-ms-track { margin-right: 16px; }

      /* Respect notch/home-indicator safe areas on the full-screen drawer */
      .cart-widget-side { padding-bottom: env(safe-area-inset-bottom) !important; }
      .woocommerce-mini-cart__buttons { padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important; }
    }

    @media (max-width: 380px) {
      .df-empty-cart-premium { padding: 44px 14px 28px; }
      .df-empty-cart-icon { font-size: 40px; }
      .df-empty-cart-premium h2 { font-size: 22px; margin-top: 14px; }
      .df-empty-cart-premium p { font-size: 13px; }
      .df-empty-shop-btn { height: 46px; padding: 0 18px; font-size: 14px; }

      .df-ms-msg { font-size: 12px; padding: 7px; }
      .df-ms-offer { width: 66px; font-size: 9px; }
      .df-ms-price { font-size: 11px; }
      .df-ms-icon { width: 28px; height: 28px; }

      .df-img { width: 66px; height: 66px; min-height: 66px; }
      .df-img img { max-width: 66px; max-height: 66px; }
      .df-title { font-size: 12px; }
      .df-final { font-size: 13px; }

      .df-coupon-input.single { height: 48px; padding: 0 12px; }
      .df-coupon-input.single .coupon-field, .df-coupon-input.single .coupon-field::placeholder { font-size: 15px; }

      .df-summary-head .price, .df-summary-head .price * { font-size: 14px; }
      .woocommerce-mini-cart__buttons .checkout { padding-right: 100px !important; }
      .woocommerce-mini-cart__buttons .checkout::after { width: 96px; }
    }

    /* Landscape phones: the drawer is full height, so trim vertical padding */
    @media (max-width: 900px) and (orientation: landscape) {
      .df-empty-cart-premium { padding: 24px 20px; }
      .df-ms { padding-bottom: 10px; }
      .df-ms-msg { margin-bottom: 30px; }
    }

    .woocommerce-mini-cart { margin-bottom: 8px !important; }
    .woocommerce-mini-cart-item .product-thumbnail span,
    .woocommerce-mini-cart-item .wd-product-img span { display: none !important; }
    .widget_shopping_cart .cart_list li { display: none !important; }
    .widget_shopping_cart_content .woocommerce-mini-cart__empty-message,
    .widget_shopping_cart_content .wd-empty-mini-cart,
    .widget_shopping_cart_content .wd-empty-cart,
    .widget_shopping_cart_content .cart-empty,
    .widget_shopping_cart_content .return-to-shop,
    .widget_shopping_cart_content .empty-cart-icon,
    .widget_shopping_cart_content .wd-empty-page,
    .cart-widget-side .wd-empty-mini-cart,
    .cart-widget-side .wd-empty-cart,
    .cart-widget-side .woocommerce-mini-cart__empty-message,
    .cart-widget-side .cart-empty,
    .cart-widget-side .return-to-shop,
    .cart-widget-side .empty-cart-icon,
    .cart-widget-side .wd-empty-page { display: none !important; }

    .woocommerce-mini-cart,
    .widget_shopping_cart { display: flex; flex-direction: column; height: 100%; }
    .shopping-cart-widget-body,
    .wd-scroll-content { display: flex; flex-direction: column; flex: 1; }
    .shopping-cart-widget-footer { position: relative !important; padding-left: var(--cart-padding) !important; padding-right: var(--cart-padding) !important; gap: 0 !important; }
    .shopping-cart-widget-footer > * { margin-bottom: 0 !important; }

    .df-ms { position: relative; background: #fff; padding: 0 16px 16px; margin-bottom: 0 !important; }
    .df-ms-msg { text-align: center; font-size: 13px; font-weight: 500; margin-top: 0 !important; padding: 8px; background: var(--primary); color: #fff; border-radius: 8px; margin: 0 -16px 46px; }
    .df-ms-msg strong { color: #fff; }
    .df-ms-track { position: relative; height: 5px; background: #eee; border-radius: 10px; margin: 0 16px; margin-left: 0 !important; }
    .df-ms-fill { height: 100%; background: var(--primary); border-radius: 10px; transition: .4s; }
    .df-ms-node { position: absolute; top: 50%; transform: translate(-50%,-50%); }
    .df-ms-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; padding: 6px; box-sizing: border-box; background: #fff; border: 1.5px solid #e5e7eb; transition: all .25s ease; }
    .df-ms-ico-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; filter: grayscale(1); opacity: 0.7; }
    .df-ms-node.is-done .df-ms-icon { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
    .df-ms-node.is-done .df-ms-ico-img { filter: brightness(0) invert(1); opacity: 1; }
    .df-ms-node.is-next .df-ms-icon { background: var(--primary-light); border: 1px solid var(--primary); transform: scale(1.12); box-shadow: 0 4px 10px rgba(var(--green-rgb),0.25), 0 0 0 2px rgba(var(--green-rgb),0.12); animation: df-float 1.6s ease-in-out infinite; }
    .df-ms-node.is-next .df-ms-ico-img { filter: none; opacity: 1; color: var(--primary); }
    .df-ms-node.is-latest .df-ms-icon { box-shadow: 0 6px 14px rgba(var(--green-rgb),0.35), 0 0 0 3px rgba(var(--green-rgb),0.15); transform: scale(1.08); }
    @keyframes df-smart-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1.08); } }
    .df-ms-icon.df-animate { animation: df-smart-pop 0.4s ease; }
    @keyframes df-float { 0% { transform: translateY(0) scale(1.12); } 50% { transform: translateY(-3px) scale(1.12); } 100% { transform: translateY(0) scale(1.12); } }
    .df-ms-node.is-done svg { stroke: #fff !important; color: #fff !important; }
    .df-ms-labels { position: relative; margin: 24px 16px 10px 0; height: auto; }
    .df-ms-label { position: absolute; left: 0; transform: translateX(-50%); pointer-events: none; }
    .df-ms-price { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: #111; white-space: nowrap; }
    .df-ms-offer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 11px; color: #6b7280; width: 90px; text-align: center; line-height: 1.3; white-space: normal !important; }
    .df-ms-label.is-done .df-ms-offer { color: var(--primary); font-weight: 600; }
    .df-ms-label.is-next .df-ms-price { color: var(--primary); }
    .df-ms-label:last-child .df-ms-offer { width: 100px; }

    .df-cart-flow { display: flex; flex-direction: column; gap: 10px; padding: 0 10px; }
    .df-cart-ui { display: flex !important; flex-direction: column; gap: 12px; margin-top: 16px !important; flex: 1; overflow-y: auto; visibility: visible !important; opacity: 1 !important; }
    .df-cart-ui::before { content: ""; display: block; width: calc(100% - 20px); margin: 0 auto 0px; height: 1px; background: rgba(0,0,0,0.08); }
    .df-cart-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 12px !important; background: #f3f4f6; border: 1px solid #f1f5f9; }
    .df-img { width: 80px; height: 80px; min-height: 80px; border-radius: 16px; background: #fff; border: 1px solid #e5e7eb; align-self: flex-start; display: flex; align-items: center; justify-content: center; }
    .df-img img { max-width: 80px; max-height: 80px; object-fit: cover; border-radius: 12px; }
    .df-mid { flex: 1; display: flex; align-self: flex-start; flex-direction: column; justify-content: flex-start; gap: 2px; }
    .df-title { font-size: 12px; font-weight: 500; color: #111; }
    .df-sub { font-size: 12px; color: #9ca3af; margin-top: 1px; }
    .df-actions { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
    .df-delete { height: 28px !important; width: 28px !important; min-height: 28px !important; max-height: 28px !important; border-radius: min(var(--df-btn-radius, 14px), 8px); border: 1px solid var(--df-btn-bg, #e5e7eb); background: var(--df-btn-bg, #e5e7eb); display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; }
    .df-delete-icon { display: block; width: 14px; height: 14px; background-color: var(--df-btn-text, #374151); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
    .df-qty { display: inline-flex; align-items: center; height: 28px; border-radius: min(var(--df-btn-radius, 14px), 8px); border: 1px solid #e5e7eb; background: #fff; overflow: hidden; }
    .df-qty button { width: 20px !important; height: 28px; padding: 0 6px; border: none; background: #f9fafb; font-size: 13px; color: var(--df-icon-color, #374151); display: flex; align-items: center; justify-content: center; }
    .df-num { min-width: 28px; text-align: center; padding: 0 6px; font-size: 14px; font-weight: 500; }
    .df-price-box { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-start; margin-top: 0; margin-left: auto; }
    .df-final { font-size: 14px; font-weight: 500 !important; color: #111 !important; }
    .df-cut { font-size: 12px; font-weight: 400; color: #9ca3af; text-decoration: line-through; margin-top: 1px; }
    .df-price-box .df-final, .df-price-box .df-final * { font-weight: 500 !important; color: #111 !important; }
    .df-price-box .df-cut, .df-price-box .df-cut * { color: #9ca3af !important; font-weight: 400 !important; }

    .df-coupon-box { display: block !important; visibility: visible !important; opacity: 1 !important; }
    .df-coupon-box.unified { margin-top: 2px; }
    .df-coupon-input.single { display: flex; align-items: center; gap: 10px; margin-top: 10px; height: 52px; padding: 0 16px; border-top-left-radius: 14px; border-top-right-radius: 14px; background: #fff; border: 1px solid #e5e7eb; border-bottom: 0; transition: all 0.2s ease; }
    .df-coupon-input.single .input-icon { width: 24px; height: 24px; opacity: 0.6; flex-shrink: 0; }
    .df-coupon-input.single .coupon-field { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: #374151; }
    .df-coupon-input.single .coupon-field::placeholder { font-size: 16px; color: #9ca3af; }
    .apply-manual { width: 32px; height: 32px; display: none; align-items: center; justify-content: center; border-radius: min(var(--df-btn-radius, 14px), 10px); background: var(--df-btn-bg, var(--primary)); color: var(--df-btn-text, #fff); border: none; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(var(--green-rgb),0.22); transition: transform 0.1s ease; }
    .apply-manual.show { display: flex; }
    .apply-manual:hover { background: var(--df-btn-bg, var(--primary)) !important; color: var(--df-btn-text, #fff) !important; }
    .apply-manual:active { transform: scale(0.96); }
    .df-coupon-toggle { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; margin-bottom: 0; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; background: linear-gradient(90deg, #f3ecd9 0%, #f7f6f2 100%); border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; }
    .df-coupon-toggle .saved { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #374151; }
    .coin-icon { width: 18px; }
    .df-coupon-toggle b { font-weight: 600; color: #111; }
    .arrow-svg { color: var(--df-icon-color, #111); transition: transform 0.25s ease; }
    .df-coupon-box.open .arrow-svg { transform: rotate(180deg); }
    .df-coupon-body { display: none; flex-direction: column; padding: 8px; border-radius: 16px; background: linear-gradient(90deg, #f3ecd9 0%, #f7f6f2 100%); border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
    .df-coupon-box.open .df-coupon-body { display: flex; }
    .df-applied-item, .df-coupon-item, .df-coupon-list > div { display: flex; justify-content: space-between; align-items: center; }
    .df-applied-item .left, .df-coupon-item .left { display: flex; align-items: center; gap: 10px; }
    .df-applied-item .left { font-size: 12px; font-weight: 600; }
    .df-applied-item .right { display: flex; align-items: center; gap: 8px; }
    .df-applied-item .value { font-size: 13px; font-weight: 600; color: #16a34a; line-height: 1; }
    .df-applied-item .remove-coupon, .remove-coupon { background: transparent; border: none; font-size: 16px; color: var(--df-icon-color, #9ca3af); cursor: pointer; opacity: 0.75; }
    .remove-coupon:hover { opacity: 1; }
    .df-coupon-list > div { padding: 6px; }
    .df-coupon-item { padding: 10px 0; }
    .coupon-badge { width: 24px; opacity: 0.7; }
    .df-coupon-item .text { display: flex; flex-direction: column; gap: 2px; }
    .df-coupon-item strong { font-size: 12px; font-weight: 500; color: #374151; }
    .df-coupon-item span { font-size: 10px; color: #9ca3af; }
    .coupon-header-text { display: flex; flex-direction: column; }
    .df-coupon-message { font-size: 12px; color: #dc2626; margin-top: 4px; line-height: 1.4; }
    .df-coupon-message.show { display: block; }
    .df-coupon-list button { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; background: var(--df-btn-bg, #111); color: var(--df-btn-text, #fff); border: 1px solid var(--df-btn-bg, #111); border-radius: min(var(--df-btn-radius, 14px), 8px); font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; transition: all 0.15s ease; }
    .df-coupon-list button:hover, .apply-manual:hover { background: var(--df-btn-bg, #111) !important; color: var(--df-btn-text, #fff) !important; border-color: var(--df-btn-bg, #111) !important; transform: none !important; box-shadow: none !important; }
    .df-coupon-list button:active, .apply-manual:active { transform: scale(0.96); }
    .df-no-coupons { padding: 12px; font-size: 13px; color: #6b7280; text-align: center; }


    .df-summary { width: 100%; margin-top: 14px !important; }
    .df-summary-head { display: flex; margin-top: -10px !important; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px dotted #e5e7eb; }
    .df-summary-head .left { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: #111; }
    .df-summary-head .icon { opacity: 0.5; }
    .df-summary-head .icon img { width: 16px; height: 16px; display: block; }
    .df-summary-head .right-wrap { display: flex; flex-direction: column; align-items: flex-end; }
    .df-summary-head .price-row { display: flex; align-items: center; gap: 4px; }
    .df-summary-head .cut, .df-summary-head .cut *, .df-summary-head .cut .woocommerce-Price-amount, .df-summary-head .cut bdi { font-size: 12px; color: #9ca3af !important; text-decoration: line-through; font-weight: 300; }
    .df-summary-head .price, .df-summary-head .price * { font-size: 15px; font-weight: 600; color: #111 !important; }
    .df-summary-head .save-inline { font-size: 12px; font-weight: 500; margin-top: 4px !important; margin-bottom: 0 !important; }
    .df-summary-head .arrow { display: flex; align-items: center; margin-left: 4px; opacity: 0.7; }
    .df-summary-head .arrow svg { width: 16px; height: 16px; }
    .df-summary.open .arrow { transform: rotate(180deg); }
    .df-summary-body { display: block; margin-top: 0 !important; padding-top: 0 !important; border-top: 1px dashed #e5e7eb; }
    .df-summary-body .row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 12px; border-bottom: 1px dotted #e5e7eb; }
    .df-summary-body .row:last-child { border-bottom: none; }
    .df-summary-body .row span:first-child { color: #6b7280; font-weight: 400; }
    .df-summary-body .row span:last-child { text-align: right; font-weight: 500; color: #111; }
    .df-summary-body .row:nth-child(3) span:last-child, .df-summary-body .green { color: var(--primary); font-weight: 600; }
    .df-summary-body .total span:first-child { font-weight: 600; color: #374151; }
    .df-summary-body .total span:last-child { font-weight: 700; font-size: 12px; }
    .df-summary-footer { text-align: center; font-size: 13px; font-weight: 500; color: var(--primary); padding: 10px 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%, #f7f6f2 35%, #f3ecd9 50%, #f7f6f2 85%, rgba(255,255,255,0) 100%); }
    .woocommerce-mini-cart__buttons a:not(.checkout) { display: none !important; }
    .woocommerce-mini-cart__buttons .checkout { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-left: 22px !important; padding-right: 120px !important; border-radius: var(--df-btn-radius, 14px); position: relative; text-align: left !important; background: var(--df-btn-bg, #111) !important; color: var(--df-btn-text, #fff) !important; }
    .woocommerce-mini-cart__buttons .checkout span { text-align: left !important; justify-content: flex-start !important; color: var(--df-btn-text, #fff) !important; }
    .woocommerce-mini-cart__buttons .checkout::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 120px; height: 32px; background: url('https://nivlif.com/wp-content/uploads/2026/04/cart-upi-icons-BDF1UkN_.svg') no-repeat center; background-size: contain; }
    .woocommerce-mini-cart__buttons .checkout:hover { background: var(--df-btn-bg, #222) !important; filter: brightness(0.92); }

    .df-toast, .df-ms-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: #111; color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 500; opacity: 0; transition: all 0.25s ease; z-index: 9999; display: flex; align-items: center; gap: 6px; }
    .df-cart-confetti-canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; z-index: 9999 !important; }
    .df-toast.show, .df-ms-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .cart-widget-side .wd-heading { padding: 8px 12px !important; min-height: auto; display: flex; align-items: center; justify-content: space-between; }
    .cart-widget-side .wd-heading .title { font-size: 16px !important; font-weight: 600; line-height: 1.2; }
    .cart-widget-side .wd-heading .close-side-widget { font-size: 13px !important; gap: 4px; }
    .cart-widget-side .wd-heading .close-side-widget svg { width: 14px; height: 14px; }

    .df-empty-cart-premium { padding: 70px 20px 40px; text-align: center; }
    .df-empty-cart-icon { font-size: 52px; line-height: 1; }
    .df-empty-cart-premium h2 { font-size: 28px; line-height: 1.3; margin-top: 18px; color: #111; }
    .df-empty-cart-premium p { margin-top: 10px; color: #6b7280; font-size: 14px; line-height: 1.6; }
    .df-empty-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 28px; }
    .df-empty-card { background: #fff; border-radius: 18px; padding: 10px; border: 1px solid #eee; text-decoration: none; }
    .df-empty-card a { text-decoration: none; }
    .df-empty-card img { width: 100%; border-radius: 14px; }
    .df-empty-card span { display: block; margin-top: 8px; font-size: 12px; color: #111; font-weight: 500; }
    .df-empty-add { height: 30px; margin-top: 10px; display: flex !important; align-items: center; justify-content: center; border: 1px solid var(--primary); border-radius: min(var(--df-btn-radius, 14px), 9px); background: #fff !important; color: var(--primary) !important; font-size: 11px; font-weight: 700; text-decoration: none; }
    .df-empty-shop-btn { margin-top: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--df-btn-bg, #111); color: var(--df-btn-text, #fff) !important; height: 52px; padding: 0 24px; border-radius: var(--df-btn-radius, 16px); font-weight: 600; }

    .df-cross-sells-wrap { margin-top: 0px; padding: 0; border: 1px solid var(--border-color); border-radius: 16px; background: #fff; overflow: hidden; }
    .df-cross-toggle { width: 100%; min-height: 88px; padding: 16px 22px; display: flex; align-items: center; gap: 22px; border: 0 !important; border-radius: 16px !important; background: #fff !important; color: #111 !important; text-align: left; cursor: pointer; box-shadow: none !important; }
    .df-cross-toggle:hover, .df-cross-toggle:focus, .df-cross-toggle:active { background: #fff !important; color: #111 !important; box-shadow: none !important; transform: none !important; outline: none !important; }
    .df-cross-toggle-icon { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; color: #111; }
    .df-cross-toggle-label { flex: 1 1 auto; min-width: 0; font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .df-cross-toggle-arrow { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; transition: transform .18s ease; color: #111; }
    .df-cross-sells-wrap.is-open .df-cross-toggle-arrow { transform: rotate(180deg); }
    .df-cross-content { display: none; padding: 0 10px 10px; }
    .df-cross-tabs { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
    .df-cross-tab { position: relative; border: 0; background: transparent; padding: 0 0 3px; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
    .df-cross-tab.is-active { color: var(--primary); font-weight: 700; }
    .df-cross-tab:hover, .df-cross-tab:focus { color: inherit !important; background: transparent !important; box-shadow: none !important; outline: none !important; transform: none !important; }
    .df-cross-tab.is-active:hover, .df-cross-tab.is-active:focus { color: var(--primary) !important; }
    .df-cross-tab.is-active:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary); }
    .df-cross-scroll { display: none; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x mandatory; }
    .df-cross-scroll.is-active { display: flex; }
    .df-cross-card { min-width: 210px; display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; padding-right: 10px; margin-right: 10px; background: #fff; border-right: 1px solid var(--border-color); scroll-snap-align: start; }
    .df-cross-card:last-child { border-right: 0; margin-right: 0; }
    .df-cross-card .img-wrap { grid-row: 1 / 3; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; overflow: hidden; }
    .df-cross-card img { max-width: 56px; max-height: 56px; width: auto; height: auto; object-fit: contain; display: block; }
    .cross-content { min-width: 0; display: flex; flex-direction: column; min-height: 62px; justify-content: space-between; }
    .df-cross-card .title { min-height: 0px; margin-bottom: 0px;  font-size: 13px; font-weight: 600; color: var(--title); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .df-cross-card .price { margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.25; }
    .df-cross-card .price del, .df-cross-card .price del * { color: color-mix(in srgb, var(--text) 45%, #fff) !important; font-size: 12px; font-weight: 400 !important; text-decoration: line-through; }
    .df-cross-card .price ins, .df-cross-card .price ins * { color: var(--title) !important; font-size: 13px; font-weight: 700 !important; text-decoration: none; }
    .cross-btn { grid-column: 1 / -1; width: 100%; align-self: stretch; margin-top: 0; height: 30px; display: flex !important; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--primary); border-radius: min(var(--df-btn-radius, 14px), 9px); background: #fff !important; color: var(--primary) !important; font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
    .cross-btn span { font-size: 19px; line-height: 1; font-weight: 300; }
    .cross-btn:hover, .cross-btn:focus, .df-empty-add:hover, .df-empty-add:focus { background: #fff !important; color: var(--primary) !important; box-shadow: none !important; transform: none !important; }
    .df-cart-trust { display: block; margin-top: 0px; font-size: 12px; color: var(--text); }
    .trust-item { font-weight: 500; text-align: center; }

    @media(max-width:768px) {
      .df-empty-grid { grid-template-columns: 1fr; }
      .df-cross-sells-wrap { padding: 0; }
      .df-cross-toggle { min-height: 76px; padding: 13px 15px; gap: 14px; }
      .df-cross-toggle-icon { width: 34px; height: 34px; flex-basis: 34px; }
      .df-cross-toggle-icon svg { width: 27px; height: 27px; }
      .df-cross-toggle-label { font-size: 16px; letter-spacing: -0.15px; }
      .df-cross-toggle-arrow { width: 28px; height: 28px; flex-basis: 28px; }
      .df-cross-toggle-arrow svg { width: 27px; height: 27px; }
      .df-cross-content { padding: 0 9px 9px; }
      .df-cross-tabs { gap: 10px; font-size: 12px; }
      .df-cross-tab { font-size: 12px; }
      .df-cross-card { min-width: 204px; grid-template-columns: 60px minmax(0, 1fr); column-gap: 8px; row-gap: 8px; padding-right: 9px; margin-right: 9px; }
      .df-cross-card .img-wrap { width: 74px; height: 74px; }
      .df-cross-card img { max-width: 74px; max-height: 74px; }
      .df-cross-card .title { margin-bottom: 0px !important; font-size: 13px; }
      .cross-content { margin-left: 12px; min-height: 60px; }
      .cross-btn { height: 30px; }
    }

    html, body.cart-widget-opened { overflow-x: hidden !important; }
    body.cart-widget-opened { overscroll-behavior: contain; }


/* =========================================================
   NIVLIF MOBILE COMPACT OVERRIDES
   Keeps the drawer fully visible, scrollable and thumb-friendly.
   ========================================================= */
@media (max-width: 768px) {
    html.cart-widget-opened,
    body.cart-widget-opened {
        overflow: hidden !important;
        height: 100% !important;
    }

    .cart-widget-side {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        inset: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .cart-widget-side .widget_shopping_cart_content {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .cart-widget-side .widgettitle,
    .cart-widget-side .wd-heading {
        padding: 8px 10px !important;
        min-height: 40px !important;
    }

    .cart-widget-side .wd-heading .title,
    .cart-widget-side .widgettitle {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    .woocommerce-mini-cart {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .df-cart-flow {
        gap: 7px !important;
    }

    .df-ms {
        padding: 0 8px 9px !important;
    }

    .df-ms-msg {
        margin: 0 -8px 38px !important;
        padding: 6px 7px !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        border-radius: 7px !important;
    }

    .df-ms-track {
        height: 4px !important;
        margin-right: 10px !important;
    }

    .df-ms-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        padding: 5px !important;
    }

    .df-ms-labels {
        margin: 20px 10px 5px 0 !important;
    }

    .df-ms-offer {
        width: 62px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .df-ms-price {
        font-size: 10px !important;
        bottom: 38px !important;
    }

    .df-cart-item {
        gap: 8px !important;
        padding: 7px !important;
        border-radius: 10px !important;
    }

    .df-img {
        width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        border-radius: 10px !important;
        flex: 0 0 64px !important;
    }

    .df-img img {
        max-width: 64px !important;
        max-height: 64px !important;
        border-radius: 9px !important;
    }

    .df-title {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }

    .df-sub {
        font-size: 10.5px !important;
    }

    .df-actions {
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .df-qty,
    .df-qty button {
        height: 28px !important;
    }

    .df-qty button {
        width: 26px !important;
        padding: 0 !important;
    }

    .df-num {
        min-width: 26px !important;
        font-size: 12px !important;
        padding: 0 4px !important;
    }

    .df-delete {
        width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
    }

    .df-delete-icon {
        width: 13px !important;
        height: 13px !important;
    }

    .df-final {
        font-size: 12px !important;
    }

    .df-cut {
        font-size: 10px !important;
    }

    .df-coupon-box.unified {
        margin-top: 0 !important;
    }

    .df-coupon-input.single {
        height: 42px !important;
        margin-top: 5px !important;
        padding: 0 10px !important;
        gap: 7px !important;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }

    .df-coupon-input.single .input-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .df-coupon-input.single .coupon-field,
    .df-coupon-input.single .coupon-field::placeholder {
        font-size: 13px !important;
    }

    .apply-manual {
        width: 28px !important;
        height: 28px !important;
        border-radius: 7px !important;
        font-size: 12px !important;
    }

    .df-coupon-toggle {
        min-height: 36px !important;
        padding: 7px 9px !important;
        border-bottom-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    .df-coupon-toggle .saved {
        gap: 6px !important;
        font-size: 11px !important;
    }

    .coin-icon {
        width: 15px !important;
    }

    .df-coupon-body {
        padding: 6px !important;
        border-radius: 10px !important;
    }

    .df-applied-item,
    .df-coupon-item {
        min-height: 38px !important;
        padding: 5px 4px !important;
        gap: 6px !important;
    }

    .df-coupon-item .text strong,
    .df-coupon-item .text span,
    .df-applied-item {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    .apply-coupon {
        min-width: 50px !important;
        height: 26px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .remove-coupon {
        font-size: 16px !important;
        padding: 3px !important;
    }

    .df-coupon-message {
        margin-top: 5px !important;
        padding: 6px 8px !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
        border-radius: 7px !important;
    }

    .df-sale-banner,
    .df-cross-sells-wrap,
    .df-summary {
        margin-top: 6px !important;
    }

    .df-sale-banner {
        border-radius: 9px !important;
    }

    .df-sale-banner-caption {
        padding: 5px 7px !important;
        font-size: 10px !important;
    }

    .df-cross-sells-wrap {
        padding: 7px !important;
        border-radius: 10px !important;
    }

    .df-cross-tabs {
        gap: 10px !important;
        margin-bottom: 7px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .df-cross-tabs::-webkit-scrollbar {
        display: none;
    }

    .df-cross-tab {
        flex: 0 0 auto !important;
        padding: 2px 0 4px !important;
        font-size: 10.5px !important;
    }

    .df-cross-card {
        min-width: 188px !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        column-gap: 7px !important;
        row-gap: 5px !important;
        padding-right: 7px !important;
        margin-right: 7px !important;
    }

    .df-cross-card .img-wrap {
        width: 52px !important;
        height: 52px !important;
        border-radius: 8px !important;
    }

    .df-cross-card img {
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .cross-content {
        margin-left: 0 !important;
        min-height: 52px !important;
    }

    .df-cross-card .title {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    .df-cross-card .price,
    .df-cross-card .price ins,
    .df-cross-card .price ins * {
        font-size: 11px !important;
    }

    .cross-btn {
        height: 27px !important;
        font-size: 9.5px !important;
        border-radius: 7px !important;
    }

    .cross-btn span {
        font-size: 15px !important;
    }

    .df-summary-head {
        min-height: 40px !important;
        padding: 7px 8px !important;
    }

    .df-summary-head .price,
    .df-summary-head .price * {
        font-size: 13px !important;
    }

    .df-summary-body .row {
        padding: 6px 0 !important;
        font-size: 10.5px !important;
    }

    .df-summary-footer {
        padding: 7px 4px !important;
        font-size: 10.5px !important;
    }

    /* Trust + checkout stay visible at the bottom while the rest scrolls. */
    .woocommerce-mini-cart__buttons {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 30 !important;
        margin: 6px -10px 0 !important;
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 -5px 14px rgba(0,0,0,.06) !important;
        backdrop-filter: blur(8px);
    }

    .df-cart-trust {
        margin: 0 0 5px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .woocommerce-mini-cart__buttons .checkout {
        height: 46px !important;
        min-height: 46px !important;
        padding-left: 14px !important;
        padding-right: 92px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .woocommerce-mini-cart__buttons .checkout::after {
        width: 82px !important;
        height: 26px !important;
        right: 7px !important;
    }

    /* Never let Woodmart's default mini-cart footer push the checkout off-screen. */
    .shopping-cart-widget-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 31 !important;
    }
}

@media (max-width: 380px) {
    .cart-widget-side .widget_shopping_cart_content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .df-img {
        width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        flex-basis: 58px !important;
    }

    .df-img img {
        max-width: 58px !important;
        max-height: 58px !important;
    }

    .df-cross-card {
        min-width: 176px !important;
    }

    .woocommerce-mini-cart__buttons .checkout {
        padding-right: 84px !important;
    }

    .woocommerce-mini-cart__buttons .checkout::after {
        width: 74px !important;
    }
}


/* =========================================================
   Nivlif compact Frequently Bought Together bar
   Sits directly below the sale banner without consuming
   unnecessary vertical space.
   ========================================================= */
.df-cross-sells-wrap {
    margin-top: 4px !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

.df-cross-toggle {
    min-height: 52px !important;
    height: 52px !important;
    padding: 8px 13px !important;
    gap: 12px !important;
    border-radius: 10px !important;
}

.df-cross-toggle-icon {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
}

.df-cross-toggle-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.df-cross-toggle-label {
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px !important;
}

.df-cross-toggle-arrow {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
}

.df-cross-toggle-arrow svg {
    width: 23px !important;
    height: 23px !important;
}

.df-cross-content {
    padding: 0 7px 7px !important;
}

@media (max-width: 768px) {
    .df-sale-banner + .df-cross-sells-wrap {
        margin-top: 4px !important;
    }

    .df-cross-sells-wrap {
        margin-top: 4px !important;
        padding: 0 !important;
        border-radius: 9px !important;
    }

    .df-cross-toggle {
        min-height: 46px !important;
        height: 46px !important;
        padding: 7px 11px !important;
        gap: 9px !important;
        border-radius: 9px !important;
    }

    .df-cross-toggle-icon {
        width: 25px !important;
        height: 25px !important;
        flex-basis: 25px !important;
    }

    .df-cross-toggle-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .df-cross-toggle-label {
        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    .df-cross-toggle-arrow {
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
    }

    .df-cross-toggle-arrow svg {
        width: 21px !important;
        height: 21px !important;
    }

    .df-cross-content {
        padding: 0 6px 6px !important;
    }
}

@media (max-width: 380px) {
    .df-cross-toggle {
        min-height: 43px !important;
        height: 43px !important;
        padding: 6px 10px !important;
        gap: 8px !important;
    }

    .df-cross-toggle-icon {
        width: 23px !important;
        height: 23px !important;
        flex-basis: 23px !important;
    }

    .df-cross-toggle-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .df-cross-toggle-label {
        font-size: 12.5px !important;
    }

    .df-cross-toggle-arrow,
    .df-cross-toggle-arrow svg {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }
}


/* =========================================================
   NIVLIF 1.3.4 — MOBILE AUTO LAYOUT
   Uses the actual mobile viewport, flexible sizing and
   content-driven rows instead of fixed desktop dimensions.
   ========================================================= */
@media (max-width: 768px) {
    :root {
        --nclc-mobile-gutter: clamp(8px, 2.7vw, 14px);
        --nclc-mobile-gap: clamp(6px, 2vw, 10px);
    }

    .cart-widget-side,
    .cart-widget-side * {
        box-sizing: border-box;
    }

    .cart-widget-side {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        inset: 0 !important;
        overflow: hidden !important;
    }

    .cart-widget-side .widget_shopping_cart_content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        padding-inline: var(--nclc-mobile-gutter) !important;
        padding-top: max(6px, env(safe-area-inset-top)) !important;
        padding-bottom: max(7px, env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .cart-widget-side .widget_shopping_cart_content > *,
    .woocommerce-mini-cart,
    .df-cart-flow,
    .df-cart-ui,
    .df-summary,
    .df-cross-sells-wrap,
    .df-coupon-box,
    .df-sale-banner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .df-cart-flow {
        gap: var(--nclc-mobile-gap) !important;
        padding-inline: 0 !important;
    }

    .df-cart-ui {
        gap: var(--nclc-mobile-gap) !important;
        margin-top: 8px !important;
        overflow: visible !important;
    }

    /* Product rows automatically divide the available width. */
    .df-cart-item {
        display: grid !important;
        grid-template-columns: clamp(54px, 16vw, 68px) minmax(0, 1fr) auto !important;
        grid-template-areas: "image middle price" !important;
        align-items: start !important;
        gap: clamp(7px, 2vw, 10px) !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: clamp(7px, 2vw, 10px) !important;
    }

    .df-cart-item .df-img {
        grid-area: image !important;
        width: clamp(54px, 16vw, 68px) !important;
        height: clamp(54px, 16vw, 68px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1;
    }

    .df-cart-item .df-img img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .df-cart-item .df-mid {
        grid-area: middle !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .df-cart-item .df-price-box {
        grid-area: price !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: 30vw !important;
        margin-left: 0 !important;
    }

    .df-title,
    .df-sub,
    .df-final,
    .df-cut {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    .df-title {
        font-size: clamp(11px, 3.1vw, 13px) !important;
        line-height: 1.28 !important;
    }

    .df-sub {
        font-size: clamp(10px, 2.8vw, 12px) !important;
    }

    .df-final {
        font-size: clamp(11px, 3.2vw, 13px) !important;
        white-space: nowrap;
    }

    .df-cut {
        font-size: clamp(9px, 2.6vw, 11px) !important;
        white-space: nowrap;
    }

    .df-actions {
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: clamp(5px, 1.7vw, 8px) !important;
    }

    .df-qty {
        flex: 0 0 auto !important;
    }

    /* Coupon layout can shrink naturally instead of overflowing. */
    .df-coupon-input.single {
        width: 100% !important;
        min-width: 0 !important;
        height: clamp(40px, 11vw, 46px) !important;
        padding-inline: clamp(9px, 2.8vw, 13px) !important;
    }

    .df-coupon-input.single .coupon-field {
        min-width: 0 !important;
        width: 100% !important;
        font-size: clamp(13px, 3.7vw, 15px) !important;
    }

    .df-coupon-toggle {
        width: 100% !important;
        min-width: 0 !important;
    }

    .df-coupon-toggle .saved,
    .coupon-header-text {
        min-width: 0 !important;
    }

    .df-coupon-message {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    /* Sale banner always scales to the available browser width. */
    .df-sale-banner {
        overflow: hidden !important;
        border-radius: clamp(8px, 2.5vw, 12px) !important;
    }

    .df-sale-banner-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Frequently Bought Together auto-fits every phone width. */
    .df-cross-sells-wrap {
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 2px !important;
    }

    .df-cross-toggle {
        width: 100% !important;
        min-width: 0 !important;
        min-height: clamp(42px, 12vw, 48px) !important;
        height: auto !important;
        padding: clamp(6px, 2vw, 9px) clamp(9px, 3vw, 13px) !important;
        gap: clamp(7px, 2.5vw, 11px) !important;
    }

    .df-cross-toggle-icon,
    .df-cross-toggle-arrow {
        flex: 0 0 auto !important;
    }

    .df-cross-toggle-label {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: clamp(12px, 3.7vw, 14px) !important;
    }

    .df-cross-content {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .df-cross-tabs {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
    }

    .df-cross-scroll {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
    }

    .df-cross-card {
        min-width: clamp(170px, 54vw, 205px) !important;
        max-width: clamp(205px, 65vw, 235px) !important;
    }

    /* Summary rows wrap instead of pushing the drawer wider. */
    .df-summary-head,
    .df-summary-body .row {
        min-width: 0 !important;
    }

    .df-summary-head .left,
    .df-summary-head .right-wrap,
    .df-summary-body .row span {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    /* Footer is sized from the viewport and respects iOS/Android safe areas. */
    .shopping-cart-widget-footer,
    .woocommerce-mini-cart__buttons {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .woocommerce-mini-cart__buttons .checkout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Small phones: remove width assumptions entirely. */
@media (max-width: 360px) {
    .cart-widget-side .widget_shopping_cart_content {
        padding-inline: 7px !important;
    }

    .df-cart-item {
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    .df-cart-item .df-img {
        width: 52px !important;
        height: 52px !important;
    }

    .df-cart-item .df-price-box {
        max-width: 25vw !important;
    }

    .df-cross-card {
        min-width: 165px !important;
    }
}

/* Landscape phones use the available height without locking content. */
@media (max-width: 900px) and (orientation: landscape) {
    .cart-widget-side {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}