.cd-instance{
  --cd-width:420px;--cd-height:100%;--cd-radius:0px;--cd-shadow:.2;
  --cd-overlay:rgba(0,0,0,.4);--cd-bg:#fff;--cd-text:#151515;
  --cd-accent:#151515;--cd-accent-text:#fff;--cd-duration:380ms;
  --cd-progress-bg:#e5e5e5;--cd-progress-fill:#151515;--cd-progress-text:#151515;
  --cd-trigger-bg:var(--cd-accent);--cd-trigger-text:var(--cd-accent-text);
  --cd-trigger-x-nudge-desktop:0px;--cd-trigger-y-nudge-desktop:0px;
  --cd-trigger-x-nudge-mobile:0px;--cd-trigger-y-nudge-mobile:0px;
  display:contents;
}
.cd-instance{font-family:var(--cd-font,inherit)}
.cd-trigger{
  position:fixed;z-index:99999;display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border:0;border-radius:999px;background:var(--cd-trigger-bg);color:var(--cd-trigger-text);
  box-shadow:0 8px 24px rgba(0,0,0,var(--cd-shadow));cursor:pointer;font-weight:700;font-size:14px;
}
/* "Scrolls with page" mode: same trick as the Drawer/mobile-menu plugin's
   header mode - absolute instead of fixed, so it sits near the top of the
   page and scrolls away naturally instead of following the viewport forever. */
.cd-trigger-mode--scroll .cd-trigger{position:absolute}
.cd-trigger-icon{display:inline-flex;width:20px;height:20px;position:relative}
.cd-trigger-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Desktop and mobile each get their own trigger position, exactly like the
   separate desktop/mobile controls on the other WPMints plugins - not one
   shared position squeezed onto both. Gated by a JS-applied .cd-is-mobile
   class (real matchMedia on the live site, the admin device toggle in the
   preview) rather than a real @media query, which a wp-admin mockup can
   never actually trigger regardless of which device button is selected.
   The x/y nudge variables layer a fine px offset on top of the corner preset
   via calc(), and stack onto the middle positions' centring transform. */
.cd-instance:not(.cd-is-mobile) .cd-trigger--desktop-left-top{top:calc(18px + var(--cd-trigger-y-nudge-desktop));left:calc(18px + var(--cd-trigger-x-nudge-desktop));right:auto;bottom:auto;transform:none}
.cd-instance:not(.cd-is-mobile) .cd-trigger--desktop-left-middle{top:50%;left:calc(18px + var(--cd-trigger-x-nudge-desktop));right:auto;bottom:auto;transform:translateY(calc(-50% + var(--cd-trigger-y-nudge-desktop)))}
.cd-instance:not(.cd-is-mobile) .cd-trigger--desktop-left-bottom{bottom:calc(18px - var(--cd-trigger-y-nudge-desktop));left:calc(18px + var(--cd-trigger-x-nudge-desktop));top:auto;right:auto;transform:none}
.cd-instance:not(.cd-is-mobile) .cd-trigger--desktop-right-top{top:calc(18px + var(--cd-trigger-y-nudge-desktop));right:calc(18px - var(--cd-trigger-x-nudge-desktop));left:auto;bottom:auto;transform:none}
.cd-instance:not(.cd-is-mobile) .cd-trigger--desktop-right-middle{top:50%;right:calc(18px - var(--cd-trigger-x-nudge-desktop));left:auto;bottom:auto;transform:translateY(calc(-50% + var(--cd-trigger-y-nudge-desktop)))}
.cd-instance:not(.cd-is-mobile) .cd-trigger--desktop-right-bottom{bottom:calc(18px - var(--cd-trigger-y-nudge-desktop));right:calc(18px - var(--cd-trigger-x-nudge-desktop));top:auto;left:auto;transform:none}
.cd-instance.cd-is-mobile .cd-trigger--mobile-left-top{top:calc(14px + var(--cd-trigger-y-nudge-mobile));left:calc(14px + var(--cd-trigger-x-nudge-mobile));right:auto;bottom:auto;transform:none}
.cd-instance.cd-is-mobile .cd-trigger--mobile-left-middle{top:50%;left:calc(14px + var(--cd-trigger-x-nudge-mobile));right:auto;bottom:auto;transform:translateY(calc(-50% + var(--cd-trigger-y-nudge-mobile)))}
.cd-instance.cd-is-mobile .cd-trigger--mobile-left-bottom{bottom:calc(14px - var(--cd-trigger-y-nudge-mobile));left:calc(14px + var(--cd-trigger-x-nudge-mobile));top:auto;right:auto;transform:none}
.cd-instance.cd-is-mobile .cd-trigger--mobile-right-top{top:calc(14px + var(--cd-trigger-y-nudge-mobile));right:calc(14px - var(--cd-trigger-x-nudge-mobile));left:auto;bottom:auto;transform:none}
.cd-instance.cd-is-mobile .cd-trigger--mobile-right-middle{top:50%;right:calc(14px - var(--cd-trigger-x-nudge-mobile));left:auto;bottom:auto;transform:translateY(calc(-50% + var(--cd-trigger-y-nudge-mobile)))}
.cd-instance.cd-is-mobile .cd-trigger--mobile-right-bottom{bottom:calc(14px - var(--cd-trigger-y-nudge-mobile));right:calc(14px - var(--cd-trigger-x-nudge-mobile));top:auto;left:auto;transform:none}
/* Positioned relative to .cd-trigger-icon (not the whole trigger button), so
   it sits as a small badge on the icon's own top-right corner - like a
   notification count - instead of inline text next to it. */
