/* ==========================================================================
   8X Gear — category / shop archive
   Maps the prototype's collection page (tools/custom/collection-template.html,
   the `.cl-*` block) onto Flatsome + WooCommerce markup. Woo keeps ownership of
   the query, the sort order, the filter widgets and pagination; only the
   surface changes.

   The hero markup is ours (inc/archive-parts.php). Everything below the hero is
   Flatsome's own DOM restyled in place.
   ========================================================================== */

/* -------------------------------------------------------------- hero */
/* Direct port of `.cl-hero`. Full-bleed: the banner is a sibling of the shop
   container, not inside it, so no 100vw trick is needed. */
.cl-hero{
  position:relative;width:100%;overflow:hidden;background:#0B0D0F;
  min-height:clamp(260px,27vw,350px);display:flex;align-items:flex-end;
}
.cl-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
}
.cl-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,8,10,.88) 0%,rgba(6,8,10,.72) 46%,rgba(6,8,10,.42) 100%);
}
.cl-hero-inner{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:32px 28px 28px;}

.cl-crumb{padding:0 0 18px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
/* Woo prints the trail inside its own nav; ours is the outer one, so the inner
   wrapper has to give up Flatsome's margins and colour. */
.cl-crumb .woocommerce-breadcrumb,
.cl-crumb nav{margin:0;padding:0;font-size:inherit;letter-spacing:inherit;color:#fff;}
.cl-crumb a{color:rgba(255,255,255,.72);text-decoration:none;}
.cl-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.cl-crumb i{font-style:normal;color:rgba(255,255,255,.45);padding:0 8px;}

.cl-kicker{margin:0 0 8px;color:var(--ct-red);font-size:10px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;}
.cl-hero .cl-title{
  margin:0;color:#fff;font-size:clamp(32px,4.4vw,58px);line-height:.88;font-weight:900;
  letter-spacing:-.07em;text-transform:uppercase;
}
.cl-hero .cl-title span{color:var(--ct-red);}
.cl-line{width:78px;height:6px;background:var(--ct-red);margin:14px 0 0;}
.cl-intro{margin:14px 0 0;max-width:72ch;color:rgba(255,255,255,.76);font-size:15px;line-height:1.6;}

.cl-stats{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;border-top:1px solid rgba(255,255,255,.18);}
.cl-stat{padding:16px 30px 0 0;margin-right:30px;border-right:1px solid rgba(255,255,255,.18);}
.cl-stat:last-child{border-right:0;margin-right:0;padding-right:0;}
.cl-stat b,
.cl-stat b .woocommerce-Price-amount{
  display:block;color:#fff;font-size:clamp(22px,2.4vw,32px);line-height:1;font-weight:900;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.cl-stat span{
  display:block;margin-top:5px;color:rgba(255,255,255,.62);
  font-size:9px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
}

/* ----------------------------------------------------------- geometry */
/* The prototype's `.cl-wrap` is 1280 max with 28px gutters — 1224 of content at
   1440, the same measure the ported product page uses. Flatsome's shop row is
   1240 wide, so the archive columns get the prototype's box instead. */
.archive.woocommerce .category-page-row,
.post-type-archive-product .category-page-row{
  max-width:1280px;margin-left:auto;margin-right:auto;padding:28px 28px 64px;
}
/* The prototype hangs that 28/64 off `.cl-shop` — the grid that holds both the
   filter panel and the products. Flatsome has no such element: `.shop-container`
   sits inside the large-9 column only, so padding set there spaced the product
   column off the hero and left the filter panel butted straight against it. The
   spacing belongs on the row, which is the element that wraps both columns. */
.archive.woocommerce .shop-container,
.post-type-archive-product .shop-container{padding-top:0;padding-bottom:0;}

/* ------------------------------------------------------------ toolbar */
/* `.cl-toolbar`: count left, sort and the mobile filter trigger right. */
.cl-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--ct-line);
}
.cl-toolbar .woocommerce-result-count{
  margin:0;float:none;font-size:13px;font-weight:700;color:rgba(0,0,0,.66);
  font-variant-numeric:tabular-nums;
}
.cl-tools{display:flex;align-items:center;gap:10px;}
/* Woo's ordering form floats; inside the flex row the float has to go or the
   select drops below the count. */
