/*
Theme Name: Jacket Field
Theme URI: https://jacketfield.com/
Author: Jacket Field
Description: Custom theme for Jacket Field - handcrafted genuine leather jackets and work aprons. WooCommerce's own default templates render cart, checkout, my-account and product pages unmodified; this theme supplies the header, footer, homepage and global design system around them.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jacketfield
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --jf-cream:#FAF7F2;
  --jf-sand:#EFE7DB;
  --jf-sand-2:#E6DBCA;
  --jf-well:#F3EDE4;
  --jf-ink:#171310;
  --jf-ink-2:#241D17;
  --jf-tan:#A9743F;
  --jf-rust:#9C3A2A;
  --jf-body:#4A423A;
  --jf-muted:#6E6357;
  --jf-muted-dk:#B4A896;
  --jf-line:#DED4C4;
  --jf-price:#5C3A1C;      /* current/sale price - dark brown */
  --jf-price-was:#B99A72;  /* superseded price + its strikethrough - light brown */
  --jf-line-dk:rgba(240,230,215,.16);

  --jf-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --jf-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --jf-container:1400px;
  --jf-gutter:clamp(18px,3.4vw,56px);
  --jf-section:clamp(56px,6vw,100px);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--jf-cream);color:var(--jf-ink);
  font-family:var(--jf-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-family:var(--jf-serif);font-weight:700;margin:0 0 .5em;line-height:1.15;color:var(--jf-ink);}
p{margin:0 0 1.2em;color:var(--jf-body);}
.jf-wrap{width:min(var(--jf-container),100% - (var(--jf-gutter)*2));margin-inline:auto;}
.jf-sec{padding-block:var(--jf-section);}
.jf-sec--sand{background:var(--jf-sand);}
.jf-sec--dark{background:var(--jf-ink);color:var(--jf-cream);}
.jf-sec--dark p{color:var(--jf-muted-dk);}
.jf-sec--dark h2,.jf-sec--dark h3{color:var(--jf-cream);}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--jf-ink);color:#fff;padding:12px 20px;z-index:9999;}
.skip-link:focus{left:10px;top:10px;}

.jf-kick{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--jf-tan);}
.jf-h2{font-size:clamp(27px,3.5vw,48px);letter-spacing:-.01em;}
.jf-lede{font-size:clamp(14.5px,1.05vw,16.5px);color:var(--jf-body);max-width:60ch;}
.jf-sec--dark .jf-lede{color:var(--jf-muted-dk);}
.jf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(26px,2.8vw,44px);flex-wrap:wrap;}
.jf-head__t{display:grid;gap:10px;}

.jf-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;
  border:1px solid var(--jf-ink);background:var(--jf-ink);color:var(--jf-cream);
  font-size:13.5px;font-weight:700;font-family:var(--jf-sans);
  transition:background-color .2s,color .2s,border-color .2s;cursor:pointer;
}
.jf-btn:hover{background:var(--jf-ink-2);color:var(--jf-cream);}
.jf-btn--light{background:var(--jf-cream);color:var(--jf-ink);border-color:var(--jf-cream);}
.jf-btn--light:hover{background:#fff;color:var(--jf-ink);}
.jf-btn--line{background:transparent;color:var(--jf-ink);border-color:var(--jf-ink);}
.jf-btn--line:hover{background:var(--jf-ink);color:var(--jf-cream);}
.jf-more{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--jf-tan);color:var(--jf-tan);}
.jf-more:hover{color:var(--jf-ink);border-color:var(--jf-ink);}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.jf-hdr{position:sticky;top:0;z-index:60;background:var(--jf-cream);border-bottom:1px solid var(--jf-line);}
.jf-hdr__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;height:78px;}
.jf-logo img{max-height:40px;width:auto;}
.jf-mark{font-family:var(--jf-sans);font-weight:700;font-size:19px;letter-spacing:.2em;text-transform:uppercase;}
/* These base rules are deliberately scoped with the child combinator:
   the mega panel lives inside a top-level <li>, so a loose ".jf-nav ul"
   or ".jf-nav li" would win on specificity inside the panel and turn its
   tile grid back into a single flex row. */
.jf-nav{justify-self:center;}
.jf-nav > ul{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);}
.jf-nav > ul > li{position:relative;}
.jf-nav > ul > li > a{display:inline-flex;align-items:center;height:78px;font-size:15px;font-weight:500;border-bottom:2px solid transparent;}
.jf-nav > ul > li:hover > a{border-bottom-color:var(--jf-ink);}
.jf-tools{display:flex;align-items:center;gap:2px;justify-self:end;}
.jf-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:16px;color:var(--jf-ink);}
.jf-ico:hover{color:var(--jf-tan);}
.jf-count{position:absolute;top:5px;right:3px;min-width:17px;height:17px;padding:0 4px;display:none;align-items:center;justify-content:center;background:var(--jf-ink);color:#fff;font-size:10px;font-weight:700;line-height:1;border-radius:0;}
.jf-count.is-on{display:inline-flex;}
.jf-burger{display:none;}

.jf-draw{position:fixed;top:0;left:0;bottom:0;z-index:100;width:min(400px,88vw);background:var(--jf-cream);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .28s ease;}
.jf-draw.is-on{transform:translateX(0);}
.jf-draw__top{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 10px 0 20px;border-bottom:1px solid var(--jf-line);}
.jf-draw__body{flex:1 1 auto;overflow-y:auto;}
.jf-draw ul li{border-bottom:1px solid var(--jf-line);}
.jf-draw ul li a{display:block;min-height:52px;line-height:52px;padding:0 20px;font-size:15px;font-weight:500;}
.jf-draw ul ul li a{padding-left:36px;font-size:14px;font-weight:400;color:var(--jf-body);}
.jf-scrim{position:fixed;inset:0;z-index:90;background:rgba(23,19,16,.45);opacity:0;visibility:hidden;transition:opacity .25s;}
.jf-scrim.is-on{opacity:1;visibility:visible;}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.jf-hero{position:relative;height:70vh;min-height:420px;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:var(--jf-ink);}
.jf-hero__slide{display:block;position:absolute;inset:0;opacity:0;transition:opacity 1s ease;}
.jf-hero__slide.is-on{opacity:1;}
.jf-hero__slide img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;}
.jf-hero__dots{position:absolute;bottom:20px;right:clamp(18px,3.4vw,56px);display:flex;gap:8px;z-index:2;}
.jf-hero__dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:0;padding:0;cursor:pointer;}
.jf-hero__dots button.is-on{background:#fff;}

/* ==========================================================================
   5. FEATURE STRIP
   ========================================================================== */
.jf-feats-sec{padding-block:clamp(38px,4.4vw,72px) 0;}
.jf-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.jf-feat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;
  padding:clamp(28px,3vw,44px) clamp(16px,2vw,30px);
  background:var(--jf-well);border:1px solid transparent;margin:0;
  transition:background-color .25s ease,border-color .25s ease,transform .25s ease;
}
.jf-feat:hover{background:var(--jf-cream);border-color:var(--jf-line);transform:translateY(-3px);}
.jf-feat__ic{
  width:54px;height:54px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--jf-tan);color:var(--jf-tan);font-size:19px;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.jf-feat:hover .jf-feat__ic{background:var(--jf-tan);color:var(--jf-cream);border-color:var(--jf-tan);}
.jf-feat__t{font-family:var(--jf-sans);font-size:15px;font-weight:700;color:var(--jf-ink);}
.jf-feat__s{font-size:13.5px;color:var(--jf-muted);max-width:30ch;}

/* ==========================================================================
   6. CATEGORY MOSAIC
   ========================================================================== */