.cd-trigger-count{position:absolute;top:-7px;right:-9px;display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--cd-trigger-text);color:var(--cd-trigger-bg);font-size:10px;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--cd-trigger-bg)}
.cd-hidden{display:none!important}

.cd-overlay{position:fixed;inset:0;z-index:999998;background:var(--cd-overlay);opacity:0;visibility:hidden;pointer-events:none;transition:opacity calc(var(--cd-duration) * .8) ease}
.cd-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto}

.cd-panel{
  position:fixed;top:0;bottom:0;z-index:999999;display:flex;flex-direction:column;
  width:min(92vw,var(--cd-width));height:var(--cd-height);background:var(--cd-bg);color:var(--cd-text);
  box-shadow:0 0 40px rgba(0,0,0,var(--cd-shadow));opacity:0;visibility:hidden;pointer-events:none;
  overflow:hidden;transition:transform var(--cd-duration) cubic-bezier(.22,.72,.18,1),opacity calc(var(--cd-duration) * .8) ease,visibility 0s linear var(--cd-duration);
}
.cd-panel--right{right:0;border-top-left-radius:var(--cd-radius);border-bottom-left-radius:var(--cd-radius);transform:translateX(100%)}
.cd-panel--left{left:0;border-top-right-radius:var(--cd-radius);border-bottom-right-radius:var(--cd-radius);transform:translateX(-100%)}
.cd-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);transition:transform var(--cd-duration) cubic-bezier(.22,.72,.18,1),opacity calc(var(--cd-duration) * .8) ease,visibility 0s}

/* Mobile bottom-sheet: a real alternative to a squeezed side drawer, not just
   the desktop panel shrunk down - slides up from the bottom, full width,
   rounded top corners. Gated by .cd-is-mobile (see trigger comment above)
   so the admin device toggle can genuinely demo it, not just the real site. */
.cd-mobile-layout--bottom-sheet.cd-is-mobile .cd-panel{
  top:auto;left:0;right:0;bottom:0;width:100%!important;height:var(--cd-sheet-height,70%);
  border-radius:0;border-top-left-radius:calc(var(--cd-radius) + 10px);border-top-right-radius:calc(var(--cd-radius) + 10px);
  transform:translateY(100%);
}
.cd-mobile-layout--bottom-sheet.cd-is-mobile .cd-panel.is-open{transform:translateY(0)}
.cd-mobile-layout--bottom-sheet.cd-is-mobile .cd-panel:before{content:'';position:absolute;top:10px;left:50%;width:36px;height:4px;border-radius:999px;background:currentColor;opacity:.25;transform:translateX(-50%)}
.cd-mobile-layout--bottom-sheet.cd-is-mobile .cd-head{padding-top:26px}

.cd-animation--fade .cd-panel{transform:none!important}
.cd-animation--slide .cd-panel{opacity:1}
.cd-animation--none .cd-panel,.cd-animation--none .cd-overlay{transition:none!important;transform:none!important}