.cl-toolbar .woocommerce-ordering{margin:0;float:none;}
.cl-toolbar .woocommerce-ordering select,
.cl-toolbar select{
  min-height:44px;height:44px;padding:0 12px;background:#fff;
  border:1px solid var(--ct-line);border-radius:0;box-shadow:none;
  font:inherit;font-size:13px;font-weight:700;color:#0E1013;cursor:pointer;
}
/* `.cl-filter-btn` — Flatsome's own trigger, restyled rather than replaced so
   the off-canvas panel keeps working. */
.cl-toolbar .filter-button,
.cl-toolbar a.toggle-sidebar{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  background:var(--ct-ink);color:#fff;border:0;border-radius:0;
  font:inherit;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}

/* ------------------------------------------------------------ sidebar */
/* `.cl-filters`: a cream panel that tracks the sticky header at 104px. */
/* Flatsome names the panel by id, not class: div.sidebar-inner.col-inner#shop-sidebar */
#shop-sidebar{
  position:sticky;top:104px;
  background:var(--ct-cream);border:1px solid var(--ct-line);
  padding:22px 20px 24px;
}
#shop-sidebar .widget{margin-bottom:0;padding:18px 0 0;border-top:1px solid rgba(0,0,0,.12);margin-top:18px;}
#shop-sidebar .widget:first-child{border-top:0;margin-top:0;padding-top:0;}
/* One HTML widget carries both facet groups, so the rule that separates widgets
   has to separate the groups inside it too. Which group is exempt is settled
   further down, once the panel heading is in the picture. */
#shop-sidebar .cl-fgroup{padding:18px 0 0;border-top:1px solid rgba(0,0,0,.12);margin-top:18px;}
#shop-sidebar .cl-flabel{
  margin:0 0 12px;font-size:11px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ct-red-ink);
}
/* `.cl-clear` — the reset link under a group, drawn as the prototype's button. */
#shop-sidebar .cl-clear{
  display:flex;align-items:center;justify-content:center;
  margin-top:18px;width:100%;min-height:44px;background:#fff;color:#0E1013;
  border:1px solid var(--ct-line);text-decoration:none;
  font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:4px 4px 0 rgba(0,0,0,.10);transition:.2s ease;
}
#shop-sidebar .cl-clear:hover{background:var(--ct-ink);color:#fff;box-shadow:4px 4px 0 var(--ct-red);}
/* `.cl-flabel` */
#shop-sidebar .widget-title,
#shop-sidebar .widget-title span{
  display:block;margin:0 0 12px;
  font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ct-red-ink);
}
/* `.cl-opt` — one row per facet, count pushed to the right rail. */
#shop-sidebar ul{margin:0;padding:0;list-style:none;}
#shop-sidebar li{margin:0;border:0;}
#shop-sidebar li a{
  display:flex;align-items:center;gap:10px;min-height:34px;
  font-size:14px;color:#0E1013;text-decoration:none;
}
#shop-sidebar li a:hover{color:#000;}
#shop-sidebar li .count{
  margin-left:auto;color:rgba(0,0,0,.5);font-size:12px;font-weight:400;
  font-variant-numeric:tabular-nums;background:none;
}
#shop-sidebar li.current-cat > a,
#shop-sidebar li.chosen > a{font-weight:800;color:var(--ct-red-ink);}
/* Woo's price slider inherits the cream surface rather than the white card. */
#shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-range,
#shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-handle{background:var(--ct-red-ink);}
#shop-sidebar .price_slider_wrapper .price_slider_amount .button{
  border-radius:0;background:#fff;color:#0E1013;border:1px solid var(--ct-line);
  font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:4px 4px 0 rgba(0,0,0,.10);
}
#shop-sidebar .price_slider_wrapper .price_slider_amount .button:hover{
  background:var(--ct-ink);color:#fff;box-shadow:4px 4px 0 var(--ct-red);
}
#shop-sidebar .searchform input[type="search"],
#shop-sidebar input[type="search"],
#shop-sidebar input[type="text"]{
  width:100%;min-height:44px;height:44px;padding:0 12px;background:#fff;
  border:1px solid var(--ct-line);border-radius:0;box-shadow:none;
  font:inherit;font-size:14px;color:#0E1013;margin:0;
}

/* --------------------------------------------------------------- grid */
/* `.cl-grid` is an 18px gap. Flatsome's `.row-small` gutter is 10px split
   across the columns, so the difference is made up on the column padding. */