.jf-mosaic{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,clamp(178px,15.4vw,230px));grid-template-areas:"a a b c" "a a d e" "f g h h";}
.jf-tile{position:relative;overflow:hidden;background:var(--jf-well);display:block;min-width:0;}
.jf-tile:nth-child(1){grid-area:a;} .jf-tile:nth-child(2){grid-area:b;}
.jf-tile:nth-child(3){grid-area:c;} .jf-tile:nth-child(4){grid-area:d;}
.jf-tile:nth-child(5){grid-area:e;} .jf-tile:nth-child(6){grid-area:f;}
.jf-tile:nth-child(7){grid-area:g;} .jf-tile:nth-child(8){grid-area:h;}
.jf-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.jf-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,19,16,.72) 0%,rgba(23,19,16,.24) 42%,rgba(23,19,16,0) 70%);}
.jf-tile__c{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(15px,1.4vw,24px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.jf-tile__n{font-family:var(--jf-serif);font-weight:600;font-size:clamp(16px,1.5vw,24px);color:#FAF7F2;line-height:1.15;}
.jf-tile__ar{font-size:13px;color:#fff;flex:0 0 auto;padding-bottom:3px;}
.jf-tile:hover .jf-tile__n{text-decoration:underline;text-underline-offset:4px;}

/* ==========================================================================
   7. PRODUCT GRID  (WooCommerce loop, kept default markup, styled here)
   ========================================================================== */
.jf-prod-grid ul.products{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,2.8vw,44px) clamp(16px,1.6vw,26px);list-style:none;margin:0;padding:0;align-items:stretch;}

/* WooCommerce's core stylesheet puts a clearfix ::before/::after on
   ul.products. On a grid container those pseudo-elements become real
   grid items and silently swallow the first and last cells - which is
   what left an empty slot before the first card in every grid. */
.jf-prod-grid ul.products::before,
.jf-prod-grid ul.products::after{content:none !important;display:none !important;}

/* Core also floats the cards at width:22.1% for its own 4-up layout,
   at the same specificity as these rules, so force them to fill the
   grid cell rather than fight the grid with a float layout. */
.jf-prod-grid ul.products li.product{
  position:relative;
  display:flex !important;flex-direction:column;border:0;padding:0;background:transparent;
  width:100% !important;float:none !important;margin:0 !important;
}
.jf-prod-grid ul.products li.product .woocommerce-loop-product__link{
  display:flex;flex-direction:column;height:100%;
}

/* ---- media frame -------------------------------------------------- */
/* The thumbnail is wrapped in a class-less <div> by the labels plugin;
   main.js also tags it .jf-card__media so the hook stays stable if that
   plugin is ever switched off. */
.jf-prod-grid ul.products li.product .woocommerce-loop-product__link > div:not([class]),
.jf-prod-grid ul.products li.product .jf-card__media{
  position:relative;display:block;overflow:hidden;background:var(--jf-well);
  line-height:0;font-size:0;
}
.jf-prod-grid ul.products li.product img{
  display:block;aspect-ratio:4/5;object-fit:cover;width:100%;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.jf-prod-grid ul.products li.product:hover img{transform:scale(1.05);}

/* real discount badge (jf_product_card_badge) */
.jf-badge{
  position:absolute;top:12px;left:12px;z-index:3;
  display:inline-flex;align-items:center;
  padding:6px 11px;border-radius:999px;
  background:var(--jf-rust);color:#fff;
  font-family:var(--jf-sans);font-size:11px;font-weight:700;letter-spacing:.04em;
}

/* quick-add: WooCommerce's own add-to-cart / select-options control,
   moved into the media frame by main.js and revealed on hover. Without
   JS it stays below the price as a plain underlined text link. */
.jf-prod-grid ul.products li.product .button{
  align-self:flex-start;margin-top:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 0 2px;border:0;background:transparent;color:var(--jf-ink);
  font-family:var(--jf-sans);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--jf-ink);
  transition:color .2s,border-color .2s;
}
.jf-prod-grid ul.products li.product .jf-card__media .button{
  position:absolute;left:12px;right:12px;bottom:12px;margin:0;z-index:3;
  min-height:44px;padding:0 16px;border-radius:999px;
  background:var(--jf-cream);color:var(--jf-ink);border:0;
  opacity:0;transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease,background-color .2s,color .2s;
}
.jf-prod-grid ul.products li.product:hover .jf-card__media .button,
.jf-prod-grid ul.products li.product .jf-card__media .button:focus-visible{
  opacity:1;transform:translateY(0);
}
.jf-prod-grid ul.products li.product .jf-card__media .button:hover{background:var(--jf-ink);color:var(--jf-cream);}
.jf-prod-grid ul.products li.product .button.loading{opacity:.5;}

/* "Fast Delivery" style labels from the labels plugin: main.js drops
   them into the media frame, where they read as one tidy corner tag. */
.jf-prod-grid ul.products li.product .advanced-woo-labels{pointer-events:none;}
/* The Advanced Woo Labels output is switched off in the storefront: its
   percentage label renders with an empty value in listings (it reads just
   "%") and the delivery banner repeated on every card added a coloured
   strip under each photo. The real saving is shown by .jf-badge instead. */
.advanced-woo-labels{display:none !important;}
.jf-prod-grid ul.products li.product .jf-card__media .advanced-woo-labels{
  position:absolute !important;left:12px !important;right:auto !important;
  bottom:12px !important;top:auto !important;width:auto !important;
  justify-content:flex-start !important;z-index:2;
}
.jf-prod-grid ul.products li.product:hover .jf-card__media .advanced-woo-labels{opacity:0;transition:opacity .2s;}
.jf-prod-grid ul.products li.product .awl-label-text{
  border-radius:999px !important;padding:5px 11px !important;
  font-size:10.5px !important;letter-spacing:.06em;
}
/* The plugin's own on-image label renders with an empty value in the
   loop (it reads just "%"), so the accurate .jf-badge above replaces it.
   It still shows normally on the single product page. */
.jf-prod-grid ul.products li.product .awl-position-type-on-image{display:none !important;}

/* ---- text block ---------------------------------------------------- */
.jf-card-cat{
  display:block;margin-top:16px;
  font-family:var(--jf-sans);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--jf-tan);
}
.jf-prod-grid ul.products li.product .woocommerce-loop-product__title{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--jf-sans);font-size:14.5px;font-weight:500;color:var(--jf-ink);
  margin-top:5px;padding:0;
}
.jf-prod-grid ul.products li.product:hover .woocommerce-loop-product__title{
  text-decoration:underline;text-underline-offset:3px;
}
.jf-prod-grid ul.products li.product .price{
  display:flex;align-items:baseline;gap:9px;
  margin-top:8px;font-size:15px;font-weight:700;color:var(--jf-ink);
}
.jf-prod-grid ul.products li.product .price,
.jf-prod-grid ul.products li.product .price ins,
.jf-prod-grid ul.products li.product .price ins *,
.jf-prod-grid ul.products li.product .price bdi,
.woocommerce ul.products li.product .price{
  color:var(--jf-price);text-decoration:none;font-weight:700;
}
.jf-prod-grid ul.products li.product .price del,
.jf-prod-grid ul.products li.product .price del *{
  color:var(--jf-price-was);font-weight:400;font-size:13px;margin:0;
  text-decoration:line-through;text-decoration-color:var(--jf-price-was);
}

/* Every product currently has zero reviews, so the review plugin paints
   five empty stars on every card. Hide the rating only where there are
   genuinely no reviews to report. */
.jf-prod-grid [data-reviews="0"],
.jf-prod-grid .glsrw-loop-rating{display:none !important;}

/* A WPCode snippet inserts a static "5-star" image before the price on
   every product card. Its width/height attributes (100x20) don't match
   the actual file's real dimensions, so "height:auto" scales it up to
   ~350px tall - the exact cause of the oversized product cards. It is
   also a fabricated rating shown regardless of a product's real reviews,
   so it is hidden rather than resized. */
.jf-prod-grid .custom-star-rating-before-price{display:none !important;}

/* Generic single-line truncation for product title/category everywhere
   WooCommerce or the theme's own product markup is used. */
.wd-entities-title,.wd-entities-title a,
.woocommerce-loop-product__title,
.jf-cat-name,.wd-product-cats,.wd-product-cats a{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}

/* ==========================================================================
   8. SPLIT / CTA SECTIONS
   ========================================================================== */
.jf-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,86px);align-items:center;}
.jf-split--flip .jf-split__fig{order:-1;}
.jf-split__fig{position:relative;overflow:hidden;background:var(--jf-well);aspect-ratio:1/1;}
.jf-split__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.jf-split__c{display:grid;gap:clamp(14px,1.5vw,22px);align-content:center;}