.cd-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;border-bottom:1px solid rgba(0,0,0,.08);flex:0 0 auto}
.cd-title{margin:0;font-size:18px}
/* Explicit box + padding:0 - without this the active theme's own generic
   button padding (often an oversized, asymmetric em-based value) bleeds
   through, inflating the button and centring the × glyph well left of the
   panel's true right edge instead of flush against it. */
.cd-close{flex:0 0 auto;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:inherit}
.cd-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:16px 20px 20px;overscroll-behavior:contain}

/* Locks the page behind the drawer from scrolling while it's open - without
   this, a wheel/trackpad scroll over any non-scrollable patch of the drawer
   (or a quick view panel whose short content doesn't fill its own scroll
   area) chains straight through to the real page underneath, which reads as
   "the whole page scrolls instead of the cart". */
body.cd-lock{overflow:hidden}

.cd-progress{margin-bottom:16px}
.cd-progress-text{margin:0 0 8px;font-size:13px;color:var(--cd-progress-text)}
.cd-progress-text--complete{font-weight:700}
.cd-progress-track{height:8px;border-radius:999px;background:var(--cd-progress-bg);overflow:hidden}
.cd-progress-fill{height:100%;background:var(--cd-progress-fill);border-radius:999px;transition:width .4s ease}

.cd-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 12px;text-align:center;color:inherit;opacity:.75}
.cd-empty-icon{display:inline-flex;width:44px;height:44px}
.cd-empty-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.cd-items{list-style:none;margin:0;padding:0}
.cd-item{display:grid;grid-template-columns:56px 1fr auto;gap:10px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.08);min-width:0}
.cd-item-image{display:block;border-radius:6px;overflow:hidden;line-height:0}
.cd-item-image img{display:block;width:100%;height:auto}
.cd-item-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.cd-item-name{color:inherit;text-decoration:none;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The theme's own global a:hover rule (often blue) otherwise wins on hover,
   since nothing here pinned that state - only the base colour was set. */
.cd-item-name:hover,.cd-item-name:focus{color:inherit!important}
.cd-item-price{font-size:13px;opacity:.75}
.cd-item-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:4px}
.cd-qty{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(0,0,0,.15);border-radius:999px;padding:2px 4px}
/* A plain <button> keeps the browser's default padding/line-height unless
   reset, which pushes the glyph off-centre inside the fixed 22x22 circle
   instead of centring it - the same box-model bug as the quick-view close
   button, just never caught here until now. */
.cd-qty-btn{width:22px;height:22px;padding:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;color:inherit}
.cd-qty-btn:hover{background:rgba(0,0,0,.06)}
.cd-qty-value{min-width:16px;text-align:center;font-size:13px;font-weight:700}
.cd-remove{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;cursor:pointer;color:inherit;opacity:.65;font-size:12px}
.cd-remove:hover{opacity:1}
.cd-remove svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cd-item-linetotal{font-weight:700;font-size:14px;white-space:nowrap}

.cd-coupon{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08)}
.cd-coupon-toggle{border:0;background:transparent;text-decoration:underline;cursor:pointer;font-size:13px;color:inherit;padding:0}
.cd-coupon-row{display:flex;gap:8px;margin-top:10px}
.cd-coupon-input{flex:1 1 auto;min-width:0;padding:8px 10px;border:1px solid rgba(0,0,0,.2);border-radius:4px}
.cd-coupon-apply{flex:0 0 auto;border:1px solid rgba(0,0,0,.2);background:transparent;border-radius:4px;padding:8px 10px;cursor:pointer;font-size:12px;color:inherit;white-space:nowrap}
.cd-coupon-back{flex:0 0 auto;width:32px;height:32px;padding:0;border:1px solid rgba(0,0,0,.2);background:transparent;border-radius:4px;cursor:pointer;color:inherit;font-size:0;position:relative}
/* display:block is explicit, not left to the implicit blockification
   position:absolute normally gives a pseudo-element: several themes
   (Storefront among them) ship a button::after{display:none} reset that
   targets any <button>, including this one - since that's the only rule
   explicitly setting display on this pseudo-element otherwise, it would
   win regardless of our selector's higher specificity (specificity only
   arbitrates between competing declarations of the same property), leaving
   only the ":before" line visible instead of a full X. */