.archive.woocommerce .products.row,
.post-type-archive-product .products.row{margin-left:-9px;margin-right:-9px;}
.archive.woocommerce .products.row > .product-small,
.post-type-archive-product .products.row > .product-small{padding:0 9px 18px;}

/* `.cl-card` */
.archive.woocommerce .product-small .col-inner,
.post-type-archive-product .product-small .col-inner{
  position:relative;height:100%;
  background:#fff;border:1px solid var(--ct-line);
  box-shadow:4px 4px 0 rgba(0,0,0,.10);
  transition:box-shadow .2s ease,transform .2s ease;overflow:hidden;
}
.archive.woocommerce .product-small .col-inner:hover,
.post-type-archive-product .product-small .col-inner:hover{
  box-shadow:4px 4px 0 var(--ct-red);transform:translateY(-2px);
}
/* `.cl-corner` — the red notch. An ::after keeps it out of the markup, which
   the UX Builder block would otherwise have to carry. */
.archive.woocommerce .product-small .col-inner::after,
.post-type-archive-product .product-small .col-inner::after{
  content:"";position:absolute;top:0;right:0;width:14px;height:14px;
  background:var(--ct-red);z-index:3;pointer-events:none;
}

/* `.cl-media` — 4/5 crop on a warm placeholder, so a portrait and a square
   photograph occupy the same box. */
.archive.woocommerce .product-small .box-image,
.post-type-archive-product .product-small .box-image{
  position:relative;aspect-ratio:4/5;background:#EFE9DF;overflow:hidden;
}
.archive.woocommerce .product-small .box-image img,
.post-type-archive-product .product-small .box-image img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* The prototype card is photograph, eyebrow, name, price — nothing else. The
   hover overlays Flatsome paints over the image (quick view bar, wishlist and
   compare chips) have no counterpart, and the quick-view bar in particular
   covers the lower fifth of the photograph in solid red. */
.archive.woocommerce .product-small .image-tools,
.post-type-archive-product .product-small .image-tools{display:none;}

/* `.cl-info` */
.archive.woocommerce .product-small .box-text,
.post-type-archive-product .product-small .box-text{
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;text-align:left;
}
/* The prototype's `.cl-info` holds the eyebrow, the name and the price as three
   flex children, so its 6px gap falls between all of them. Flatsome nests the
   first two inside `.title-wrapper` and the price inside `.price-wrapper`, which
   left the gap separating only those two boxes — the eyebrow sat flush against
   the name, with the whole 6px showing up above the price instead.
   The step inside `.title-wrapper` is a margin on the name, not a second flex
   gap: a flex item has its display blockified, which would throw away the
   `-webkit-box` the line clamp below depends on. The wrappers stay plain
   blocks. */
.archive.woocommerce .product-small .box-text > .title-wrapper,
.archive.woocommerce .product-small .box-text > .price-wrapper,
.post-type-archive-product .product-small .box-text > .title-wrapper,
.post-type-archive-product .product-small .box-text > .price-wrapper{
  margin:0;
}
/* `.cl-collection` — Flatsome prints the category line when product_box_category
   is on. */
.archive.woocommerce .product-small .category,
.post-type-archive-product .product-small .category{
  margin:0;color:var(--ct-red-ink);font-size:10px;font-weight:900;
  letter-spacing:.2em;text-transform:uppercase;
}
/* `.cl-name` */
.archive.woocommerce .product-small .product-title,
.archive.woocommerce .product-small .product-title a,
.post-type-archive-product .product-small .product-title,
.post-type-archive-product .product-small .product-title a{
  margin:0;color:#0E1013;font-size:14px;font-weight:800;line-height:1.35;letter-spacing:-.01em;
}
/* Two lines, then an ellipsis.
   The prototype was drawn against names like "Majin Buu Shirt"; the catalogue
   carries the full SEO name, which is near a hundred characters and ran to five
   lines here. That tripled the height of the text block and, across a filled
   row, left every card a different height. The clamp is display-only — the
   markup still carries the whole name, so search engines and the title
   attribute are unaffected. No min-height is reserved: the prototype lets a
   two-line name push its own price down rather than padding the short ones. */
