/* ============================================================
   WOOCOMMERCE CART + CHECKOUT + ACCOUNT STYLES
   ============================================================ */

/* Global WooCommerce overrides */
/* ── NOTICES ARE NOT BOXES ───────────────────────────────────────────
 * Every notice and alert on the storefront used to sit inside a drawn
 * rectangle. There were four separate sources of it, which is why it
 * kept turning up in places that looked unrelated:
 *
 *   1. .woocommerce-error/-message/-info  a 3px rule down the left edge
 *      (style.css), plus the border-top colouring that used to be here.
 *   2. .cauth-alert                       a full 1px border on all four
 *                                         sides - the sign-in and account
 *                                         alerts.
 *   3. .wishlist-notice                   the same, on the wishlist's
 *                                         "item no longer available" line.
 *   4. <fieldset class="celasta-newsletter-pref">  no theme rule at all,
 *      so the BROWSER's default 2px groove drew the box around Email
 *      preferences. That is the one in the report, and no amount of
 *      searching the notice CSS would have found it - it was never
 *      styled, which was the problem.
 *
 * All four are removed here. Backgrounds and text colours are kept: they
 * carry the meaning, and a tint is not an outline.
 *
 * The border-top colouring that used to be on this rule was already
 * inert - it coloured a border WooCommerce's own stylesheet declares,
 * and that stylesheet is not loaded on this site.
 * ──────────────────────────────────────────────────────────────────── */
.woocommerce-message,.woocommerce-info{border:0!important;background:var(--c-surface)!important;}
.woocommerce-message::before,.woocommerce-info::before{color:var(--c-gold)!important;}
.woocommerce-error{border:0!important;}

/* A fieldset is a grouping element, not a panel. Padding and margin are
   reset with the border because the browser's defaults for those exist
   only to sit inside it, and left behind they push the contents out of
   line with every other row on the form. */
.woocommerce fieldset,
.celasta-newsletter-pref{border:0;padding:0;margin:0 0 18px;min-width:0;}
.woocommerce fieldset > legend,
.celasta-newsletter-pref > legend{padding:0;margin:0 0 8px;
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-muted);}
.woocommerce-notices-wrapper{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,60px);}

/* Product Cards in Loop */
.woocommerce ul.products{margin:0!important;}
.woocommerce ul.products li.product,.coll-grid .product{position:relative;overflow:hidden;background:var(--c-white)!important;border:1px solid var(--c-border)!important;padding:0!important;transition:var(--transition)!important;display:flex!important;flex-direction:column;height:100%;}
.woocommerce ul.products li.product:hover,.coll-grid .product:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(44,37,32,0.1);}
.woocommerce ul.products li.product a img,.coll-grid .product a img{margin:0!important;transition:transform 0.6s ease!important;}
.woocommerce ul.products li.product:hover a img,.coll-grid .product:hover a img{transform:scale(1.06)!important;}
.woocommerce ul.products li.product .woocommerce-loop-product__title,.coll-grid .product .woocommerce-loop-product__title{font-family:var(--font-display)!important;font-size:1.1rem!important;font-weight:400!important;color:var(--c-charcoal)!important;padding:16px 16px 4px!important;}
.woocommerce ul.products li.product .price,.coll-grid .product .price{color:var(--c-text)!important;font-size:0.88rem!important;padding:0 16px 16px!important;}
.woocommerce ul.products li.product .price del,.coll-grid .product .price del{color:var(--c-muted)!important;font-size:0.8rem!important;}
.woocommerce ul.products li.product .price ins,.coll-grid .product .price ins{text-decoration:none!important;color:var(--c-text)!important;}
/* Add to Cart used to be position:absolute with bottom:-50px, sliding up on
   hover. That meant it was invisible until hovered, it sat ON TOP of the
   title, price and discount when it did appear, and on touch - where there is
   no hover - it was unreachable. It is now a normal block at the end of the
   card: always visible, never covering anything. margin-top:auto pins it to
   the bottom edge so the buttons line up across a row of cards. */
.woocommerce ul.products li.product .button,.coll-grid .product .button{position:static!important;bottom:auto!important;left:auto!important;right:auto!important;display:block!important;width:100%!important;margin:auto 0 0!important;background:var(--c-charcoal)!important;color:var(--c-white)!important;font-family:var(--font-body)!important;font-size:0.68rem!important;letter-spacing:0.18em!important;text-transform:uppercase!important;padding:14px!important;border-radius:var(--c-radius-btn)!important;transition:background 0.25s ease!important;text-align:center!important;}
/* (the hover-reveal rule that used to live here is gone - the button no longer moves) */
.woocommerce ul.products li.product .button:hover,.coll-grid .product .button:hover{background:var(--c-gold)!important;}
.woocommerce ul.products li.product .onsale,.coll-grid .product .onsale{background:var(--c-gold)!important;border-radius:0!important;font-size:0.65rem!important;letter-spacing:0.1em!important;font-family:var(--font-body)!important;top:12px!important;left:12px!important;margin:0!important;min-height:unset!important;min-width:unset!important;padding:4px 10px!important;line-height:1.4!important;}

/* "New" badge (products added within the last 30 days) — previously inline-styled */
.product-badge-new{position:absolute;top:10px;left:10px;background:#4A5E45;color:#fff;font-size:0.6rem;letter-spacing:0.12em;padding:4px 10px;text-transform:uppercase;z-index:3;}
/* Sale "% off" suffix next to the struck-through price — previously inline-styled */
/* Discount badge beside a sale price. One definition site-wide so the
   catalogue and the product page cannot drift apart. (Until the dead
   woocommerce_sale_price_html filter was fixed this never rendered
   anywhere, so there is no legacy appearance to preserve.) */
.sale-pct-off{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;background:rgba(184,154,106,0.14);color:var(--c-gold);font-family:var(--font-body);font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;vertical-align:middle;text-decoration:none;}

/* Global WooCommerce Buttons */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{background:var(--c-charcoal)!important;color:var(--c-white)!important;font-family:var(--font-body)!important;font-size:0.75rem!important;letter-spacing:0.18em!important;text-transform:uppercase!important;padding:14px 32px!important;border-radius:var(--radius-sm)!important;transition:var(--transition)!important;border:none!important;}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--c-gold)!important;}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--c-gold)!important;}
.woocommerce a.button.alt:hover{background:var(--c-charcoal)!important;}

/* CART PAGE */
.woocommerce table.shop_table{border-radius:0;overflow:hidden;border:1px solid var(--c-border)!important;}
.woocommerce table.shop_table th{background:var(--c-surface)!important;font-family:var(--font-body)!important;font-size:0.7rem!important;letter-spacing:0.15em!important;text-transform:uppercase!important;color:var(--c-muted)!important;font-weight:500!important;padding:16px 20px!important;border:none!important;border-bottom:1px solid var(--c-border)!important;}
.woocommerce table.shop_table td{padding:20px!important;border-color:var(--c-border)!important;vertical-align:middle!important;}
.woocommerce table.shop_table .product-name a{font-family:var(--font-display);font-size:1.05rem;color:var(--c-charcoal);}
.woocommerce table.shop_table .product-name a:hover{color:var(--c-gold);}
.woocommerce table.shop_table .product-remove a{color:var(--c-muted)!important;font-size:1.1rem!important;}
.woocommerce table.shop_table .product-remove a:hover{color:#c0392b!important;background:none!important;}
.woocommerce .cart-collaterals{margin-top:40px;}
.woocommerce .cart_totals{background:var(--c-surface);padding:36px;border:1px solid var(--c-border);}
.woocommerce .cart_totals h2{font-family:var(--font-body);font-size:0.72rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-muted);margin-bottom:24px;}
.woocommerce .cart_totals table th,.woocommerce .cart_totals table td{border-color:var(--c-border)!important;padding:12px 0!important;font-size:0.9rem;}
.woocommerce .cart_totals table .order-total th,.woocommerce .cart_totals table .order-total td{font-weight:600;font-size:1rem;border-top:2px solid var(--c-charcoal)!important;}
.woocommerce .wc-proceed-to-checkout{padding:0;}
.woocommerce .wc-proceed-to-checkout .checkout-button{width:100%;text-align:center;padding:16px!important;margin-top:16px;}
.woocommerce .coupon input[type="text"]{border:1px solid var(--c-border)!important;padding:12px 16px!important;font-family:var(--font-body)!important;font-size:0.88rem!important;outline:none!important;width:auto!important;}
.woocommerce .coupon input[type="text"]:focus{border-color:var(--c-gold)!important;}

/* CHECKOUT PAGE */
.woocommerce-checkout #customer_details h3,.woocommerce-checkout #order_review_heading{font-family:var(--font-display)!important;font-size:1.5rem!important;font-weight:400!important;margin-bottom:28px!important;padding-bottom:16px!important;border-bottom:1px solid var(--c-border)!important;}
.woocommerce form .form-row{margin-bottom:20px!important;}
.woocommerce form .form-row label{font-size:0.72rem!important;font-weight:500!important;letter-spacing:0.1em!important;text-transform:uppercase!important;color:var(--c-text)!important;margin-bottom:8px!important;display:block!important;}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border:1px solid var(--c-border)!important;border-radius:var(--radius-sm)!important;padding:12px 16px!important;font-family:var(--font-body)!important;font-size:0.9rem!important;color:var(--c-text)!important;background:var(--c-white)!important;transition:var(--transition)!important;width:100%!important;}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{border-color:var(--c-gold)!important;outline:none!important;box-shadow:0 0 0 3px rgba(184,154,106,0.1)!important;}
.woocommerce #payment{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;border-radius:0!important;}
.woocommerce #payment ul.payment_methods{border-bottom:1px solid var(--c-border)!important;padding:20px!important;}
.woocommerce #payment ul.payment_methods li label{font-size:0.9rem!important;color:var(--c-text)!important;}
.woocommerce #payment div.payment_box{background:rgba(250,248,244,0.8)!important;font-size:0.85rem!important;color:var(--c-muted)!important;}
.woocommerce #payment .place-order{padding:20px!important;}
.woocommerce #payment #place_order{width:100%!important;text-align:center!important;padding:16px!important;}

/* MY ACCOUNT PAGE */
.woocommerce-account .woocommerce{padding:0 0 60px;}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul{list-style:none;background:var(--c-surface);border:1px solid var(--c-border);}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li{border-bottom:1px solid var(--c-border);}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li:last-child{border-bottom:none;}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a{display:flex;align-items:center;gap:10px;padding:14px 20px;font-size:0.82rem;letter-spacing:0.08em;color:var(--c-muted);transition:var(--transition);}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a:hover{color:var(--c-gold);padding-left:28px;background:rgba(184,154,106,0.05);}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li.is-active a{color:var(--c-charcoal);font-weight:600;border-left:3px solid var(--c-gold);background:var(--c-white);}
.woocommerce-account .woocommerce-MyAccount-content{padding-left:40px;}
.woocommerce-account .woocommerce-MyAccount-content p{color:var(--c-muted);font-size:0.9rem;line-height:1.8;}
.woocommerce-orders-table th{background:var(--c-surface)!important;font-family:var(--font-body)!important;font-size:0.7rem!important;letter-spacing:0.15em!important;text-transform:uppercase!important;color:var(--c-muted)!important;font-weight:500!important;}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a{color:var(--c-gold-text);font-weight:600;}
.woocommerce-orders-table .woocommerce-button{padding:8px 16px!important;font-size:0.68rem!important;}

/* ORDER CONFIRMATION */
.woocommerce-order-received .entry-header{display:none;}
.woocommerce-order .woocommerce-order-overview{background:var(--c-surface);border:1px solid var(--c-border);padding:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:32px 0;}
.woocommerce-order .woocommerce-order-overview li{list-style:none;padding:16px;border-right:1px solid var(--c-border);text-align:center;}
.woocommerce-order .woocommerce-order-overview li:last-child{border-right:none;}
/* The values in the summary strip are the same figures as the Order details
   table below them — the order number, the date, the total — so they are set
   in the same plain body face at the same weight. They were previously in the
   display serif, which made the total at the top and the total in the table
   look like two different numbers reported by two different systems. */
.woocommerce-order .woocommerce-order-overview li strong{display:block;font-family:var(--font-body);font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--c-charcoal);margin-top:6px;}
.woocommerce-order .woocommerce-order-overview li>span{font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--c-muted);}
@media(max-width:768px){.woocommerce-order .woocommerce-order-overview{grid-template-columns:repeat(2,1fr);}
.woocommerce-account .woocommerce-MyAccount-content{padding-left:0;margin-top:24px;}}

/* Pagination */
.woocommerce-pagination{margin-top:48px;display:flex;justify-content:center;}
.woocommerce-pagination ul{display:flex;gap:6px;flex-wrap:wrap;}
.woocommerce-pagination ul li a,.woocommerce-pagination ul li span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--c-border);font-size:0.82rem;color:var(--c-muted);transition:var(--transition);border-radius:var(--radius-sm);}
.woocommerce-pagination ul li a:hover{border-color:var(--c-gold);color:var(--c-gold);}
.woocommerce-pagination ul li span.current{background:var(--c-charcoal);color:var(--c-white);border-color:var(--c-charcoal);}

/* ============================================================
   SHOP ARCHIVE — layout, filters, mobile drawer
   (Phase 4: moved out of archive-product.php's inline <style>
   block into the theme's enqueued stylesheet, and consolidated
   onto the site's single 1024/768/480/360 breakpoint system
   instead of the mismatched 900px this section used before.)
   ============================================================ */
/* <body> already offsets every non-home page by --header-height (see
   style.css), so this 100px was a SECOND header clearance stacked on
   top of it — the empty band between the nav and the category tabs.
   The same duplicate offset was already fixed on the product page
   (.product-page-wrap in product.css); collections was missed.
   The tabs bar carries its own 14px vertical padding, so it needs no
   extra space above it. */
.coll-page{padding-top:0;}

.coll-tabs{background:var(--c-white);border-bottom:1px solid var(--c-border);position:sticky;top:var(--header-height,64px);z-index:90;}
.coll-tabs-inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0;align-items:center;}
.coll-tabs-inner::-webkit-scrollbar{display:none;}
.coll-tab{display:flex;align-items:center;gap:6px;padding:14px 24px;font-family:var(--font-body);font-size:0.68rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap;border-bottom:2px solid transparent;transition:color 0.2s,border-color 0.2s;text-decoration:none;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;}
.coll-tab:hover{color:var(--c-charcoal);}
.coll-tab.active{color:var(--c-charcoal);border-bottom-color:var(--c-charcoal);}
.mobile-filter-open{display:none;margin-left:auto;}

.coll-body{display:grid;grid-template-columns:240px 1fr;gap:0;min-height:60vh;}

/* Sidebar + drawer share these filter-panel classes */
.filter-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--c-border);}
.filter-panel-head h4{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-charcoal);font-weight:600;margin:0;}
.filter-group{margin-bottom:24px;}
.filter-group-title{font-size:0.65rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-charcoal);font-weight:600;margin-bottom:12px;}
.filter-opt{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:0.8rem;color:var(--c-muted);cursor:pointer;}
.filter-opt input{accent-color:var(--c-charcoal);width:15px;height:15px;flex-shrink:0;}
.filter-opt:hover{color:var(--c-charcoal);}
.filter-opt-count{color:var(--c-muted);font-size:0.72rem;}
.filter-clear{font-size:0.65rem;color:var(--c-muted);text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;}
.filter-clear-inline{font-size:0.8rem;color:var(--c-gold-text);text-decoration:underline;background:none;border:none;cursor:pointer;padding:0;margin-top:8px;display:inline-block;}
.filter-price-row{display:flex;align-items:center;gap:8px;}
.filter-price-row input[type="number"]{width:100%;border:1px solid var(--c-border);padding:9px 10px;font-family:var(--font-body);font-size:0.82rem;outline:none;-moz-appearance:textfield;}
.filter-price-row input[type="number"]:focus{border-color:var(--c-gold);}
.filter-price-sep{color:var(--c-muted);flex-shrink:0;}
.filter-apply-btn{width:100%;margin-top:8px;justify-content:center;}

.coll-sidebar{border-right:1px solid var(--c-border);padding:32px 24px;position:sticky;top:calc(var(--header-height,64px) + 49px);align-self:start;max-height:calc(100vh - var(--header-height,64px) - 49px);overflow-y:auto;}

