/* =============================================================================
 * DEER EDGE — Brand system (Forge & Ember)
 * Applied site-wide. Tokens + typography + buttons + product page + shop grid +
 * slide-in mini-cart + forge loader hooks. Rebuilds high-converting layout
 * PATTERNS in our own tokens — no copied third-party CSS.
 *
 * Load order: parent style.css -> this. Scoped mostly to WooCommerce + a few
 * mrtailor classes; avoids touching the distraction-free checkout (checkout.css
 * owns that and loads after this on is_checkout()).
 * ========================================================================== */

:root{
  --de-iron:#1c1b1a;        /* text, dark forge sections, primary button      */
  --de-ember:#c9541f;       /* add-to-cart CTA, badges, spark                 */
  --de-ember-hot:#e8703a;   /* hover / spark bright                           */
  --de-spark:#ffd9a0;       /* spark tip                                      */
  --de-parchment:#f4ede1;   /* page background — warm paper                   */
  --de-parch-2:#efe7d6;     /* panels                                         */
  --de-bone:#fbf8f2;        /* raised surfaces, inputs, cards                 */
  --de-brass:#a67c3d;       /* rules, eyebrows, ratings                       */
  --de-steel:#6b6f76;       /* secondary text, struck prices                  */
  --de-line:#ddd3c4;        /* warm hairline border                          */
  --de-ink-soft:#33312e;    /* body text on parchment                        */

  --de-serif:"Fraunces",Georgia,"Times New Roman",serif;      /* display + money */
  --de-sans:"Inter",-apple-system,system-ui,"Segoe UI",Arial,Helvetica,sans-serif;

  --de-r:2px;               /* square, not round                             */
  --de-shadow:0 14px 30px -18px rgba(28,27,26,.55);
  --de-ease:cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------------------------------
 * 1. Base
 * ------------------------------------------------------------------------ */
body{
  background:var(--de-parchment);
  color:var(--de-ink-soft);
  font-family:var(--de-sans);
  -webkit-font-smoothing:antialiased;
}
.de-body-lock{overflow:hidden;}   /* while cart drawer / loader open */

::selection{background:var(--de-ember);color:#fff;}

a{color:var(--de-iron);}
a:hover{color:var(--de-ember);}

/* Announcement bar + nav utility links fall back to a different Customizer-
   generated Inter stack (Helvetica Neue/Verdana fallbacks) than the rest of the
   site's --de-sans token. Customizer prints its font-family as a late inline
   <style> block in <head>, after this stylesheet, so it wins on load order
   despite equal specificity — !important is the only reliable way to beat it. */
.site-top-message,.woocommerce-store-notice,.woocommerce-store-notice__dismiss-link,
.main-navigation a{
  font-family:var(--de-sans) !important;
}

/* Touch targets: nav links (19-24px tall) and the store-notice dismiss link
   (0px — text is visually hidden via font-size:0, sized only by its icon
   pseudo-element) sit under the 44px mobile tap-target minimum. */
.main-navigation a{padding:13px 0;}
.woocommerce-store-notice__dismiss-link{
  display:inline-flex;align-items:center;padding:14px 12px;min-height:44px;box-sizing:border-box;
}

/* --------------------------------------------------------------------------
 * 2. Typography — Fraunces display, Inter body, serif money numbers
 * ------------------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6,
.entry-title,.product_title,.page-title,.section-title,
.woocommerce-loop-product__title,.related > h2,.upsells > h2,
.cart_totals h2,.cross-sells > h2,.wc-tab h2,.products.related h2{
  font-family:var(--de-serif);
  color:var(--de-iron);
  font-weight:600;
  letter-spacing:-.01em;
}
.product_title.entry-title{font-weight:500;line-height:1.08;}

/* Money font on EVERY price / amount, site-wide */
.woocommerce-Price-amount,
.amount,
.price,
.price .amount,
.de-money,
.cart-subtotal .amount,
.order-total .amount,
.woocommerce-mini-cart__total .amount,
.product_infos .price,
ul.products li.product .price{
  font-family:var(--de-serif);
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.005em;
}
.price{color:var(--de-iron);font-weight:600;}
.price del,.price del .amount{color:var(--de-steel);font-weight:400;}
.price ins,.price ins .amount{text-decoration:none;color:var(--de-iron);font-weight:600;}

.woocommerce-Price-currencySymbol{color:var(--de-steel);}

/* Eyebrows / small caps accents */
.de-eyebrow{
  font-family:var(--de-sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--de-brass);margin:0 0 10px;
}

/* --------------------------------------------------------------------------
 * 3. Buttons — square, spark on hover. Ember = buy; Iron = primary.
 * ------------------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.de-btn{
  font-family:var(--de-sans);
  font-weight:700;letter-spacing:.02em;text-transform:none;
  border-radius:var(--de-r);
  border:2px solid var(--de-iron);
  background:var(--de-iron);color:var(--de-parchment);
  padding:.85em 1.5em;line-height:1.1;
  transition:background .18s var(--de-ease),color .18s var(--de-ease),
             transform .1s var(--de-ease),border-color .18s var(--de-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.de-btn:hover{background:#000;border-color:#000;color:var(--de-parchment);}
.de-btn:active,.woocommerce .button:active{transform:translateY(1px);}

/* Buy / conversion CTAs = ember */
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce .button.alt,
.woocommerce a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.de-btn--cta,
ul.products li.product .button.add_to_cart_button:hover{
  background:var(--de-ember);border-color:var(--de-ember);color:#fff;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.checkout-button:hover,
.de-btn--cta:hover{background:var(--de-ember-hot);border-color:var(--de-ember-hot);color:#fff;}

/* Ghost / secondary */
.de-btn--ghost{background:transparent;color:var(--de-iron);border-color:var(--de-iron);}
.de-btn--ghost:hover{background:var(--de-iron);color:var(--de-parchment);}

/* Sale flash badge -> square ember chip */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  background:var(--de-ember);color:#fff;border-radius:var(--de-r);
  font-family:var(--de-sans);font-weight:700;font-size:11px;letter-spacing:.04em;
  min-height:0;min-width:0;padding:5px 9px;line-height:1;top:12px;left:12px;margin:0;
}

/* --------------------------------------------------------------------------
 * 4. Header logo (swapped to inline animated SVG by brand.js)
 * ------------------------------------------------------------------------ */
.de-logo{color:var(--de-iron);height:auto;display:block;}
.de-logo .wordmark{fill:currentColor;}
/* keep the header logo box from collapsing before the swap */
a[rel="home"] .de-logo,.logo .de-logo{max-height:44px;width:auto;}

/* --------------------------------------------------------------------------
 * 5. Single product — sticky buy-box, trust triplet, benefit bullets
 * ------------------------------------------------------------------------ */
/* Full-width single product page (per request): the content area is already
   1883px; only the Foundation .row caps it at 1290px. Release that cap and add
   small responsive side margins so the product runs nearly edge to edge. */
.single-product .row{
  max-width:none;width:100%;box-sizing:border-box;
  padding-left:clamp(20px,3.5vw,64px);padding-right:clamp(20px,3.5vw,64px);
}
/* Full-width tabs wrapper so the forge ticker (rendered at its top, just under
   the buy-box) centres its 100vw full-bleed. Keep long-form reading comfortable. */
.single-product .product_tabs{width:100%;max-width:none;float:none;clear:both;margin:0;}

/* Description shown directly (no tab toggle), full width for landing-page style
   content authored in the post editor (HTML, images, sections). */
/* Description = true full-bleed (100vw, zero padding/margin) so it connects flush
   to the ticker's bottom edge. All spacing is controlled from inside the
   description HTML (padding/margin authored in the post editor) for banner layouts. */
.single-product .de-description{
  width:100vw;margin:0 0 0 calc(50% - 50vw);max-width:none;padding:0;
}
.single-product .de-description img{max-width:100%;height:auto;}
.single-product .de-description > *:first-child{margin-top:0;}

/* Reclaim the wasted white space above the breadcrumb: the theme gives
   .content-area a 50px top padding that reads as an empty band under the header
   on product pages. Pull it in tight (shop already overrides this separately). */
.single-product .content-area{padding-top:14px !important;}

/* Breadcrumb: centered + compact, matching the shop/other pages. Tight above,
   with real breathing room below it before the product starts. Selector matches
   the parent's 3-class `.single-product.woocommerce .woocommerce-breadcrumb`
   (margin-bottom:10px) so ours wins on source order (brand.css loads after). */
.single-product.woocommerce .woocommerce-breadcrumb{
  text-align:center;margin:2px 0 22px;padding:0;
  font-size:13px;line-height:1.4;
}

/* Reviews section pinned to the very bottom (after related products). */
.single-product .de-reviews{width:100%;max-width:900px;margin:48px auto 0;}
.single-product .de-reviews #reviews{scroll-margin-top:90px;}
/* Clean empty-state + collapsed form: the review form no longer hangs open.
   A quiet "No reviews yet" line, then a "Write a review" / "Be the first" button
   that reveals the form (brand.js). Form stays hidden until asked for. */
.single-product .de-noreviews{color:var(--de-steel);font-size:14.5px;margin:2px 0 20px;line-height:1.5;}
.de-review-toggle{
  display:inline-block;cursor:pointer;margin:4px 0 0;
  background:transparent;color:var(--de-iron);
  border:2px solid var(--de-iron);border-radius:var(--de-r);
  font-family:var(--de-sans);font-weight:700;font-size:13px;letter-spacing:.03em;
  padding:12px 22px;line-height:1.1;transition:background .15s,color .15s;
}
.de-review-toggle:hover{background:var(--de-iron);color:var(--de-parchment);}
/* The [hidden] rules must beat the display above (author styles otherwise win
   over the UA [hidden]{display:none}), so JS toggling `hidden` actually shows/
   hides them. */
.de-review-toggle[hidden]{display:none;}
.de-review-form{margin-top:24px;max-width:640px;}
.de-review-form[hidden]{display:none;}

/* Related products: 4 across, single row (beats the global 3-col shop grid). */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products{grid-template-columns:repeat(4,1fr) !important;}
.single-product .related{margin-top:40px;}

/* Tighten the columns block: less space above (padding-top 40->14) and much less
   between the buy-box and the ticker below (margin-bottom 80->14). */
.single-product .product_summary{align-items:flex-start;margin-bottom:14px;padding-top:14px;}
/* Give the imagery more room and the buy-box less: widen the gallery column
   large-6 (50%) -> 7/12 (58.33%) and narrow the buy-box large-5 (41.66%) ->
   4/12 (33.33%) — a clean ~20% reduction of the buy-box, its width handed to the
   bigger product image. The recently-viewed strip (large-1, 8.33%) is unchanged;
   the three still total 100% so nothing wraps. Desktop only — the columns stack
   full-width on mobile. Beats Foundation's 1-class .large-* on specificity.
   Sticky PHOTOS: the gallery stays put while the buy info scrolls past it. */
@media (min-width:1024px){
  .single-product .product_summary .product_images{
    width:58.333%;position:sticky;top:24px;align-self:flex-start;
  }
  .single-product .product_summary .product_info{width:33.333%;}
}
.single-product .summary.entry-summary{
  background:var(--de-bone);border:1px solid var(--de-line);border-radius:var(--de-r);
  padding:26px 26px 28px;box-shadow:var(--de-shadow);position:relative;
}

/* Featured product: an old-school banner ribbon draped over the top of the buy
   box (only rendered for is_featured() products). Swallowtail ends + fold-under
   shadows behind each end = classic award-ribbon look; ember, prominent. */
.de-ribbon{
  position:relative;z-index:4;width:max-content;max-width:calc(100% - 8px);
  margin:-42px auto 22px;                 /* protrude above the box top, centred */
  filter:drop-shadow(0 5px 7px rgba(28,27,26,.30));
}
.de-ribbon__label{
  position:relative;z-index:2;display:block;
  background:linear-gradient(180deg,var(--de-ember-hot),var(--de-ember));
  color:#fff;font-family:var(--de-sans);font-weight:800;font-size:13.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:12px 36px;line-height:1;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);
}
/* fold-under tails: little darker triangles tucked behind each end */
.de-ribbon::before,.de-ribbon::after{
  content:"";position:absolute;bottom:-9px;z-index:1;border:6px solid #8f3a15;
}
.de-ribbon::before{left:2px;border-left-color:transparent;border-bottom-color:transparent;}
.de-ribbon::after{right:2px;border-right-color:transparent;border-bottom-color:transparent;}
/* Dominant product title (Dr. Squatch uses 60px/800; ours is editorial serif
   so we scale to ~2.6rem for the same commanding hierarchy without shouting). */
/* The title now lives INSIDE the buy-box. Hide the empty top band it used to
   occupy, reclaiming that large amount of vertical space. */
.single-product .product_summary_top{display:none;}
/* Smaller SEO H1 in the buy-box: full text stays in the DOM for search engines,
   but the display is clamped so our very long titles don't dominate the UI. */
.single-product .summary .product_title,
.single-product .summary h1.product_title{
  margin:0 0 12px !important;font-size:20px !important;line-height:1.35 !important;
  font-weight:600;color:var(--de-iron);letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.single-product .woocommerce-product-rating{color:var(--de-brass);}
.single-product .price{font-size:1.9rem;margin:.4em 0 .25em;}
/* Full-width ~58px add-to-cart (Dr. Squatch prominence), kept square per brand.
   High-specificity + !important to beat the parent's inline
   `.woocommerce-page button.button.alt{font-size:13px!important}` (which also uses !important). */
.woocommerce div.product form.cart button.single_add_to_cart_button{
  width:100%;text-align:center;font-size:16px !important;padding:1.15em 1.5em !important;
  margin-top:8px;letter-spacing:.02em;line-height:1.2;min-height:56px;
}
.single-product .quantity input.qty{
  border:1px solid var(--de-line);border-radius:var(--de-r);background:#fff;
  height:46px;font-family:var(--de-serif);
}

/* Quantity + star rating share one row (fills the dead space beside the small
   quantity stepper); the full-width Add-to-cart button wraps to its own line
   below. The rating is echoed between the quantity and the button inside
   form.cart (de_product_rating_inline on woocommerce_after_add_to_cart_quantity). */
.woocommerce div.product form.cart{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
}
.woocommerce div.product form.cart .quantity{margin:0;float:none;}
.woocommerce div.product form.cart button.single_add_to_cart_button{flex:0 0 100%;}

/* Inline rating control: always-visible 5-star bar + count / "No reviews yet",
   linking down to #reviews. Empty stars are a muted brass so a review-less
   product still reads as "not yet rated" (invites the first review) without
   faking a score. */
.de-rating{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--de-steel);font-family:var(--de-sans);font-size:13px;line-height:1;
}
.de-rating .star-rating{
  margin:0;width:5.6em;height:1.05em;font-size:18px;line-height:1;overflow:hidden;
}
.de-rating .star-rating::before{color:rgba(166,124,61,.30);}   /* empty track (brass 30%) */
.de-rating .star-rating span::before{color:var(--de-brass);}   /* filled */
.de-rating__count{font-weight:600;white-space:nowrap;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;}
.de-rating:hover .de-rating__count{color:var(--de-ember);border-bottom-color:currentColor;}

/* Trust triplet (injected after add-to-cart) */
/* Big horizontal trust triplet (icon on top, label below, 3 across, centered).
   The buy-box is wide now, so this reads like the reference. */
.de-trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 6px;
  border-top:1px solid var(--de-line);padding-top:26px;text-align:center;
}
.de-trust .de-t{display:flex;flex-direction:column;align-items:center;gap:11px;}
.de-trust .de-ic{width:44px;height:44px;color:var(--de-iron);}
.de-trust .de-ic svg{width:100%;height:100%;stroke-width:1.5;}
.de-trust .de-tt{font-weight:600;font-size:14.5px;color:var(--de-iron);line-height:1.25;}
.de-trust .de-td{font-size:12px;color:var(--de-steel);margin-top:3px;line-height:1.35;}
@media (max-width:560px){.de-trust .de-td{display:none;}}

/* Full-width forge ticker band (marquee) under the product. */
.de-ticker{
  width:100vw;margin-left:calc(50% - 50vw);margin-top:0;margin-bottom:0;
  background:var(--de-iron);color:var(--de-parchment);
  border-top:3px solid var(--de-ember);border-bottom:3px solid var(--de-ember);
  overflow:hidden;padding:24px 0;
}
.de-ticker__track{
  display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;
  animation:de-ticker 32s linear infinite;
}
.de-ticker:hover .de-ticker__track{animation-play-state:paused;}
.de-ticker__item{
  font-family:var(--de-serif);font-weight:600;font-size:30px;letter-spacing:.01em;
  color:var(--de-parchment);padding:0 32px;
}
.de-ticker__sep{
  width:9px;height:9px;flex:0 0 auto;background:var(--de-ember);
  transform:rotate(45deg);   /* small forge-spark diamond between items */
}
@keyframes de-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .de-ticker__track{animation:none;white-space:normal;flex-wrap:wrap;justify-content:center;gap:16px 4px;padding:0 20px;}
}
@media (max-width:640px){ .de-ticker__item{font-size:22px;padding:0 22px;} .de-ticker{padding:18px 0;} }

/* Benefit bullets (injected into the summary) */
.de-benefits{list-style:none;margin:18px 0 4px;padding:0;}
.de-benefits li{
  position:relative;padding:0 0 9px 26px;font-size:14px;color:var(--de-ink-soft);
}
.de-benefits li svg{position:absolute;left:0;top:1px;width:18px;height:18px;color:var(--de-ember);}

/* --------------------------------------------------------------------------
 * 6. Shop / archive grid — conversion cards, hover lift + spark
 *    Modeled on Dr. Squatch's collection grid: dense, image-forward, square
 *    thumbnails, left-aligned. At our ~1133px content width, 3-up yields ~360px
 *    cards — the same card size as their 4-up @1710px. The grid overrides the
 *    parent theme's Foundation float columns (which rendered a sparse 2-up).
 * ------------------------------------------------------------------------ */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:28px 26px;
  margin:0 0 44px;
}
/* WooCommerce's clearfix ::before/::after become stray grid items under
   display:grid (the ::before ate the first cell, blanking column 1). Remove. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{ content:none; display:none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto !important;   /* override Foundation .columns % + inline widths */
  margin:0 !important;
  float:none !important;
  clear:none !important;
  background:var(--de-bone);border:1px solid var(--de-line);border-radius:var(--de-r);
  padding:0 0 18px;overflow:hidden;
  transition:transform .16s var(--de-ease),box-shadow .16s var(--de-ease),
             border-color .16s var(--de-ease);
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);box-shadow:var(--de-shadow);border-color:#cdbfa8;
}
.woocommerce ul.products li.product a img{
  margin:0 0 14px;border-radius:0;background:#efe9dd;
  aspect-ratio:1/1;object-fit:cover;   /* uniform square thumbnails */
}
@media (max-width:900px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media (max-width:540px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr;}
}
.woocommerce ul.products li.product h2.woocommerce-loop-product__title{
  padding:0 16px;font-size:15px !important;font-weight:600;color:var(--de-iron);line-height:1.35;
  /* Clamp the long SEO titles to 2 lines so cards are uniform and prices align.
     display !important because the parent forces h2{display:block}, which kills
     -webkit-line-clamp (it needs -webkit-box). */
  display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em;
}
.woocommerce ul.products li.product .star-rating{margin:6px 16px;color:var(--de-brass);font-size:.8em;}
.woocommerce ul.products li.product .price{display:block;padding:2px 16px 4px;font-size:1.15rem;}
.woocommerce ul.products li.product .button{
  margin:10px 16px 0;display:inline-block;
}
/* Hide the theme/plugin "Sale!" flash on the loop — our own "Save X%" (.de-save)
   replaces it and avoids duplicate badges. */