.archive.woocommerce .product-small .product-title,
.post-type-archive-product .product-small .product-title{
  margin:6px 0 0;
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
/* The link has to be inline for that clamp to do anything. Flatsome renders it
   as an inline-block, which gives the `-webkit-box` one box child rather than
   line boxes — a clamp that counts lines then has nothing to count, and the
   name kept its full height with the clamp declared and silently ignored. */
.archive.woocommerce .product-small .product-title a,
.post-type-archive-product .product-small .product-title a{display:inline;}
/* `.cl-price` */
.archive.woocommerce .product-small .price,
.archive.woocommerce .product-small .price .woocommerce-Price-amount,
.post-type-archive-product .product-small .price,
.post-type-archive-product .product-small .price .woocommerce-Price-amount{
  margin:0;color:#0E1013;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;
}
.archive.woocommerce .product-small .price del,
.post-type-archive-product .product-small .price del{color:rgba(0,0,0,.45);font-weight:700;font-size:13px;}
.archive.woocommerce .product-small .price ins,
.post-type-archive-product .product-small .price ins{text-decoration:none;color:var(--ct-red-ink);}

/* --------------------------------------------------------- pagination */
/* The prototype ends the grid on a solid red "Load more". Woo paginates instead
   of loading in place, so the same weight is given to the page links. */
.archive.woocommerce .woocommerce-pagination,
.post-type-archive-product .woocommerce-pagination{padding:30px 0 0;}
.archive.woocommerce .page-numbers li a,
.archive.woocommerce .page-numbers li span,
.post-type-archive-product .page-numbers li a,
.post-type-archive-product .page-numbers li span{
  border-radius:0;min-width:44px;min-height:44px;line-height:44px;
  font-size:13px;font-weight:900;letter-spacing:.06em;
  border:1px solid var(--ct-line);color:#0E1013;
}
.archive.woocommerce .page-numbers li .current,
.post-type-archive-product .page-numbers li .current{
  background:var(--ct-red-ink);border-color:var(--ct-red-ink);color:#fff;
}

/* ------------------------------------------------------------- states */
:where(.archive.woocommerce,.post-type-archive-product) :focus-visible{
  outline:3px solid var(--ct-red-ink);outline-offset:3px;
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1024px){
  #shop-sidebar{position:static;}
}
@media (max-width:620px){
  .cl-hero{min-height:clamp(220px,54vw,270px);}
  .cl-hero-inner{padding:24px 16px 20px;}
  .cl-crumb{padding-bottom:14px;font-size:10px;}
  .cl-intro{display:none;}
  .cl-stat{padding-right:16px;margin-right:16px;}
  .archive.woocommerce .category-page-row,
  .post-type-archive-product .category-page-row{padding:24px 16px 48px;}
}

/* ==========================================================================
   Corrections from the first measured pass on the live archive
   ========================================================================== */

/* Flatsome sets `text-transform:none` on `.breadcrumbs`, which outranks the
   inherited uppercase on `.cl-crumb`. */
.cl-crumb,
.cl-crumb .breadcrumbs,
.cl-crumb .woocommerce-breadcrumb{text-transform:uppercase;}

/* The "from" stat carries cents. Flatsome styles the currency symbol as a small
   grey superscript and Woo wraps the amount in its own element — between them
   the `$` broke onto its own line above the figure. Both are pulled back inline
   and onto the stat's own colour. */
.cl-stat b .woocommerce-Price-amount{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit;}
.cl-stat b .woocommerce-Price-currencySymbol{
  display:inline;font-size:inherit;font-weight:inherit;
  vertical-align:baseline;color:inherit;opacity:1;
}

/* Column measure: the prototype's `.cl-shop` is `268px 1fr` with a 34px gap.
   Flatsome's large-3 / large-9 split gives 276 and a 30px gutter, and each `.col`
   carries 15px of its own padding — which pushed the panel 15px inside the page
   gutter instead of flush with it. The padding is dropped and the 34px gap put
   on the content column, so the panel's left edge lands on the same 101px the
   hero title uses. */
@media (min-width:850px){
  .archive.woocommerce .category-page-row > .col.large-3,
  .post-type-archive-product .category-page-row > .col.large-3{
    flex:0 0 268px;max-width:268px;padding-left:0;padding-right:0;
  }
  .archive.woocommerce .category-page-row > .col.large-9,
  .post-type-archive-product .category-page-row > .col.large-9{
    flex:1 1 auto;max-width:calc(100% - 268px);padding-left:34px;padding-right:0;
  }
}

/* `.cl-filters` has a heading and a rule between groups, not Flatsome's short
   centred divider under every widget title. */
#shop-sidebar .is-divider{display:none;}
#shop-sidebar .widget-title,
#shop-sidebar .widget-title span{text-align:left;}

/* FiboSearch draws its submit glyph inside the field at the left edge of the
   input's own padding box; with the prototype's flat 12px padding the icon and
   the placeholder land on the same pixels. */
#shop-sidebar .dgwt-wcas-search-wrapp{max-width:100%;}
#shop-sidebar .dgwt-wcas-search-input{padding-left:12px;padding-right:46px;}
#shop-sidebar .dgwt-wcas-search-submit{
  right:0;left:auto;width:44px;height:44px;border-radius:0;
  background:transparent;color:#0E1013;
}