.coll-products{padding:24px 32px;}
.coll-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--c-border);}
.coll-count{font-size:0.78rem;color:var(--c-muted);}
.coll-sort{border:1px solid var(--c-border);padding:8px 12px;font-family:var(--font-body);font-size:0.75rem;color:var(--c-charcoal);background:none;outline:none;cursor:pointer;}

/* Four at desktop, not three. Same reasoning Prompt 50 used when it took
   the tablet grid to three: a golden card is 1.618x its own width tall, so
   three columns of a 1205px row made a 610px-tall image per card. Four takes
   the card to ~280px wide and the image to ~453px (-26%) and puts a fourth
   product on the screen. The ladder below is unchanged - 3 at <=1024, 2 at
   <=768, 2 at <=480 - so tablet and phone are untouched. */
.coll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);transition:opacity 0.25s ease;align-items:stretch;justify-items:stretch;grid-auto-rows:1fr;}
/*
 * Tiles at 85% of their track (Prompt 63) - a flat 15%, the ceiling asked
 * for, applied as a PROPORTION rather than a max-width so it is exactly 15%
 * at every breakpoint. A fixed cap would have taken the 1024px tablet tile
 * from 317px to 223px, which is 30%.
 *
 * The image keeps aspect-ratio:var(--ratio-tile), so its height follows the
 * new width and the golden proportion is untouched - nothing is cropped or
 * distorted, the whole tile is simply smaller. margin-inline centres what is
 * left of the track so the row stays evenly spaced.
 */
.coll-grid > .product{width:85%;margin-inline:auto;}

/*
 * Collections page, phones only.
 *
 * The 15% tile reduction above is right on desktop and tablet, but on a
 * phone it fights the layout: the grid is already down to two columns, so
 * the cap only makes each card narrower while the text block underneath -
 * title, rating, price, add-to-cart - stays a near-constant 162px at every
 * width. The result was a card measuring 0.369 wide-to-tall against 0.408
 * on desktop: the same tile, visibly stretched.
 *
 * Everything here is scoped to .coll-grid, which only
 * woocommerce/archive-product.php renders, so no other page's tiles move.
 * The picture itself is untouched - it is golden (0.618) at every
 * breakpoint already, and that is the ratio the sitewide tile work applies.
 */
@media(max-width:600px){
  .coll-grid > .product{width:100%;}
  /* Small savings in the fixed block, so the extra width is not spent on a
     taller card: the rating sits closer to the name it belongs to. */
  .coll-grid .celasta-loop-rating{margin:4px 0 5px;}

  /*
   * The CARD is golden on phones, as asked - not just the picture.
   *
   * aspect-ratio on the card and a flexible picture, rather than a fixed
   * height anywhere: the card is 1:1.618 whatever the column width, and the
   * photograph takes whatever is left after the title, rating, price and
   * button. Sizing the photograph directly would have meant hard-coding the
   * text block's height, which changes with the copy.
   *
   * The trade this makes is real and worth knowing: a golden CARD cannot
   * also have a golden PICTURE. A golden picture is exactly as tall as the
   * whole golden card, leaving nothing for the words - so on phones the
   * Collections photograph is cropped wider than 1:1.618. It stays golden
   * on tablet, desktop, and on every other page.
   */
  .coll-grid > .product{aspect-ratio:1/1.618;display:flex;flex-direction:column;overflow:hidden;}
  .coll-grid > .product > .woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
  .coll-grid .celasta-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;}

  /*
   * The picture takes a FIXED share of the card, not "whatever is left".
   *
   * Left to flex, its height became the card minus however much text that
   * particular product happened to have - a rating on one card and none on
   * its neighbour gave the two different pictures, and the tiles read as
   * mismatched even though the cards were the same size. A fixed share
   * makes every picture in a row identical, whatever the copy does.
   *
   * The text block below it is the remaining 34%, held to that height so a
   * two-line name or a sale price cannot push the picture around.
   */
  .coll-grid .celasta-thumb-wrap{flex:0 0 66%;min-height:0;overflow:hidden;}
  .coll-grid > .product > .woocommerce-LoopProduct-link > :not(.celasta-thumb-wrap){flex:0 0 auto;}

  /*
   * Add to Cart is on the phone card too, built the same way as the desktop
   * one: a FIXED shelf pinned to the bottom of the card with margin-top:auto.
   *
   * The shelf is what stops the card moving. loop-cart.js replaces the button
   * with a quantity stepper the moment something is added, and the two are not
   * the same height - without a fixed shelf the swap grows the card, and
   * because the grid rows are equal-height that growth propagates to every
   * neighbour. That is the "add to cart lifts the tile" problem from the
   * desktop grid, and the fix here is deliberately identical.
   *
   * The room comes out of the PHOTOGRAPH, not the words: the picture drops
   * from 66% to 54% of the card and the title/rating/price block keeps the
   * height it already had. The card stays golden (1:1.618), so every tile in
   * a row still lines up.
   */
  .coll-grid .celasta-thumb-wrap{flex:0 0 54%;}

  .coll-grid > .product .button,
  .coll-grid > .product .add_to_cart_button,
  .coll-grid > .product .clq-slot{
    display:flex!important;align-items:center;justify-content:center;
    margin-top:auto!important;flex:0 0 auto;
    min-height:34px!important;height:34px!important;
    padding:0 8px!important;
    font-size:0.56rem!important;letter-spacing:0.08em!important;line-height:1.2!important;
  }
  /* The button once loop-cart.js has wrapped it: it fills the shelf rather
     than carrying a second margin of its own. */
  .coll-grid .clq-slot > .button,
  .coll-grid .clq-slot > .add_to_cart_button{margin-top:0!important;height:100%!important;}

  /* The stepper, scaled to the same 34px shelf.
     flex-direction:row is a deliberate override: the general phone rule at
     max-width:480px stacks the stepper above its View Cart link, which is
     47px of content in a 34px shelf - the link was being clipped by the
     card. Side by side is 138px of a 170px card, and it is also exactly how
     the desktop card arranges it. Wins on specificity (0,2,0 vs 0,1,0), so
     no !important is needed. */
  .coll-grid .celasta-loop-qty{
    flex-direction:row;flex-wrap:nowrap;gap:6px;justify-content:center;align-items:center;
  }
  .coll-grid .clq-view{font-size:0.58rem;letter-spacing:0.06em;white-space:nowrap;}
  .coll-grid .clq-box{height:28px;}
  .coll-grid .clq-btn{width:26px;height:26px;font-size:0.82rem;}
  .coll-grid .clq-n{min-width:20px;font-size:0.74rem;}

  /* Held to one line each so the text block cannot grow into the picture. */
  /* One line on a phone. Two lines cost 17px out of a 95px text block that
     also has to hold a rating and a price with a discount chip - and the
     name is the one part a shopper can still read in full on the product
     page a tap away. Longer names ellipsize rather than wrap. */
  .coll-grid .product .woocommerce-loop-product__title{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
    margin:7px 0 0!important;line-height:1.3;font-size:0.9rem;
  }
  .coll-grid .celasta-loop-rating{margin:4px 0 4px;min-height:12px;}
  /*
   * One line, always. A sale price is two amounts, and left to wrap it took
   * 54px against the 31px a single price needs - enough to push itself out
   * of the card on exactly the products most worth showing.
   *
   * Written at .coll-grid .product .price with !important to match the
   * rules further down this file, which set flex-wrap:wrap and 16px of
   * bottom padding at that same specificity and would otherwise win on
   * source order alone.
   */
  .coll-grid .product .price{
    flex-wrap:nowrap!important;white-space:nowrap!important;
    padding:0!important;margin:0!important;
    font-size:0.8rem!important;line-height:1.25;column-gap:6px!important;
  }
  .coll-grid .product .price del{font-size:0.72rem!important;}
}
.coll-grid.loading{opacity:0.4;pointer-events:none;}

/* archive-product.php renders WooCommerce's content-product.php, which
   outputs <li class="product">, into this <div> rather than a <ul>. A bare
   <li> keeps display:list-item even as a grid item, so every card drew a
   bullet and was pushed right by the marker box - the "off-centre on
   mobile" report. The card rules above are shared with ul.products rather
   than duplicated here, so the two grids cannot drift apart. */
.coll-grid > li,.coll-grid > .product{list-style:none;margin:0;}
/* The <a> wraps image + title + price; letting it grow keeps every card the
   same height, which is what made the image tiles look uneven before. */
.coll-grid .product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1 1 auto;}
.coll-grid > li::marker{content:none;}

/* The loop image had no ratio of its own, so a 1-column phone layout blew a
   300px thumbnail up to the full viewport width and pushed title, price and
   Add to Cart below the fold. A declared ratio also stops a non-square
   upload from setting an arbitrary card height. */
/* Old price, new price and the % OFF chip on ONE aligned row. They are
   separate inline elements (<del>, <ins>, <span>), so at a narrow card width
   the chip used to drop to its own line and the row looked ragged. */
.coll-grid .product .price,
.woocommerce ul.products li.product .price{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;row-gap:2px;white-space:normal;min-width:0;}
/* Each FIGURE stays intact, but the ROW is allowed to wrap.
   It used to be nowrap on both axes. Three items - old price, new price and
   the % chip - then gave the row a hard minimum width of roughly 175px at
   0.8rem; in the two-column phone grid a card's content box is about 140px,
   and the card carries overflow:hidden, so the chip and anything past it was
   CUT OFF at the card edge instead of moving. Wrapping costs one line of card
   height and cannot clip. A price may move to the next line; it may never
   break in half. */
.coll-grid .product .price del,
.coll-grid .product .price ins,
.coll-grid .product .price .sale-pct-off,
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price .sale-pct-off{white-space:nowrap;}
.coll-grid .product .price del,
.woocommerce ul.products li.product .price del{margin:0;opacity:0.7;}
.coll-grid .product .price ins,
.woocommerce ul.products li.product .price ins{margin:0;}
.coll-grid .product .price .sale-pct-off,
.woocommerce ul.products li.product .price .sale-pct-off{margin-left:0;flex:0 0 auto;align-self:center;}
/* The screen-reader-only spans WooCommerce emits must not become flex items
   and open up gaps of their own. */
.coll-grid .product .price .screen-reader-text{display:none;}

.coll-grid .product a img,.coll-grid .product img.attachment-woocommerce_thumbnail{
  display:block;width:100%;height:auto;aspect-ratio:var(--ratio-tile);object-fit:cover;
}
.no-products{grid-column:1/-1;padding:80px 0;text-align:center;color:var(--c-muted);font-size:1rem;}
.no-products a{color:var(--c-gold-text);text-decoration:underline;}

/* Mobile filter drawer (same off-canvas pattern as the mobile nav menu).
   z-index raised above the fixed #site-header (1000) — same root-cause
   fix applied to the mobile nav in Phase 5, so the drawer is never
   clipped by the solid sticky header on inner pages. */
.mobile-filter-overlay{position:fixed;inset:0;background:rgba(44,37,32,0.55);z-index:1400;opacity:0;visibility:hidden;transition:opacity 0.35s ease;}
.mobile-filter-overlay.open{opacity:1;visibility:visible;}
.mobile-filter-drawer{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);max-height:100vh;max-height:100dvh;background:var(--c-bg);z-index:1500;transform:translateX(-100%);transition:transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);display:flex;flex-direction:column;overflow-y:auto;box-shadow:8px 0 30px rgba(44,37,32,0.15);}
.mobile-filter-drawer.open{transform:translateX(0);}
.mobile-filter-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--c-border);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;}
.mobile-filter-close{background:none;border:none;font-size:1.1rem;color:var(--c-charcoal);cursor:pointer;padding:6px;}
.mobile-filter-drawer-body{padding:20px 22px;}

@media(max-width:1024px){
  .coll-body{grid-template-columns:1fr;}
  .coll-sidebar{display:none;}
  .mobile-filter-open{display:flex;}
  /* Three, not two. A golden card is 1.618x its own width tall, so the two
     wide columns this used to drop to made a 793px-tall image on a tablet -
     barely one product per screen. Three keeps the card the same sort of
     size it is on desktop and the same number of products in view. */
  .coll-grid{grid-template-columns:repeat(3,1fr);}
  .coll-products{padding:16px;}
}
/* Below the tablet range two columns is right again - three would leave the
   title, price and Add to Cart too narrow to read. */
@media(max-width:768px){
  .coll-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  /* Two columns, not one: a single column made each image as wide as the
     phone, which is what "images are too large" was. Two keeps the card
     legible while showing the title, price and CTA without scrolling. */
  .coll-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .coll-tab{padding:12px 16px;font-size:0.62rem;}
  .coll-grid .product .woocommerce-loop-product__title{font-size:0.92rem!important;padding:12px 10px 4px!important;}
  /* padding-bottom is the ONLY thing separating the price block from the
     full-width button, which is flush to the card edges. Once the % chip
     wraps to its own line the two sat about 10px apart and read as
     crowded at card scale, so the gap is opened up a little here. */
  .coll-grid .product .price{font-size:0.8rem!important;padding:0 10px 16px!important;}
  /* The chip on its own line wants a touch of air from the prices above it. */
  .coll-grid .product .price .sale-pct-off{margin-top:2px;}
  /* Full-width, flush to the card edges, so it reads as part of the card
     instead of a stray button floating under the price. */
  .coll-grid .product .button{padding:12px 6px!important;font-size:0.58rem!important;letter-spacing:0.1em!important;}
}

/* ── Phase 5 filter additions: colour swatches, tags, availability,
   and the grid/list view toggle ────────────────────────────────── */
.filter-swatches{display:flex;flex-wrap:wrap;gap:8px;}
.filter-swatch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:0.74rem;color:var(--c-muted);border:1px solid var(--c-border);border-radius:20px;padding:5px 12px 5px 8px;transition:border-color 0.2s,color 0.2s;}
.filter-swatch input{position:absolute;opacity:0;width:0;height:0;}
.filter-swatch:hover{color:var(--c-charcoal);}
.filter-swatch.is-selected{border-color:var(--c-charcoal);color:var(--c-charcoal);background:rgba(184,154,106,0.08);}
.filter-swatch-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(44,37,32,0.15);flex-shrink:0;}

.filter-tags{display:flex;flex-wrap:wrap;gap:8px;}
.filter-tag{cursor:pointer;font-size:0.72rem;color:var(--c-muted);border:1px solid var(--c-border);border-radius:20px;padding:6px 12px;transition:border-color 0.2s,color 0.2s,background 0.2s;}
.filter-tag input{position:absolute;opacity:0;width:0;height:0;}
.filter-tag:hover{color:var(--c-charcoal);}
.filter-tag.is-selected{border-color:var(--c-charcoal);color:var(--c-charcoal);background:rgba(184,154,106,0.1);}

.coll-view-toggle{display:flex;gap:4px;margin-left:auto;margin-right:14px;}
.coll-view-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--c-border);background:none;color:var(--c-muted);cursor:pointer;transition:var(--transition);border-radius:var(--radius-sm,3px);}
.coll-view-btn:hover{color:var(--c-charcoal);}
.coll-view-btn.active{background:var(--c-charcoal);color:var(--c-white);border-color:var(--c-charcoal);}

/* List view */
.coll-grid.coll-grid--list{grid-template-columns:1fr;gap:0;}
.coll-grid--list li.product,.coll-grid--list .product{display:grid!important;grid-template-columns:140px 1fr;gap:20px;align-items:center;border-bottom:1px solid var(--c-border);padding:20px 0;width:100%!important;margin:0!important;float:none!important;}
.coll-grid--list li.product .celasta-wish-loop{z-index:2;}
.coll-grid--list li.product .button{position:static!important;bottom:auto!important;opacity:1!important;transform:none!important;width:auto!important;justify-self:start;margin-top:10px!important;}
@media(max-width:480px){
  .coll-view-toggle{display:none;}
  .coll-grid--list li.product,.coll-grid--list .product{grid-template-columns:96px 1fr;gap:14px;}
}

/* ============================================================
   CART / CHECKOUT — mobile responsiveness
   The shop_table (cart + order-received tables) previously had no
   mobile treatment at all: 5 columns (Product/Price/Qty/Subtotal/
   Remove) would either overflow or crush illegibly on phones.
   Below ~900px it now collapses into a stacked card per row using
   CSS-only table display overrides — no markup change needed since
   WooCommerce already renders a data-title attribute on each <td>
   we can use as the row label.
   ============================================================ */