.jf-hides{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);}
.jf-hide{border:1px solid var(--jf-line);background:var(--jf-cream);}
.jf-hide__sw{height:clamp(66px,6vw,86px);}
.jf-hide__b{padding:clamp(14px,1.3vw,20px);display:grid;gap:8px;}
.jf-hide__n{font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;}
.jf-hide__d{font-size:13.5px;color:var(--jf-body);}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.jf-ft{background:var(--jf-ink);color:var(--jf-cream);}
.jf-ft__top{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:clamp(28px,3.2vw,52px);padding-block:clamp(46px,5vw,78px);}
.jf-ft__brand p{font-size:13.5px;color:var(--jf-muted-dk);max-width:34ch;}
.jf-fc h3{font-family:var(--jf-sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:17px;color:var(--jf-cream);}
.jf-fc li+li{margin-top:10px;}
.jf-fc a{font-size:13.5px;color:var(--jf-muted-dk);}
.jf-fc a:hover{color:var(--jf-cream);}
.jf-ft__bot{border-top:1px solid var(--jf-line-dk);padding-block:20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.jf-ft__bot p,.jf-ft__legal a{font-size:12.5px;color:var(--jf-muted-dk);}
.jf-ft__legal{display:flex;flex-wrap:wrap;gap:8px 20px;}

/* ==========================================================================
   10. GENERIC PAGE (About/Contact/Policies/etc via the_content)
   ========================================================================== */
.jf-page-hero{background:var(--jf-sand);padding-block:clamp(38px,4.6vw,74px);}
.jf-page-hero h1{font-size:clamp(32px,4.6vw,58px);margin:0;}
.jf-about-hero__in > div{max-width:640px;display:grid;gap:14px;}
.jf-about-hero__in h1{margin-top:2px;}

/* -------------------------------------------------------------------
   Bespoke Contact page
   ------------------------------------------------------------------- */
.jf-contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.jf-contact-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  padding:clamp(30px,3.2vw,48px) clamp(18px,2vw,32px);
  border:1px solid var(--jf-line);margin:0 -1px -1px 0;
}
.jf-contact-card__ic{
  width:54px;height:54px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--jf-tan);color:var(--jf-tan);font-size:19px;
}
.jf-contact-card__k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--jf-muted);}
.jf-contact-card__v{font-family:var(--jf-serif);font-size:clamp(18px,1.6vw,23px);font-weight:600;line-height:1.35;}
.jf-contact-card__v a{border-bottom:1px solid var(--jf-line);}
.jf-contact-card__v a:hover{border-color:var(--jf-ink);}
.jf-contact-card__s{font-size:13.5px;color:var(--jf-muted);max-width:30ch;}

.jf-contact-social{display:flex;gap:8px;justify-content:center;margin-top:8px;}
.jf-contact-social a{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--jf-line);color:var(--jf-ink);font-size:16px;transition:background-color .2s,color .2s,border-color .2s;
}
.jf-contact-social a:hover{background:var(--jf-ink);color:var(--jf-cream);border-color:var(--jf-ink);}

@media (max-width:899px){.jf-contact-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.jf-contact-cards{grid-template-columns:1fr;}}

/* -------------------------------------------------------------------
   Policy / help documents: hero, contents index, styled body, help CTA
   ------------------------------------------------------------------- */
.jf-phero{position:relative;overflow:hidden;background:var(--jf-sand);border-bottom:1px solid var(--jf-line);}
.jf-phero__in{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,3vw,48px);padding-block:clamp(38px,4.6vw,72px);}
.jf-phero__c{display:grid;gap:14px;max-width:780px;}
.jf-phero h1{font-size:clamp(30px,4.4vw,54px);margin:0;line-height:1.08;}
.jf-phero__ic{
  flex:0 0 auto;width:clamp(84px,8.6vw,126px);height:clamp(84px,8.6vw,126px);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--jf-line);background:var(--jf-cream);
  color:var(--jf-tan);font-size:clamp(28px,3vw,42px);
}
.jf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.jf-chip{
  display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;
  border:1px solid var(--jf-line);background:var(--jf-cream);font-size:12.5px;color:var(--jf-body);
  transition:border-color .2s,color .2s;
}
.jf-chip:hover{border-color:var(--jf-ink);color:var(--jf-ink);}

.jf-doc-layout{padding-block:var(--jf-section);}
.jf-doc-grid{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(30px,4vw,72px);align-items:start;}
.jf-doc-side__in{position:sticky;top:calc(78px + 22px);}
.jf-doc-side__h{
  font-family:var(--jf-sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--jf-muted);margin:0 0 14px;
}
.jf-doc-toc{list-style:none;counter-reset:jftoc;margin:0;padding:0;border-left:1px solid var(--jf-line);}
.jf-doc-toc li{counter-increment:jftoc;margin:0;}
.jf-doc-toc li.is-h3 a{padding-left:30px;font-size:13px;}
.jf-doc-toc a{
  display:block;padding:9px 0 9px 16px;margin-left:-1px;
  border-left:2px solid transparent;font-size:13.5px;line-height:1.45;color:var(--jf-muted);
  transition:color .2s,border-color .2s;
}
.jf-doc-toc a::before{
  content:counter(jftoc,decimal-leading-zero);margin-right:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--jf-tan);
}
.jf-doc-toc li.is-h3 a::before{content:none;}
.jf-doc-toc a:hover{color:var(--jf-ink);}
.jf-doc-toc a.is-on{color:var(--jf-ink);font-weight:600;border-left-color:var(--jf-ink);}
.jf-doc-side__cta{
  margin-top:22px;padding:20px;border:1px solid var(--jf-line);background:var(--jf-well);
  display:grid;gap:10px;justify-items:start;
}
.jf-doc-side__ci{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--jf-tan);color:var(--jf-tan);font-size:15px;
}
.jf-doc-side__cta p{font-size:14px;color:var(--jf-body);}
.jf-doc-side__cta .jf-btn{width:100%;min-height:44px;font-size:11.5px;}

/* document body */
.jf-doc{padding:0 !important;max-width:none;}
/* Some of these pages were built with Elementor's "Stretch Section"
   option, whose JS writes an inline width/left that pulls the section
   out to the full viewport - which escapes the contents column. Keep
   stretched sections inside the document column instead. */
.jf-doc .elementor-section-stretched,
.jf-doc .elementor-section{
  width:100% !important;left:0 !important;right:auto !important;
  margin-left:0 !important;margin-right:0 !important;
}
.jf-doc h2{
  font-family:var(--jf-serif);font-size:clamp(21px,2.3vw,29px);color:var(--jf-ink);
  margin:2.1em 0 .7em;padding-bottom:13px;border-bottom:1px solid var(--jf-line);
  scroll-margin-top:118px;
}
.jf-doc > *:first-child,.jf-doc h2:first-child{margin-top:0;}
.jf-doc h3{font-family:var(--jf-serif);font-size:clamp(17px,1.7vw,21px);margin:1.7em 0 .5em;scroll-margin-top:118px;}
.jf-doc p{font-size:15.5px;line-height:1.8;color:var(--jf-body);margin-bottom:1.05em;}
.jf-doc ul,.jf-doc ol{margin:0 0 1.35em;padding-left:0;list-style:none;display:grid;gap:10px;}
.jf-doc ul li{position:relative;padding-left:26px;margin:0;font-size:15px;line-height:1.72;color:var(--jf-body);}
.jf-doc ul li::before{content:"";position:absolute;left:6px;top:.66em;width:6px;height:6px;background:var(--jf-tan);}
.jf-doc ol{counter-reset:jfol;}
.jf-doc ol li{position:relative;padding-left:34px;margin:0;counter-increment:jfol;font-size:15px;line-height:1.72;color:var(--jf-body);}
.jf-doc ol li::before{
  content:counter(jfol,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--jf-tan);
}
.jf-doc strong{color:var(--jf-ink);}