.woocommerce ul.products li.product .onsale{display:none !important;}

/* Card structure (Dr. Squatch-style): category eyebrow, Save% badge, short-desc
   one-liner, Best Seller badge on featured products. No bundle/subscription UI. */
.woocommerce ul.products li.product{position:relative;}
.de-cat-eyebrow{
  display:block;padding:14px 16px 0;margin:0 0 2px;
  font-family:var(--de-sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--de-brass);
}
/* eyebrow already adds the top padding — pull the title's own top padding up */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title{padding-top:0;}
.woocommerce ul.products li.product a img{margin-bottom:0;}

/* Sale = a small, understated 'Save X%' badge sitting next to the price.
   Deliberately quiet (conversion-first): a muted-red pill that reassures value
   without a loud clearance ribbon that could cheapen a premium handmade product. */
.de-save,
.de-save--inline{
  display:inline-block;vertical-align:middle;margin:0 0 0 9px;
  background:rgba(122,47,43,.09);color:#7a2f2b;border:1px solid rgba(122,47,43,.24);
  border-radius:3px;font-family:var(--de-sans);font-weight:600;font-size:11px;
  letter-spacing:.02em;text-transform:none;padding:3px 7px;line-height:1;
  white-space:nowrap;box-shadow:none;
}

/* Hover: fade the product's SECOND gallery image in over the main one. */
.woocommerce ul.products li.product .de-hover-img{
  position:absolute;top:0;left:0;width:100%;aspect-ratio:1/1;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .35s var(--de-ease);z-index:1;pointer-events:none;
}
.woocommerce ul.products li.product:hover .de-hover-img{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .woocommerce ul.products li.product .de-hover-img{transition:none;}
}