.cd-coupon-back:before,.cd-coupon-back:after{content:'';display:block;position:absolute;top:50%;left:50%;width:12px;height:1.5px;background:currentColor}
.cd-coupon-back:before{transform:translate(-50%,-50%) rotate(45deg)}
.cd-coupon-back:after{transform:translate(-50%,-50%) rotate(-45deg)}
.cd-coupon-status{margin:8px 0 0;font-size:12px;color:#c0392b}
.cd-coupon-status--success{color:#1e8e3e}

.cd-recommend{margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08)}
.cd-recommend-title{margin:0 0 10px;font-size:14px}
.cd-recommend-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.cd-recommend-item{flex:0 0 96px;display:flex;flex-direction:column;gap:4px}
/* flex:1 so this block absorbs the leftover vertical space instead of the
   button - a 1-line vs. 2-line product name otherwise put each item's
   "Quick view" button at a different height, reading as misaligned across
   the row (the previous complaint this fixes). */
.cd-recommend-link{flex:1 1 auto;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px}
.cd-recommend-link:hover,.cd-recommend-link:focus{color:inherit!important}
.cd-recommend-item img{display:block;width:100%;border-radius:6px}
.cd-recommend-name{font-size:11px;line-height:1.3;max-height:2.6em;overflow:hidden}
.cd-recommend-price{font-size:11px;font-weight:700}
.cd-recommend-quickview{margin-top:2px;border:1px solid rgba(0,0,0,.15);background:transparent;border-radius:999px;padding:4px 8px;font-size:10.5px;font-weight:700;color:inherit;cursor:pointer;text-align:center;box-sizing:border-box}
.cd-recommend-quickview:hover{background:rgba(0,0,0,.06)}
.cd-recommend-quickview:focus{outline:none}

/* Quick view: slides up from the bottom of the drawer panel itself (not a
   separate full-screen modal), so the cart above stays in view - matches
   how the recommendations row it's launched from already reads as "part of
   the cart", not a detour away from it. */
.cd-quickview{
  position:absolute;inset:auto 0 0 0;z-index:2;max-height:88%;
  display:flex;flex-direction:column;background:var(--cd-bg);color:var(--cd-text);
  border-top-left-radius:14px;border-top-right-radius:14px;overflow:hidden;box-shadow:0 -12px 32px rgba(0,0,0,.18);
  transform:translateY(100%);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform var(--cd-duration) cubic-bezier(.22,.72,.18,1),opacity calc(var(--cd-duration) * .8) ease,visibility 0s linear var(--cd-duration);
}
.cd-quickview.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform var(--cd-duration) cubic-bezier(.22,.72,.18,1),opacity calc(var(--cd-duration) * .8) ease,visibility 0s}
.cd-quickview-panel{position:relative;overflow-y:auto;overscroll-behavior:contain}
/* Solid white circle with a real shadow, not a faint tint - sitting right on
   top of the product image (see .cd-qv-media below, which now runs flush to
   the panel's edges instead of sitting inside the padded area below this
   button). The previous version was a near-invisible 6%-black tint floating
   in blank padding above the image, and rendered as an oval instead of a
   circle: a plain <button> keeps the browser's default padding unless it's
   reset, which pads the content box wider than the fixed width/height. */