@media(max-width:900px){
  .woocommerce table.shop_table thead{display:none;}
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td{display:block;width:100%;}
  .woocommerce table.shop_table tr{border-bottom:1px solid var(--c-border);padding:16px 0;}
  .woocommerce table.shop_table tr:last-child{border-bottom:none;}
  .woocommerce table.shop_table td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px!important;border:none!important;text-align:right;}
  .woocommerce table.shop_table td[data-title]::before{content:attr(data-title);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-muted);text-align:left;flex-shrink:0;}
  .woocommerce table.shop_table td.product-name{flex-direction:column;align-items:flex-start;text-align:left;}
  .woocommerce table.shop_table td.product-name::before{display:none;}
  .woocommerce table.shop_table td.product-thumbnail{padding-bottom:0!important;}
  .woocommerce .cart_totals{padding:24px 20px;}
  .woocommerce-checkout #customer_details,.woocommerce-checkout #order_review{width:100%!important;float:none!important;}
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%!important;float:none!important;}
  .woocommerce .coupon{display:flex;flex-direction:column;gap:10px;}
  .woocommerce .coupon input[type="text"]{width:100%!important;}
}

/* Touch target sizing — ensure interactive controls meet a 44px minimum on touch devices */
@media(max-width:1024px){
  .hdr-btn{width:32px;height:32px;}
  .woocommerce table.shop_table .quantity input.qty{min-height:40px;}
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
}

/* ============================================================
   COLLECTIONS LANDING PAGE
   ============================================================ */
.collections-hero .collections-hero-sub{
  max-width:560px;margin:14px auto 0;color:rgba(255,255,255,0.82);
  font-size:0.95rem;line-height:1.7;
}
.collections-hero:not(.page-hero-bg) .collections-hero-sub{color:var(--c-muted);}
.collections-wrap{padding:36px 0 90px;}

.collections-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:34px;
}
.collections-topbar .breadcrumbs{margin:0;}
.collections-search-trigger{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--c-white);border:1px solid var(--c-border);
  padding:9px 18px;border-radius:30px;cursor:pointer;
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--c-charcoal);transition:var(--transition);
}
.collections-search-trigger:hover{background:var(--c-charcoal);color:#fff;border-color:var(--c-charcoal);}

.collections-section-head{margin-bottom:22px;}
.collections-section-head h2{font-size:clamp(1.5rem,3vw,2.1rem);}

/* Featured banners */
.collections-featured{margin-bottom:56px;}
.collections-featured-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.collection-banner{
  position:relative;display:block;overflow:hidden;border-radius:var(--c-radius-tile,21px);
  aspect-ratio:var(--ratio-tile);text-decoration:none;background:var(--c-surface);
}
.collection-banner-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 0.7s ease;
}
.collection-banner:hover .collection-banner-img{transform:scale(1.06);}
.collection-banner-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:6px;padding:26px;
  background:linear-gradient(180deg,rgba(44,37,32,0) 30%,rgba(44,37,32,0.78) 100%);
  color:#fff;
}
.collection-banner-count{
  font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--c-gold-light);font-weight:600;
}
.collection-banner-overlay h3{color:#fff;font-size:1.7rem;line-height:1.1;}
.collection-banner-cta{
  font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  opacity:0.9;transition:gap 0.3s ease;
}
.collection-banner:hover .collection-banner-cta{gap:14px;}

/* All-collections cards */
.collections-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  grid-auto-rows:1fr;
}
.collection-card{
  display:flex;flex-direction:column;background:var(--c-white);
  border:1px solid var(--c-border);border-radius:var(--c-radius-card,14px);overflow:hidden;
  text-decoration:none;transition:transform 0.4s ease,box-shadow 0.4s ease;
}
.collection-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(44,37,32,0.12);}
.collection-card-media{position:relative;aspect-ratio:var(--ratio-tile);overflow:hidden;background:var(--c-surface);}
.collection-card-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 0.7s ease;}
.collection-card:hover .collection-card-img{transform:scale(1.07);}
.collection-card-count{
  position:absolute;top:12px;right:12px;
  background:rgba(250,248,244,0.92);backdrop-filter:blur(6px);
  color:var(--c-charcoal);font-size:0.68rem;font-weight:600;
  min-width:26px;height:26px;padding:0 8px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.collection-card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.collection-card-title{font-size:1.15rem;line-height:1.2;}
.collection-card-desc{font-size:0.82rem;color:var(--c-muted);line-height:1.5;}
.collection-card-link{
  margin-top:auto;font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--c-gold-text);font-weight:600;display:inline-flex;align-items:center;gap:6px;
  transition:gap 0.3s ease;
}
.collection-card:hover .collection-card-link{gap:12px;}

.collections-cta-row{text-align:center;margin-top:40px;}

/* Empty states */
.collections-empty{
  text-align:center;padding:70px 20px;max-width:460px;margin:0 auto;
}
.collections-empty-ico{font-size:2.6rem;color:var(--c-border);margin-bottom:18px;}
.collections-empty h3{font-size:1.5rem;margin-bottom:10px;}
.collections-empty p{color:var(--c-muted);line-height:1.7;margin-bottom:22px;}

@media(max-width:600px){
  .collections-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .collection-card-title{font-size:1rem;}
  .collections-featured-grid{grid-template-columns:1fr;}
}

/* ============================================================
   WISHLIST — heart buttons, page, toast
   ============================================================ */
/* Heart toggle on product loop cards */
/* In-flight wishlist toggle. pointer-events stays ON: the data-busy guard
   already swallows repeat clicks, and killing pointer-events would drop the
   hover state mid-interaction. */
.celasta-wish-btn.is-busy,
/* The gallery copy needs the extra class: product.css loads AFTER this file
   and its .gallery-actions .celasta-wish-btn rule has the same (0,2,0)
   specificity, so on the product page the plain selector lost on source
   order and the busy state was invisible exactly where it was tested. */
.gallery-actions .celasta-wish-btn.is-busy{opacity:0.55;cursor:progress;}
/* Dimming the ICON as well as the button: the button's own opacity is
   contested by the gallery/loop skins, but nothing else styles the <i>, so
   this is the part that reliably reads as "working" in both placements. */
.celasta-wish-btn.is-busy i,
.gallery-actions .celasta-wish-btn.is-busy i{opacity:0.4;}
.celasta-wish-btn{
  position:absolute;top:12px;right:12px;z-index:4;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(250,248,244,0.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--c-border);color:var(--c-charcoal);
  cursor:pointer;font-size:0.9rem;
  transition:background 0.2s,color 0.2s,transform 0.2s,border-color 0.2s;
}
.celasta-wish-btn:hover{background:#fff;transform:scale(1.08);}
.celasta-wish-btn.is-active{color:#c0392b;border-color:#e8b4ad;background:#fff;}
.celasta-wish-btn.bump{animation:wish-bump 0.4s ease;}
@keyframes wish-bump{0%{transform:scale(1);}40%{transform:scale(1.3);}70%{transform:scale(0.9);}100%{transform:scale(1);}}

/* Heart on single product (inline next to add-to-cart) */
.celasta-wish-single{
  position:static;width:52px;height:52px;margin-left:10px;
  vertical-align:middle;font-size:1.05rem;
}

/* Header wishlist count badge */
.hdr-btn{position:relative;}
.wish-dot{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  background:var(--c-gold);color:#fff;border-radius:9px;
  font-size:0.6rem;font-weight:600;line-height:16px;text-align:center;
}
.wish-dot.is-empty{display:none;}

/* Wishlist page */
/* <body> already carries a padding-top equal to the fixed header's height,
   so the extra 130px here was a second header offset stacked on the first:
   264px of dead space before the heading. This is page spacing only. */
.wishlist-page{padding-top:48px;padding-bottom:90px;}
.wishlist-head{text-align:center;margin-bottom:40px;}
.wishlist-head .breadcrumbs{justify-content:center;display:flex;margin-bottom:14px;}
.wishlist-head h1{font-size:clamp(2rem,4vw,2.8rem);}
.wishlist-sub{color:var(--c-muted);font-size:0.9rem;margin-top:6px;}

.wishlist-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  grid-auto-rows:1fr;
}
.wishlist-card{
  position:relative;background:var(--c-white);border:1px solid var(--c-border);
  border-radius:var(--c-radius-card,14px);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow 0.3s ease,transform 0.3s ease;
}
.wishlist-card:hover{box-shadow:0 18px 44px rgba(44,37,32,0.1);transform:translateY(-3px);}
.wishlist-card-remove{
  position:absolute;top:10px;right:10px;z-index:3;
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(250,248,244,0.92);backdrop-filter:blur(6px);
  color:var(--c-muted);font-size:0.8rem;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s,color 0.2s;
}
.wishlist-card-remove:hover{background:var(--c-charcoal);color:#fff;}
.wishlist-card-media{position:relative;display:block;aspect-ratio:var(--ratio-tile);overflow:hidden;background:var(--c-surface);}
.wishlist-card-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 0.6s ease;}
.wishlist-card:hover .wishlist-card-img{transform:scale(1.05);}
.wishlist-card-stock{
  position:absolute;bottom:0;left:0;right:0;padding:8px;text-align:center;
  background:rgba(44,37,32,0.72);color:#fff;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;
}
.wishlist-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.wishlist-card-name{font-family:var(--font-display);font-size:1.05rem;color:var(--c-charcoal);text-decoration:none;line-height:1.3;}
.wishlist-card-name:hover{color:var(--c-gold-text);}
.wishlist-card-price{font-size:0.9rem;color:var(--c-text);}
.wishlist-card-price del{color:var(--c-muted);font-size:0.8rem;margin-right:5px;}
.wishlist-card-price ins{text-decoration:none;}
.wishlist-card-actions{margin-top:auto;}
.wishlist-card-actions .btn{width:100%;justify-content:center;font-size:0.68rem;padding:12px;}
.wishlist-tocart.is-loading{opacity:0.6;pointer-events:none;}

.wishlist-foot{text-align:center;margin-top:40px;}
.wishlist-continue{
  display:inline-flex;align-items:center;gap:10px;color:var(--c-charcoal);
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--c-border);padding-bottom:4px;transition:gap 0.3s ease;
}
.wishlist-continue:hover{gap:16px;}

/* Empty state */
.wishlist-empty{text-align:center;padding:60px 20px;max-width:440px;margin:0 auto;}
.wishlist-empty-ico{font-size:3rem;color:var(--c-border);margin-bottom:18px;}
.wishlist-empty h3{font-size:1.6rem;margin-bottom:10px;}
.wishlist-empty p{color:var(--c-muted);line-height:1.7;margin-bottom:24px;}

/* Toast */
.celasta-toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);
  background:var(--c-charcoal);color:#fff;padding:13px 24px;border-radius:30px;
  font-size:0.8rem;letter-spacing:0.04em;z-index:3000;
  box-shadow:0 12px 34px rgba(44,37,32,0.3);opacity:0;pointer-events:none;
  transition:opacity 0.3s ease,transform 0.3s ease;max-width:90vw;text-align:center;
}
.celasta-toast.show{opacity:1;transform:translate(-50%,0);}

@media(max-width:600px){
  .wishlist-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .wishlist-card-name{font-size:0.92rem;}
}

/* ============================================================
   CART — premium two-column layout
   ============================================================ */
.celasta-cart-layout{
  display:grid;grid-template-columns:1fr;gap:36px;align-items:start;
}
@media(min-width:960px){
  .celasta-cart-layout{grid-template-columns:minmax(0,1fr) 360px;gap:44px;}
  .celasta-cart-aside{position:sticky;top:120px;}
}
.celasta-cart-main{min-width:0;}
.celasta-cart-layout .woocommerce-cart-form{margin:0;}
.celasta-cart-layout table.shop_table{margin:0;}

/* Actions row (coupon + update cart) */
.woocommerce table.cart td.actions{
  background:var(--c-surface)!important;padding:18px 20px!important;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
}
.woocommerce table.cart td.actions .coupon{display:flex;gap:10px;flex:1;min-width:240px;}
.woocommerce table.cart td.actions .coupon input[type="text"]{flex:1;}
.woocommerce table.cart td.actions button[name="update_cart"]{margin-left:auto;}

/* Order summary sidebar */
.celasta-cart-aside .cart_totals{
  background:var(--c-surface);padding:30px 26px;border:1px solid var(--c-border);border-radius:10px;
}
.celasta-cart-aside .cart_totals h2{margin-bottom:20px;}
.celasta-cart-aside .wc-proceed-to-checkout{padding-top:20px;}
.celasta-cart-aside .wc-proceed-to-checkout a.checkout-button{
  display:block;width:100%;text-align:center;font-size:0.8rem!important;padding:16px!important;
  background:var(--c-gold)!important;color:#fff!important;
}
.celasta-cart-aside .wc-proceed-to-checkout a.checkout-button:hover{background:var(--c-charcoal)!important;}
.celasta-cart-aside .shipping-calculator-button{color:var(--c-gold-text)!important;}

/* Cross-sells full width below */
.celasta-cart-crosssell{margin-top:20px;}
.woocommerce-cart .celasta-cart-crosssell .cross-sells{width:100%!important;float:none!important;}

/* Estimated delivery row + related products (Phase 5) */
.celasta-cart-eta th,.celasta-cart-eta td{font-size:0.82rem!important;}
.celasta-cart-related{margin-top:56px;padding-top:40px;border-top:1px solid var(--c-border);}
.celasta-cart-related-title{font-family:var(--font-body);font-size:0.72rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-muted);margin-bottom:28px;}
.celasta-cart-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ccr-card{display:block;text-decoration:none;transition:transform 0.3s ease;}
.ccr-card:hover{transform:translateY(-4px);}
.ccr-img{display:block;aspect-ratio:var(--ratio-tile);background-size:cover;background-position:center;background-color:var(--c-surface);margin-bottom:12px;border-radius:var(--c-radius-card,14px);}
.ccr-name{display:block;font-family:var(--font-display);font-size:0.95rem;color:var(--c-charcoal);margin-bottom:4px;}
.ccr-price{display:block;font-size:0.8rem;color:var(--c-muted);}
@media(max-width:900px){.celasta-cart-related-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.celasta-cart-related-grid{grid-template-columns:1fr 1fr;gap:12px;}}

@media(max-width:680px){
  .woocommerce table.cart td.actions{flex-direction:column;align-items:stretch;}
  .woocommerce table.cart td.actions .coupon{flex-direction:column;min-width:0;}
  .woocommerce table.cart td.actions button[name="update_cart"]{margin-left:0;width:100%;}
}

/* ============================================================
   CUSTOMER AUTH — premium login / register
   ============================================================ */
.cauth-page{padding:120px 16px 90px;min-height:70vh;display:flex;align-items:flex-start;justify-content:center;}
.cauth-wrap{
  width:100%;max-width:460px;background:var(--c-white);
  border:1px solid var(--c-border);border-radius:14px;
  padding:44px 40px;box-shadow:0 30px 70px -40px rgba(44,37,32,0.3);
}
.cauth-head{text-align:center;margin-bottom:26px;}
.cl-eyebrow{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--c-gold-text);margin-bottom:8px;display:block;font-weight:600;}
.cauth-title{font-family:var(--font-display);font-size:2rem;font-weight:400;color:var(--c-charcoal);margin-bottom:6px;}
.cauth-sub{font-size:0.85rem;color:var(--c-muted);line-height:1.6;}

.cauth-tabs{display:flex;background:var(--c-surface);border-radius:10px;padding:4px;margin-bottom:24px;}
.cauth-tab{
  flex:1;padding:11px;border:none;background:none;cursor:pointer;border-radius:7px;
  font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--c-muted);transition:background 0.25s,color 0.25s;
}
.cauth-tab.active{background:var(--c-white);color:var(--c-charcoal);box-shadow:0 2px 8px rgba(44,37,32,0.08);}

.cauth-alert{
  padding:12px 16px;border-radius:8px;font-size:0.82rem;margin-bottom:18px;line-height:1.5;
  background:var(--c-surface);border:0;color:var(--c-text);
}
.cauth-alert-error{background:#fdf0ee;color:#98342a;}
.cauth-alert-success{background:#eef4ec;color:#3f5f38;}

.cauth-panel{display:none;}
.cauth-panel.active,.cauth-panel:not([hidden]){display:block;}

.cl-field{margin-bottom:18px;}
.cl-field label{display:block;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-charcoal);font-weight:600;margin-bottom:8px;}
.cl-field input{
  display:block;width:100%;background:var(--c-bg);border:1px solid var(--c-border);border-radius:9px;
  padding:13px 14px;font-family:var(--font-body);font-size:0.9rem;color:var(--c-charcoal);
  outline:none;transition:border-color 0.2s,box-shadow 0.2s;box-sizing:border-box;
}
.cl-field input:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(184,154,106,0.15);}
.cl-field input::placeholder{color:var(--c-muted);opacity:0.7;}
.cauth-code-input{text-align:center;letter-spacing:0.5em;font-size:1.3rem!important;font-weight:600;}