/* Flatsome pads the currency symbol away from the figure, which reads as a gap
   at the stat's 32px. The facet rows print a price through the same helper and
   inherited its heavier weight. */
.cl-stat b .woocommerce-Price-currencySymbol{margin:0;padding:0;}
#shop-sidebar .cl-fgroup .woocommerce-Price-amount,
#shop-sidebar .cl-fgroup .woocommerce-Price-currencySymbol{
  font-size:inherit;font-weight:inherit;color:inherit;margin:0;padding:0;
  vertical-align:baseline;
}

/* ==========================================================================
   Second measured pass — every remaining difference against collection.html
   at 1440, read off getComputedStyle rather than judged by eye.
   ========================================================================== */

/* The display title came out in Barlow Condensed: Flatsome's `type_headings`
   applies to every h1, and the prototype's `.cl-title` is Inter. The whole hero
   is pinned to the one family so a later customizer change cannot move it.
   Weight stays 900 — the loaded Inter tops out there, where the prototype
   rendered 950 synthetically. */
.cl-hero,
.cl-hero .cl-title,
.cl-hero .cl-kicker,
.cl-hero .cl-intro,
.cl-crumb,
.cl-stat b,
.cl-stat span{font-family:Inter,sans-serif;}

/* Flatsome sets its own line-height on headings, links and small text. The
   prototype's hero runs on `normal` throughout, which is what puts the stats
   bar and the kicker at the heights measured against it. */
.cl-hero .cl-title,
.cl-hero .cl-kicker,
.cl-crumb,
.cl-crumb a,
.cl-stat b,
.cl-stat span{line-height:normal;}
.cl-hero .cl-title{line-height:.88;}
.cl-hero .cl-intro{line-height:1.6;}

/* `.cl-crumb a` is 700 in the prototype; Flatsome's breadcrumb link is 400. */
.cl-crumb a,
.cl-crumb .breadcrumbs a{font-weight:700;}

/* ---------------------------------------------------- filter panel heading */
/* `.cl-filters h2` — 13px/900 ink, 4px under it, above the first group. */
.cl-filters-title{
  margin:0 0 4px;font-family:Inter,sans-serif;font-size:13px;font-weight:900;
  line-height:normal;letter-spacing:.18em;text-transform:uppercase;color:#0E1013;
}
/* With the heading in place the first widget is no longer the first child. */
#shop-sidebar .widget:first-of-type{border-top:0;margin-top:14px;padding-top:0;}

/* -------------------------------------------------------- facet checkboxes */
/* `.cl-opt input` — 17px, red when on. These rows are links, so the control is
   drawn; `aria-current` on the anchor is what actually carries the state. */
#shop-sidebar .cl-fgroup li a{line-height:normal;font-weight:400;}
#shop-sidebar .cl-box{
  flex:none;width:17px;height:17px;background:#fff;
  border:1px solid rgba(0,0,0,.35);
}
#shop-sidebar .cl-fgroup li.current-cat > a{font-weight:400;color:#0E1013;}
#shop-sidebar .cl-fgroup li.current-cat .cl-box{
  background:var(--ct-red-ink);border-color:var(--ct-red-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size:13px 13px;background-position:center;background-repeat:no-repeat;
}
#shop-sidebar .cl-fgroup li .count{line-height:normal;font-weight:400;}
#shop-sidebar .cl-clear{line-height:normal;}