/* Product page: the sale marker is the small understated "Save X%" badge that
   sits inline next to the buy-box price (rendered on woocommerce_single_product_
   summary pri 11). Keep the price inline-block so the badge tucks in beside it,
   and hide WooCommerce's default corner "Sale!" flash. */
.single-product .summary .price{display:inline-block;vertical-align:middle;}
.single-product .summary .onsale{display:none;}
.de-card-desc{
  padding:0 16px;margin:8px 0 2px;font-size:12.5px;line-height:1.4;color:var(--de-steel);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.de-badge-best{
  position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  background:var(--de-iron);color:var(--de-parchment);
  font-family:var(--de-sans);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 10px 6px 9px;border-radius:var(--de-r);box-shadow:0 2px 8px -2px rgba(0,0,0,.45);
}
.de-badge-best svg{width:13px;height:13px;color:var(--de-ember);}

/* Price + Add to Cart on the clean standard card (child content-product.php
   override replaces mrtailor's hover-reveal switcher — no !important needed,
   the card-scoped selectors already out-rank the base button styles). */
.woocommerce ul.products li.product .price{
  display:inline-block;vertical-align:middle;padding:4px 16px 0;font-size:1.2rem;margin:0;
}
/* mrtailor styles the loop add-to-cart as a bare navy text-link via inline
   customizer CSS (`.products a.button{color:#0d244c!important}` + a
   `:hover{background:transparent!important}`). Beating an inline !important needs
   !important; we scope it tightly to the loop button and only the forced props. */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.button.add_to_cart_button{
  display:block;margin:12px 16px 2px;text-align:center;
  background-color:var(--de-ember) !important;color:#fff !important;
  border:2px solid var(--de-ember);border-radius:var(--de-r);
  font-family:var(--de-sans);font-weight:700;font-size:14px !important;letter-spacing:.02em;
  padding:14px 16px !important;line-height:1.1;height:auto;min-height:0;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button.add_to_cart_button:hover{
  background-color:var(--de-ember-hot) !important;border-color:var(--de-ember-hot);color:#fff !important;
}
.woocommerce ul.products li.product a.button:before{content:none !important;}
.woocommerce ul.products li.product .added_to_cart{
  display:block;margin:8px 16px 0;text-align:center;font-size:12px;
  color:var(--de-steel);text-decoration:underline;
}

/* Mini-cart: use ONE cart (our .de-drawer). Hide the parent theme's native
   off-canvas cart so add-to-cart doesn't open two panels. */
.st-menu.slide-from-right{display:none !important;}

/* Reclaim the wasted space above the fold so products sit high on the page.
   Scoped to shop + category archives only (not single product / other pages). */
.woocommerce-products-header__title.page-title{display:none;}
.post-type-archive-product .content-area,
.tax-product_cat .content-area{padding-top:8px !important;}
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header{
  padding-top:4px !important;padding-bottom:0 !important;margin-bottom:6px !important;
}
.post-type-archive-product .shop_header,
.tax-product_cat .shop_header{margin-bottom:10px !important;}

/* --------------------------------------------------------------------------
 * 7. Slide-in mini-cart drawer + free-shipping progress bar
 * ------------------------------------------------------------------------ */
.de-cart-overlay{
  position:fixed;inset:0;background:rgba(20,19,18,.5);backdrop-filter:blur(1px);
  opacity:0;visibility:hidden;transition:opacity .28s var(--de-ease),visibility .28s;
  z-index:2147483200;
}
.de-cart-overlay.is-open{opacity:1;visibility:visible;}

.de-drawer{
  position:fixed;top:0;right:0;height:100%;width:420px;max-width:94vw;
  background:var(--de-parchment);box-shadow:-20px 0 46px -18px rgba(0,0,0,.5);
  transform:translateX(100%);transition:transform .34s var(--de-ease);
  z-index:2147483300;display:flex;flex-direction:column;
}
.de-drawer.is-open{transform:translateX(0);}

/* Header */
.de-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px 18px;border-bottom:1px solid var(--de-line);background:var(--de-bone);
}
.de-drawer__head h3{
  margin:0;font-family:var(--de-serif);font-size:21px;font-weight:600;color:var(--de-iron);
  display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.de-drawer__head h3 svg{width:22px;height:22px;flex:0 0 auto;color:var(--de-ember);}
.de-drawer__head .de-close{
  background:none;border:0;cursor:pointer;color:var(--de-steel);font-size:26px;line-height:1;
  padding:2px 8px;border-radius:var(--de-r);transition:color .15s,background .15s;
}
.de-drawer__head .de-close:hover{color:var(--de-iron);background:var(--de-parch-2);}

/* Free-shipping progress — a distinct band under the header */
.de-freeship{padding:15px 24px 16px;background:var(--de-bone);border-bottom:1px solid var(--de-line);}
.de-freeship__msg{font-size:13px;color:var(--de-ink-soft);margin:0 0 10px;line-height:1.4;}
.de-freeship__msg b{color:var(--de-ember);font-family:var(--de-serif);font-size:14px;}
.de-freeship__track{height:8px;background:var(--de-parch-2);border-radius:99px;overflow:hidden;border:1px solid var(--de-line);}
.de-freeship__fill{height:100%;min-width:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--de-brass),var(--de-ember) 65%,var(--de-ember-hot));
  transition:width .45s var(--de-ease);}