.cauth-method-toggle{display:flex;gap:8px;margin-bottom:20px;}
.cauth-method{
  flex:1;padding:10px;border:1px solid var(--c-border);background:var(--c-white);cursor:pointer;border-radius:8px;
  font-size:0.72rem;letter-spacing:0.06em;color:var(--c-muted);transition:all 0.2s;
}
.cauth-method.active{border-color:var(--c-charcoal);color:var(--c-charcoal);background:var(--c-surface);font-weight:600;}

.cauth-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.cl-remember{display:flex;align-items:center;gap:7px;font-size:0.78rem;color:var(--c-muted);cursor:pointer;}
.cl-remember input[type=checkbox]{accent-color:var(--c-charcoal);width:14px;height:14px;}
.cauth-link{background:none;border:none;cursor:pointer;color:var(--c-gold-text);font-size:0.78rem;padding:0;text-decoration:none;}
.cauth-link:hover{text-decoration:underline;}
.cauth-link:disabled{color:var(--c-muted);cursor:default;text-decoration:none;}
.cauth-resend-row{margin-top:16px;margin-bottom:0;}
.cauth-hint{font-size:0.82rem;color:var(--c-muted);line-height:1.6;margin-bottom:18px;}

.cl-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--c-charcoal);color:#fff;border:1px solid var(--c-charcoal);cursor:pointer;
  padding:15px;border-radius:9px;font-size:0.74rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
  transition:background 0.25s,border-color 0.25s,opacity 0.2s;
}
.cl-btn:hover{background:var(--c-gold);border-color:var(--c-gold);}
.cl-btn.is-loading{opacity:0.65;pointer-events:none;}
.cl-btn.is-loading i{animation:srch-spin 0.7s linear infinite;}
.cl-btn-ghost{background:none;color:var(--c-charcoal);border-color:var(--c-border);}
.cl-btn-ghost:hover{background:var(--c-surface);color:var(--c-charcoal);border-color:var(--c-charcoal);}

.cauth-or{display:flex;align-items:center;gap:12px;color:var(--c-muted);font-size:0.72rem;margin:18px 0;}
.cauth-or::before,.cauth-or::after{content:'';flex:1;height:1px;background:var(--c-border);}

/* ── Social sign-in (inc/modules/social-login.php) ──────────────────
   Google's guidelines require their button to keep a white (or their
   blue/black) surface with the unmodified four-colour mark, so this
   one does NOT take the gold/charcoal treatment the theme's own
   buttons use. It is deliberately the quieter of the two: the primary
   action stays Celasta's own Sign In. */
.csocial{margin-top:4px;}
.csocial-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:13px 18px;border:1px solid var(--c-border);border-radius:2px;background:#fff;
  font-family:var(--font-body);font-size:0.76rem;font-weight:500;letter-spacing:0.06em;
  color:var(--c-charcoal)!important;text-decoration:none;cursor:pointer;
  transition:border-color var(--transition),box-shadow var(--transition);}
.csocial-btn:hover{border-color:var(--c-charcoal);box-shadow:0 2px 10px rgba(44,37,32,0.08);}
.csocial-btn:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px;}
.csocial-icon{flex:0 0 auto;display:block;}
.csocial-error{margin-bottom:18px;}
@media(prefers-reduced-motion:reduce){.csocial-btn{transition:none;}}
.cauth-terms{font-size:0.72rem;color:var(--c-muted);text-align:center;margin-top:16px;line-height:1.5;}

@media(max-width:480px){
  .cauth-page{padding:100px 12px 60px;}
  .cauth-wrap{padding:32px 22px;}
  .cauth-title{font-size:1.7rem;}
}

/* ── Phase 2: registration + auth enhancements ─────────────────── */
.cauth-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cauth-phone-row{display:flex;gap:8px;}
.cauth-cc{flex:0 0 auto;max-width:44%;background:var(--c-white);border:1px solid var(--c-border);border-radius:8px;padding:0 8px;color:var(--c-charcoal);font-size:0.9rem;}
.cauth-phone-row input{flex:1 1 auto;min-width:0;}

/* Password field + show/hide toggle */
.cauth-pw-wrap{position:relative;display:flex;align-items:center;}
.cauth-pw-wrap input{flex:1;padding-right:58px;}
.cauth-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--c-gold-text);font-size:0.74rem;font-weight:600;letter-spacing:0.02em;padding:6px 4px;min-height:32px;}
.cauth-pw-toggle:hover{text-decoration:underline;}