/* ------------------------------------------------------------- toolbar row */
/* `.cl-count-live` — 13px/700, the figure itself in ink. */
.cl-toolbar .cl-count-live{
  margin:0;font-size:13px;font-weight:700;line-height:normal;
  color:rgba(0,0,0,.66);font-variant-numeric:tabular-nums;
}
.cl-toolbar .cl-count-live b{color:#0E1013;font-weight:700;}
/* The select carried 5px of vertical margin, which made the row 71px against
   the prototype's 63. The 22px below the rule belongs to the grid, not here. */
.cl-toolbar{margin-bottom:0;}
.cl-toolbar .woocommerce-ordering select,
.cl-toolbar select{margin:0;line-height:normal;display:block;}
.archive.woocommerce .products.row,
.post-type-archive-product .products.row{padding-top:22px;}

/* ---------------------------------------------- third pass, measured again */

/* `.cl-stat b` is `line-height:1` in the prototype — 32px on a 32px figure.
   The blanket `line-height:normal` above overshot it and made the stats bar
   72px against the prototype's 65. */
.cl-stat b{line-height:1;}

/* Every facet group carries the same rule above it, including the first — the
   heading sits outside the groups, so exempting the first left the panel with
   a heading and then nothing separating it from Search. */
#shop-sidebar .widget,
#shop-sidebar .cl-fgroup{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(0,0,0,.12);
}
#shop-sidebar .widget:first-of-type .cl-fgroup:first-child{
  margin-top:0;padding-top:0;border-top:0;
}
/* Group labels run on `normal`, like the rest of the panel. */
#shop-sidebar .cl-flabel,
#shop-sidebar .widget-title,
#shop-sidebar .widget-title span{line-height:normal;}

/* FiboSearch wraps its form in a padded box, which inset the field 4px from the
   panel's own 20px gutter. */
#shop-sidebar .dgwt-wcas-search-wrapp,
#shop-sidebar .dgwt-wcas-search-form,
#shop-sidebar .dgwt-wcas-sf-wrapp{padding:0;margin:0;border:0;}
#shop-sidebar .dgwt-wcas-search-input{line-height:normal;}

/* Card parity: the prototype's card is a flex column and its media box is sized
   by `aspect-ratio`. Flatsome adds a padding-top spacer for the same job, which
   is redundant once the ratio is set. */
.archive.woocommerce .product-small .col-inner,
.post-type-archive-product .product-small .col-inner{display:flex;flex-direction:column;}
.archive.woocommerce .product-small .box-image,
.post-type-archive-product .product-small .box-image{padding-top:0;}

/* ---------------------------------------------- fourth pass, measured again */

/* The "from" stat stood 39px against the other two at 32, which stretched every
   stat cell and pushed the whole bottom-aligned hero up 7px. `wc_price` nests
   the figure in its own elements and they carried Flatsome's line-height
   through the `line-height:1` set on the `<b>`. */
.cl-stat b,
.cl-stat b *{line-height:1;}

/* The search field measured 230 inside a 226 panel: FiboSearch sizes the input
   in the content box, so its border sat outside the width. */
#shop-sidebar .dgwt-wcas-search-input{box-sizing:border-box;}

/* The card's eyebrow and price run on `normal` in the prototype; Flatsome pins
   both to their own font size, which changes where the price sits in the info
   block. */
.archive.woocommerce .product-small .category,
.archive.woocommerce .product-small .price,
.post-type-archive-product .product-small .category,
.post-type-archive-product .product-small .price{line-height:normal;}

/* The facet widget draws no rule of its own: its groups each carry one, and the
   two together printed a double separator under the search field. */
#shop-sidebar .widget_custom_html{margin-top:0;padding-top:0;border-top:0;}

/* FiboSearch sizes its input in the content box and re-applies the width from
   its own stylesheet, so the border sat 4px outside the panel's gutter. */
#shop-sidebar .dgwt-wcas-search-input[type="search"]{box-sizing:border-box;width:100%;}

/* FiboSearch puts `min-width:230px` on its wrapper, which is wider than this
   panel's 226px gutter — so the field overhung the cream card by 4px, and
   `width:100%` could not pull it back because the minimum outranks it. */
#shop-sidebar .dgwt-wcas-search-wrapp,
#shop-sidebar .dgwt-wcas-search-form,
#shop-sidebar .dgwt-wcas-sf-wrapp{width:100%;max-width:100%;min-width:0;}