.de-freeship.is-met .de-freeship__fill{background:linear-gradient(90deg,#3f7a4d,#4f9a5f);}
.de-freeship.is-met .de-freeship__msg b{color:#2f7a45;}

/* Body / items */
.de-drawer__body{flex:1 1 auto;overflow-y:auto;padding:2px 0;}
.de-drawer__body .widget_shopping_cart_content{padding:0;}
.de-drawer .woocommerce-mini-cart{list-style:none;margin:0;padding:0;}
.de-drawer .woocommerce-mini-cart__empty-message{color:var(--de-steel);padding:44px 24px;text-align:center;font-size:14px;line-height:1.55;}

/* Line item: thumbnail floated LEFT (work WITH WooCommerce's float instead of
   fighting it), name + qty wrap to its right, remove x top-right. */
.de-drawer .woocommerce-mini-cart li.woocommerce-mini-cart-item{
  display:block;position:relative;margin:0;padding:16px 40px 16px 24px !important;
  border-bottom:1px solid var(--de-line);overflow:hidden;
}
.de-drawer .woocommerce-mini-cart li.woocommerce-mini-cart-item img{
  float:left !important;width:60px !important;height:60px !important;object-fit:cover;
  margin:0 13px 8px 0 !important;border:1px solid var(--de-line);border-radius:var(--de-r);
  background:var(--de-parch-2);
}
.de-drawer li.woocommerce-mini-cart-item a:not(.remove){
  display:block;font-weight:600;color:var(--de-iron);font-size:13px;line-height:1.4;text-decoration:none;
}
.de-drawer li.woocommerce-mini-cart-item a:not(.remove):hover{color:var(--de-ember);}
.de-drawer li.woocommerce-mini-cart-item .quantity{
  display:block;margin-top:6px;color:var(--de-steel);font-size:13px;font-family:var(--de-serif);
}
.de-drawer li.woocommerce-mini-cart-item .quantity .amount{color:var(--de-iron);font-weight:600;}
.de-drawer li.woocommerce-mini-cart-item a.remove{
  position:absolute;right:18px;top:16px;color:var(--de-steel)!important;background:none!important;
  border:0;font-size:19px;line-height:1;width:auto;height:auto;font-weight:400;z-index:2;
}
.de-drawer li.woocommerce-mini-cart-item a.remove:hover{color:var(--de-ember)!important;background:none!important;}

/* Subtotal + checkout pinned to the bottom of the drawer */
.de-drawer .woocommerce-mini-cart__total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:0;padding:18px 24px 4px;border-top:1px solid var(--de-line);background:var(--de-bone);
  color:var(--de-iron);
}
.de-drawer .woocommerce-mini-cart__total strong{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;}
.de-drawer .woocommerce-mini-cart__total .amount{font-family:var(--de-serif);font-size:26px;font-weight:600;}
.de-drawer .woocommerce-mini-cart__buttons{
  display:flex;flex-direction:column;gap:0;margin:0;padding:12px 24px 24px;background:var(--de-bone);
}
.de-drawer .woocommerce-mini-cart__buttons .button{width:100%;text-align:center;margin:0;}
/* One-step flow: no separate cart page — hide the redundant "View cart" button. */
.de-drawer .woocommerce-mini-cart__buttons .button:not(.checkout){display:none;}
.de-drawer .woocommerce-mini-cart__buttons .checkout{
  order:1;background:var(--de-ember)!important;border:2px solid var(--de-ember)!important;color:#fff!important;
  font-size:15px;padding:15px 16px;font-weight:700;letter-spacing:.02em;
}
.de-drawer .woocommerce-mini-cart__buttons .checkout:hover{background:var(--de-ember-hot)!important;border-color:var(--de-ember-hot)!important;}
.de-drawer .de-secure{text-align:center;font-size:11.5px;color:var(--de-steel);margin:12px 0 0;}

/* header cart count badge */
.de-cart-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:99px;background:var(--de-ember);color:#fff;
  font-family:var(--de-sans);font-size:11px;font-weight:700;line-height:1;
}

/* --------------------------------------------------------------------------
 * 8. Forge loader intro (markup from brand/loader.html; brand.js mounts once)
 * ------------------------------------------------------------------------ */
.de-loader{transition:opacity .4s ease;}
.de-loader.is-hiding{opacity:0;pointer-events:none;}

/* --------------------------------------------------------------------------
 * 9. Reduced motion
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .woocommerce ul.products li.product,
  .de-drawer,.de-cart-overlay,.de-freeship__fill{transition:none!important;}
  .woocommerce ul.products li.product:hover{transform:none;}
}

/* --------------------------------------------------------------------------
 * 10. Override the parent's INLINE customizer CSS (accent-color / base-font),
 *     which prints in <head> and out-specifies external rules. Kept minimal:
 *     only the two brand-critical wins — the ember buy button + serif money.
 * ------------------------------------------------------------------------ */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  background-color:var(--de-ember)!important;
  border:2px solid var(--de-ember)!important;
  color:#fff!important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover{
  background-color:var(--de-ember-hot)!important;
  border-color:var(--de-ember-hot)!important;
}