.cd-quickview-close{
  position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;padding:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.22);
  font-size:20px;line-height:1;cursor:pointer;color:#151515;
}
.cd-quickview-close:hover{background:#fff}
.cd-qv-media{line-height:0;background:var(--cd-progress-bg,#f0f0f0)}
.cd-qv-media img{display:block;width:100%;height:auto}
.cd-qv-info{display:flex;flex-direction:column;gap:6px;padding:14px 20px 20px}
.cd-qv-name{font-weight:700;font-size:16px;padding-right:26px}
.cd-qv-price{font-size:14px;opacity:.8}
.cd-qv-details{font-size:12px;text-decoration:underline;color:inherit;width:fit-content}
.cd-qv-cart{margin-top:10px}
.cd-qv-cart .quantity{display:inline-flex;margin:0 8px 10px 0}
.cd-qv-cart .quantity .qty{width:56px;padding:8px;border:1px solid rgba(0,0,0,.2);border-radius:6px}
/* WooCommerce renders each attribute as a <table><tr><th>label</th>
   <td><select>...</select></td></tr></table>. Turning only the <td> into a
   block (an earlier attempt) leaves the <th> as a lone table-cell in a row
   that's no longer a real table row, which is what knocked the label out of
   line with its own dropdown - opting the whole table out of table layout,
   row by row, keeps label and control on one aligned line instead. */
.cd-qv-cart table.variations,.cd-qv-cart table.variations tbody{display:block}
.cd-qv-cart table.variations tr{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cd-qv-cart table.variations tr:last-child{margin-bottom:0}
.cd-qv-cart table.variations th{flex:0 0 auto;min-width:56px;padding:0;font-weight:600;font-size:13px;text-align:left}
.cd-qv-cart table.variations td{flex:1 1 auto;padding:0}
.cd-qv-cart table.variations select{width:100%;padding:8px;border:1px solid rgba(0,0,0,.2);border-radius:6px}
/* WooCommerce's own "reset selected attribute" link - redundant chrome in
   this compact panel (re-picking the dropdown already does the same thing),
   and its default placement floated it below the row, unattached to
   anything. */
.cd-qv-cart .reset_variations{display:none}
.cd-qv-cart .single_add_to_cart_button{border:0;border-radius:6px;background:var(--cd-accent);color:var(--cd-accent-text);padding:12px 16px;font-weight:700;font-size:13px;cursor:pointer;width:100%}
.cd-qv-cart .single_add_to_cart_button.loading{opacity:.6;pointer-events:none}
.cd-qv-cart .woocommerce-variation-add-to-cart{margin-top:6px}
.cd-qv-oos{font-size:13px;font-weight:700;opacity:.75}
.cd-qv-status{margin:8px 0 0;font-size:12px;color:#c0392b;min-height:14px}
.cd-qv-loading{font-size:13px;opacity:.7;padding:24px 0;text-align:center}

@media(prefers-reduced-motion:reduce){.cd-quickview{transition:none!important}}

/* Pinned to the bottom of the scrollable body regardless of how many items
   or recommendations are above it, so Checkout is always reachable without
   scrolling - the items/coupon/recommendations list is the only part that
   scrolls, not the whole cart. */
.cd-foot{position:sticky;bottom:0;background:var(--cd-bg);margin:14px -20px -20px;padding:14px 20px 20px;box-shadow:0 -8px 12px -8px rgba(0,0,0,.12)}
.cd-totals{padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
.cd-line-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.cd-line-row--total{font-size:15px;font-weight:800;border-top:1px solid rgba(0,0,0,.1);margin-top:4px;padding-top:8px}
.cd-line-row--discount{color:#1a9c4b;font-weight:700}
.cd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
/* Turning off either View Cart or Checkout leaves only one <a> in the grid,
   which otherwise sits half-width in the first column instead of looking
   like an intentional single full-width button. */
.cd-actions .cd-btn:only-child{grid-column:1 / -1;max-width:320px;width:100%;margin:0 auto}
.cd-btn{display:block;text-align:center;padding:13px 10px;border-radius:6px;text-decoration:none;font-weight:700;font-size:13px}
.cd-btn--secondary{border:1px solid var(--cd-accent);color:var(--cd-accent)}
.cd-btn--primary{background:var(--cd-accent);color:var(--cd-accent-text)}
/* Same theme a:hover bleed-through as .cd-item-name above - pin both states
   so "View cart" / "Checkout" stay on the chosen accent colour on hover. */
.cd-btn--secondary:hover,.cd-btn--secondary:focus{color:var(--cd-accent)!important}
.cd-btn--primary:hover,.cd-btn--primary:focus{color:var(--cd-accent-text)!important}

.cd-body.is-loading{opacity:.5;pointer-events:none;transition:opacity .15s ease}

@media(prefers-reduced-motion:reduce){.cd-panel,.cd-overlay{transition:none!important}}

/* wp-admin live-preview scoping: a transform on the phone screen becomes the
   containing block for the drawer's position:fixed pieces (same trick used
   by the Drawer Menu plugin's preview), confining trigger/overlay/panel to
   the phone mockup instead of escaping to the real wp-admin viewport. */
.cd-phone-screen{transform:translateZ(0);container-type:inline-size}
[data-cd-preview-root] .cd-panel{width:min(455px,calc(92 * 1cqw))!important;max-width:none!important}
[data-cd-preview-root] .cd-mobile-layout--bottom-sheet.cd-is-mobile .cd-panel{width:100%!important}
[data-cd-preview-root] .cd-close{z-index:5}