/* help CTA band */
.jf-hcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.jf-hcard{
  display:grid;gap:10px;align-content:start;padding:clamp(22px,2.4vw,34px);
  background:var(--jf-cream);border:1px solid var(--jf-line);transition:border-color .2s;
}
.jf-hcard:hover{border-color:var(--jf-ink);}
.jf-hcard__ic{
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--jf-tan);color:var(--jf-tan);font-size:17px;
}
.jf-hcard__t{font-family:var(--jf-serif);font-size:19px;font-weight:600;color:var(--jf-ink);}
.jf-hcard__d{font-size:14px;line-height:1.6;color:var(--jf-muted);}
.jf-hcard__a{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jf-ink);
}
.jf-hcard__a i{font-size:10px;}
.jf-hcard:hover .jf-hcard__a{color:var(--jf-tan);}

@media (max-width:1023px){
  .jf-doc-grid{grid-template-columns:1fr;}
  .jf-doc-side__in{position:static;}
  .jf-hcards{grid-template-columns:1fr;}
  .jf-phero__ic{display:none;}
}
.jf-content{padding-block:var(--jf-section);}
.jf-content .jf-wrap{max-width:920px;}
.jf-content h2{font-size:clamp(22px,2.6vw,32px);margin-top:1.4em;}
.jf-content h3{font-size:clamp(18px,2vw,24px);}
.jf-content ul{list-style:disc;padding-left:1.4em;margin-bottom:1.2em;}
.jf-content ul li{color:var(--jf-body);margin-bottom:.4em;}
.jf-content a{color:var(--jf-tan);text-decoration:underline;text-underline-offset:3px;}
.jf-content table{width:100%;border-collapse:collapse;margin-block:1.4em;}
.jf-content table td,.jf-content table th{border:1px solid var(--jf-line);padding:10px 14px;text-align:left;font-size:14.5px;}

/* --------------------------------------------------------------------
   About/Contact/FAQs/policy pages are built from Elementor (free)
   widgets. Every page used to inherit Woodmart's own CSS for these -
   now that Woodmart is gone, Elementor's per-page generated stylesheet
   (e.g. ".elementor-19 .elementor-element-xxx") still applies fonts
   and colours with high specificity, so these overrides use !important
   to guarantee the site's real design system wins consistently on
   every page, regardless of which widgets that page happens to use.
   -------------------------------------------------------------------- */
.jf-content .elementor-section{max-width:none !important;}
.jf-content .elementor-container{max-width:none !important;}
.jf-content .elementor-widget-wrap{gap:0;}
.jf-content > .jf-wrap > [data-elementor-type]{display:grid;gap:clamp(28px,3.2vw,48px);}
.jf-content .elementor-top-section+.elementor-top-section{margin-top:clamp(28px,3.2vw,48px);}

.jf-content .elementor-heading-title{
  font-family:var(--jf-serif) !important;
  color:var(--jf-ink) !important;
  font-weight:700 !important;
  line-height:1.2 !important;
}
.jf-content .elementor-widget-heading:first-of-type .elementor-heading-title{margin-top:0;}
.jf-content .elementor-heading-title em{color:var(--jf-tan);font-style:italic;}

.jf-content .elementor-text-editor,
.jf-content .elementor-widget-text-editor{
  font-family:var(--jf-sans) !important;
  color:var(--jf-body) !important;
  line-height:1.7 !important;
}
.jf-content .elementor-text-editor p{margin-bottom:1em;}
.jf-content .elementor-text-editor p:empty{display:none;}
.jf-content .elementor-text-editor h2,.jf-content .elementor-text-editor h3{
  font-family:var(--jf-serif) !important;color:var(--jf-ink) !important;
  margin-top:1.3em !important;text-decoration:none !important;
}
.jf-content .elementor-text-editor strong{color:var(--jf-ink);}

/* icon-box (Why Choose Us, feature lists, etc.) */
.jf-content .elementor-widget-icon-box .elementor-icon-box-wrapper{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:clamp(20px,2vw,30px) clamp(12px,1.4vw,20px);
}
.jf-content .elementor-icon-box-icon{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:56px;height:56px;border:1px solid var(--jf-tan) !important;border-radius:0 !important;
}
.jf-content .elementor-icon-box-icon i,.jf-content .elementor-icon-box-icon svg{
  color:var(--jf-tan) !important;fill:var(--jf-tan) !important;font-size:20px !important;width:20px;height:20px;
}
.jf-content .elementor-icon-box-title,
.jf-content .elementor-icon-box-title a{
  font-family:var(--jf-sans) !important;font-size:15px !important;font-weight:700 !important;
  color:var(--jf-ink) !important;text-decoration:none !important;
}
.jf-content .elementor-icon-box-description{
  font-family:var(--jf-sans) !important;font-size:13.5px !important;color:var(--jf-muted) !important;
}
/* Elementor lays icon-box rows out as inner sections/columns */
.jf-content .elementor-section .elementor-section{display:flex;flex-wrap:wrap;}

/* forms - Elementor Pro form widget + Contact Form 7 */
.jf-content .elementor-field-group{margin-bottom:16px;}
.jf-content .elementor-field-label{
  font-size:12px !important;font-weight:700 !important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--jf-muted) !important;margin-bottom:6px !important;display:block;
}
.jf-content .elementor-field-textual,
.jf-content input[type="text"],.jf-content input[type="email"],
.jf-content input[type="tel"],.jf-content input[type="url"],
.jf-content textarea,.jf-content select{
  width:100% !important;border:1px solid var(--jf-line) !important;background:var(--jf-cream) !important;
  border-radius:0 !important;padding:12px 14px !important;font-family:var(--jf-sans) !important;
  font-size:14.5px !important;color:var(--jf-ink) !important;box-shadow:none !important;
}
.jf-content .elementor-field-textual:focus,
.jf-content input:focus,.jf-content textarea:focus,.jf-content select:focus{
  outline:none;border-color:var(--jf-ink) !important;
}
.jf-content .elementor-button,
.jf-content button[type="submit"],
.jf-content input[type="submit"],
.jf-content .wpcf7-submit{
  display:inline-flex !important;align-items:center;justify-content:center;
  min-height:50px !important;padding:0 30px !important;
  background:var(--jf-ink) !important;color:var(--jf-cream) !important;
  border:1px solid var(--jf-ink) !important;border-radius:0 !important;
  font-family:var(--jf-sans) !important;font-size:13.5px !important;font-weight:700 !important;
  letter-spacing:.04em;text-transform:none;transition:background-color .2s;
}
.jf-content .elementor-button:hover,
.jf-content button[type="submit"]:hover,
.jf-content .wpcf7-submit:hover{background:var(--jf-ink-2) !important;}
.jf-content .elementor-button-content-wrapper .elementor-button-text{color:inherit;}

/* icon-list (contact details, feature bullets) */
.jf-content .elementor-icon-list-items{display:grid;gap:14px;}
.jf-content .elementor-icon-list-item{display:flex;align-items:center;gap:12px;}
.jf-content .elementor-icon-list-icon{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;border:1px solid var(--jf-line) !important;
}
.jf-content .elementor-icon-list-icon i{color:var(--jf-tan) !important;font-size:14px !important;}
.jf-content .elementor-icon-list-text{font-family:var(--jf-sans) !important;color:var(--jf-body) !important;font-size:14.5px !important;}
.jf-content a.elementor-icon-list-text:hover,.jf-content .elementor-icon-list-text a:hover{color:var(--jf-tan) !important;}