/* Money font wins on every price/number, incl. over inline base-font CSS. */
.woocommerce .price,
.woocommerce .price .amount,
.woocommerce-Price-amount,
.woocommerce ul.products li.product .price,
.summary .price,
.cart_totals .amount,
.woocommerce-mini-cart__total .amount,
.de-money{
  font-family:var(--de-serif)!important;
}

/* --------------------------------------------------------------------------
 * 11. Footer — clearly divided from the page
 * The theme footer floats straight out of the page content with no separation.
 * Give it a distinct block: a strong top rule, its own warm background, real
 * top padding, and a divider before the payment/copyright strip.
 * ------------------------------------------------------------------------ */
/* Selector mirrors the theme's own (footer#site-footer .site-footer-widget-area,
   specificity 1,1,1) so ours wins on source order — brand.css loads after. */
footer#site-footer .site-footer-widget-area{
  border-top:3px solid var(--de-iron);
  background:var(--de-parchment);
  margin-top:64px;
  padding:52px 0 10px;
}
footer#site-footer .site-footer-copyright-area{
  background:var(--de-parchment);
  border-top:1px solid var(--de-line);
  padding:20px 0 24px;
  margin-top:8px;
}
/* subtle column separation inside the widget grid (skip the first column) */
footer#site-footer .site-footer-widget-area .footer-columns-3 > .columns + .columns{
  border-left:1px solid var(--de-line);
}
