/* Glamaya Commerce — front-end (cart/checkout/product) — responsive. */
/* ===== Coupons — modern block (Shopify/Blinkit/Zepto style): pill input, ticket chips, green applied cards ===== */
.glamc-coupons{ margin:0; font-size:13px; -webkit-font-smoothing:antialiased; }
/* Unified pill: full-width input on the left, Apply fused to the right (one elegant control). */
.glamc-coupon-entry{ display:flex; align-items:center; margin:0 !important; border:1.5px solid #943d00; border:1.5px solid var(--primary-color, #943d00); border-radius:999px; overflow:hidden; background:#fff; transition:border-color .15s, box-shadow .15s; }
.glamc-coupon-entry:focus-within{ border-color:#943d00; border-color:var(--primary-color, #943d00); box-shadow:0 0 0 3px rgba(148,61,0,.12); }
.glamc-coupon-input{ flex:1 1 auto; min-width:0; height:38px !important; min-height:0 !important; margin:0 !important; padding:0 16px !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; font-size:13px; font-weight:600; letter-spacing:.03em; line-height:38px; color:#18181b; box-sizing:border-box; text-transform:uppercase; }
.glamc-coupon-input::placeholder{ text-transform:none; letter-spacing:normal; font-weight:400; color:#a99; color:#b0a48f; }
.glamc-coupon-apply-btn{ flex:0 0 auto; height:38px !important; min-height:0 !important; margin:0 !important; padding:0 20px; border:0; border-radius:0; background:#943d00; background:var(--primary-color, #943d00); color:#fff; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:filter .15s; }
.glamc-coupon-apply-btn:hover{ filter:brightness(1.08); }
.glamc-coupon-apply-btn.loading{ opacity:.6; }
.glamc-coupon-notice{ margin:10px 0 0; padding:10px 12px; border-radius:10px; font-size:12.5px; line-height:1.45; font-weight:500; }
.glamc-coupon-notice--success{ background:#ecfdf3; color:#067647; }
.glamc-coupon-notice--info{ background:#eff8ff; color:#175cd3; }
.glamc-coupon-notice--error{ background:#fef3f2; color:#b42318; }
.glamc-coupon-summaryrow{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-top:12px; }
.glamc-coupon-summary{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.glamc-coupon-summaryhead{ font-size:13px; font-weight:600; line-height:18px; color:#18181b; display:inline-flex; align-items:center; gap:7px; }
.glamc-coupon-savedsub{ padding-left:25px; font-size:12.5px; font-weight:600; color:#067647; }
.glamc-coupon-savedsub .amount,.glamc-coupon-savedsub bdi{ font-weight:700; }
.glamc-coupon-summary .glamc-coupon-tick{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#12b76a; color:#fff; font-size:11px; flex:0 0 auto; }
.glamc-coupon-toggle{ background:none; border:0; padding:0 !important; margin:0 !important; height:18px !important; min-height:0 !important; color:#943d00; color:var(--primary-color, #943d00); font-weight:700; font-size:13px; line-height:18px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.glamc-coupon-toggle .glamc-coupon-caret{ display:inline-block; font-size:15px; transition:transform .2s; }
.glamc-coupon-toggle.is-open .glamc-coupon-caret,
html.glamc-coupons-open .glamc-coupon-toggle .glamc-coupon-caret{ transform:rotate(90deg); }
/* "View all" panel: collapsed by default (server also renders it [hidden]); its open/closed state is held
on the STABLE .glamc-coupons-open class (set before first paint by an inline head script and toggled
in available-coupons.js). Driving visibility from that ancestor class — not the panel node — means a
checkout/fragment re-render that swaps the coupon block can't lose the state: no expand-then-fold jump on
load, and applying a coupon keeps the panel exactly as the shopper left it. */
.glamc-coupon-panel{ margin-top:12px; }
html.glamc-coupons-open .glamc-coupon-panel{ display:block !important; }
/* While suppressing the add-to-cart auto-open (cart-ux.js), keep the drawer + overlay hidden so the shopper
never sees it flash open when they add an item (they only open the mini-cart when THEY choose to). */
html.glamc-suppress-cart .mfp-wrap.off-canvas-right,
html.glamc-suppress-cart .mfp-bg{ display:none !important; }
/* Applied — soft green ticket cards */
.glamc-coupon-applied{ display:flex; flex-direction:column; gap:6px; }
.glamc-coupon-appliedrow{ display:flex; align-items:center; gap:8px; padding:3px 10px; border:1px solid #d1fadf; border-radius:9px; background:#f6fef9; }
.glamc-coupon-atick{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#12b76a; color:#fff; font-size:11px; flex:0 0 auto; }
.glamc-coupon-savedtxt{ flex:1 1 auto; min-width:0; font-size:13px; font-weight:500; color:#101828; line-height:1.25; }
.glamc-coupon-savedtxt .glamc-coupon-chipcode{ display:inline-block; margin-left:2px; padding:1px 7px; border:1px dashed #98a2b3; border-radius:6px; font-weight:700; font-size:11px; letter-spacing:.04em; background:#fff; color:#344054; }
.glamc-coupon-remove{ flex:0 0 auto; width:22px; height:22px !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0; background:transparent; color:#475467; font-size:17px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; align-self:center; transition:color .12s; }
.glamc-coupon-remove:hover{ color:#b42318; }
/* Available — ticket-style pills, tap to apply */
.glamc-coupon-availtitle{ margin:0 0 8px; font-size:11px; font-weight:700; color:#98a2b3; text-transform:uppercase; letter-spacing:.06em; }
/* When applied coupons sit above the "coupons you can use" title, restore a little separation. */
.glamc-coupon-applied + .glamc-coupon-availtitle{ margin-top:12px; }
/* Horizontal carousel: chips scroll sideways so many coupons stay in one tidy row (no vertical sprawl). */
.glamc-coupon-chips{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:thin; scrollbar-color:rgba(148,61,0,.28) transparent; }
.glamc-coupon-chips::-webkit-scrollbar{ height:4px; }
.glamc-coupon-chips::-webkit-scrollbar-thumb{ background:rgba(148,61,0,.28); border-radius:4px; }
.glamc-coupon-chips::-webkit-scrollbar-track{ background:transparent; }
.glamc-coupon-chip{ flex:0 0 auto; scroll-snap-align:start; display:inline-flex; align-items:center; gap:6px; margin:0 !important; min-height:0 !important; padding:9px 14px; border:1.5px dashed #f0c9a0; border-radius:11px; background:#fffaf3; color:#b54708; font-weight:700; font-size:12px; line-height:1.15; letter-spacing:.03em; white-space:nowrap; cursor:pointer; transition:background .15s, box-shadow .15s, transform .1s; }
.glamc-coupon-chip::before{ content:"%"; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#b54708; color:#fff; font-size:10px; font-weight:800; }
.glamc-coupon-chip:hover{ background:#fff4e6; box-shadow:0 2px 8px rgba(181,71,8,.14); }
.glamc-coupon-chip:active{ transform:scale(.97); }
.glamc-coupon-chip.loading{ opacity:.6; }
/* Applied chip = the SAME pill turned green (tap again to remove). Saving on a 2nd line so the pill width
stays close to the code width (doesn't stretch the carousel). */
/* Two tight lines packed into the SAME thickness as a rust chip (no inflated line boxes, minimal padding). */
.glamc-coupon-chip.is-applied{ flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; border-style:solid; border-color:#a6f4c5; background:#ecfdf3; color:#067647; padding:3px 12px; line-height:1; }
.glamc-coupon-chip.is-applied::before{ display:none; } /* no "%" badge — the ✓ tick replaces it */
.glamc-coupon-chip.is-applied:hover{ background:#d1fadf; box-shadow:none; }
.glamc-coupon-chip-main{ display:inline-flex; align-items:center; gap:6px; line-height:1; }
.glamc-coupon-chip-tick{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:#12b76a; color:#fff; font-size:9px; font-weight:800; flex:0 0 auto; }
.glamc-coupon-chip-code{ font-weight:700; line-height:1.1; }
.glamc-coupon-chip-saved{ font-weight:600; font-size:10.5px; line-height:1.1; color:#067647; opacity:.85; padding-left:21px; } /* align under the code (past the tick) */
.glamc-coupon-chip-saved .amount,.glamc-coupon-chip-saved bdi{ font-weight:700; }
.glamc-coupon-chip-x{ margin-left:auto; font-size:15px; line-height:1; color:#067647; opacity:.6; }
.glamc-coupon-chip.is-applied:hover .glamc-coupon-chip-x{ opacity:1; color:#b42318; }
/* Hide WooCommerce's native checkout coupon field when our block is active (avoids duplicate entry). */
.glamc-coupons-active.woocommerce-checkout .woocommerce-form-coupon-toggle,
.glamc-coupons-active.woocommerce-checkout .checkout_coupon{ display:none !important; }
/* Gift chooser — compact, radio choice + thumbnail links; button right-aligned + vertically centered */
.glamc-gift-chooser{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;padding:10px 14px;border:1px solid #e6d9b8;border-radius:8px;background:#fffdf5;font-size:14px;line-height:1.3;}
.glamc-gift-chooser .glamc-gift-title{font-weight:700;margin:0;flex:0 0 auto;}
.glamc-gift-form{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0;}
.glamc-gift-opt{display:flex;align-items:center;gap:6px;margin:0;flex:1 1 240px;min-width:0;}
.glamc-gift-opt input{margin:0;flex:0 0 auto;}
.glamc-gift-link{display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;min-width:0;}
.glamc-gift-thumb{width:34px;height:34px;object-fit:cover;border-radius:4px;border:1px solid #eadfbf;display:block;flex:0 0 auto;}
.glamc-gift-link .glamc-gift-name{white-space:normal;overflow-wrap:anywhere;min-width:0;}
.glamc-gift-link:hover .glamc-gift-name{text-decoration:underline;}
.glamc-gift-chooser .glamc-gift-add{margin:0 0 0 auto !important;padding:6px 16px !important;line-height:1.3;min-height:0;height:auto;align-self:center;white-space:nowrap;}
.glamc-gift-qty{display:inline-block;min-width:24px;text-align:center;}
/* Banner + free label */
.glamc-promotion-banner{margin:0 0 16px;}
.glamc-promotion-banner p{margin:0;}
.glamc-free{color:#1a7f37;font-weight:700;}
del[aria-hidden="true"]{opacity:.65;}
.glamc-line-promotion{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:#1a7f37;font-weight:600;}
.glamc-line-promotion-save{display:block;} /* savings on its own line — clean, no separator */
/* BOGO paid/free breakup (mini-cart, cart, checkout): explicit "N paid + M free" rows so the shopper
sees which units are free — no more opaque averaged unit price. Display only; totals stay tax-safe. */
.glamc-bogo{margin-top:5px;font-size:12px;line-height:1.45;max-width:260px;}
.glamc-bogo-row{display:flex;justify-content:space-between;gap:12px;color:#555;}
.glamc-bogo-q{white-space:nowrap;text-align:left;}
/* Offer label sits on its own line under the free row's "N × price" (not inline with it): block display
drops it to a new line, left-aligned like the rest of the breakup (its ancestor .glamc-co-total-breakup
is text-align:right for the checkout column, so left needs to be explicit here too). */
.glamc-bogo-badge{display:block;text-align:left;color:#0f7a34;font-weight:700;}
.glamc-bogo-free .glamc-bogo-q{white-space:normal;}
.glamc-bogo-v{white-space:nowrap;font-variant-numeric:tabular-nums;}
.glamc-bogo-free .glamc-bogo-v{color:#0f7a34;font-weight:700;}
.glamc-bogo-save{margin-top:3px;padding-top:3px;border-top:1px dashed #b7e3c4;color:#0f7a34;font-weight:700;}
.glamc-bogo-total{margin-top:2px;padding-top:3px;border-top:1px solid #d9d9d9;color:#111;font-weight:700;}
/* ============================================================================
CART PAGE — checkout-style "card" layout at ALL widths (Rahul: match checkout, cleaner than the
PRICE/QTY/SUBTOTAL column table). Each row becomes a 3-area grid: thumbnail (left, spans), name +
qty stepper + remove (middle, stacked), and the breakup/subtotal (right, top-aligned with the name).
Price column folded away (line total shows on the right, like checkout). The under-name breakup copy
and Flatsome's mobile "qty × price" line are hidden — the right column is the single source of truth.
============================================================================ */
.woocommerce-cart-form table.cart,
.woocommerce-cart-form table.cart tbody{display:block;width:100%;}
.woocommerce-cart-form table.cart thead{display:none;}
.woocommerce-cart-form tr.cart_item{
display:grid;
grid-template-columns:76px minmax(0,1fr) auto;
grid-template-areas:"thumb name sub" "thumb qty sub" "thumb remove sub";
align-items:start;column-gap:14px;row-gap:6px;padding:16px 0;border-bottom:1px solid #eee;
}
.woocommerce-cart-form tr.cart_item td{display:block;border:0;padding:0;background:none;}
.woocommerce-cart-form tr.cart_item td.product-thumbnail{grid-area:thumb;}
.woocommerce-cart-form tr.cart_item td.product-thumbnail img{width:76px;height:76px;object-fit:cover;border-radius:6px;margin:0;}
.woocommerce-cart-form tr.cart_item td.product-name{grid-area:name;font-weight:600;line-height:1.35;}
.woocommerce-cart-form tr.cart_item td.product-name a{text-decoration:none;}
.woocommerce-cart-form tr.cart_item td.product-price{display:none;}
.woocommerce-cart-form tr.cart_item td.product-quantity{grid-area:qty;align-self:start;}
.woocommerce-cart-form tr.cart_item td.product-quantity .quantity{margin:0;}
.woocommerce-cart-form tr.cart_item td.product-remove{grid-area:remove;align-self:start;}
.woocommerce-cart-form tr.cart_item td.product-remove a.remove{display:inline-flex;align-items:center;gap:4px;width:auto;height:auto;font-size:0;color:#b12704 !important;background:none !important;line-height:1;border-radius:0;}
.woocommerce-cart-form tr.cart_item td.product-remove a.remove::before{content:"\00d7";font-size:15px;}
.woocommerce-cart-form tr.cart_item td.product-remove a.remove::after{content:"Remove";font-size:12px;}
.woocommerce-cart-form tr.cart_item td.product-subtotal{grid-area:sub;display:block !important;text-align:right;align-self:start;font-weight:600;min-width:150px;}
.woocommerce-cart-form tr.cart_item td.product-subtotal .glamc-bogo{margin-left:auto;max-width:220px;text-align:left;}
/* right column is the single source of truth → hide the under-name breakup copy + Flatsome's mobile line */
.woocommerce-cart-form .glamc-bogo-inname{display:none;}
.woocommerce-cart-form .mobile-product-price{display:none !important;}
/* coupon + "update cart" actions row spans full width (not a card) */
.woocommerce-cart-form tr:not(.cart_item){display:block;width:100%;}
.woocommerce-cart-form tr:not(.cart_item) td{display:block;width:100%;}
/* "WOW! You saved" line in the mini-cart dropdown */
/* padding forced symmetric with !important — Flatsome's #cart-popup `p{padding-bottom:0}` collapsed the
bottom padding, pushing the text low on desktop ("towards the bottom of the box"). */
.glamc-minicart-saved{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:0 0 10px !important;padding:10px 12px !important;background:#e9f9ef;border:1px solid #b7e3c4;border-radius:6px;color:#0f7a34;font-weight:700;font-size:13px;line-height:1.2;}
/* center each span on its own line-box so the theme's tall line-height + the 🎉 emoji don't push text low (desktop) */
.glamc-minicart-saved > span{display:inline-flex;align-items:center;line-height:1.2;}
.glamc-minicart-saved .woocommerce-Price-amount{font-size:1.05em;line-height:1.2;}
/* "You saved ₹X" totals row — make it stand out (green highlight band) */
.cart_totals tr.glamc-total-savings th,.cart_totals tr.glamc-total-savings td,
.woocommerce-checkout-review-order-table tr.glamc-total-savings th,.woocommerce-checkout-review-order-table tr.glamc-total-savings td{
color:#0f7a34;font-weight:700;background:#e9f9ef;border-top:1px solid #b7e3c4;border-bottom:1px solid #b7e3c4;padding-top:10px;padding-bottom:10px;}
.cart_totals tr.glamc-total-savings th,.woocommerce-checkout-review-order-table tr.glamc-total-savings th{font-size:13px;line-height:1.3;padding-left:14px;vertical-align:middle;white-space:nowrap;}
.cart_totals tr.glamc-total-savings td .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table tr.glamc-total-savings td .woocommerce-Price-amount{font-size:1.12em;}
.cart_totals tr.glamc-total-savings td,.woocommerce-checkout-review-order-table tr.glamc-total-savings td{text-align:right;padding-right:14px;vertical-align:middle;}
/* Checkout order-review: product image beside the name as a clean media object (no image column in WC).
text-align:left is explicit, not assumed: the theme's default table styling right-aligns table cell text
(sensible for a lone amount column), and used to be countered by product-name having its own separate
the theme rule didn't happen to reach the same way. Now that the item row is one |
(see the row2 comment below), that incidental override is gone, so the name inherited right-alignment
from the theme rule until this was added back explicitly. */
.glamc-co-item{display:flex;align-items:flex-start;gap:8px;text-align:left;}
.glamc-co-thumb{flex:0 0 42px;width:42px;height:42px;object-fit:cover;border-radius:4px;border:1px solid #eee;}
.glamc-co-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.35;}
.glamc-co-qty{white-space:nowrap;color:#555;}
/* Top-align the amount with the product name's first line (not the middle of the row) */
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table td.product-total{vertical-align:top;}
/* mini-cart already renders its own image + qty → don't duplicate */
.widget_shopping_cart .glamc-co-item,.woocommerce-mini-cart .glamc-co-item{display:block;}
.widget_shopping_cart .glamc-co-thumb,.woocommerce-mini-cart .glamc-co-thumb,
.widget_shopping_cart .glamc-co-qty,.woocommerce-mini-cart .glamc-co-qty{display:none;}
/* Checkout order review: each cart item is ONE | (see the checkout/review-order.php template
override registered in GLAMC_Flow), not WooCommerce's default separate product-name/product-total cells.
That was a deliberate escape from the native table: a shared auto-sizes its columns across EVERY
row including 's Subtotal/Shipping/Total rows, so anything that changed how much of the row
product-name vs product-total claimed (a CSS width, display:contents to unhide product-total, tr{display:
grid}) ended up nudging the totals rows' own column split too — colspan sidesteps that class of bug
entirely; the cart-item row is simply full width, with no second table column to fight over.
Row 1 (.glamc-co-item, image+name) is a plain block spanning that full width. Row 2 (.glamc-co-row2) is a
plain flex split — stepper on the left, breakup right-aligned on the right — using ordinary flexbox on
ordinary block content inside one cell, none of the table-column machinery that broke before. */
.glamc-co-row2{display:flex;align-items:flex-start;justify-content:space-between;gap:4.5em;margin-top:8px;}
.glamc-co-total-breakup{font-size:12px;text-align:right;flex:1 1 auto;min-width:0;}
.glamc-co-total-breakup .glamc-bogo{margin-top:0;max-width:none;margin-left:auto;}
/* ===== Custom mini-cart (off-canvas): full-width on mobile, elegant panel on desktop =====
Size the actual Flatsome off-canvas PANEL (.mfp-content.off-canvas-cart, position:fixed pinned right).
#cart-popup lives INSIDE it — force it to 100% so it fills the panel (overriding its width to 100vw made
it wider than the 360px panel → 30px overflow + content cut off on the right). */
.off-canvas-cart.mfp-content{ box-sizing:border-box; }
/* SCROLL FIX: Magnific Popup intermittently sizes the fixed off-canvas panel to its CONTENT height instead
of the viewport — then overflow:auto has nothing to scroll and everything past one screen is unreachable
("scroll gets stuck after one screen", needs a reload). Pin the panel to the visible viewport height and
force internal scroll so the full drawer is always reachable however tall the value-add blocks make it.
100dvh tracks the mobile browser's dynamic toolbar (100vh fallback for older browsers). */
.mfp-wrap.off-canvas-right .off-canvas-cart.mfp-content{
height:100vh !important; height:100dvh !important;
max-height:100vh !important; max-height:100dvh !important;
overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
@media (max-width:767px){ .mfp-wrap.off-canvas-right .off-canvas-cart.mfp-content{ width:100vw !important; max-width:100vw !important; } }
@media (min-width:768px){ .mfp-wrap.off-canvas-right .off-canvas-cart.mfp-content{ width:380px !important; max-width:100% !important; } }
#cart-popup{ width:100% !important; max-width:100% !important; box-sizing:border-box; }
#cart-popup .cart-popup-inner{ box-sizing:border-box; }
.glamc-mini-cart{ margin:0; padding:0; list-style:none; }
#cart-popup .cart-popup-inner{ box-sizing:border-box; padding:0 !important; } /* let items own their padding */
/* Sticky drawer header — items scroll UNDER it (Flatsome's title "CART" + the close ×). */
#cart-popup .cart-popup-title{ position:sticky; top:0; z-index:3; background:#fff; margin:0 !important; padding:16px !important; border-bottom:1px solid #eee; letter-spacing:.04em; }
/* Item = two stacked rows. Row 1: [product pic | name + breakup]. Row 2 (controls): [× box · qty stepper ·
Move to wishlist]. Name has no border and wraps freely; breakup sits under the name (amounts right-aligned). */
.glamc-mci{ display:flex; flex-direction:column; gap:12px; position:relative; padding:16px; border-bottom:1px solid #f0f0f0; margin:0; transition:background .12s; }
.glamc-mci:hover{ background:#fafafa; }
.glamc-mci-top{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:start; }
.glamc-mci-thumb{ display:block; }
.glamc-mci-thumb img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #eee; margin:0; display:block; }
.glamc-mci-info{ min-width:0; }
.glamc-mci-name{ display:block; font-weight:600; font-size:13.5px; line-height:1.35; color:#222; text-decoration:none; overflow-wrap:anywhere; }
.glamc-mci-name:hover{ color:#b12704; }
.glamc-mci-breakup{ margin-top:7px; }
.glamc-mci-breakup .glamc-bogo{ margin-top:0; max-width:none; font-size:12px; line-height:1.45; }
.glamc-mci-total{ display:block; text-align:right; font-weight:700; font-size:14px; color:#111; white-space:nowrap; }
/* Row 2 = three controls on ONE line (never wrap): [stepper] · [🗑 delete] · [Move to wishlist], evenly spread. */
.glamc-mci-actions{ display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:nowrap; margin-top:6px; }
/* Move to wishlist pushed to the right edge; delete + stepper stay grouped on the left. */
.glamc-mci-actions .glamc-mci-wishlist{ margin-left:auto !important; }
/* Delete = a neutral icon button (bin), matching the wishlist page. Text kept for screen readers only. */
.glamc-mci .glamc-mci-remove{ position:static !important; flex:0 0 auto; width:40px !important; height:34px; margin:0 !important; line-height:0; display:inline-flex !important; align-items:center; justify-content:center; padding:0 !important; border:1px solid #e0e0e0 !important; border-radius:8px !important; background:#fff !important; color:#555 !important; text-decoration:none; box-shadow:none !important; transition:border-color .12s,color .12s; }
.glamc-mci .glamc-mci-remove:hover{ background:#fff !important; color:#c0392b !important; border-color:#c0392b !important; }
.glamc-mci-remove-ico{ display:inline-flex; }
.glamc-mci-remove-ico svg{ width:17px; height:17px; display:block; }
.glamc-mci-remove-t{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.glamc-mci-actions .glamc-mc-qty{ margin-top:0; height:34px; flex:0 0 auto; }
.glamc-mci-actions .glamc-mc-qty .glamc-mcq-btn{ height:32px; }
.glamc-mci-qtytext{ color:#0f7a34; font-weight:600; font-size:12px; }
.glamc-mci-wishlist{ flex:0 1 auto; min-width:0; margin:0 !important; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 12px; border:1px solid #e0e0e0; border-radius:8px; background:#fff; color:#444; font-size:12px; font-weight:600; text-transform:none !important; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .12s,color .12s; }
.glamc-mci-wishlist:hover{ border-color:#c0392b; color:#c0392b; }
.glamc-mci-wishlist[disabled]{ opacity:.5; cursor:default; }
.glamc-mci-heart{ color:#c0392b; font-size:14px; line-height:1; flex:0 0 auto; }
/* Override Flatsome's .mini_cart_item defaults (75px left padding + absolutely-positioned ![]() ) that pushed
our grid 75px right and pulled the photo flush to the edge. Now the photo sits in-flow with proper padding
and the controls row (× / stepper / wishlist) starts at the SAME left edge as the photo. */
#cart-popup li.glamc-mci{ padding:16px !important; position:relative; }
#cart-popup .glamc-mci .glamc-mci-thumb{ position:static !important; }
#cart-popup .glamc-mci .glamc-mci-thumb img{ position:static !important; left:auto !important; top:auto !important; width:64px !important; height:64px !important; }
/* Desktop only: slightly larger thumbnail (mobile stays 64px for a tighter full-width layout). */
@media (min-width:768px){
.glamc-mci-top{ grid-template-columns:72px minmax(0,1fr); }
.glamc-mci-thumb img,
#cart-popup .glamc-mci .glamc-mci-thumb img{ width:72px !important; height:72px !important; }
.glamc-mci-actions{ margin-top:12px; } /* a touch more breathing room on desktop */
}
.glamc-mci-remove, .glamc-mci-wishlist, .glamc-mci-actions .glamc-mc-qty{ box-sizing:border-box; align-self:center; }
/* Footer polish */
/* Mini-cart value-add blocks (cart messages / free-gift chooser / applicable coupons) shown above the total. */
/* Each mini-cart value-add is a clear, elegant enclosing card (inset via margin so borders sit cleanly). */
#cart-popup .glamc-mc-extra{ margin:0 16px 12px; padding:0; }
#cart-popup .glamc-mc-extra:first-of-type{ margin-top:12px; }
/* Notifications — grouped in one soft card; the inner alerts become clean tinted rows (no double border). */
#cart-popup .glamc-mc-messages{ border:1px solid #ece1cf; border-radius:14px; background:#fdfbf7; padding:10px; }
#cart-popup .glamc-mc-messages .glamc-msg{ margin:0 0 8px !important; border:0 !important; box-shadow:none !important; border-radius:10px; }
#cart-popup .glamc-mc-messages .glamc-msg:last-child{ margin-bottom:0 !important; }
/* Free-gift card. */
#cart-popup .glamc-mc-gift .glamc-gift-chooser{ margin:0; padding:12px 14px; border:1px solid #ece1cf; border-radius:14px; background:#fdfbf7; }
#cart-popup .glamc-mc-gift .glamc-gift-title{ font-size:13px; }
#cart-popup .glamc-mc-gift .glamc-gift-add{ width:100%; margin-top:8px; }
/* Coupons — the whole block (input + summary + panel) in one card, with a clear start/end. Same card on the
mini-cart drawer AND the checkout order-review, so the checkout coupon UI matches the mini-cart look & feel. */
#cart-popup .glamc-coupons,
.woocommerce-checkout .glamc-coupons{ border:1px solid #ece1cf; border-radius:14px; background:#fff; padding:12px; }
.woocommerce-checkout .glamc-coupons{ margin:0 0 18px; }
#cart-popup .woocommerce-mini-cart__total{ padding:14px 16px 4px; margin:0; display:flex; justify-content:space-between; align-items:center; font-size:15px; }
/* Discount-aware mini-cart total: original struck through, net highlighted (matches the checkout's reduced total). */
.woocommerce-mini-cart__total .glamc-mc-total-was{ text-decoration:line-through; opacity:.55; font-weight:400; margin-left:auto; }
.woocommerce-mini-cart__total .glamc-mc-total-now{ font-weight:700; color:#0f7a34; }
#cart-popup .glamc-minicart-saved{ margin:8px 16px 12px !important; }
#cart-popup .woocommerce-mini-cart__buttons{ padding:0 16px 16px; margin:0; }
#cart-popup .woocommerce-mini-cart__buttons .checkout{ display:block; width:100%; text-align:center; }
/* "View my wishlist (N)" — a full-width button matching the Checkout button. ONLY inside the off-canvas drawer
(#cart-popup); the header hover-dropdown is a separate mini-cart instance where it'd render unstyled, so hide
it there. */
.glamc-mc-wishlink-row{ display:none; }
#cart-popup .glamc-mc-wishlink-row{ display:block; margin:0 !important; padding:0 16px 16px; }
#cart-popup .glamc-mc-wishlink{ display:flex; width:100%; box-sizing:border-box; align-items:center; justify-content:center; gap:8px; min-height:39px; padding:9px 18px; border:2px solid #943d00; border:2px solid var(--primary-color, #943d00); background:#943d00; background:var(--primary-color, #943d00); color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; transition:filter .15s; }
#cart-popup .glamc-mc-wishlink:hover{ color:#fff; text-decoration:none; filter:brightness(.9); }
#cart-popup .glamc-mc-wishlink .glamc-mci-heart{ color:#fff; font-size:15px; }
#cart-popup .glamc-mc-wishcount{ color:inherit; font-weight:700; }
/* Empty cart: push the wishlist button to the BOTTOM of the drawer (the content area is a flex column). */
#cart-popup .woocommerce-mini-cart__empty-message{ padding:16px; margin:0; }
#cart-popup .woocommerce-mini-cart__empty-message + .glamc-mc-wishlink-row{ margin-top:auto !important; }
/* Mini-cart inline qty stepper */
.glamc-mc-qty{display:inline-flex;flex:0 0 auto;align-items:center;gap:0;border:1px solid #d9d9d9;border-radius:6px;overflow:hidden;margin-top:4px;line-height:1;white-space:nowrap;}
.glamc-mc-qty .glamc-mcq-btn{flex:0 0 auto;}
.glamc-mc-qty .glamc-mcq-btn{width:26px;height:26px;padding:0;margin:0;border:0;background:#f5f5f5;color:#333;font-size:15px;font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.glamc-mc-qty .glamc-mcq-btn:hover{background:#ececec;}
.glamc-mc-qty .glamc-mcq-btn:disabled{opacity:.5;cursor:default;}
.glamc-mc-qty .glamc-mcq-n{min-width:30px;text-align:center;font-size:13px;font-weight:600;padding:0 4px;background:#fff;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;}
/* stepper in row 2 (left side) of the checkout order review */
.glamc-co-qtyrow{display:block;flex:0 0 auto;}
/* Unified flow skips the standalone Cart page → hide the "Shopping Cart" breadcrumb step + its arrow on
checkout (leaves "Checkout details › Order Complete"). Scoped to the unified flow so classic keeps it. */
body.glamc-flow-unified .checkout-breadcrumbs > a:first-of-type,
body.glamc-flow-unified .checkout-breadcrumbs > a:first-of-type + .divider{display:none !important;}
/* Recovery "welcome back" banner atop checkout */
.glamc-welcome-back{margin:0 0 18px;padding:12px 16px;border-radius:8px;background:#e9f9ef;border:1px solid #b7e3c4;color:#0f7a34;font-weight:600;line-height:1.4;}
/* Unified flow: the mini-cart only needs "Checkout" — hide the redundant "View cart" button + make Checkout full-width */
body.glamc-flow-unified .woocommerce-mini-cart__buttons a.button:not(.checkout){display:none !important;}
body.glamc-flow-unified .woocommerce-mini-cart__buttons a.checkout.button{display:block;width:100%;text-align:center;}
/* Cart / promotion messages */
.glamc-msg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;font-size:14px;line-height:1.4;}
.glamc-msg .glamc-msg-text{flex:1 1 60%;}
.glamc-msg .glamc-msg-btn{white-space:nowrap;transition:background .15s;}
.glamc-msg .glamc-msg-btn:hover{background:var(--glamc-bh) !important;}
.glamc-msg .glamc-msg-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;border-radius:50%;color:#fff;font-size:18px;flex:0 0 auto;}
/* Responsive: stack on small screens, full-width buttons */
@media (max-width:600px){
.glamc-gift-chooser{align-items:stretch;}
.glamc-gift-form{width:100%;flex-basis:100%;}
.glamc-gift-chooser .glamc-gift-add{margin:6px 0 0 0 !important;width:100%;text-align:center;}
/* keep the icon inline with the text, left-aligned; only the button drops to its own full-width row.
flex:1 1 0 + min-width:0 lets the text shrink and wrap IN PLACE beside the icon (basis:auto would
push the whole text block onto its own line under the icon). */
.glamc-msg{align-items:center;justify-content:flex-start;text-align:left;}
.glamc-msg .glamc-msg-text{flex:1 1 0;min-width:0;}
.glamc-msg .glamc-msg-btn{flex:1 1 100%;margin:8px 0 0 0 !important;width:100%;text-align:center;}
}
/* Checkout order-review on small screens: reclaim width + left-align payment options so labels
(e.g. "Cash on Delivery (5 – 6 Days): ₹50.00") sit on one line without shrinking the text. */
@media (max-width:849px){
.woocommerce-checkout .col-inner:has(.checkout-sidebar){padding-left:16px !important;padding-right:16px !important;}
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods li{padding-left:0 !important;margin-left:0 !important;}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{margin:0 6px 0 0 !important;}
.woocommerce-checkout #payment ul.payment_methods li label{padding-left:0 !important;margin-left:0 !important;line-height:1.35;}
/* Order-review table: short labels don't wrap (values get the room); keep amounts on one line. */
.woocommerce-checkout .shop_table th{white-space:nowrap;}
.woocommerce-checkout .shop_table td.product-name{vertical-align:top;}
.woocommerce-checkout-review-order-table td.product-total{white-space:nowrap;}
/* On mobile the crossed-out original is redundant with the "you save ₹X" label → hide it here only. */
.woocommerce-checkout-review-order-table td.product-total del{display:none;}
.woocommerce-checkout-review-order-table .glamc-line-promotion{font-size:11px;line-height:1.3;max-width:135px;margin-left:auto;overflow-wrap:anywhere;white-space:normal;}
}
/* ===== Wishlist page — card layout matching the mini-cart (GLAMC_Wishlist override) ===== */
/* Container is a carrying YITH's .cart.wishlist_table classes; force our grid over YITH's table CSS. */
.glamc-wl{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; width:100%; margin:0 0 20px; border:0 !important; }
.glamc-wl, .glamc-wl *{ box-sizing:border-box; }
.glamc-wl .glamc-wl-item{ display:block; border:1px solid #eee; border-radius:10px; padding:16px; background:#fff; }
/* Row 1: [72px thumb | name + price/stock rows] */
.glamc-wl .glamc-wl-top{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:start; }
.glamc-wl .glamc-wl-thumb{ display:block; }
.glamc-wl .glamc-wl-thumb img{ width:72px !important; height:72px !important; max-width:none; object-fit:cover; border-radius:8px; border:1px solid #eee; margin:0; display:block; }
.glamc-wl .glamc-wl-info{ min-width:0; }
.glamc-wl .glamc-wl-name{ display:block; font-weight:600; font-size:14px; line-height:1.3; color:#222; text-decoration:none; margin:0 0 6px; }
.glamc-wl .glamc-wl-name:hover{ color:#c0392b; }
.glamc-wl .glamc-wl-line{ display:flex; justify-content:space-between; gap:12px; font-size:13px; line-height:1.5; color:#555; }
.glamc-wl .glamc-wl-k{ color:#777; }
.glamc-wl .glamc-wl-v{ font-weight:600; color:#222; text-align:right; }
.glamc-wl .glamc-wl-v .amount{ font-weight:600; }
.glamc-wl .glamc-wl-instock{ color:#0f7a34; }
.glamc-wl .glamc-wl-oos{ color:#c0392b; }
/* Row 2: [Delete icon] [Share icon] [Move to cart] */
.glamc-wl .glamc-wl-actions{ position:relative; display:flex; align-items:center; gap:10px; margin-top:12px; }
/* icon buttons (delete bin + share) */
.glamc-wl .glamc-wl-iconbtn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin:0 !important; padding:0 !important; line-height:0; border:1px solid #e0e0e0 !important; border-radius:8px !important; background:#fff !important; color:#555 !important; cursor:pointer; text-decoration:none; box-shadow:none !important; vertical-align:middle; }
.glamc-wl .glamc-wl-iconbtn svg{ width:18px; height:18px; display:block; margin:0; }
.glamc-wl .glamc-wl-delete:hover{ border-color:#c0392b !important; color:#c0392b !important; background:#fff !important; }
.glamc-wl .glamc-wl-share:hover{ border-color:#005d8a !important; border-color:var(--secondary-color, var(--fs-color-secondary, #005d8a)) !important; color:#005d8a !important; color:var(--secondary-color, var(--fs-color-secondary, #005d8a)) !important; background:#fff !important; }
.glamc-wl .glamc-wl-actions .button, .glamc-wl .glamc-wl-actions .add_to_cart_button, .glamc-wl .glamc-wl-actions a.add_to_cart_button.added{ flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; min-height:38px; margin:0 !important; padding:0 16px !important; border-radius:8px !important; font-size:13px; font-weight:600; text-align:center; background:#005d8a !important; background:var(--secondary-color, var(--fs-color-secondary, #005d8a)) !important; color:#fff !important; border:1px solid #005d8a !important; border-color:var(--secondary-color, var(--fs-color-secondary, #005d8a)) !important; box-shadow:none !important; transition:filter .15s; }
.glamc-wl .glamc-wl-actions .add_to_cart_button:hover, .glamc-wl .glamc-wl-actions .button:hover{ color:#fff !important; filter:brightness(.9); }
/* the "View cart" link WC appends after an ajax add — keep it readable, not a full button */
.glamc-wl .glamc-wl-actions a.added_to_cart{ flex:0 0 auto; margin-left:8px !important; font-size:12px; color:#005d8a; color:var(--secondary-color, var(--fs-color-secondary, #005d8a)); text-decoration:underline; background:none !important; border:0 !important; min-height:0 !important; padding:0 !important; }
.glamc-wl .glamc-wl-pagination{ grid-column:1 / -1; margin-top:4px; }
.glamc-wl .glamc-wl-empty{ grid-column:1 / -1; margin:0; padding:16px; color:#555; }
/* Whole-wishlist share: one clean button (native share sheet on mobile / popover on desktop) */
.glamc-wl-share-wrap{ margin:18px 0 4px; }
.glamc-wl-sharewishlist{ display:inline-flex; align-items:center; gap:8px; height:40px; margin:0 !important; padding:0 18px; border:1px solid #005d8a; border-color:var(--secondary-color, var(--fs-color-secondary, #005d8a)); border-radius:8px; background:#fff; color:#005d8a; color:var(--secondary-color, var(--fs-color-secondary, #005d8a)); font-size:14px; font-weight:600; cursor:pointer; transition:filter .15s; }
.glamc-wl-sharewishlist:hover{ background:#005d8a; background:var(--secondary-color, var(--fs-color-secondary, #005d8a)); color:#fff; }
/* Generic YITH icon sizing (safety — their own sizing CSS doesn't always load here). */
.yith-wcwl-icon-svg{ width:1em; height:1em; display:inline-block; vertical-align:middle; }
/* The "edit wishlist title" (rename) UI is removed at the template level (wishlist-view-header.php override),
so the title is plain, non-clickable text — nothing to hide here. */
.wishlist-title-container .wishlist-title{ cursor:default; }
.glamc-wl-sharewishlist svg{ width:18px; height:18px; }
/* Desktop share popover (position:fixed, placed by JS) */
.glamc-share-pop{ z-index:9999; display:flex; gap:8px; padding:10px; background:#fff; border:1px solid #e3e3e3; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.14); }
.glamc-share-net{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:0; background:#f2f2f2; color:#333; cursor:pointer; text-decoration:none; padding:0; transition:filter .12s; }
.glamc-share-net:hover{ filter:brightness(.94); }
.glamc-share-net svg{ width:18px; height:18px; display:block; }
.glamc-share-whatsapp{ background:#25d366 !important; color:#fff !important; }
.glamc-share-facebook{ background:#1877f2 !important; color:#fff !important; }
.glamc-share-pinterest{ background:#e60023 !important; color:#fff !important; }
.glamc-share-x{ background:#111 !important; color:#fff !important; }
.glamc-share-email{ background:#5b6b7f !important; color:#fff !important; }
.glamc-share-copy.is-copied{ background:#0f7a34 !important; color:#fff !important; }
/* "Moved to wishlist" toast — bottom-center, auto-dismiss; single line. Background follows the THEME SECONDARY
colour (Flatsome's --fs-color-secondary) so it stays in sync if the theme colour changes; text stays white. */
/* bg priority: admin override (--glamc-toast-bg) → else a ~18% lighter shade of the theme secondary colour
(via color-mix) so it stays distinct from the Checkout button; static hex fallback for old browsers. */
.glamc-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px); z-index:100000; display:inline-flex; align-items:center; gap:8px; max-width:calc(100vw - 24px); white-space:nowrap; padding:12px 18px; background:#2e7a9f; background:var(--glamc-toast-bg, color-mix(in srgb, var(--secondary-color, var(--fs-color-secondary, #005d8a)) 82%, #fff)); color:#fff; font-size:14px; font-weight:600; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.28); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.glamc-toast.is-in{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.glamc-toast .glamc-toast-heart{ color:rgba(255,255,255,.92); font-size:15px; line-height:1; }
.glamc-toast .glamc-toast-ico{ display:inline-flex; }
.glamc-toast .glamc-toast-ico svg{ width:17px; height:17px; display:block; }
/* Suppress-guard: while moving a wishlist item to cart (items remain), keep Flatsome's off-canvas cart fully
hidden so its auto-open can't flash on screen — no flicker. */
html.glamc-suppress-cart .mfp-wrap,
html.glamc-suppress-cart .mfp-bg,
html.glamc-suppress-cart .off-canvas-cart,
html.glamc-suppress-cart #cart-popup,
html.glamc-suppress-cart .off-canvas-overlay{ display:none !important; opacity:0 !important; pointer-events:none !important; }
.glamc-toast .glamc-toast-link{ color:#fff; text-decoration:underline; margin-left:6px; font-weight:700; white-space:nowrap; opacity:.92; }
.glamc-toast .glamc-toast-link:hover{ opacity:1; }
|