/* social icons */
.jf-content .elementor-social-icons-wrapper{display:flex;gap:8px;}
.jf-content .elementor-icon.elementor-social-icon{
  width:40px !important;height:40px !important;border-radius:0 !important;
  background:var(--jf-ink) !important;color:var(--jf-cream) !important;
}
.jf-content .elementor-icon.elementor-social-icon:hover{background:var(--jf-tan) !important;}

/* shortcode-embedded forms (WPForms/CF7 used on some pages) */
.jf-content .wpforms-container input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.jf-content .wpforms-container select,
.jf-content .wpforms-container textarea{
  border:1px solid var(--jf-line) !important;border-radius:0 !important;background:var(--jf-cream) !important;
}
.jf-content .wpforms-submit-container button{
  background:var(--jf-ink) !important;border-radius:0 !important;font-family:var(--jf-sans) !important;
}

/* ==========================================================================
   11. MEGA MENU (desktop primary nav - see jf_render_primary_nav())
   ========================================================================== */
.jf-nav .jf-mega-item{position:static;}
/* Fades rather than snaps. visibility is animated instead of display so
   the panel can transition in both directions; pointer-events keeps the
   hidden panel from swallowing clicks on the page underneath. */
.jf-mega{
  position:absolute;left:0;right:0;top:78px;
  background:var(--jf-cream);border-top:1px solid var(--jf-line);
  box-shadow:0 24px 48px rgba(23,19,16,.10);z-index:50;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;
}
.jf-mega-item:hover .jf-mega,
.jf-mega-item:focus-within .jf-mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity .28s ease,transform .28s ease,visibility 0s;
}
.jf-mega__in{display:block;padding-block:clamp(24px,2.6vw,36px);}

.jf-mega__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--jf-line);
}
.jf-mega__all{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jf-ink);
}
.jf-mega__all i{font-size:10px;}
.jf-mega__all:hover{color:var(--jf-tan);}

/* category tiles: label left, real category photo bleeding off the right */
.jf-mega__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.jf-mtile{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:94px;padding-left:18px;overflow:hidden;
  background:var(--jf-well);border:1px solid transparent;
  transition:border-color .2s,background-color .2s;
}
.jf-mtile:hover{border-color:var(--jf-ink);background:var(--jf-sand);}
.jf-mtile__t{
  font-family:var(--jf-sans);font-size:13.5px;font-weight:600;line-height:1.3;
  color:var(--jf-ink);max-width:58%;
}
.jf-mtile__m{flex:0 0 42%;align-self:stretch;position:relative;overflow:hidden;}
.jf-mtile__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.jf-mtile:hover .jf-mtile__m img{transform:scale(1.07);}

/* featured collection banner */
.jf-mfeat{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:10px;min-height:152px;overflow:hidden;background:var(--jf-ink);
}
.jf-mfeat__c{display:grid;gap:9px;padding:24px 0 24px 26px;max-width:44%;}
.jf-mfeat__c .jf-kick{color:var(--jf-tan);}
.jf-mfeat__t{
  font-family:var(--jf-serif);font-size:clamp(19px,1.8vw,27px);font-weight:600;
  line-height:1.15;color:var(--jf-cream);
}
.jf-mfeat__l{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jf-cream);
}
.jf-mfeat__l i{font-size:10px;}
.jf-mfeat:hover .jf-mfeat__l{color:var(--jf-tan);}
.jf-mfeat__m{flex:0 0 52%;align-self:stretch;position:relative;overflow:hidden;}
.jf-mfeat__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.jf-mfeat:hover .jf-mfeat__m img{transform:scale(1.05);}

/* informational panel (Help) - icons instead of photos */
.jf-mega__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.jf-mlink{
  display:flex;align-items:center;gap:14px;padding:15px 18px;
  background:var(--jf-well);border:1px solid transparent;transition:background-color .2s,border-color .2s;
}
.jf-mlink:hover{background:var(--jf-sand);border-color:var(--jf-line);}
.jf-mlink__ic{
  flex:0 0 auto;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--jf-line);background:var(--jf-cream);color:var(--jf-tan);font-size:14px;
}
.jf-mlink__t{font-size:14px;font-weight:500;color:var(--jf-ink);}

.jf-draw ul ul ul li a{padding-left:52px;font-size:13px;}

/* ==========================================================================
   12. SINGLE PRODUCT PAGE
   ========================================================================== */
.jf-prod-grid > div.product{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,64px);align-items:start;
}
/* WooCommerce puts clearfix pseudo-elements on these containers; on a
   grid they turn into real grid items and take up whole cells. */
.jf-prod-grid > div.product::before,
.jf-prod-grid > div.product::after,
.summary.entry-summary::before,
.summary.entry-summary::after{content:none !important;display:none !important;}
/* WooCommerce's own core stylesheet (woocommerce.css) floats the gallery
   and summary at width:48% for its default 2-up layout - that fights our
   grid instead of cooperating with it, so both are forced back to fill
   their grid cell. !important is needed since that core rule and this
   one carry the same specificity and load order isn't guaranteed. */
.jf-prod-grid > div.product > .woocommerce-product-gallery,
.jf-prod-grid > div.product > .summary.entry-summary{
  width:100% !important;float:none !important;margin:0 !important;
}
.jf-prod-grid > div.product > .onsale{
  position:absolute;top:14px;left:14px;z-index:3;margin:0;
  background:var(--jf-ink);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;
}

/* Gallery.
   WooCommerce ships this as a flat list of images (its flexslider is not
   active on this site), so the base rules render a plain thumbnail grid
   that already looks intentional. main.js then groups the secondary
   images into .jf-gal-thumbs and adds .jf-gal--ready, which upgrades the
   layout to the vertical thumbnail rail beside a large main image. */
.woocommerce-product-gallery__wrapper{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.woocommerce-product-gallery__wrapper::before,
.woocommerce-product-gallery__wrapper::after{content:none !important;display:none !important;}
.woocommerce-product-gallery__image img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--jf-well);
}
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child{grid-column:1 / -1;}
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child img{aspect-ratio:4/5;}

.jf-gal--ready .woocommerce-product-gallery__wrapper{grid-template-columns:84px minmax(0,1fr);align-items:start;gap:12px;}
.jf-gal--ready .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child{grid-column:2;grid-row:1;}
/* WooCommerce's core stylesheet re-displays these with a
   :nth-child(n+2) rule that outranks a plain selector here, so the
   secondary images (now represented by the thumbnail rail) need the
   override to actually stay hidden. */
.jf-gal--ready .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child){display:none !important;}
.jf-gal-thumbs{grid-column:1;grid-row:1;display:grid;gap:10px;align-content:start;}
.jf-gthumb{
  display:block;padding:0;line-height:0;cursor:pointer;opacity:.6;
  background:none;border:1px solid transparent;transition:opacity .2s,border-color .2s;
}
.jf-gthumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--jf-well);}
.jf-gthumb:hover{opacity:1;}
.jf-gthumb.is-on{opacity:1;border-color:var(--jf-ink);}

@media (min-width:900px){
  .jf-prod-grid .woocommerce-product-gallery{position:sticky;top:calc(78px + 24px);}
}

.summary.entry-summary{display:grid;gap:16px;}
.summary .advanced-woo-labels{margin-bottom:2px;}
.summary .product_title{
  font-family:var(--jf-serif);font-size:clamp(26px,2.6vw,38px);font-weight:700;
  color:var(--jf-ink);line-height:1.2;margin:0;
}
.summary .woocommerce-product-rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--jf-muted);}
.summary .woocommerce-product-rating .star-rating,.summary .glsr-star-rating{color:var(--jf-tan);}
.summary > .price{
  font-family:var(--jf-sans);font-size:clamp(22px,2vw,28px);font-weight:700;
  padding-bottom:14px;border-bottom:1px solid var(--jf-line);
}
/* Core colours p.price at a higher specificity than a plain descendant
   selector can reach, so these are qualified to match it. */
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price,
.summary .price,
.summary .price ins,
.summary .price ins *,
.summary .price bdi,
.summary .price > .woocommerce-Price-amount{color:var(--jf-price);text-decoration:none;}
.summary .price del,
.summary .price del *{
  color:var(--jf-price-was);font-weight:400;font-size:18px;margin-right:10px;
  text-decoration:line-through;text-decoration-color:var(--jf-price-was);opacity:1;
}
.summary .woocommerce-product-details__short-description{
  font-size:15px;line-height:1.75;color:var(--jf-body);padding-bottom:6px;
}
.summary .woocommerce-product-details__short-description p{margin-bottom:1em;}