/* Password strength meter */
.cauth-strength{position:relative;height:5px;border-radius:3px;background:var(--c-surface);margin-top:12px;margin-bottom:22px;}
.cauth-strength-bar{display:block;height:5px;width:0;border-radius:3px;background:#c94b3b;transition:width 0.3s ease,background 0.3s ease;}
.cauth-strength[data-score="1"] .cauth-strength-bar{background:#c94b3b;}
.cauth-strength[data-score="2"] .cauth-strength-bar{background:#d98b34;}
.cauth-strength[data-score="3"] .cauth-strength-bar{background:#c9b037;}
.cauth-strength[data-score="4"] .cauth-strength-bar{background:#5a8a4a;}
.cauth-strength-label{position:absolute;right:0;top:8px;font-size:0.72rem;color:var(--c-muted);}

.cauth-caps{font-size:0.72rem;color:#98342a;margin-top:6px;}
.cauth-center{text-align:center;}

/* Terms & Conditions consent */
.cauth-terms-check{display:flex;align-items:flex-start;gap:10px;font-size:0.78rem;color:var(--c-muted);line-height:1.5;margin:6px 0 18px;cursor:pointer;}
.cauth-terms-check input{margin-top:2px;flex:0 0 auto;}
.cauth-terms-check a{color:var(--c-gold-text);text-decoration:underline;}

.cl-btn-sm{padding:11px 20px;font-size:0.8rem;}

@media (max-width:480px){
  .cauth-grid-2{grid-template-columns:1fr;gap:0;}
}

/* ── Phase 4: enhanced product badges ── */
/*
 * 7px, not 5. Three chips stacked over a phone-width tile read as one clot
 * at 5px - the gap has to be visible against the photograph behind it, not
 * merely present.
 */
.celasta-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:7px;z-index:3;max-width:calc(100% - 20px);}
/*
 * Anchored badge stacks (Prompt 63). One stack per anchor actually used, so
 * a product can carry a chip in two different corners without them sharing a
 * flex column. Each rule resets the pair it does not use, because the base
 * rule above pins top/left and a stack anchored bottom-right must undo both.
 *
 * The middle anchors sit ON the photograph by definition - they exist
 * because the admin asked for them, which is the point of the feature, but
 * the corners are what the defaults use.
 */
/* The box the anchors are measured against: exactly the thumbnail. */
.celasta-thumb-wrap{position:relative;display:block;}
.celasta-badges--left-top{top:10px;left:10px;right:auto;bottom:auto;align-items:flex-start;}
.celasta-badges--center-top{top:10px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);align-items:center;}
.celasta-badges--right-top{top:10px;left:auto;right:10px;bottom:auto;align-items:flex-end;}
.celasta-badges--left-middle{top:50%;left:10px;right:auto;bottom:auto;transform:translateY(-50%);align-items:flex-start;}
.celasta-badges--center-middle{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);align-items:center;}
.celasta-badges--right-middle{top:50%;left:auto;right:10px;bottom:auto;transform:translateY(-50%);align-items:flex-end;}
.celasta-badges--left-bottom{top:auto;left:10px;right:auto;bottom:10px;align-items:flex-start;}
.celasta-badges--center-bottom{top:auto;left:50%;right:auto;bottom:10px;transform:translateX(-50%);align-items:center;}
.celasta-badges--right-bottom{top:auto;left:auto;right:10px;bottom:10px;align-items:flex-end;}
/* An admin-authored colour is applied inline; this is the fallback. */
.product-badge-custom{background:var(--c-charcoal,#3A332D);}

/*
 * Card rating. product.css is only enqueued on the product page, so the
 * .crv-stars colours it defines do not reach this grid and are restated
 * here - scoped to the card so they cannot leak.
 *
 * Sized well below the title and price: a rating is supporting detail, and
 * at body size it competed with the price directly beneath it.
 */
.celasta-loop-rating{display:block;margin:7px 0 9px;line-height:1;}
.celasta-loop-rating .crv-stars{display:inline-flex;gap:2px;color:var(--c-gold,#B89A6A);font-size:0.72rem;line-height:1;}
.celasta-loop-rating .crv-stars .fa-regular{color:var(--c-border,#DDD5C4);}
/* The theme prints its own Sale chip inside .celasta-badges, and WooCommerce
   prints .onsale ("Sale!") as well - both pinned to the same top-left corner,
   so they sat on top of each other. Hidden only when the theme badges are
   actually present, so .onsale still shows anywhere they are not. */
.celasta-badges + .onsale{display:none!important;}
/* A custom badge is free text, so it can be longer than the tile is wide.
   The cap goes on the STACK, not the chip: a max-width on a flex item feeds
   back into the shrink-to-fit width of its own container, which made even
   "Low Stock" wrap onto two lines inside a 145px tile that had room for it.
   Constraining the stack leaves short labels on one line and wraps only a
   label that genuinely does not fit - nothing is ever clipped mid-word. */
.product-badge{white-space:normal;overflow-wrap:anywhere;line-height:1.3;text-align:left;}
.product-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--c-charcoal,#3A332D);}
.product-badge-new{background:var(--c-gold,#B89A6A);}
.product-badge-sale{background:#C0392B;}
/* .product-badge-new still carries position:absolute;top:10px;left:10px from
   before the .celasta-badges wrapper existed (see the earlier rule). Inside
   an absolutely-positioned flex column that takes it back out of the flow and
   drops it on top of the Sale chip, which is the diagonal badge overlap on
   the collection cards. Keep the chips in the flex stack. */
.celasta-badges .product-badge{position:static;top:auto;left:auto;}
.product-badge-oos{background:#6B7280;}
.product-badge-low{background:#B7791F;}
.product-badge-trending{background:#8E44AD;}
.product-badge-bestseller{background:#2C7A7B;}
.product-badge-limited{background:#1F2430;}

/* ── Client feedback image 2: Collections professional polish ──────── */
/* Sidebar: cleaner filter arrangement with dividers. */
.coll-sidebar .filter-panel-head{margin-bottom:20px;}
.coll-sidebar .filter-group{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--c-border);}
.coll-sidebar .filter-group:last-of-type{border-bottom:none;}
/* Size filter as neat pills instead of a plain checkbox column. */
.filter-group .filter-opt input[name="pa_size[]"]{position:absolute;opacity:0;pointer-events:none;}
.filter-group .filter-opt:has(input[name="pa_size[]"]){
  display:inline-flex;justify-content:center;min-width:44px;padding:8px 12px;margin:0 6px 8px 0;
  border:1px solid var(--c-border);border-radius:8px;font-size:0.78rem;color:var(--c-text);cursor:pointer;
}
.filter-group .filter-opt:has(input[name="pa_size[]"]:checked){
  background:var(--c-charcoal);color:#fff;border-color:var(--c-charcoal);
}
/* Professional empty state for "No products found". */
.no-products{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:90px 24px;text-align:center;
  font-family:var(--font-display);font-size:1.2rem;color:var(--c-charcoal);
}
.no-products::before{
  content:"\f002";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:1.7rem;color:var(--c-gold-light);
  width:78px;height:78px;line-height:78px;border-radius:50%;
  background:var(--c-surface);margin-bottom:16px;
}
.no-products .np-sub{font-family:var(--font-body);font-size:0.9rem;color:var(--c-muted);margin:0;}
.no-products a,.no-products .filter-clear-inline{
  font-family:var(--font-body);font-size:0.85rem;color:var(--c-gold-text);margin-top:10px;
}

/* Wishlist responsive */
@media (max-width:900px){
  .wishlist-page{padding-top:32px;padding-bottom:64px;}
}
@media (max-width:600px){
  .wishlist-page{padding-top:24px;padding-bottom:48px;}
  .wishlist-head{margin-bottom:26px;}
  /* Two columns keeps the cards a sensible size on a phone; one
     column made each card taller than the viewport. */
  .wishlist-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .wishlist-card-body{padding:12px 10px 14px;}
  .wishlist-card-name{font-size:0.82rem;}
  .wishlist-card-price{font-size:0.82rem;}
  .wishlist-card-actions .btn{width:100%;padding:10px 12px;font-size:0.68rem;}
  /* Comfortable tap target for remove, which was a 12px glyph. */
  .wishlist-card-remove{width:34px;height:34px;display:flex;align-items:center;justify-content:center;}
}
@media (max-width:360px){
  .wishlist-grid{grid-template-columns:1fr;}
}

/* Cart overflow guard */
.celasta-cart-main,.celasta-cart-aside{min-width:0;max-width:100%;}
.celasta-cart-layout table.shop_table{max-width:100%;table-layout:auto;}
@media(max-width:900px){
  /* The row is a card: give it an edge and breathing room rather than
     a bare divider, so a phone cart reads as a list of products. */
  .woocommerce table.cart tr.woocommerce-cart-form__cart-item{
    border:1px solid var(--c-border);border-radius:10px;
    padding:14px 16px;margin-bottom:12px;background:var(--c-white);
  }
  .woocommerce table.shop_table td.product-thumbnail img{width:72px;height:auto;border-radius:6px;}
  .woocommerce table.shop_table td.product-remove{justify-content:flex-end;}
  .woocommerce table.cart td.actions{flex-direction:column;align-items:stretch;}
  .woocommerce table.cart td.actions .coupon{min-width:0;width:100%;}
  .woocommerce table.cart td.actions button[name="update_cart"]{margin-left:0;width:100%;}
}

/* Generic page wrapper spacing */
.wc-page-wrap{padding-top:40px;padding-bottom:80px;}
@media(max-width:900px){.wc-page-wrap{padding-top:28px;padding-bottom:56px;}}
@media(max-width:600px){.wc-page-wrap{padding-top:20px;padding-bottom:44px;}}

/* ==================================================================
   CART — tile rows, visible thumbnails, stepper, tighter rhythm
   ------------------------------------------------------------------
   The cart keeps WooCommerce's <table> markup so its quantity, remove
   and update-cart behaviour keep working, but each row is laid out as
   a grid "tile". A table forced narrow columns that squeezed the
   thumbnail to nothing and left the totals panel fighting the last
   column for space.
   ================================================================== */

/* Bottom spacing only. This file loads AFTER style.css, so a `padding`
   shorthand here would reset padding-top to 0 and undo the header
   clearance set in style.css — which is exactly how the cart ended up
   underneath the header. Two older duplicates of this rule were removed;
   one property, one place. */
.woocommerce-cart .woocommerce{padding-bottom:56px;}

.celasta-cart-layout{gap:28px;}
@media(min-width:960px){.celasta-cart-layout{gap:32px;}}

/* Column headings are meaningless once rows are tiles. */
.celasta-cart-main table.shop_table thead{display:none;}
.celasta-cart-main table.shop_table,
.celasta-cart-main table.shop_table tbody{display:block;width:100%;border:0;}

/* No outer box around the line items.
   Each <tr> below is already its own rounded card, so the frame the generic
   .woocommerce table.shop_table rule draws was a second, SQUARE-cornered box
   around a set of rounded ones. That rule uses !important, hence the
   override; the extra class keeps it to the cart's own items table, because
   .shop_table is also the order-details and My Account tables, which still
   want their frame. */
.celasta-cart-main table.shop_table.woocommerce-cart-form__contents{
  border:0!important;border-radius:0;overflow:visible;background:none;
}

.celasta-cart-main table.shop_table tr.woocommerce-cart-form__cart-item{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  grid-template-areas:"thumb name subtotal" "thumb qty qty" "thumb wish wish";
  gap:6px 16px;align-items:center;
  padding:16px;margin:0 0 12px;
  border:1px solid var(--c-border);border-radius:12px;background:var(--c-white);
}
.celasta-cart-main table.shop_table td{border:0!important;padding:0!important;background:none!important;}

.celasta-cart-main td.product-thumbnail{grid-area:thumb;}
.celasta-cart-main td.product-thumbnail img{
  width:88px;height:110px;object-fit:cover;border-radius:8px;display:block;max-width:none;
}
.celasta-cart-main td.product-name{grid-area:name;font-size:0.95rem;line-height:1.4;}
.celasta-cart-main td.product-name a{color:var(--c-charcoal);}

/* ── Cart line: the chosen size ───────────────────────────────────────
   wc_get_formatted_cart_item_data() emits <dl class="variation">, and the
   theme styled it NOWHERE. Inside the cart tile's grid it fell back to the
   browser default - dt and dd on separate lines, dd indented 40px - so the
   size read as a detached "Size:" / "M" pair that looked like a rendering
   fault rather than the answer to "which size did I pick?". The data was
   always there; only the CSS was missing. */
.celasta-cart-main td.product-name dl.variation{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;
  margin:4px 0 0;padding:0;font-size:0.82rem;line-height:1.3;
}
.celasta-cart-main td.product-name dl.variation dt{
  margin:0;padding:0;font-weight:400;color:var(--c-muted);
}
.celasta-cart-main td.product-name dl.variation dd{
  margin:0 10px 0 0;padding:0;color:var(--c-charcoal);font-weight:600;
}
/* WooCommerce wraps the value in a <p>, which would break the line. */
.celasta-cart-main td.product-name dl.variation dd p{margin:0;display:inline;}

/* ── Coupon box, now above Price Details in the aside ──────────────── */
/* ── COD vs Prepaid comparison (under the cart line items) ─────────
   Two equal cards so neither option reads as the recommended one; the
   store takes the same money either way and the block exists to say so. */
.cod-compare{
  margin:16px 0 0;padding:18px 18px 14px;
  border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);
}
.cod-compare-title{
  margin:0 0 14px;font-family:var(--font-body);font-size:0.72rem;font-weight:600;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--c-muted);
}
.cod-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* Each card is a <label> wrapping a radio: the whole card is the hit area,
   and the radio itself is only visually hidden so the keyboard and screen
   readers still get a real radio group. */
.cod-opt{
  position:relative;display:flex;flex-direction:column;gap:2px;cursor:pointer;
  padding:14px;border:1px solid var(--c-border);border-radius:10px;background:var(--c-white);
  transition:border-color .15s,box-shadow .15s;
}
.cod-opt input[type="radio"]{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
.cod-opt:hover{border-color:var(--c-gold);}
.cod-opt.is-selected{border-color:var(--c-gold);box-shadow:inset 0 0 0 1px var(--c-gold);}
/* Focus has to be visible on the CARD, since the radio itself is hidden. */
.cod-opt:focus-within{outline:2px solid var(--c-gold);outline-offset:2px;}
.cod-opt-head{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:0.8rem;font-weight:600;color:var(--c-charcoal);
}
.cod-opt-head i{color:var(--c-gold);}
/* Plain figures, matching the Price Details column - the display face was
   decorative on a number the shopper is meant to read, not admire. */
.cod-opt-amt{font-size:1.05rem;font-weight:600;color:var(--c-charcoal);line-height:1.3;}
.cod-opt-methods{
  /* Was .cod-opt-when, which was uppercase with 0.1em tracking - right for
     the single word "now" it used to hold, and unreadable for a sentence
     listing every accepted payment method. Sentence case, normal tracking,
     and a line-height that lets it wrap to three or four lines inside the
     card without the text touching itself. */
  font-size:0.68rem;
  line-height:1.45;
  color:var(--c-muted);
  /* The two cards sit in a grid row, so the taller one sets the height and
     the shorter gets the slack. Pushing this to the bottom keeps the two
     amounts on the same line as each other, which is what makes them
     comparable at a glance. */
  margin-top:auto;
  padding-top:6px;
}
.cod-compare-apply{
  margin-top:12px;padding:10px 20px;border:0;border-radius:999px;
  background:var(--c-charcoal);color:var(--c-white);cursor:pointer;
  font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
}
/* Dimmed while the new totals are being fetched, so a second click on the
   other card cannot race the first. */
.cod-compare.is-busy{opacity:0.55;pointer-events:none;}
@media(max-width:560px){
  .cod-compare-grid{grid-template-columns:1fr;}
  .cod-compare{padding:14px 14px 12px;}
}

/* ---- View Story / Wear It button ----
   Moved here from product.css so BOTH the product page ("View Story", back
   to the entry) and the entry page ("Wear It", back to the product) draw
   from one definition. They are the two halves of the same round trip and
   should look identical. */
.product-view-story{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  padding:11px 18px;border:1px solid var(--c-gold);border-radius:var(--radius-sm,4px);
  color:var(--c-charcoal);background:rgba(184,154,106,0.06);
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  transition:var(--transition);
}
.product-view-story:hover{background:var(--c-gold);color:var(--c-white);}
.product-view-story i{color:var(--c-gold);transition:color 0.2s;}
.product-view-story:hover i{color:var(--c-white);}
.product-view-story em{font-style:normal;font-weight:400;letter-spacing:0.02em;text-transform:none;color:var(--c-muted);}
.product-view-story:hover em{color:rgba(255,255,255,0.85);}

/* ── Grid quantity stepper ─────────────────────────────────────────────
   The button and the stepper share ONE slot and cross-fade between them.
   Stacking both in a grid cell sized by the taller of the two means the
   card's height is fixed whichever is showing, so adding to cart cannot
   move anything on the page - which is the whole point of this control.

   WooCommerce's own "View cart" anchor is hidden here as well as removed
   in JS: on a slow connection it can be inserted before the script gets
   to it, and a link appearing for a moment is still a layout jump. */
li.product .added_to_cart,
.products .added_to_cart{display:none!important;}

/* One slot, both controls in the same place, so swapping between them
   cannot move the card.
   
   The BUTTON stays in normal flow and is what gives the slot its height;
   only the STEPPER is taken out of flow and centred over it. Both used to
   be absolute via `.clq-slot > *`, but the theme's own
   `.woocommerce ul.products li.product .button, .coll-grid .product .button
   {position:static}` is more specific and won, so the button never actually
   became absolute - it stayed in flow and kept only the
   `transform:translateY(-50%)`, which drew it half its own height too high.
   That lift was invisible while the stepper covered it and appeared the
   moment the quantity went back to 0, and it survived until a reload.
   
   So: no transform is used for POSITIONING any more. The button is laid out
   exactly where it would be with no stepper feature at all, and transform is
   only ever the little scale on the hidden state. Keeping the stepper
   absolute also means it can never add to the slot's height - it wraps to
   two lines on a narrow card, and that must not resize the card. */
.clq-slot{position:relative;min-height:42px;display:block;}
.clq-slot > *{margin:0!important;transition:opacity .22s ease,transform .22s ease;}
.clq-slot > a.add_to_cart_button{display:flex;align-items:center;justify-content:center;}
.clq-slot > .celasta-loop-qty{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);}

.clq-hidden{opacity:0;pointer-events:none;}
/* Scoped per control, because the two hide from different resting
   transforms: the button from none, the stepper from its centring. */
.clq-slot > a.add_to_cart_button.clq-hidden{transform:scale(.96);}
.clq-slot > .celasta-loop-qty.clq-hidden{transform:translateY(-50%) scale(.96);}

.celasta-loop-qty{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.celasta-loop-qty.is-busy{opacity:.55;pointer-events:none;}
.clq-box{
  display:inline-flex;align-items:center;height:40px;
  border:1px solid var(--c-border);border-radius:999px;background:var(--c-white);overflow:hidden;
}
.clq-btn{
  width:36px;height:38px;border:0;background:transparent;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--c-charcoal);
}
.clq-btn:hover{background:var(--c-surface);}
.clq-n{
  min-width:30px;text-align:center;font-size:0.9rem;
  font-variant-numeric:tabular-nums;color:var(--c-charcoal);
}
.clq-view{
  font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--c-gold-text);border-bottom:1px solid transparent;
}
.clq-view:hover{border-bottom-color:var(--c-gold-text);}
@media(prefers-reduced-motion:reduce){
  .clq-slot > *{transition:none;}
  .clq-slot > a.add_to_cart_button.clq-hidden{transform:none;}
  .clq-slot > .celasta-loop-qty.clq-hidden{transform:translateY(-50%);}
}

/* Phone, two cards per row.
   
   The stepper is laid out as a row - pill, gap, VIEW CART - which needs
   about 185px. A card here is only 165-190px wide, so the link wrapped onto
   a second line, the stepper grew 25px taller than the slot, and the card's
   overflow:hidden sliced the link in half. That is the clipped "View Cart".
   
   Stacked instead, and the slot is given the height the stack needs. That
   height is declared in CSS rather than measured at runtime, so it is the
   slot's height whether or not a stepper has been built - the card is
   exactly as tall before the first add as after it, and nothing moves.
   
   The button is stretched to fill the slot rather than centred in it: a
   centred 44px button in a 58px slot would leave a pale strip under a
   full-width dark CTA, which reads as a bug. Filling it just makes the tap
   target bigger, which is the right direction on a phone anyway. The
   controls stay >=30px for the same reason - shrinking them to force the
   row back onto one line would have fixed the clipping by making the
   buttons too small to hit. */
@media(max-width:480px){
  .clq-slot{min-height:58px;}
  .clq-slot > a.add_to_cart_button{height:100%;}
  .celasta-loop-qty{flex-direction:column;flex-wrap:nowrap;gap:3px;}
  .clq-box{height:32px;}
  .clq-btn{width:32px;height:30px;}
  .clq-n{min-width:24px;}
  .clq-view{font-size:0.62rem;letter-spacing:0.1em;}

  /* The slot is built by loop-cart.js on first render, so until something is
     added the button is a bare child of the card at its natural 44px - and the
     grid jumped 14px the first time anything went in. Claiming the slot's 58px
     up front keeps the button one height throughout. Once the button is moved
     into the slot this selector stops matching, so it cannot fight the
     .clq-slot > a.add_to_cart_button rule above. */
  li.product > a.add_to_cart_button{
    min-height:58px;display:flex;align-items:center;justify-content:center;
  }
}

/* Carries a nonce and nothing else; see woocommerce/cart/cart.php. */
.celasta-wish-form{display:contents;}

.celasta-cart-coupon{margin:0 0 16px;}
.celasta-cart-coupon .coupon{display:flex;gap:8px;align-items:stretch;}
.celasta-cart-coupon .coupon input.input-text{
  flex:1;min-width:0;min-height:46px;padding:10px 16px;
  border:1px solid var(--c-border);border-radius:999px;background:var(--c-white);
  font-family:var(--font-body);font-size:0.88rem;letter-spacing:0.04em;outline:none;
}
.celasta-cart-coupon .coupon input.input-text:focus{
  border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(184,154,106,0.16);
}
.celasta-cart-coupon .coupon button{
  flex:0 0 auto;min-height:46px;padding:10px 22px;border:0;border-radius:999px;
  background:var(--c-charcoal);color:var(--c-white);cursor:pointer;
  font-family:var(--font-body);font-size:0.72rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;transition:var(--transition);
}
.celasta-cart-coupon .coupon button:hover{background:var(--c-gold);}
@media(max-width:420px){.celasta-cart-coupon .coupon{flex-direction:column;}}

/* ── Remove-coupon control inside the Price Details panel ──────────── */
.cps-coupon-remove{
  margin-left:6px;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--c-muted);text-decoration:underline;text-underline-offset:2px;
}
.cps-coupon-remove:hover{color:#c0392b;}
/* td.product-price is no longer rendered - woocommerce/cart/cart.php
   explains why. Its rule is removed with it rather than left to match
   nothing. */
.celasta-cart-main td.product-quantity{grid-area:qty;}
/* The Move to wishlist control has a cell to itself so it can hold a grid
   area; see woocommerce/cart/cart.php for why it is not inside the
   quantity cell. justify-content is reset because the shared
   max-width:900px rule sets space-between and text-align:right on every
   shop_table cell, which pushed this one to the far edge. */
.celasta-cart-main td.product-wishlist{
  grid-area:wish;display:flex;justify-content:flex-start;text-align:left;
  padding:0!important;
}
/* The line total now shares the top row with the product name, which is
   also where the remove cross is pinned (top:8px right:10px, 24px wide).
   Without this the figure ran under the cross - the same collision the
   unit price used to have there. The padding reserves the corner. */
.celasta-cart-main td.product-subtotal{
  grid-area:subtotal;text-align:right;font-weight:500;white-space:nowrap;
}
/* Written long-hand because `.celasta-cart-main table.shop_table td` sets
   padding:0!important and scores (0,2,2); naming the table AND the cell
   class scores (0,3,2) and is the only way to win it back. */
.celasta-cart-main table.shop_table td.product-subtotal{padding-right:38px!important;}

/* Remove control tucked into the tile's top-right rather than a column. */
.celasta-cart-main tr.woocommerce-cart-form__cart-item{position:relative;}
.celasta-cart-main td.product-remove{position:absolute;top:8px;right:10px;}
.celasta-cart-main td.product-remove a.remove{
  width:24px;height:24px;line-height:22px;text-align:center;border-radius:50%;
  color:var(--c-muted)!important;font-size:1rem;background:transparent!important;
}
.celasta-cart-main td.product-remove a.remove:hover{background:var(--c-surface)!important;color:#c0392b!important;}

/* Item number badge — only printed when the cart holds more than one line. */
.celasta-cart-no{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;margin-right:8px;padding:0 6px;
  border-radius:999px;background:var(--c-surface);border:1px solid var(--c-border);
  font-family:var(--font-body);font-size:0.66rem;font-weight:600;color:var(--c-muted);
  vertical-align:middle;
}

/* Quantity stepper (markup added by assets/js/product.js). */
.celasta-cart-main .quantity{
  display:inline-flex;align-items:center;height:38px;
  border:1px solid var(--c-border);border-radius:999px;overflow:hidden;background:var(--c-white);
}
.celasta-cart-main .quantity input.qty{
  width:44px;height:36px;border:0;outline:0;text-align:center;background:transparent;
  font-size:0.9rem;color:var(--c-charcoal);-moz-appearance:textfield;appearance:textfield;
}
.celasta-cart-main .quantity input.qty::-webkit-outer-spin-button,
.celasta-cart-main .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.celasta-cart-main .quantity .celasta-qty-btn{width:34px;height:36px;}

/* While a quantity change is being applied, the cart is dimmed and its
   controls disabled so the shopper cannot queue a second change on top of
   an in-flight one. */
.celasta-cart-busy{opacity:0.55;pointer-events:none;transition:opacity 0.15s ease;}

/* Coupon + update row */
/* The coupon box moved to the aside (above Price Details), so this row now
   normally holds nothing but the cart nonce - a hidden input. Keeping the
   bordered, padded tile on it drew an empty box under the last product.
   The chrome comes back only when the row really has a control in it: the
   <noscript> Update-cart button, whose contents only become elements when
   scripting is off, or anything a plugin hangs on woocommerce_cart_actions.
   Without :has() support the row is simply borderless, which is harmless. */
.woocommerce table.cart td.actions{
  border:0!important;background:none!important;padding:0!important;margin:0;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
}
.woocommerce table.cart td.actions:has(button),
.woocommerce table.cart td.actions:has(a),
.woocommerce table.cart td.actions:has(.coupon){
  border:1px solid var(--c-border)!important;border-radius:12px;
  background:var(--c-surface)!important;padding:14px 16px!important;margin-top:4px;
}

/* ...and the ROW around that cell, which the responsive rules give the same
   16px tile padding every product row gets. With the cell collapsed that
   padding was all that remained: a 32px empty band under the last item. */
.celasta-cart-main table.shop_table tr:has(> td.actions){
  padding:0!important;border-bottom:0!important;
}
.celasta-cart-main table.shop_table tr:has(> td.actions:has(button)),
.celasta-cart-main table.shop_table tr:has(> td.actions:has(a)),
.celasta-cart-main table.shop_table tr:has(> td.actions .coupon){
  padding:16px 0!important;
}
.woocommerce table.cart td.actions .coupon{display:flex;gap:8px;flex:1 1 260px;min-width:0;}
.woocommerce table.cart td.actions .coupon input[type="text"]{
  flex:1;min-width:0;height:42px;border:1px solid var(--c-border);border-radius:999px;
  padding:0 16px;background:var(--c-white);font-size:0.88rem;
}
.woocommerce table.cart td.actions .coupon input[type="text"]:focus{
  border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(184,154,106,0.16);outline:none;
}
.woocommerce table.cart td.actions button{
  height:42px;border-radius:999px!important;padding:0 22px!important;
  font-size:0.68rem!important;letter-spacing:0.14em!important;white-space:nowrap;
}

@media(max-width:600px){
  /*
   * QUANTITY GETS ITS OWN LINE.
   *
   * It used to share a line with the subtotal, which put it in the FIRST
   * column - and that column is 72px wide because it is sized for the
   * thumbnail. The cell is display:flex with space-between and prints a
   * "Quantity" label before its contents, so the label took the width and
   * the stepper was squeezed to 3px: the minus, the number and the plus
   * were all invisible and impossible to tap. Nobody could change a
   * quantity on a phone.
   *
   * The subtotal moves up beside the thumbnail with the other values, and
   * the stepper takes a full-width row where the label sits left and the
   * control sits right, exactly like the Price and Subtotal rows above it.
   */
  .celasta-cart-main table.shop_table tr.woocommerce-cart-form__cart-item{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:"thumb name" "thumb subtotal" "qty qty" "wish wish";
    row-gap:10px;
  }
  /* The thumbnail now spans the text rows rather than one; pin it to the
     top so it sits with the name instead of drifting down beside them. */
  .celasta-cart-main td.product-thumbnail{align-self:start;}
  /* On the stacked card the total sits on its own row, clear of the
     cross in the corner, so the desktop reservation is given back. */
  .celasta-cart-main table.shop_table td.product-subtotal{padding-right:0!important;}
  .celasta-cart-main td.product-thumbnail img{width:72px;height:90px;}
  .woocommerce table.cart td.actions .coupon{flex:1 1 100%;}
  .woocommerce table.cart td.actions button[name="update_cart"]{width:100%;}
}

/* ------------------------------------------------------------------
   Wishlist — tighter, more even grid + stale-item notice (Phase 7)
   ------------------------------------------------------------------ */

/* The grid above already uses auto-fill minmax(230px,1fr) and flex cards,
   so those are NOT restated here — only what it was missing. */
.wishlist-grid{align-items:stretch;}
.wishlist-card-body{display:flex;flex-direction:column;flex:1;gap:6px;}
/* Push the action to the bottom so buttons line up across a row even
   when product names wrap to different heights. */
.wishlist-card-actions{margin-top:auto;padding-top:10px;}
.wishlist-card-actions .btn{width:100%;justify-content:center;}
.wishlist-card-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;line-height:1.3;
}

.wishlist-notice{
  max-width:620px;margin:0 auto 26px;padding:11px 16px;
  border:0;border-radius:10px;background:var(--c-surface);
  color:var(--c-muted);font-size:0.84rem;text-align:center;
}

@media(max-width:520px){
  .wishlist-card-name{font-size:0.85rem;min-height:2.4em;}
}

/* ==================================================================
   CHECKOUT — three-step layout (Address / Order Summary / Payment)
   ------------------------------------------------------------------
   The panels are sections of one WooCommerce form; only the active one
   is shown. Hiding is driven by the .cco-js class, which an inline
   script adds while the page parses — so with JavaScript disabled the
   class never lands, all three panels stay visible, and checkout
   degrades to the previous single-column form instead of hiding the
   payment box and becoming unusable.
   ================================================================== */

/* The cart is excluded from the body header offset and so is checkout —
   give it the same clearance the cart now gets. */
.woocommerce-checkout .woocommerce{padding-top:calc(var(--header-height,108px) + 20px);padding-bottom:56px;}

.cco{max-width:900px;margin:0 auto;}

/* Step header */
.cco-steps{
  display:flex;align-items:center;justify-content:center;gap:0;
  list-style:none;margin:0 0 28px;padding:0 0 22px;
  border-bottom:1px solid var(--c-border);
}
.cco-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative;text-align:center;}
/* Connector between the dots */
.cco-step + .cco-step::before{
  content:'';position:absolute;top:17px;right:50%;width:100%;height:1px;background:var(--c-border);z-index:0;
}
.cco-step.is-done + .cco-step::before,
.cco-step.is-active::before{background:var(--c-gold);}
.cco-step-dot{
  position:relative;z-index:1;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--c-border);background:var(--c-white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:0.8rem;color:var(--c-muted);
  transition:var(--transition);
}
.cco-step-label{
  font-family:var(--font-body);font-size:0.68rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted);
}
.cco-step.is-active .cco-step-dot{background:var(--c-charcoal);border-color:var(--c-charcoal);color:#fff;}
.cco-step.is-active .cco-step-label{color:var(--c-charcoal);}
.cco-step.is-done .cco-step-dot{background:var(--c-gold);border-color:var(--c-gold);color:#fff;}
.cco-step.is-done .cco-step-label{color:var(--c-charcoal);}
.cco-step.is-clickable{cursor:pointer;}

/* Panels */
/* Only hide panels once the step UI is actually running. */
.cco-js .cco-panel:not(.is-active){display:none;}
.cco-panel[hidden]{display:none;}
.cco-panel{animation:ccoFade .22s ease;}
@keyframes ccoFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.cco-panel{animation:none;}}
.cco-panel h3{font-family:var(--font-display);font-size:1.25rem;font-weight:400;margin:0 0 18px;color:var(--c-charcoal);}

/* Address columns */
.cco-panel .col2-set{display:grid;grid-template-columns:1fr;gap:28px;}
@media(min-width:820px){.cco-panel .col2-set{grid-template-columns:1fr 1fr;gap:36px;}}
.cco-panel .col2-set .col-1,
.cco-panel .col2-set .col-2{width:auto!important;float:none!important;}

/* ── Address step: compact, row-based ─────────────────────────────────
   The step was a single column of full-width rows, so six short fields
   (names, city, state, PIN) each took a whole line and the panel ran far
   past the fold. Billing and shipping now stack as two clearly separated
   blocks, and the fields inside each sit on a 6-column grid: two halves
   for the names, thirds for city/state/PIN, full width for the street.

   The grid is applied to WooCommerce's own __field-wrapper rather than to
   .form-row, so its markup and its form-row-first/last classes are left
   alone - address-i18n.js rewrites those rows on every country change and
   anything depending on them would come undone. */
.cco-panel #customer_details{display:block;}
.cco-panel .woocommerce-billing-fields__field-wrapper,
.cco-panel .woocommerce-shipping-fields__field-wrapper,
.cco-panel .woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;
}
.cco-panel .woocommerce-billing-fields__field-wrapper .form-row,
.cco-panel .woocommerce-shipping-fields__field-wrapper .form-row,
.cco-panel .woocommerce-additional-fields__field-wrapper .form-row{
  width:auto!important;float:none!important;margin:0!important;padding:0!important;
}
.cco-panel .form-row-wide,
.cco-panel #billing_address_1_field, .cco-panel #shipping_address_1_field,
.cco-panel #billing_address_2_field, .cco-panel #shipping_address_2_field,
.cco-panel #billing_email_field,
.cco-panel #billing_country_field,  .cco-panel #shipping_country_field,
.cco-panel #order_comments_field{grid-column:1/-1;}

@media(min-width:720px){
  .cco-panel .woocommerce-billing-fields__field-wrapper,
  .cco-panel .woocommerce-shipping-fields__field-wrapper{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
  .cco-panel .woocommerce-billing-fields__field-wrapper .form-row,
  .cco-panel .woocommerce-shipping-fields__field-wrapper .form-row{grid-column:span 3;}
  /* City / State / PIN across one row. */
  .cco-panel #billing_city_field,     .cco-panel #shipping_city_field,
  .cco-panel #billing_state_field,    .cco-panel #shipping_state_field,
  .cco-panel #billing_postcode_field, .cco-panel #shipping_postcode_field{grid-column:span 2;}
  .cco-panel #billing_phone_field,    .cco-panel #shipping_phone_field{grid-column:span 3;}
}
/* One field per line on a phone - two 160px columns is not a tap target. */
@media(max-width:520px){
  .cco-panel .woocommerce-billing-fields__field-wrapper,
  .cco-panel .woocommerce-shipping-fields__field-wrapper,
  .cco-panel .woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr;}
}

/* Headings inside the step are section dividers, not page titles. */
.cco-panel #customer_details h3,
.cco-panel .cco-ship-title{
  font-size:1.05rem!important;margin:0 0 14px!important;
  padding-bottom:10px!important;border-bottom:1px solid var(--c-border)!important;
}
.cco-panel .cco-ship{margin-top:26px;}

/* "Same as billing" replaces WooCommerce's inverted checkbox - but only
   once the script has confirmed it can drive it. With JS off the native
   control shows instead and behaves exactly as WooCommerce intends. */
.cco-same-as-billing{display:none;margin:0 0 14px;}
body.cco-ship-js .cco-same-as-billing{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
body.cco-ship-js #ship-to-different-address{display:none!important;}
.cco-same-as-billing label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:0.92rem;}
.cco-same-as-billing input{width:18px;height:18px;accent-color:var(--c-gold);cursor:pointer;}
.cco-same-hint{flex:1 1 100%;font-size:0.78rem;color:var(--c-muted);}

/* Fields */
.cco-panel .form-row{margin:0 0 14px;padding:0;}
.cco-panel label{display:block;margin-bottom:6px;font-family:var(--font-body);font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-muted);}
.cco-panel .input-text,
.cco-panel select,
.cco-panel textarea,
.cco-panel .select2-container .select2-selection--single{
  width:100%;border:1px solid var(--c-border);border-radius:10px;background:var(--c-white);
  padding:12px 14px;height:auto;min-height:46px;font-family:var(--font-body);font-size:0.92rem;color:var(--c-text);
}
.cco-panel .input-text:focus,
.cco-panel select:focus,
.cco-panel textarea:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(184,154,106,0.16);outline:none;}
.cco-panel textarea{min-height:96px;line-height:1.6;}

/* Review table */
.cco-panel .shop_table{width:100%;border:1px solid var(--c-border)!important;border-radius:12px;overflow:hidden;}
.cco-panel .shop_table th,
.cco-panel .shop_table td{padding:12px 16px!important;font-size:0.9rem;}
.cco-panel .shop_table tfoot th{font-weight:500;}
.cco-panel .order-total td,
.cco-panel .order-total th{font-size:1rem;font-weight:600;}

/* Total payable strip on the payment step */
.cco-payable{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 18px;padding:14px 18px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);
}
.cco-payable span{font-size:0.7rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted);}
.cco-payable strong{font-size:1.15rem;color:var(--c-charcoal);}

/* Payment box */
.cco-panel #payment{background:transparent;border-radius:0;}
.cco-panel #payment ul.payment_methods{
  border:1px solid var(--c-border);border-radius:12px;padding:8px 14px!important;margin:0 0 16px;list-style:none;
}
.cco-panel #payment ul.payment_methods li{padding:10px 0;border-bottom:1px solid var(--c-border);}
.cco-panel #payment ul.payment_methods li:last-child{border-bottom:0;}
.cco-panel #payment div.payment_box{background:var(--c-surface)!important;border-radius:8px;margin:10px 0 0;font-size:0.85rem;}
.cco-panel #payment div.payment_box::before{display:none;}
.cco-panel #payment .place-order{padding:0;margin-top:6px;}
.cco-panel #place_order{
  width:100%;border:0;border-radius:999px;background:var(--c-gold);color:#fff;
  font-family:var(--font-body);font-size:0.74rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  padding:17px 24px;cursor:pointer;transition:var(--transition);
}
.cco-panel #place_order:hover{background:var(--c-charcoal);}

/* Step navigation */
.cco-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;flex-wrap:wrap;}
.cco-nav-end{justify-content:flex-start;}
.cco-next{
  border:0;border-radius:999px;background:var(--c-charcoal);color:#fff;
  font-family:var(--font-body);font-size:0.7rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  padding:15px 30px;cursor:pointer;transition:var(--transition);
}
.cco-next:hover{background:var(--c-gold);}
.cco-back,.cco-back-link{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--font-body);font-size:0.72rem;letter-spacing:0.1em;color:var(--c-muted);text-decoration:underline;
}
.cco-back:hover,.cco-back-link:hover{color:var(--c-charcoal);}

@media(max-width:600px){
  .cco-step-label{font-size:0.6rem;letter-spacing:0.08em;}
  .cco-step-dot{width:30px;height:30px;}
  .cco-step + .cco-step::before{top:15px;}
  .cco-nav{flex-direction:column-reverse;align-items:stretch;}
  .cco-next{width:100%;}
  .cco-nav .cco-back{text-align:center;padding:10px 0;}
}

/* ══════════════════════════════════════════════════════════════════
   Order tracking + Returns (Prompts 26 & 27)
   ------------------------------------------------------------------
   These live here, NOT in account.css. That file is not enqueued by
   anything — grep the theme for 'account.css' and there are no hits —
   so every rule in it is inert. woo-extra.css is loaded unconditionally
   by inc/core/enqueue.php, which covers both My Account (the tracker and
   the returns form) and the single-product page (the returns badge).
   ══════════════════════════════════════════════════════════════════ */

/* ── Order tracking (Prompt 26) ──────────────────────────────────────
   Vertical step tracker matching the client reference: a filled dot with
   a tick for each completed step, a solid rail between completed steps
   and a dotted one ahead, and a tinted row on the step the parcel is
   currently at. Replaces the old horizontal .cacc-timeline-h. */
.cot{margin:0;}
.cot-exception{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#FDF2F2;border:1px solid #F3D6D6;color:#8E2F2F;font-size:0.86rem;}

.cot-steps{list-style:none;margin:0 0 6px;padding:0;}
.cot-step{position:relative;display:flex;align-items:center;gap:14px;padding:11px 12px 11px 0;min-height:44px;}
/* The rail is drawn by each row except the last, so it always stops at
   the final dot instead of trailing past it. */
.cot-step::before{content:'';position:absolute;left:11px;top:50%;bottom:-50%;width:0;border-left:2px dotted var(--c-border,#DDD5C4);z-index:0;}
.cot-step:last-child::before{display:none;}
.cot-step.is-done::before{border-left-style:solid;border-left-color:#2E7D46;}

.cot-dot{position:relative;z-index:1;flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--c-border,#DDD5C4);background:#fff;box-sizing:border-box;}
.cot-step.is-done .cot-dot{background:#2E7D46;border-color:#2E7D46;}
/* Tick drawn in CSS so the tracker needs no icon font. */
.cot-step.is-done .cot-dot::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

.cot-label{font-size:0.92rem;color:var(--c-muted,#7A6E63);line-height:1.4;}
.cot-step.is-done .cot-label{color:var(--c-charcoal,#2C2520);font-weight:500;}
.cot-step.is-current{background:#EDF6EF;border-radius:8px;padding-left:12px;margin-left:-12px;}
.cot-step.is-current::before{left:23px;}
.cot-step.is-current .cot-label{font-weight:600;color:var(--c-charcoal,#2C2520);}

.cot-eta{margin:4px 0 0;font-size:0.84rem;color:var(--c-muted,#7A6E63);}

.cot-updates{margin:14px 0 0;}
.cot-updates>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;list-style:none;
  font-size:0.88rem;font-weight:600;color:#1F4E79;}
.cot-updates>summary::-webkit-details-marker{display:none;}
.cot-updates>summary::after{content:'›';font-size:1.15rem;line-height:1;transition:transform .18s ease;}
.cot-updates[open]>summary::after{transform:rotate(90deg);}
.cot-updates>summary:hover{text-decoration:underline;}

.cot-feed{list-style:none;margin:12px 0 0;padding:0 0 0 14px;border-left:2px solid var(--c-border,#DDD5C4);}
.cot-feed li{padding:0 0 14px;font-size:0.86rem;line-height:1.5;}
.cot-feed li:last-child{padding-bottom:0;}
.cot-feed-when{display:block;font-size:0.76rem;color:var(--c-muted,#7A6E63);}
.cot-feed-what{display:block;color:var(--c-charcoal,#2C2520);}
.cot-feed-where{display:block;font-size:0.78rem;color:var(--c-muted,#7A6E63);}

.cot-consign{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--c-border,#DDD5C4);font-size:0.86rem;color:var(--c-muted,#7A6E63);}
.cot-consign strong{color:var(--c-charcoal,#2C2520);}
.cot-note{margin:14px 0 0;font-size:0.84rem;color:var(--c-muted,#7A6E63);}

@media (max-width:600px){
  .cot-label{font-size:0.86rem;}
  .cot-consign{gap:6px 12px;}
}

/* ── Returns & exchange (Prompt 27) ──────────────────────────────── */
.cret{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--c-border,#DDD5C4);}
.cret-ok{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#EDF6EF;border:1px solid #C7E7CD;color:#1F5B33;font-size:0.88rem;}
.cret-err{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#FDF2F2;border:1px solid #F3D6D6;color:#8E2F2F;font-size:0.88rem;}
.cret-note{margin:0;font-size:0.86rem;color:var(--c-muted,#7A6E63);}

.cret-existing{list-style:none;margin:0 0 14px;padding:0;}
.cret-existing li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;
  background:var(--c-surface,#F3EFE7);border-radius:8px;font-size:0.88rem;}
.cret-status{margin-left:auto;font-size:0.76rem;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;background:#fff;border:1px solid var(--c-border,#DDD5C4);color:var(--c-muted,#7A6E63);}

.cret-form>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;list-style:none;
  font-size:0.88rem;font-weight:600;color:var(--c-charcoal,#2C2520);
  border:1px solid var(--c-border,#DDD5C4);border-radius:30px;padding:9px 18px;}
.cret-form>summary::-webkit-details-marker{display:none;}
.cret-form>summary:hover{background:var(--c-surface,#F3EFE7);}
.cret-form[open]>summary{margin-bottom:16px;}

.cret-field{margin:0 0 16px;border:0;padding:0;}
.cret-field legend,.cret-field>label{display:block;font-size:0.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-muted,#7A6E63);margin-bottom:8px;}
.cret-req{color:#8E2F2F;}
.cret-field select,.cret-field textarea,.cret-field input[type=file]{width:100%;max-width:460px;
  border:1px solid var(--c-border,#DDD5C4);border-radius:6px;padding:10px 12px;font:inherit;font-size:0.9rem;background:#fff;}
.cret-field small{display:block;margin-top:6px;font-size:0.76rem;color:var(--c-muted,#7A6E63);text-transform:none;letter-spacing:0;}

.cret-radio{display:flex;align-items:flex-start;gap:10px;padding:9px 0;text-transform:none;letter-spacing:0;
  font-size:0.9rem;color:var(--c-charcoal,#2C2520);}
.cret-radio input{margin-top:3px;flex:0 0 auto;}
.cret-radio small{display:block;color:var(--c-muted,#7A6E63);font-size:0.78rem;margin-top:2px;}

/* Product page badge */
.celasta-returns-badge{display:flex;align-items:center;gap:9px;margin:14px 0;padding:10px 14px;
  border:1px solid var(--c-border,#DDD5C4);border-radius:8px;background:var(--c-surface,#F3EFE7);
  font-size:0.86rem;color:var(--c-charcoal,#2C2520);}
.celasta-returns-badge i{color:var(--c-gold,#B89A6A);}
.celasta-returns-badge.is-final{background:#FAF7F2;color:var(--c-muted,#7A6E63);}
.celasta-returns-badge.is-final i{color:var(--c-muted,#7A6E63);}

/* ── Order cancellation (Prompt 28) ──────────────────────────────── */
.ccan{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--c-border,#DDD5C4);}
.ccan-ok{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#EDF6EF;border:1px solid #C7E7CD;color:#1F5B33;font-size:0.88rem;}
.ccan-err{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#FDF2F2;border:1px solid #F3D6D6;color:#8E2F2F;font-size:0.88rem;}
.ccan-note{margin:0;font-size:0.86rem;color:var(--c-muted,#7A6E63);}
.ccan-deadline{margin:0 0 14px;font-size:0.88rem;color:var(--c-charcoal,#2C2520);}

.ccan-form>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;list-style:none;
  font-size:0.86rem;font-weight:600;color:#8E2F2F;
  border:1px solid #E7C9C9;border-radius:30px;padding:9px 18px;background:#FDF7F7;}
.ccan-form>summary::-webkit-details-marker{display:none;}
.ccan-form>summary:hover{background:#F9EDED;}
.ccan-form[open]>summary{margin-bottom:16px;}

.ccan-field{margin:0 0 14px;}
.ccan-field label{display:block;font-size:0.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-muted,#7A6E63);margin-bottom:8px;}
.ccan-req{color:#8E2F2F;}
.ccan-field select,.ccan-field textarea{width:100%;max-width:460px;border:1px solid var(--c-border,#DDD5C4);
  border-radius:6px;padding:10px 12px;font:inherit;font-size:0.9rem;background:#fff;}
.ccan-submit{background:#8E2F2F;border-color:#8E2F2F;color:#fff;}
.ccan-submit:hover{background:#752626;border-color:#752626;color:#fff;}

/* ── Checkout: PIN-code auto-detect status line ──────────────── */
/* Injected by assets/js/checkout-pincode.js under the Pin Code field.
   Hidden until it has something to say, so JS-off shows nothing. */
.cco-pin-hint{display:none;margin-top:7px;font-size:0.8rem;line-height:1.4;
  color:var(--c-muted,#7A6E63);}
.cco-pin-hint.is-on{display:block;}

/* ── Checkout: delivery estimate ───────────────────────── */
/* Injected by assets/js/checkout-pincode.js after the State row once
   Shiprocket has quoted a window for the customer's PIN code. Hidden
   until then: an estimate is a promise, so it appears only when there
   is a real one to make. */
.cco-etd{display:none;margin:2px 0 14px;font-size:0.85rem;line-height:1.4;
  color:#1F5B33;font-weight:600;}
.cco-etd.is-on{display:block;}
.cco-etd::before{content:"\1F69A";margin-right:7px;font-weight:400;}
.cco-pin-hint.is-ok{color:#1F5B33;}

/* ── Order line-item thumbnails ───────────────────────── */
/* Used by three templates that all render the same idea: the checkout
   review table, the order-received page and My Account > View order.
   One rule set so a customer sees the same row in all three. */
.cco-item{display:flex;align-items:flex-start;gap:12px;}
.cco-item-thumb{flex:0 0 56px;width:56px;line-height:0;}
.cco-item-thumb img{width:56px;height:56px;object-fit:cover;display:block;
  border:1px solid var(--c-border,#DDD5C4);border-radius:8px;background:#fff;}
.cco-item-text{flex:1 1 auto;min-width:0;}

@media(max-width:480px){
  .cco-item{gap:10px;}
  .cco-item-thumb,.cco-item-thumb img{flex-basis:44px;width:44px;height:44px;}
}

/* ── COD advance note under the payment option ─────────────────── */
.celasta-cod-note{display:block;margin-top:6px;font-size:0.85rem;color:var(--c-charcoal,#2C2520);}

/* ── My Account: kill the browser's <mark> highlight ─────────── */
/* WooCommerce's core myaccount/view-order.php writes the order number,
   date and status as <mark class="order-number|order-date|order-status">,
   purely as hooks for styling. Nothing here styled them, so every browser
   fell back to its own default for <mark> — a yellow highlighter block —
   and the sentence "Order #611 was placed on August 21, 2026 and is
   currently Processing." came out with three highlighted fragments.

   WooCommerce's own stylesheet neutralises these, but this theme does not
   load it, so the reset has to live here. Scoped to WooCommerce's own
   wrappers and to its own class names, so a genuine <mark> used for real
   emphasis anywhere else on the site keeps working. */
.woocommerce mark,
.woocommerce-page mark,
mark.order-number,
mark.order-date,
mark.order-status,
mark.order-total{background:transparent;color:inherit;padding:0;}

/* ============================================================
   PRICE DETAILS PANEL + BOTTOM BAR  (Prompt 13)
   ------------------------------------------------------------
   One component, two pages: rendered by
   inc/modules/price-summary.php, used by woocommerce/cart/
   cart-totals.php and woocommerce/checkout/review-order.php.

   Every figure here is tax-inclusive (see inc/modules/gst.php),
   so there is deliberately no tax row to style.
   ============================================================ */
.cps{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;
  padding:24px 22px;
}
.cps-title{
  font-family:var(--font-body);font-size:0.72rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--c-muted);margin:0 0 18px;
}
.cps-rows{display:flex;flex-direction:column;gap:2px;}

.cps-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;font-size:0.92rem;color:var(--c-text);
}
.cps-label{min-width:0;}
.cps-val{white-space:nowrap;font-variant-numeric:tabular-nums;}

/* A discount is good news; it reads as such. --c-green is the brand's
   own green, so this stays inside the palette rather than importing a
   generic "success" colour that belongs to no other part of the site. */
.cps-neg,.cps-free{color:var(--c-green);font-weight:600;}

/* ── the collapsible Discounts group ──────────────────────── */
.cps-group{border:0;}
.cps-group > summary{
  cursor:pointer;list-style:none;font-weight:600;
}
.cps-group > summary::-webkit-details-marker{display:none;}
/* The caret is drawn on the row itself so it sits with the label rather
   than in the browser's default marker slot, which pushes the text in. */
.cps-group > summary .cps-label::after{
  content:'';display:inline-block;margin-left:8px;vertical-align:middle;
  width:7px;height:7px;border-right:1.5px solid var(--c-muted);border-bottom:1.5px solid var(--c-muted);
  transform:translateY(-2px) rotate(45deg);transition:transform var(--transition);
}
.cps-group[open] > summary .cps-label::after{transform:translateY(1px) rotate(-135deg);}
.cps-group > summary:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px;border-radius:3px;}

.cps-sub{padding:2px 0 6px 14px;border-left:2px solid var(--c-border);margin:0 0 4px;}
.cps-row-sub{padding:6px 0;font-size:0.85rem;color:var(--c-muted);}
.cps-row-sub .cps-val{font-size:0.88rem;}

/* ── the delivery estimate, injected above the total ──────── */
.cps-extra{padding:8px 0;}
.cps-extra .celasta-eta{font-size:0.82rem;color:var(--c-muted);margin:0;}

/* ── Total Amount ─────────────────────────────────────────── */
.cps-row-total{
  margin-top:6px;padding-top:16px;border-top:1px solid var(--c-border);
  font-size:1.05rem;font-weight:600;color:var(--c-charcoal);
}
.cps-row-total .cps-val{font-size:1.15rem;}
.cps-row-total .cps-val .amount{font-weight:600;}
/* WooCommerce appends "(includes ₹X GST)" to the cart total. It is true
   and worth keeping, but it is an aside, not part of the figure. */
.cps-row-total small,.cps-row-total .includes_tax{
  display:block;font-size:0.68rem;font-weight:400;letter-spacing:0.02em;
  color:var(--c-muted);margin-top:3px;text-align:right;
}

/* ── savings banner ───────────────────────────────────────── */
.cps-savings{
  margin:16px 0 0;padding:11px 14px;border-radius:8px;
  background:rgba(74,94,69,0.10);border:1px solid rgba(74,94,69,0.22);
  color:var(--c-green);font-size:0.85rem;font-weight:600;text-align:center;
}

/* ── checkout: the panel sits in a full-width table cell ──── */
.woocommerce-checkout-review-order-table tr.cps-holder > td{
  padding:0!important;border:0!important;background:none!important;
}
.woocommerce-checkout-review-order-table tr.cps-holder .cps{
  margin-top:18px;border-radius:10px;
}
/* The cart's own aside already draws a panel; a second border around
   this one would double it up. */
.celasta-cart-aside .cart_totals{background:none;border:0;padding:0;border-radius:0;}
.celasta-cart-aside .cart_totals .cps{border-radius:10px;}
.cps-shipping-table{margin:0 0 14px!important;}

/* ============================================================
   BOTTOM BAR
   ------------------------------------------------------------
   On the CART this is a narrow-screen device only: from 960px up
   the summary is already pinned in the sidebar with its button a
   few pixels away, and a fixed copy of the same total would be
   duplication that eats the viewport. Below that width the
   sidebar drops to the end of a long scroll, which is exactly
   where the total goes out of sight.

   On the CHECKOUT it stays at every width: that page has no
   sidebar at all, and the panel lives inside step 2, so without
   this the total is invisible while the customer is on Address
   or Payment.
   ============================================================ */
.cpb{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--c-white);border-top:1px solid var(--c-border);
  box-shadow:0 -6px 24px rgba(44,37,32,0.10);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
}
.cpb-inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cpb-figure{display:flex;flex-direction:column;gap:1px;min-width:0;}
.cpb-total{
  font-size:1.05rem;font-weight:600;color:var(--c-charcoal);
  font-variant-numeric:tabular-nums;line-height:1.2;
}
/* The same "(includes ₹X GST)" aside — too much for a bar this size. */
.cpb-total small,.cpb-total .includes_tax{display:none;}
.cpb-details{min-width:0;}
.cpb-link{
  border:0;background:none;padding:0;cursor:pointer;text-align:left;list-style:none;
  font-family:var(--font-body);font-size:0.72rem;letter-spacing:0.04em;
  color:var(--c-gold-text);text-decoration:underline;
}
.cpb-link::-webkit-details-marker{display:none;}
.cpb-link:hover{color:var(--c-charcoal);}
.cpb-link:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px;border-radius:3px;}
.cpb-details[open] > .cpb-link{color:var(--c-charcoal);}

/* The drawer opens UPWARDS, out of the bar. .cpb is position:fixed, so it
   is the containing block and this needs no wrapper of its own. Capped in
   height because a twenty-line cart would otherwise cover the whole page
   with no way to see the bar it came from. */
.cpb-drawer{
  position:absolute;left:0;right:0;bottom:100%;
  max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--c-white);border-top:1px solid var(--c-border);
  box-shadow:0 -6px 24px rgba(44,37,32,0.10);
  padding:16px;
}
.cpb-drawer .cps{
  max-width:1180px;margin:0 auto;background:var(--c-surface);
}
.cpb-cta{
  flex:0 0 auto;border:0;border-radius:999px;cursor:pointer;
  background:var(--c-gold);color:#fff!important;text-decoration:none;
  font-family:var(--font-body);font-size:0.72rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:14px 26px;transition:var(--transition);
  display:inline-block;text-align:center;
}
.cpb-cta:hover{background:var(--c-charcoal);color:#fff!important;}
.cpb-cta[disabled]{opacity:0.55;cursor:not-allowed;}

/* Nothing may end up underneath the bar. */
body.woocommerce-cart .celasta-cart-layout,
body.woocommerce-checkout .cco{padding-bottom:86px;}

@media(min-width:960px){
  .cpb[data-cpb-context="cart"]{display:none;}
  body.woocommerce-cart .celasta-cart-layout{padding-bottom:0;}
}
@media(max-width:600px){
  .cpb-inner{gap:10px;}
  .cpb-cta{padding:13px 18px;font-size:0.68rem;letter-spacing:0.1em;}
  .cpb-total{font-size:0.98rem;}
  .cps{padding:20px 16px;}
}

/* The panel flashes when the bar's link brings the customer to it, so the
   jump is visibly answered rather than looking like nothing happened. */
@keyframes cps-flash{
  0%,100%{box-shadow:0 0 0 0 rgba(184,154,106,0);}
  30%    {box-shadow:0 0 0 4px rgba(184,154,106,0.45);}
}
.cps.is-flash{animation:cps-flash 1.1s ease-out 1;}
@media(prefers-reduced-motion:reduce){
  .cps.is-flash{animation:none;}
  .cps-group > summary .cps-label::after{transition:none;}
}

/* ============================================================
   COLLECTIONS CARD - PHONE LAYOUT (final overrides)
   Placed at the end of the file on purpose: several rules above
   set this card's padding with !important inside their own media
   queries, so matching their specificity was not enough - source
   order is what settles it.
   Scoped to .coll-grid, which only archive-product.php renders.
   ============================================================ */
@media(max-width:600px){
  /* The picture takes 70% of the golden card; the text block gets the rest,
     which is comfortable once the desktop-sized padding below is removed. */
  .coll-grid .celasta-thumb-wrap{flex:0 0 70%;}

  /* That padding is spacing for the taller desktop card. On a phone it was
     32px of empty space inside a 91px text block - the reason the price was
     being pushed past the bottom edge. */
  .coll-grid .product .woocommerce-loop-product__title{
    padding-top:0!important;padding-bottom:0!important;margin-top:8px!important;
  }
  .coll-grid .product .price{padding-bottom:0!important;padding-top:0!important;}
}


/* ── Delivery instructions (cart) ─────────────────────────────────────
   A <details>, so it opens and closes with no script and is keyboard
   operable for free. Sits under the payment cards and borrows their
   card treatment so the two read as one group. */
.cdn-box{margin:12px 0 0;}
.cdn-details{
  border:1px solid var(--c-border);border-radius:12px;
  background:var(--c-surface,#fff);
}
.cdn-summary{
  list-style:none;cursor:pointer;padding:14px 16px;
  font-size:0.8rem;font-weight:600;color:var(--c-charcoal);
  display:flex;align-items:center;gap:10px;
}
/* The default marker is replaced with one that rotates, so the control
   reads the same in Safari (which draws no marker for flex summaries). */
.cdn-summary::-webkit-details-marker{display:none;}
.cdn-summary::after{
  content:"";margin-left:auto;width:8px;height:8px;flex:0 0 auto;
  border-right:1.5px solid var(--c-muted);border-bottom:1.5px solid var(--c-muted);
  transform:rotate(45deg);transition:transform .18s ease;
}
.cdn-details[open] .cdn-summary::after{transform:rotate(-135deg);}
.cdn-summary:hover{color:var(--c-gold);}
.cdn-details:focus-within .cdn-summary{outline:2px solid var(--c-gold);outline-offset:-2px;}

.cdn-body{padding:0 16px 14px;}
.cdn-body textarea{
  width:100%;box-sizing:border-box;resize:vertical;min-height:76px;
  padding:10px 12px;font:inherit;font-size:0.82rem;line-height:1.5;
  border:1px solid var(--c-border);border-radius:8px;background:#fff;
  color:var(--c-charcoal);
}
.cdn-body textarea:focus{outline:2px solid var(--c-gold);outline-offset:1px;border-color:var(--c-gold);}
.cdn-note{margin:7px 0 0;font-size:0.7rem;line-height:1.5;color:var(--c-muted);}
.cdn-saved{display:inline-block;margin-top:6px;font-size:0.68rem;color:var(--c-muted);min-height:1em;}
.cdn-save{
  margin-top:10px;padding:8px 16px;border:0;border-radius:999px;
  background:var(--c-charcoal);color:#fff;font-size:0.72rem;cursor:pointer;
}

/* The customer's own order view. */
.celasta-order-delivery-note{margin:18px 0 0;}
.celasta-order-delivery-note h2{font-size:0.9rem;margin:0 0 6px;}
.celasta-order-delivery-note p{margin:0;font-size:0.85rem;line-height:1.6;color:var(--c-muted);}

@media(max-width:600px){
  .cdn-summary{padding:12px 13px;font-size:0.76rem;}
  .cdn-body{padding:0 13px 12px;}
}


/* ── Product grid, desktop: column count, gutter, tile size ──────────
   DESKTOP ONLY (min-width:768px). The mobile card - 2 up, Add to Cart
   hidden, 1/1.618 - lives in max-width:600px blocks above and is not
   touched here.

   Applies to every listing that uses .coll-grid: /collections/, category
   archives, search results and the shop.

   THREE THINGS WERE MAKING THE TILES READ AS HUGE:

   1. `.coll-grid > .product{width:85%}` was applying at every width, so a
      tile filled 323px of its own 380px column. The 57px left over sat
      either side of the card and added to the 32px gap, which is why the
      gutter looked enormous. Tiles now fill their column.
   2. The gutter itself was clamp(16px,2vw,32px) - 32px at 1920. Halved.
   3. The tile carried a fixed aspect-ratio of 1/2.05, which made a very
      tall portrait card. The photograph now carries a 3/4 ratio instead
      and the tile is only as tall as its contents, which is shorter at
      every width.

   The image keeps object-fit:cover, so a 3/4 box crops rather than
   distorts whatever shape the original photograph is. */

@media(min-width:768px){
  /* Fill the column. This overrides the 85% rule above, which is why it
     is written at the same shape but later in the file. */
  .coll-grid > .product{width:100%;margin-inline:0;}

  /* One value for both axes, about half the old gutter. */
  .coll-grid{gap:16px;}

  /* The tile is as tall as its contents - no fixed aspect-ratio. */
  .coll-grid > .product{
    aspect-ratio:auto;
    display:flex;flex-direction:column;overflow:hidden;
  }
  /*
   * display:contents, so the photo, the text and the Add to Cart button
   * are all children of the tile. The button is a SIBLING of this link in
   * the markup, not a child, so without this the tile is two boxes that
   * size independently. !important because
   * `.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link`
   * scores (0,4,3) against this selector's (0,3,0) and wins on
   * specificity whatever the source order.
   */
  .coll-grid > .product > .woocommerce-LoopProduct-link{display:contents!important;}

  /* The photograph: a fixed 3/4 box, cropped not squashed. */
  .coll-grid .celasta-thumb-wrap{
    flex:0 0 auto;aspect-ratio:3/4;width:100%;overflow:hidden;position:relative;
  }
  .coll-grid .celasta-thumb-wrap img,
  .coll-grid > .product a img{
    width:100%!important;height:100%!important;
    aspect-ratio:auto!important;object-fit:cover!important;display:block;
  }

  /* Type scaled to the smaller card. */
  .coll-grid > .product > .woocommerce-LoopProduct-link > :not(.celasta-thumb-wrap){flex:0 0 auto;}
  .coll-grid .product .woocommerce-loop-product__title{
    padding:8px 10px 0!important;margin:0!important;
    font-size:0.85rem!important;line-height:1.25!important;-webkit-line-clamp:1;
  }
  .coll-grid .celasta-loop-rating{margin:3px 0 2px!important;min-height:12px;}
  .coll-grid .product .price{
    padding:0 10px!important;margin:0!important;
    font-size:0.8rem!important;line-height:1.3!important;
    /* A discounted price is was-price, now-price and the % chip on one
       line; left to wrap it makes the card taller than its neighbours. */
    white-space:nowrap!important;flex-wrap:nowrap!important;overflow:hidden;
  }
  .coll-grid .product .price *{white-space:nowrap!important;}
  /*
   * THE ADD TO CART ROW IS ONE FIXED-HEIGHT SHELF, ALWAYS.
   *
   * assets/js/loop-cart.js WRAPS this button in a .clq-slot the first time
   * the product goes in the cart, and puts the quantity stepper in beside
   * it. Two things went wrong with that:
   *
   *  - margin-top:auto was on the BUTTON, and once wrapped the button is
   *    no longer a flex child of the tile - the slot is. Nothing pinned
   *    the row to the tile's floor any more, so it rode up.
   *  - the slot's own min-height is 42px against a 29px button, so the
   *    tile grew ~9px on first add. grid-auto-rows:1fr then pushed EVERY
   *    tile in the row taller, and the slot stays in the DOM after the
   *    item is removed, so it never came back down.
   *
   * Both states are now the same 40px shelf, pinned to the floor: empty
   * cart (bare button), in cart (stepper), and removed (button again,
   * inside the slot that stays behind). The tile height cannot change.
   */
  .coll-grid > .product .button,
  .coll-grid > .product .add_to_cart_button,
  .coll-grid > .product > .clq-slot{
    margin-top:auto!important;
    min-height:40px!important;height:40px!important;
    flex:0 0 auto;
  }
  .coll-grid > .product .button,
  .coll-grid > .product .add_to_cart_button{
    padding:0 8px!important;
    font-size:0.58rem!important;letter-spacing:0.08em!important;line-height:1.2!important;
    display:flex!important;align-items:center;justify-content:center;
  }
  /* Inside the slot the button no longer needs the auto margin - the slot
     is doing that job - and it fills the shelf rather than sitting in it. */
  .coll-grid .clq-slot > .button,
  .coll-grid .clq-slot > .add_to_cart_button{
    margin-top:0!important;height:100%!important;
  }
  /* The stepper scaled to the same shelf, so swapping between the two
     changes nothing but what is drawn. */
  .coll-grid .clq-box{height:34px;}
  .coll-grid .clq-btn{width:30px;height:32px;font-size:0.9rem;}
  .coll-grid .clq-n{min-width:24px;font-size:0.8rem;}
  .coll-grid .celasta-loop-qty{flex-wrap:nowrap;gap:8px;}
  .coll-grid .clq-view{font-size:0.6rem;letter-spacing:0.08em;white-space:nowrap;}

  /* Badges and the wishlist heart are positioned against the tile, which
     is still position:relative - the 3/4 photo box does not move them. */
  .coll-grid .celasta-badges{z-index:2;}
  .coll-grid .celasta-wish-btn{z-index:3;}

  /* LIST VIEW IS EXEMPT. It is a different layout entirely - a 140px
     thumbnail beside the text - and every rule above would fight it. */
  .coll-grid.coll-grid--list{gap:0;}
  .coll-grid--list > .product{width:100%;aspect-ratio:auto;display:grid;overflow:visible;}
  .coll-grid--list > .product > .woocommerce-LoopProduct-link{display:flex!important;}
  .coll-grid--list .celasta-thumb-wrap{aspect-ratio:auto;}
}

/* Column counts. Written last so they beat the earlier repeat(3)/repeat(2)
   rules, which sit in their own media queries at various widths. */
@media(min-width:1400px){ .coll-grid:not(.coll-grid--list){grid-template-columns:repeat(4,minmax(0,1fr));} }
@media(min-width:1200px) and (max-width:1399.98px){ .coll-grid:not(.coll-grid--list){grid-template-columns:repeat(4,minmax(0,1fr));} }
@media(min-width:992px)  and (max-width:1199.98px){ .coll-grid:not(.coll-grid--list){grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(min-width:768px)  and (max-width:991.98px){  .coll-grid:not(.coll-grid--list){grid-template-columns:repeat(2,minmax(0,1fr));} }


/* ── WISHLIST TILES MATCH THE COLLECTIONS TILES (web view only) ──────
   The wishlist grid was written before the collections tiles were resized
   in the block above, so it kept the older, much taller proportions: a
   1/1.618 photograph in an auto-fill grid with a 20px gutter. Measured
   side by side at 1540px that is a 285x625 card against a 297x498 one, so
   the same product read as a noticeably bigger tile on the wishlist.

   Everything below is the SAME treatment .coll-grid already gets, written
   for the wishlist card, and scoped to the SAME min-width:768px - so the
   phone layout keeps the two-up grid it already has and only the web view
   changes, which is what was asked for. */
@media(min-width:768px){
  /* One value for both axes, matching .coll-grid{gap:16px}. */
  .wishlist-grid{gap:16px;}

  /* The photograph: a fixed 3/4 box, cropped not squashed - the same box
     .coll-grid .celasta-thumb-wrap uses. This is most of the height
     difference: 3/4 of 285px is 380px against 1/1.618's 461px. */
  .wishlist-card-media{aspect-ratio:3/4;}

  /* Type and padding scaled to the smaller card, mirroring the sizes the
     collections tile sets on its own title and price. */
  .wishlist-card-body{padding:8px 10px 10px;gap:4px;}
  /* One line, clipped - the collections title does the same.
     min-height is reset to 0 on purpose: the rule further up reserves
     2.6em (35px at this size) so that names of different lengths still
     leave the buttons on one line, and that reservation was the whole
     of the height still separating the two cards. It is not needed once
     the name is clamped to a single line, and the action row is pinned
     to the floor by margin-top:auto regardless. */
  .wishlist-card-name{
    font-size:0.85rem;line-height:1.25;min-height:0;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
    overflow:hidden;
  }
  .wishlist-card-price{font-size:0.8rem;white-space:nowrap;}
  .wishlist-card-price del{font-size:0.72rem;}

  /* The action row is one fixed 40px shelf pinned to the floor of the
     card, exactly like the collections Add to Cart row, so no card in a
     row can be taller than its neighbours. */
  .wishlist-card-actions .btn{
    min-height:40px;height:40px;padding:0 8px;
    font-size:0.58rem;letter-spacing:0.08em;line-height:1.2;
    display:flex;align-items:center;justify-content:center;
  }

  /* The remove cross scaled down with the card it sits on. */
  .wishlist-card-remove{width:28px;height:28px;top:8px;right:8px;font-size:0.72rem;}
}

/* Column counts, mirroring the .coll-grid ladder above so a wishlist row
   and a collections row hold the same number of tiles at the same width.
   Written after it for the same reason: these beat the auto-fill rule the
   wishlist grid declares for itself. */
@media(min-width:1400px){ .wishlist-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media(min-width:1200px) and (max-width:1399.98px){ .wishlist-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media(min-width:992px)  and (max-width:1199.98px){ .wishlist-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(min-width:768px)  and (max-width:991.98px){  .wishlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }


/* ── MOVE A CART LINE BACK TO THE WISHLIST ───────────────────────────
   Sits under the quantity stepper in the same cell, so the pair reads as
   "how many, or none at all". Deliberately quiet: the cross in the first
   column is the destructive action and should stay the louder of the two,
   while this one is a change of mind. */
.celasta-cart-wish{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:2px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--c-muted);font-family:var(--font-body);
  font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;
  line-height:1.3;text-align:left;
  transition:color 0.2s ease;
}
.celasta-cart-wish:hover{color:var(--c-gold-text,#8a6d3b);}
.celasta-cart-wish i{font-size:0.8rem;}
.celasta-cart-wish:hover i{color:var(--c-gold-text,#8a6d3b);}
.celasta-cart-wish.is-busy{opacity:0.5;pointer-events:none;}
.celasta-cart-wish:focus-visible{outline:2px solid var(--c-gold,#b89a6a);outline-offset:3px;}

@media(max-width:900px){
  /* On the stacked card the control sits on its own full-width line under
     the quantity, so it has room for the label on ONE line. Kept to the
     left edge, in line with the row labels above it rather than with the
     right-aligned values. */
  .celasta-cart-wish{
    margin-top:0;font-size:0.64rem;white-space:nowrap;
    min-height:34px;padding:0 2px;
  }
}


/* ── THE ADD TO CART BOX ─────────────────────────────────────────────
   Sized independently of the tile. The shelf still reserves the same
   40px it always did and the button simply does not fill it, so the box
   can be tuned without any tile changing height or moving.

   Taken down 15% from the original 40px/full width, then back up 6%
   and 3% again: 40px -> 34px -> 36px -> 37px tall, full width -> 85%
   -> 90% -> 93% wide. Whatever height the button gives up is handed
   straight back as margin, so the shelf still measures 40px and every
   tile in a row stays level.

   The text and its size are deliberately left alone; only the box around
   it changes.

   Web view only, on the same min-width:768px the rest of the tile rules
   use. Phones already draw this button at 34px (see the max-width:600px
   block far above) and keep their larger tap target. */
@media(min-width:768px){
  .coll-grid > .product .button,
  .coll-grid > .product .add_to_cart_button{
    height:37px!important;min-height:37px!important;
    width:93%!important;
    margin-left:auto!important;margin-right:auto!important;
    margin-bottom:3px!important;          /* 37 + 3 = the shelf's 40px */
  }

  /* Once assets/js/loop-cart.js wraps the button, the SLOT is what holds
     the 40px, so the button is centred inside it rather than filling it.
     The quantity stepper that replaces it stands at 34px, 2px shorter -
     close enough that the swap does not shift anything, and the slot
     around them both is unchanged either way. */
  .coll-grid .clq-slot > .button,
  .coll-grid .clq-slot > .add_to_cart_button{
    height:37px!important;min-height:37px!important;
    width:93%!important;margin:1.5px auto!important;
  }
}


/* ------------------------------------------------------------------
   COD ADVANCE - the customer-facing explanation
   ------------------------------------------------------------------
   Two places say the same thing: a note under the Cash on Delivery card
   in the cart's payment comparison, and a breakdown under the Total
   Amount in the Price Details panel. Both are SECONDARY - smaller and
   quieter than the money they explain - because the total is what the
   customer is reading and this only qualifies it.

   Both are rendered server-side from celasta_cod_advance_breakdown(),
   and both sit inside markup the cart swaps wholesale after a quantity
   change, so they refresh with the totals and need no script of their own.
   ------------------------------------------------------------------ */

.cod-opt-note {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--c-muted, #7a7168);
}

.cps-cod {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-border, #e7e1d8);
}

.cps-cod-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--c-muted, #7a7168);
}

.cps-cod-row-due .cps-cod-label,
.cps-cod-row-due .cps-cod-val {
  color: var(--c-charcoal, #2c2520);
  font-weight: 600;
}

.cps-cod-val {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cps-cod-note {
  margin: 6px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--c-muted, #7a7168);
}