.summary table.variations{width:100%;margin:0;border:0;}
.summary table.variations tbody,.summary table.variations tr{display:block;}
.summary table.variations tr{margin-bottom:16px;}
.summary table.variations th{
  display:block;text-align:left;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--jf-muted);padding:0 0 8px;
}
.summary table.variations td{display:block;padding:0;}
.summary select{
  width:100%;height:48px;padding:0 14px;border:1px solid var(--jf-line);
  background:var(--jf-cream);font-family:var(--jf-sans);font-size:14px;color:var(--jf-ink);
}
.summary .reset_variations{display:inline-block;margin-top:8px;font-size:12px;color:var(--jf-muted);text-decoration:underline;}
.summary .woocommerce-variation{margin-top:2px;}
.summary .woocommerce-variation-price .price{font-size:20px;border:0;padding:0;}
.summary .woocommerce-variation-availability{font-size:13px;margin-top:4px;color:var(--jf-muted);}

.summary form.cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;}
/* The delivery estimate is printed inside the cart form, where it landed
   beside the button; give it its own full-width row underneath instead. */
.summary form.cart .estimated-delivery{
  order:9;width:100%;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--jf-line);
  font-size:13.5px;color:var(--jf-muted);
}
.summary form.cart .estimated-delivery strong{color:var(--jf-ink);font-weight:700;}
/* WooCommerce nests the quantity and Add to cart inside
   .single_variation_wrap, so ordering has to happen on that wrapper for
   the size choice to come first and the delivery estimate to sit last. */
.summary form.cart .variations{width:100%;order:1;}
.summary form.cart .single_variation_wrap{order:2;width:100%;}
.summary form.cart .woocommerce-variation-add-to-cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;}
.summary .quantity{display:inline-flex;}
.summary .quantity input.qty{
  width:64px;height:52px;text-align:center;border:1px solid var(--jf-line);
  font-size:15px;background:var(--jf-cream);color:var(--jf-ink);
}
.summary .single_add_to_cart_button,.summary form.cart button.button{
  height:52px;padding:0 34px;background:var(--jf-ink);color:var(--jf-cream);border:0;
  font-family:var(--jf-sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;transition:background-color .2s;cursor:pointer;
}
.summary .single_add_to_cart_button:hover{background:var(--jf-tan);}
.summary .single_add_to_cart_button.disabled{opacity:.45;cursor:not-allowed;}

.summary .product_meta{
  margin-top:6px;padding-top:16px;border-top:1px solid var(--jf-line);
  font-size:13px;color:var(--jf-muted);display:grid;gap:6px;
}
.summary .product_meta a{color:var(--jf-tan);}

/* Size options rendered as pills by main.js. They drive WooCommerce's
   own <select>, which stays in the DOM (and stays visible without JS),
   so the variation form keeps working exactly as WooCommerce built it. */
.jf-swatches{display:flex;flex-wrap:wrap;gap:8px;}
.jf-swatch{
  min-width:48px;height:46px;padding:0 15px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--jf-line);border-radius:999px;background:var(--jf-cream);
  font-family:var(--jf-sans);font-size:13px;font-weight:600;color:var(--jf-ink);
  cursor:pointer;transition:border-color .2s,background-color .2s,color .2s;
}
.jf-swatch:hover{border-color:var(--jf-ink);}
.jf-swatch.is-on{background:var(--jf-ink);border-color:var(--jf-ink);color:var(--jf-cream);}
/* Core styles the variation dropdown at a higher specificity, so the
   override is needed for the pills to be the only size control. */
.summary td.jf-has-swatches > select{display:none !important;}
.jf-size-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.jf-size-row a{font-size:12.5px;color:var(--jf-muted);text-decoration:underline;text-underline-offset:3px;}
.jf-size-row a:hover{color:var(--jf-ink);}

/* quantity stepper (buttons added by main.js around WooCommerce's input) */
.summary .quantity.jf-qty{display:inline-flex;align-items:center;border:1px solid var(--jf-line);}
.summary .quantity.jf-qty input.qty{width:50px;height:52px;border:0;background:transparent;}
.jf-qty__b{
  width:42px;height:52px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--jf-ink);font-size:15px;cursor:pointer;
}
.jf-qty__b:hover{color:var(--jf-tan);}

.woocommerce-tabs{margin-top:clamp(50px,5vw,80px);grid-column:1 / -1;}
.woocommerce-tabs ul.tabs{
  display:flex;gap:clamp(20px,2.4vw,40px);border-bottom:1px solid var(--jf-line);
  list-style:none;padding:0;margin:0 0 32px;
}
.woocommerce-tabs ul.tabs li{padding:0;}
.woocommerce-tabs ul.tabs li a{
  display:inline-block;padding-bottom:14px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--jf-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.woocommerce-tabs ul.tabs li.active a{color:var(--jf-ink);border-bottom-color:var(--jf-ink);}

/* Accordion treatment: main.js hides the tab list and gives every panel
   its own header, so the details read as a stacked, scannable list. */
.woocommerce-tabs.jf-acc ul.tabs{display:none !important;}
.woocommerce-tabs.jf-acc{max-width:900px;border-top:1px solid var(--jf-line);}
.jf-acc__h{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 2px;background:none;border:0;border-bottom:1px solid var(--jf-line);
  font-family:var(--jf-sans);font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--jf-ink);text-align:left;cursor:pointer;
}
.jf-acc__h i{color:var(--jf-muted);font-size:13px;transition:transform .25s ease;}
.jf-acc__h.is-on i{transform:rotate(180deg);}
.jf-acc__h:hover{color:var(--jf-tan);}
.woocommerce-tabs.jf-acc .panel{
  margin:0;padding:22px 2px 30px;border-bottom:1px solid var(--jf-line);max-width:none;
}
.woocommerce-tabs.jf-acc .panel > h2:first-child{display:none;}
.woocommerce-tabs .panel{max-width:760px;font-size:15px;line-height:1.75;color:var(--jf-body);}
.woocommerce-tabs .panel h2{font-family:var(--jf-serif);font-size:22px;margin-bottom:16px;color:var(--jf-ink);}
.woocommerce-Tabs-panel table.shop_attributes{width:100%;border-collapse:collapse;}
.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes td{
  border:1px solid var(--jf-line);padding:10px 14px;font-size:14px;text-align:left;
}

.related.products,.up-sells.products{
  grid-column:1 / -1;margin-top:clamp(56px,6vw,96px);padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--jf-line);
}
.related.products > h2,.up-sells.products > h2{
  font-family:var(--jf-serif);font-size:clamp(24px,2.6vw,32px);color:var(--jf-ink);
  text-align:center;margin:0 0 clamp(26px,2.8vw,40px);
}

@media (max-width:899px){
  .jf-prod-grid > div.product{grid-template-columns:1fr;}
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width:1279px){
  .jf-mega__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1023px){
  .jf-hdr__in{grid-template-columns:1fr auto 1fr;height:60px;}
  .jf-nav{display:none;}
  .jf-burger{display:inline-flex;}
  .jf-logo{justify-self:center;}
  .jf-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-template-areas:"a a" "b c" "d e" "f g";}
  .jf-tile{aspect-ratio:1/1;}
  .jf-split{grid-template-columns:1fr;gap:28px;}
  .jf-split--flip .jf-split__fig{order:0;}
  .jf-split__fig{aspect-ratio:4/3;}
  .jf-prod-grid ul.products{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* No hover on touch, so the quick-add control stays visible. */
  .jf-prod-grid ul.products li.product .jf-card__media .button{opacity:1;transform:none;}
}
@media (max-width:899px){
  .jf-feats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .jf-gal--ready .woocommerce-product-gallery__wrapper{grid-template-columns:70px minmax(0,1fr);}
}
@media (max-width:767px){
  .jf-hero{height:clamp(340px,80vw,460px);}
  .jf-hides{grid-template-columns:repeat(2,minmax(0,1fr));}
  .jf-head{flex-direction:column;align-items:flex-start;gap:18px;}
  .jf-ft__top{grid-template-columns:1fr 1fr;gap:28px;}
  .jf-prod-grid ul.products{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .jf-feats{grid-template-columns:1fr;}
  .jf-mosaic{gap:8px;}
  .jf-tile:nth-child(1){aspect-ratio:4/3;}
  .jf-ft__top{grid-template-columns:1fr;}
  .jf-hides{grid-template-columns:1fr;}
  .jf-prod-grid ul.products{gap:22px 12px;}
  .jf-phero__in{padding-block:32px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ==========================================================================
   14. BLOG CARDS
   ========================================================================== */
/* Article headers are illustrations rather than photographic crops, so
   they are shown whole on a neutral ground instead of cut to fill. */
.jf-post-media{aspect-ratio:4/3;overflow:hidden;background:var(--jf-well);}
.jf-post-media img{width:100%;height:100%;object-fit:contain;}

/* ==========================================================================
   15. CART
   ========================================================================== */
/* Core paints this button tan-on-grey, far too low-contrast for the
   primary action in the funnel. */
.wc-block-cart__submit-button,
.wc-block-components-button.contained,
.wc-proceed-to-checkout .checkout-button{
  background:var(--jf-ink) !important;
  color:#fff !important;
  border-color:var(--jf-ink) !important;
  border-radius:0 !important;
  font-weight:700 !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover,
.wc-proceed-to-checkout .checkout-button:hover{
  background:var(--jf-ink-2) !important;color:#fff !important;
}
.wc-block-cart__submit-button *,
.wc-block-components-button.contained *{color:#fff !important;}

/* ==========================================================================
   16. CHECKOUT
   ========================================================================== */
.woocommerce-checkout .jf-phero h1,
.woocommerce-cart .jf-phero h1{
  font-family:var(--jf-sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,7.4vw,104px);letter-spacing:-.035em;line-height:.95;
}
.woocommerce-checkout .jf-phero,
.woocommerce-cart .jf-phero{background:var(--jf-cream);border-bottom:0;}
.woocommerce-checkout .jf-phero__in,
.woocommerce-cart .jf-phero__in{padding-block:clamp(26px,3vw,52px) clamp(14px,1.6vw,24px);}
.woocommerce-checkout .jf-phero .jf-kick,
.woocommerce-cart .jf-phero .jf-kick{display:none;}

/* Two columns: the form on the left, the order summary held beside it. */
.woocommerce-checkout form.checkout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
  gap:clamp(28px,4vw,80px);align-items:start;
}
.woocommerce-checkout form.checkout > #customer_details{grid-column:1;grid-row:1 / span 2;}
.woocommerce-checkout form.checkout > #order_review_heading{grid-column:2;grid-row:1;}
.woocommerce-checkout form.checkout > #order_review{grid-column:2;grid-row:2;}
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup{grid-column:1 / -1;}

.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr;gap:0;}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none;}
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
  font-family:var(--jf-serif);font-size:clamp(19px,1.9vw,24px);margin:0 0 18px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:0 20px;
}
.woocommerce-checkout .form-row{margin:0 0 18px;padding:0;}
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes,
.woocommerce-checkout #order_comments_field{grid-column:1 / -1;}
.woocommerce-checkout .form-row label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--jf-muted);margin-bottom:7px;
}
.woocommerce-checkout .form-row .required{color:var(--jf-rust);text-decoration:none;}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection,
.woocommerce-checkout .form-row select{
  width:100%;border:0;border-bottom:1px solid var(--jf-line);border-radius:0;
  background:transparent;padding:11px 2px;font-family:var(--jf-sans);font-size:15px;
  color:var(--jf-ink);box-shadow:none;
}
.woocommerce-checkout .form-row textarea{border:1px solid var(--jf-line);padding:12px;min-height:96px;}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus{outline:none;border-bottom-color:var(--jf-ink);}
.woocommerce-checkout .select2-container--default .select2-selection--single{height:auto;}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.4;padding:0;color:var(--jf-ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{top:8px;}

.woocommerce-checkout #order_review{
  background:var(--jf-well);padding:clamp(20px,2.2vw,30px);
  position:sticky;top:calc(78px + 20px);
}
.woocommerce-checkout .shop_table{width:100%;border-collapse:collapse;border:0;margin:0;}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td{
  border:0;border-bottom:1px solid var(--jf-line);padding:13px 0;
  font-size:14.5px;color:var(--jf-body);text-align:left;
}
.woocommerce-checkout .shop_table thead th{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--jf-muted);padding-bottom:10px;
}
.woocommerce-checkout .shop_table td:last-child,
.woocommerce-checkout .shop_table th:last-child{text-align:right;}
.woocommerce-checkout .shop_table .product-name{color:var(--jf-ink);font-weight:500;}
.woocommerce-checkout .shop_table .product-quantity{color:var(--jf-muted);}
.woocommerce-checkout .shop_table tfoot th,
.woocommerce-checkout .shop_table tfoot td{font-weight:700;color:var(--jf-ink);}
.woocommerce-checkout .shop_table tfoot .order-total th,
.woocommerce-checkout .shop_table tfoot .order-total td{border-bottom:0;padding-top:18px;font-size:19px;}
.woocommerce-checkout .shop_table tfoot .order-total .amount{color:var(--jf-price);}

.woocommerce-checkout #payment{background:transparent;border-radius:0;margin-top:6px;}
.woocommerce-checkout #payment ul.payment_methods{border:0;padding:0;margin:0 0 6px;list-style:none;}
.woocommerce-checkout #payment ul.payment_methods li{border-bottom:1px solid var(--jf-line);padding:14px 0;}
.woocommerce-checkout #payment ul.payment_methods label{
  display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--jf-ink);
  font-weight:500;letter-spacing:0;text-transform:none;margin:0;
}
.woocommerce-checkout #payment div.payment_box{
  background:transparent;padding:10px 0 0;margin:0;font-size:13.5px;color:var(--jf-muted);
}
.woocommerce-checkout #payment div.payment_box::before{display:none;}
.woocommerce-checkout #place_order,
.woocommerce-checkout button.button.alt{
  width:100%;min-height:56px;margin-top:18px;
  background:var(--jf-ink);color:#fff;border:0;border-radius:0;
  font-family:var(--jf-sans);font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background-color .2s;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button.button.alt:hover{background:var(--jf-ink-2);color:#fff;}
.woocommerce-checkout .woocommerce-privacy-policy-text{font-size:12.5px;color:var(--jf-muted);}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-top:10px;}

.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle{margin-bottom:18px;}
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message{
  background:var(--jf-well);border:0;border-left:2px solid var(--jf-tan);
  padding:14px 18px;font-size:14px;color:var(--jf-body);border-radius:0;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before{display:none;}
.woocommerce-checkout .woocommerce-info a{color:var(--jf-tan);font-weight:700;}

@media (max-width:1023px){
  .woocommerce-checkout form.checkout{grid-template-columns:1fr;}
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review{grid-column:1;grid-row:auto;}
  .woocommerce-checkout #order_review{position:static;}
}
@media (max-width:600px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr;}
}

/* ==========================================================================
   17. CUSTOMIZATION PAGE
   ========================================================================== */
/* The intro copy and the enquiry form were authored as two side-by-side
   Elementor columns, which stranded the heading beside the form. Stack
   them so the copy introduces the form sitting below it. */
.page-id-390 .jf-content .elementor-top-section:first-of-type > .elementor-container{
  flex-direction:column;align-items:flex-start;
}
.page-id-390 .jf-content .elementor-top-section:first-of-type > .elementor-container > .elementor-column{
  width:100%;max-width:100%;
}
.page-id-390 .jf-content .elementor-top-section:first-of-type .elementor-widget-wrap{justify-content:flex-start;}
.page-id-390 .jf-content form,
.page-id-390 .jf-content .wpcf7,
.page-id-390 .jf-content .wpforms-container{max-width:760px;margin-left:0;margin-right:auto;}
.page-id-390 .jf-content .elementor-text-editor{max-width:70ch;}

/* ==========================================================================
   18. SPLIT HERO
   ========================================================================== */
/* Two square panels sized to the exact 1:1 ratio of the photographs, so
   each shot is shown whole - never cropped, never stretched. */
.jf-shero{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  width:100vw;margin-left:calc(50% - 50vw);background:var(--jf-line);
}
.jf-shero__p{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--jf-well);}
.jf-shero__p img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .8s cubic-bezier(.22,.61,.36,1);}
.jf-shero__p:hover img{transform:scale(1.03);}
.jf-shero__p::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--jf-cream) 0%,rgba(250,247,242,.92) 16%,rgba(250,247,242,.55) 30%,rgba(250,247,242,0) 52%);
}
.jf-shero__c{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;gap:10px;justify-items:start;
  padding:clamp(20px,2.6vw,44px);
}
.jf-shero__t{
  font-family:var(--jf-serif);font-weight:700;color:var(--jf-ink);
  font-size:clamp(24px,3.2vw,44px);line-height:1.05;
}
.jf-shero__b{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;margin-top:4px;
  background:var(--jf-cream);color:var(--jf-ink);border:1px solid var(--jf-cream);
  font-family:var(--jf-sans);font-size:13px;font-weight:700;
  transition:background-color .2s,color .2s;
}
.jf-shero__p:hover .jf-shero__b{background:var(--jf-ink);color:var(--jf-cream);border-color:var(--jf-ink);}

@media (max-width:767px){
  .jf-shero{grid-template-columns:1fr;}
}

/* ==========================================================================
   19. FEATURE STRIP - five across, icon above centred text
   ========================================================================== */
.jf-feats{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,28px);}
.jf-feat{
  background:transparent;border:0;padding:clamp(14px,1.4vw,20px) 6px;gap:12px;
}
.jf-feat:hover{background:transparent;border-color:transparent;transform:translateY(-3px);}
.jf-feat__t{font-size:14.5px;line-height:1.3;}
.jf-feat__s{font-size:13px;max-width:26ch;}

@media (max-width:1023px){
  .jf-feats{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:600px){
  .jf-feats{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ==========================================================================
   20. CATEGORY TILES - each tile keeps its photo's own aspect ratio
   ========================================================================== */
/* The supplied banners are a mix of 1:1, 4:3 and 3:4. Rather than crop
   them to a single box, every tile carries its own aspect-ratio (set
   inline from the image's real dimensions) and the columns simply flow. */
/* superseded by section 24 (justified bento rows) */

/* ==========================================================================
   21. SALE SECTION - tabs, kicker dot, saving amount
   ========================================================================== */
.jf-dot{
  display:inline-block;width:4px;height:4px;border-radius:50%;
  background:currentColor;vertical-align:middle;margin:0 8px 2px;
}
.jf-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.jf-tab{
  min-height:42px;padding:0 22px;cursor:pointer;
  background:transparent;color:var(--jf-ink);border:1px solid var(--jf-line);
  font-family:var(--jf-sans);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .2s,color .2s,border-color .2s;
}
.jf-tab:hover{border-color:var(--jf-ink);}
.jf-tab.is-on{background:var(--jf-ink);color:var(--jf-cream);border-color:var(--jf-ink);}
.jf-tabpanel{display:none;}
.jf-tabpanel.is-on{display:block;}
.jf-sale__cta{display:flex;justify-content:center;margin-top:clamp(28px,3vw,44px);}
.jf-sale__cta .jf-btn{min-width:210px;}

/* saving amount, printed after the price on product cards */
.jf-save{
  display:inline-block;margin-left:2px;
  color:var(--jf-rust);font-size:13px;font-weight:700;white-space:nowrap;
}
.jf-save .woocommerce-Price-amount,
.jf-save bdi{color:var(--jf-rust);}

/* ==========================================================================
   22. LEATHER APRON SECTION
   ========================================================================== */
.jf-apron{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.2vw,76px);align-items:center;}
.jf-apron__fig{margin:0;overflow:hidden;background:var(--jf-well);}
.jf-apron__fig img{width:100%;height:auto;display:block;}
.jf-apron__c{display:grid;gap:clamp(12px,1.4vw,20px);align-content:center;}
.jf-trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.jf-trade{
  display:inline-flex;align-items:center;min-height:36px;padding:0 15px;
  border:1px solid var(--jf-line);background:var(--jf-cream);
  font-size:12.5px;color:var(--jf-body);
}
@media (max-width:899px){
  .jf-apron{grid-template-columns:1fr;}
}

/* ==========================================================================
   23. HIDE SWATCHES - real material photographs
   ========================================================================== */
.jf-hide{background:var(--jf-cream);overflow:hidden;}
.jf-hide__sw{height:auto;aspect-ratio:1024/687;overflow:hidden;background:var(--jf-well);}
.jf-hide__sw img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.jf-hide:hover .jf-hide__sw img{transform:scale(1.05);}



/* ==========================================================================
   24. CATEGORY BENTO - justified rows, gapless and uncropped
   ========================================================================== */
/* Within a row each tile grows in proportion to its own photo's aspect
   ratio, so every tile on that row resolves to the same height and the
   row fills edge to edge. No holes, and nothing is cropped or squashed. */
.jf-mosaic{
  display:grid !important;gap:12px;
  grid-template-columns:none !important;grid-template-rows:none !important;grid-template-areas:none !important;
}
.jf-mrow{display:flex;gap:12px;align-items:stretch;}
.jf-mosaic .jf-tile{
  grid-area:auto !important;aspect-ratio:auto !important;
  flex:var(--ar,1) 1 0;min-width:0;position:relative;overflow:hidden;
}
.jf-mosaic .jf-tile img{
  position:static !important;inset:auto !important;
  width:100%;height:auto;display:block;
}

@media (max-width:1023px){
  /* Two per row would leave ragged edges once the ratios differ, so the
     tiles run full width rather than reintroduce gaps. */
  .jf-mrow{display:block;}
  .jf-mosaic .jf-tile{display:block;margin-bottom:12px;}
  .jf-mosaic .jf-tile:last-child{margin-bottom:0;}
}

/* ==========================================================================
   25. CARD PRICE ORDER - sale price, then the old price, then the saving
   ========================================================================== */
.jf-prod-grid ul.products li.product .price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
}
.jf-prod-grid ul.products li.product .price ins{order:1;}
.jf-prod-grid ul.products li.product .price del{order:2;}
.jf-prod-grid ul.products li.product .price .jf-save{order:3;}
/* WooCommerce prints "Original price was:" / "Current price is:" for
   screen readers; keep them readable to assistive tech but out of the
   visual flow, where they otherwise wrap between the figures. */
.jf-prod-grid ul.products li.product .price .screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* The saving reads as one red phrase - the amount matches the word. */
.jf-save,
.jf-save *{color:var(--jf-rust) !important;}

/* ==========================================================================
   26. CUSTOM ORDERS FIGURE
   ========================================================================== */
/* The portrait photograph sizes itself from its own ratio; the previous
   absolutely-positioned frame collapsed to zero height and hid it. */
.jf-cofig{
  margin:0;overflow:hidden;background:var(--jf-well);
  width:100%;max-width:440px;justify-self:end;
}
.jf-cofig img{width:100%;height:auto;display:block;}
@media (max-width:1023px){
  .jf-cofig{max-width:none;justify-self:stretch;}
}