/*
Theme Name: Mobioko
Theme URI: https://srv1978042.hstgr.cloud/
Description: Child theme of Blocksy for the Mobioko store. Custom styles and functions live here so the parent theme stays update-safe.
Author: Mobioko
Template: blocksy
Version: 1.0.6
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mobioko
Tags: e-commerce, custom-colors, custom-logo, custom-menu, translation-ready
*/

/* ==========================================================================
   Moved out of the Customizer on 2026-09-17.
   Previously stored in the database as custom CSS post #13,
   which is left in place as a rollback copy.
   ========================================================================== */

/* ==========================================================================
   MOBIOKO — design system
   One source of truth. Tokens first, then components.
   ========================================================================== */

:root{
  /* brand */
  --mob-accent:#1B6FD6;
  --mob-accent-600:#155BB0;
  --mob-accent-700:#11488B;
  --mob-accent-soft:#EAF2FC;

  /* neutrals */
  --mob-ink:#0E1A26;
  --mob-ink-2:#33465A;
  --mob-muted:#6B7C8F;
  --mob-line:#E4E9F0;
  --mob-line-2:#EFF3F8;
  --mob-bg:#FFFFFF;
  --mob-bg-soft:#F6F8FB;

  /* status */
  --mob-ok:#12805C;

  /* shape */
  --mob-r-card:16px;
  --mob-r-btn:10px;
  --mob-r-pill:8px;

  /* elevation — soft, never blurry blobs */
  --mob-sh-1:0 1px 2px rgba(14,26,38,.05);
  --mob-sh-2:0 6px 18px rgba(14,26,38,.07);
  --mob-sh-3:0 14px 34px rgba(14,26,38,.10);

  /* rhythm */
  --mob-section:clamp(56px,6.4vw,92px);
  --mob-gap:clamp(16px,1.6vw,24px);

  /* type */
  --mob-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --theme-container-max-width:1280px;
  --theme-content-spacing:1.3em;
}

/* container width for the whole theme */
.ct-container,.ct-container-narrow,.ct-container[class*="ct-container"]{
  --container-width:1280px;
  max-width:1280px;
}

body{
  font-family:var(--mob-font);
  color:var(--mob-ink-2);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.entry-title{color:var(--mob-ink);letter-spacing:-.015em}
h1{font-size:clamp(34px,4.2vw,56px);line-height:1.08}
h2{font-size:clamp(26px,2.8vw,38px);line-height:1.18}
h3{font-size:clamp(18px,1.5vw,22px);line-height:1.3}
p{margin:0 0 1em}
a{color:var(--mob-accent);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--mob-accent-600)}
img{max-width:100%;height:auto}

/* accessible focus, everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(27,111,214,.45);outline-offset:2px;border-radius:6px;
}
a,button,[role="button"],summary,label[for]{cursor:pointer}

.mob-ic{width:20px;height:20px;flex:0 0 auto}

/* ==========================================================================
   BUTTONS — one system
   ========================================================================== */

.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce button.single_add_to_cart_button,
.woocommerce #respond input#submit,
.wpforms-submit,
.mob-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--mob-accent);color:#fff!important;border:1px solid var(--mob-accent);
  border-radius:var(--mob-r-btn)!important;
  font-weight:600;font-size:.97rem;line-height:1.2;letter-spacing:.005em;
  padding:.82em 1.5em;min-height:46px;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .15s ease;
  text-decoration:none;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.wpforms-submit:hover,.mob-btn:hover{
  background:var(--mob-accent-600);border-color:var(--mob-accent-600);
  box-shadow:0 6px 16px rgba(27,111,214,.24);transform:translateY(-1px);color:#fff!important;
}
.wp-block-button.is-style-outline>.wp-block-button__link,.mob-btn--ghost{
  background:#fff;color:var(--mob-ink)!important;border:1px solid var(--mob-line);
}
.wp-block-button.is-style-outline>.wp-block-button__link:hover,.mob-btn--ghost:hover{
  background:#fff;color:var(--mob-accent)!important;border-color:var(--mob-accent);
  box-shadow:var(--mob-sh-2);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

header.ct-header{background:#fff;border-bottom:1px solid var(--mob-line)}
.ct-header [data-row="top"]{border-bottom:1px solid var(--mob-line-2);background:var(--mob-bg-soft)}

/* catalog button + search + phone, all in the sticky logo row */
.mob-hrow{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);width:100%;min-width:0}
.mob-hsearch{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}

/* the phone keeps its opening hours: it is a call-to-action, and a number without
   hours invites calls at 22:00 that nobody answers */
.mob-hphone{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  color:var(--mob-ink)!important;white-space:nowrap;
}
.mob-hphone .mob-ic{width:19px;height:19px;color:var(--mob-accent)}
.mob-hphone span{display:flex;flex-direction:column;line-height:1.25}
.mob-hphone b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.mob-hphone i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--mob-muted)}
.mob-hphone:hover{color:var(--mob-accent)!important}
.mob-hphone:hover i{color:var(--mob-accent)}
.mob-catbtn{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:var(--mob-ink);color:#fff!important;border-radius:var(--mob-r-btn);
  padding:0 18px;height:46px;font-weight:600;font-size:.94rem;
  transition:background .18s ease;
}
.mob-catbtn:hover{background:var(--mob-accent)}
.mob-catbtn .mob-ic{width:17px;height:17px}

.mob-searchform{
  position:relative;display:flex;align-items:center;flex:1 1 auto;
  background:#fff;border:1px solid var(--mob-line);border-radius:var(--mob-r-btn);
  height:46px;transition:border-color .18s ease,box-shadow .18s ease;
}
.mob-searchform:focus-within{border-color:var(--mob-accent);box-shadow:0 0 0 3px rgba(27,111,214,.13)}
.mob-searchform>.mob-ic{position:absolute;left:13px;color:var(--mob-muted);width:18px;height:18px}
.mob-searchform input[type="search"]{
  flex:1 1 auto;border:0;background:transparent;height:44px;
  padding:0 8px 0 40px;font:inherit;font-size:.94rem;color:var(--mob-ink);min-width:0;
}
.mob-searchform input[type="search"]:focus{outline:none}
.mob-searchform input::placeholder{color:#9AA8B8}
.mob-searchform button{
  flex:0 0 auto;border:0;background:var(--mob-accent);color:#fff;font:inherit;font-weight:600;
  font-size:.92rem;height:38px;margin-right:4px;padding:0 18px;border-radius:7px;
  transition:background .18s ease;
}
.mob-searchform button:hover{background:var(--mob-accent-600)}

/* ==========================================================================
   SECTION PRIMITIVES
   A section is announced by one line: name on the left, the way out on the
   right, a hairline under it. No stacked marketing subtitle.
   ========================================================================== */

.mob-sec{padding-block:clamp(44px,4.6vw,68px)}
.mob-sec--soft{background:var(--mob-bg-soft)}
.mob-sec--tight{padding-block:clamp(28px,3vw,40px)}

.mob-sechead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:14px;margin-bottom:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--mob-line);
}
.mob-sechead h2{
  margin:0;font-size:clamp(21px,1.9vw,27px);line-height:1.2;
  font-weight:500;color:var(--mob-ink-2);letter-spacing:-.01em;
}
.mob-sechead h2 b{font-weight:700;color:var(--mob-ink)}
.mob-sechead p{display:none}
.mob-sechead__link{
  font-size:14px;font-weight:600;color:var(--mob-accent);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;padding-bottom:2px;
}
.mob-sechead__link .mob-ic{width:16px;height:16px;transition:transform .2s ease}
.mob-sechead__link:hover{color:var(--mob-accent-600)}
.mob-sechead__link:hover .mob-ic{transform:translateX(3px)}

.mob-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mob-muted);margin-bottom:14px;
}
.mob-lead{font-size:clamp(15.5px,1.05vw,17px);color:var(--mob-ink-2);max-width:52ch}

/* ==========================================================================
   HERO
   Flat, product-led. The headline names what is sold, the numbers under it are
   read from the catalogue, and the picture is four real photographs.
   ========================================================================== */

.mob-hero{background:#fff;border-bottom:1px solid var(--mob-line)}
.mob-hero__inner{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:center;
  padding-block:clamp(34px,4.2vw,58px);
}
.mob-hero h1{
  margin:0 0 .55em;font-size:clamp(30px,3.3vw,44px);line-height:1.14;
  font-weight:500;color:var(--mob-ink-2);
}
.mob-hero h1 b{font-weight:700;color:var(--mob-ink)}
.mob-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:26px 0 22px}
.mob-hero__cta .mob-link{
  font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;
}
.mob-hero__cta .mob-link .mob-ic{width:16px;height:16px;transition:transform .2s ease}
.mob-hero__cta .mob-link:hover .mob-ic{transform:translateX(3px)}

/* measured facts, not slogans */
.mob-facts{
  display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:0;padding:0;
  font-size:13.5px;color:var(--mob-muted);
}
.mob-facts li{display:flex;align-items:center}
.mob-facts li+li::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.55;margin:0 12px;
}

/* four real photographs sharing one hairline grid */
.mob-mosaic{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--mob-line);border-radius:14px;overflow:hidden;background:#fff;
}
.mob-mosaic__cell{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:10px;padding:20px 16px 14px;min-height:0;
  border-right:1px solid var(--mob-line);border-bottom:1px solid var(--mob-line);
  transition:background .2s ease;
}
.mob-mosaic__cell:nth-child(2n){border-right:0}
.mob-mosaic__cell:nth-last-child(-n+2){border-bottom:0}
.mob-mosaic__cell:hover{background:var(--mob-bg-soft)}
.mob-mosaic__cell img{
  width:100%;max-width:190px;aspect-ratio:1;object-fit:contain;
  transition:transform .3s ease;
}
.mob-mosaic__cell:hover img{transform:scale(1.04)}
.mob-mosaic__cell span{
  font-size:13px;font-weight:600;color:var(--mob-ink);letter-spacing:.01em;
}

/* ==========================================================================
   TASK STRIP
   Routing by problem. One bordered strip with hairline dividers — on purpose
   not a fourth grid of cards, and with no decorative icons at all.
   ========================================================================== */

.mob-tasks{
  display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid var(--mob-line);border-radius:14px;background:#fff;overflow:hidden;
}
.mob-task{
  display:block;padding:20px 22px 22px;
  border-right:1px solid var(--mob-line);
  transition:background .18s ease;
}
.mob-task:last-child{border-right:0}
.mob-task:hover{background:var(--mob-bg-soft)}
.mob-task strong{
  display:block;color:var(--mob-ink);font-size:15px;font-weight:600;
  line-height:1.32;margin-bottom:6px;transition:color .18s ease;
}
.mob-task:hover strong{color:var(--mob-accent)}
.mob-task em{
  display:block;font-style:normal;font-size:13.2px;color:var(--mob-muted);line-height:1.5;
}

/* ==========================================================================
   CATEGORY GRID
   Photograph, name, count. Nothing else — no icon badge, no arrow glyph.
   ========================================================================== */

.mob-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mob-cat{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--mob-line);border-radius:12px;
  transition:border-color .2s ease;
}
.mob-cat:hover{border-color:var(--mob-ink-2)}
.mob-cat__media{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;padding:18px;overflow:hidden;
}
.mob-cat__media img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .3s ease}
.mob-cat:hover .mob-cat__media img{transform:scale(1.05)}
.mob-cat__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:13px 15px 15px;border-top:1px solid var(--mob-line-2);
}
.mob-cat__name{color:var(--mob-ink);font-weight:600;font-size:14.5px;line-height:1.3}
.mob-cat__meta{color:var(--mob-muted);font-size:13px;font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ==========================================================================
   PRODUCT RAIL — a scrollable row, so the page is not four stacked grids
   ========================================================================== */

.mob-rail__track{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block:4px;
}
.mob-rail__track::-webkit-scrollbar{display:none}
.mob-rail__track .woocommerce{width:max-content;min-width:100%}
.mob-rail__track .woocommerce ul.products{
  display:flex!important;grid-template-columns:none!important;
  gap:20px!important;margin:0!important;padding:0!important;list-style:none;
}
.mob-rail__track .woocommerce ul.products::before,
.mob-rail__track .woocommerce ul.products::after{display:none!important}
.mob-rail__track .woocommerce ul.products li.product{
  flex:0 0 262px!important;width:262px!important;max-width:262px!important;
  margin:0!important;scroll-snap-align:start;
}
/* arrows live in the section header, beside the catalogue link */
.mob-sechead__tools{display:flex;align-items:center;gap:8px}
.mob-sechead__tools .mob-sechead__link{margin-right:6px}
.mob-rail__nav{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:#fff;border:1px solid var(--mob-line);color:var(--mob-ink);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:border-color .18s ease,background .18s ease,opacity .18s ease;
}
.mob-rail__nav .mob-ic{width:17px;height:17px}
.mob-rail__nav:hover:not(:disabled){border-color:var(--mob-ink-2);background:var(--mob-bg-soft)}
.mob-rail__nav:disabled{opacity:.32;cursor:default}
.mob-rail__nav.is-prev .mob-ic{transform:rotate(180deg)}
.mob-rail.is-static .mob-rail__nav{display:none}

/* ==========================================================================
   PRODUCT CARDS  (archives, home, related)
   ========================================================================== */

.woocommerce ul.products{align-items:stretch}
.woocommerce ul.products li.product{
  display:flex!important;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--mob-line);border-radius:var(--mob-r-card);
  padding:14px;box-shadow:var(--mob-sh-1);
  transition:border-color .2s ease,box-shadow .2s ease,transform .18s ease;
}
.woocommerce ul.products li.product:hover{
  border-color:#C9D8EC;box-shadow:var(--mob-sh-2);transform:translateY(-3px);
}
.woocommerce ul.products li.product a.ct-media-container,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link>figure{
  display:block!important;position:relative;width:100%;
  aspect-ratio:1/1!important;height:auto!important;padding:0!important;
  background:#fff;border:1px solid var(--mob-line-2);border-radius:12px;overflow:hidden;
}
.woocommerce ul.products li.product a.ct-media-container img,
.woocommerce ul.products li.product img.wp-post-image,
.woocommerce ul.products li.product figure img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  aspect-ratio:auto!important;object-fit:contain!important;object-position:center;
  padding:12px;margin:0!important;background:#fff;transition:transform .3s ease;
}
.woocommerce ul.products li.product:hover a.ct-media-container img{transform:scale(1.04)}

.mob-card-cat{
  display:block;margin:13px 0 5px;
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mob-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.95rem!important;line-height:1.4!important;font-weight:600;color:var(--mob-ink);
  margin:0 0 8px!important;min-height:0!important;
}
.woocommerce ul.products li.product .price{
  display:block;color:var(--mob-ink)!important;font-weight:700!important;
  font-size:1.16rem!important;margin:0 0 7px!important;
}
.mob-card-stock{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:500;margin-bottom:13px;
}
.mob-card-stock.is-in{color:var(--mob-ok)}
.mob-card-stock.is-out{color:var(--mob-muted)}
.mob-card-stock .mob-ic{width:14px;height:14px;stroke-width:2.4}
.woocommerce ul.products li.product .entry-meta{display:none}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart{
  margin-top:auto!important;align-self:stretch;width:100%;
  background:#fff;color:var(--mob-ink)!important;border:1px solid var(--mob-line);
  min-height:42px;font-size:.92rem;
}
.woocommerce ul.products li.product a.button:hover{
  background:var(--mob-accent);color:#fff!important;border-color:var(--mob-accent);
}
.woocommerce ul.products li.product .added_to_cart{margin-top:8px!important;min-height:36px}

/* ==========================================================================
   TRUST LINE — one quiet row of operational facts, no icon panels
   ========================================================================== */

.mob-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;
  list-style:none;margin:0;padding:18px 0;
  border-top:1px solid var(--mob-line);
  font-size:13.6px;color:var(--mob-muted);
}
.mob-trust li{display:flex;align-items:center}
.mob-trust li+li::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.55;margin:0 16px;
}

/* ==========================================================================
   CONSULTATION PANEL — flat dark block, one per page
   ========================================================================== */

.mob-panel{
  background:var(--mob-ink);color:#E7EDF4;border-radius:14px;
  padding:clamp(26px,3.4vw,44px);
  display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,3.5vw,48px);align-items:center;
}
.mob-panel h2{color:#fff;margin:0 0 .45em;font-size:clamp(21px,2vw,28px);font-weight:600}
.mob-panel p{color:#B6C4D4;margin:0 0 1.4em;max-width:52ch;font-size:15px}
.mob-panel .mob-btn--ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.28)}
.mob-panel .mob-btn--ghost:hover{background:rgba(255,255,255,.08);color:#fff!important;border-color:#fff;box-shadow:none}
.mob-panel__phone{
  display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(22px,2.3vw,30px);font-weight:700;color:#fff!important;letter-spacing:-.01em;
}
.mob-panel__phone:hover{color:var(--mob-accent-soft)!important}
.mob-panel__hours{color:#8FA2B6;font-size:13.6px;margin-top:8px;line-height:1.6}
.mob-panel__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ct-footer [data-row="middle"]{border-top:0}
.ct-footer .wp-block-heading{
  color:#fff!important;font-size:14px!important;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px!important;
}
.ct-footer .wp-block-list{list-style:none;margin:0;padding:0}
.ct-footer .wp-block-list li{margin:0 0 10px}
.ct-footer a{color:rgba(255,255,255,.66)}
.ct-footer a:hover{color:#fff}
.ct-footer p,.ct-footer li{color:rgba(255,255,255,.66);font-size:14.5px;line-height:1.6}
.ct-footer a[href^="tel:"]{color:#fff;font-weight:700;font-size:1.22rem}
.mob-foot-brand p{max-width:34ch}
.mob-foot-note{
  display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.55);font-size:13.5px;margin-top:14px;
}
.mob-foot-note .mob-ic{width:16px;height:16px;color:rgba(255,255,255,.5)}

/* ==========================================================================
   BLOG CARDS
   ========================================================================== */

article.post.entry-card{
  display:flex!important;flex-direction:column;height:100%;overflow:hidden;
  background:#fff;border:1px solid var(--mob-line);border-radius:var(--mob-r-card);
  box-shadow:var(--mob-sh-1);transition:box-shadow .2s ease,transform .18s ease;
}
article.post.entry-card:hover{box-shadow:var(--mob-sh-2);transform:translateY(-3px)}
article.post.entry-card .ct-media-container,article.post.entry-card figure{
  aspect-ratio:16/10!important;width:100%;overflow:hidden;background:var(--mob-bg-soft);margin:0;
}
article.post.entry-card .ct-media-container img,article.post.entry-card figure img{
  width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;
}
article.post.entry-card .entry-title{font-size:1.05rem!important;line-height:1.34}
article.post.entry-card .entry-button,article.post.entry-card .button{margin-top:auto!important}

/* ==========================================================================
   CONTENT / SPACING
   ========================================================================== */

/* vertical rhythm around the content column */
main#main,.site-main{padding-bottom:clamp(56px,6.5vw,88px)}

/* pages that have no Blocksy title/hero section sit flush under the header — give them air */
body:not(.home) main#main:not(:has(.hero-section)),
body:not(.home) .site-main:not(:has(.hero-section)){
  padding-top:clamp(36px,4.5vw,60px);
}

/* the front page manages its own section spacing */
.home main#main,.home .site-main{padding-block:0}
.home .entry-content>*{margin-block:0}
.entry-content .wp-block-separator{border-color:var(--mob-line);opacity:1;max-width:120px;margin:2.6rem auto}
.wp-block-table table{border-collapse:separate;border-spacing:0;width:100%}
.wp-block-table th{background:var(--mob-bg-soft);color:var(--mob-ink);font-weight:600;text-align:left}
.wp-block-table th,.wp-block-table td{border:1px solid var(--mob-line);padding:11px 14px;font-size:15px}
.woocommerce-pagination{margin-bottom:3rem}

/* sticky bottom bar — mobile only */
.mob-bottombar{display:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1200px){
  .mob-task{padding:18px 16px 20px}
  .mob-hsearch{max-width:460px}
}

@media (max-width:1024px){
  .mob-hero__inner{grid-template-columns:1fr;gap:32px}
  .mob-hero__visual{order:2}
  .mob-mosaic{max-width:560px}
  .mob-cats{grid-template-columns:repeat(3,1fr)}
  .mob-tasks{grid-template-columns:1fr}
  .mob-task{border-right:0;border-bottom:1px solid var(--mob-line)}
  .mob-task:last-child{border-bottom:0}
  .mob-panel{grid-template-columns:1fr;text-align:left}
}

@media (max-width:860px){
  .mob-cats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:600px){
  body{font-size:16px}
  .mob-hero__inner{padding-block:28px 34px}
  .mob-hero__cta{gap:10px;margin:22px 0 20px}
  .mob-hero__cta .mob-btn{flex:1 1 100%}
  .mob-facts,.mob-trust{flex-direction:column;align-items:flex-start;gap:7px}
  .mob-facts li+li::before,.mob-trust li+li::before{display:none}
  .mob-mosaic__cell{padding:14px 10px 12px}
  .mob-mosaic__cell img{max-width:150px}
  .mob-mosaic__cell span{font-size:12.5px}
  .mob-task{padding:15px 16px 17px}
  .mob-cat__media{padding:12px}
  .mob-cat__foot{padding:11px 12px 12px}
  .mob-cat__name{font-size:13.8px}
  .mob-rail__track .woocommerce ul.products{gap:14px!important}
  .mob-rail__track .woocommerce ul.products li.product{flex:0 0 216px!important;width:216px!important;max-width:216px!important}
  .mob-rail__nav{display:none}
  .mob-sechead{align-items:center}
  .mob-panel{border-radius:14px}
  .mob-panel__actions .mob-btn{flex:1 1 100%}

  /* room for the sticky bar */
  body{padding-bottom:62px}
  .mob-bottombar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid var(--mob-line);
    box-shadow:0 -2px 14px rgba(14,26,38,.08);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mob-bottombar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:56px;font-size:11px;font-weight:500;color:var(--mob-ink-2);
  }
  .mob-bottombar a.is-accent{color:var(--mob-accent)}
  .mob-bottombar .mob-ic{width:21px;height:21px}
}

@media (max-width:420px){
  .mob-mosaic__cell img{max-width:120px}
  .woocommerce ul.products li.product{padding:10px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.88rem!important}
}

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

/* the service bar is gone: the phone moved into the sticky logo row, and the page
   links keep their own row under it */

/* ==========================================================================
   LAYOUT FIXES — full-bleed sections + header grid
   ========================================================================== */

html{overflow-x:clip}
body{overflow-x:clip}

/* the home sections live inside the theme content column; let them span the viewport */
.mob-hero,.mob-sec,
.entry-content>.mob-hero,.entry-content>.mob-sec,
.is-layout-constrained>.mob-hero,.is-layout-constrained>.mob-sec{
  position:relative;
  width:auto!important;
  max-width:none!important;
  margin-inline:calc(50% - 50vw)!important;
}

/* give the search the room it needs in the header grid */
.ct-header [data-row="middle"][data-column-set="3"]>.ct-container{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:clamp(14px,1.4vw,22px)!important;
  align-items:center;
}
.ct-header [data-row="middle"] [data-column="middle"]{
  flex:1 1 auto;width:100%;justify-self:stretch;
}
.ct-header [data-row="middle"] [data-column="middle"]{min-width:0}
.ct-header [data-row="middle"] [data-column="middle"] [data-items]{width:100%;justify-content:stretch}
.ct-header-text[data-width="stretch"]{width:100%}
.ct-header-text .entry-content{width:100%}
.mob-hsearch{max-width:none}

/* header rows sit tight */
.ct-header [data-row="middle"] .ct-container{min-height:74px}

@media (max-width:1180px){
  .mob-hphone i{display:none}
  .mob-hphone b{font-size:14.5px}
}
@media (max-width:1040px){
  .mob-hphone{display:none}
}
@media (max-width:999px){
  .ct-header [data-row="middle"][data-column-set="3"]>.ct-container{
    grid-template-columns:auto 1fr auto;
  }
}

/* ==========================================================================
   POLISH
   ========================================================================== */

/* product titles read as text, not as links */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a{
  color:var(--mob-ink)!important;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a{color:var(--mob-accent)!important}

/* stock line sits under the price */
.mob-card-stock{margin:0 0 13px}

/* footer breathes, but not 120px of it */
.ct-footer [data-row="middle"] .ct-container{padding-block:clamp(38px,4.4vw,60px)!important}
.ct-footer [data-row="bottom"] .ct-container{padding-block:18px!important}
.ct-footer{border-top:1px solid rgba(255,255,255,.06)}

/* card follows natural DOM order; only the CTA is pinned to the bottom */
.woocommerce ul.products li.product>*{order:initial}

/* ==========================================================================
   MOBILE FIXES
   ========================================================================== */

@media (max-width:600px){
  /* two product columns, as an ecommerce grid should be */
  .woocommerce ul.products{
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px!important;
  }
  .woocommerce ul.products li.product{padding:9px}
  .woocommerce ul.products li.product .mob-card-cat{font-size:10.5px;margin-top:10px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:.84rem!important;-webkit-line-clamp:3;
  }
  .woocommerce ul.products li.product .price{font-size:1rem!important}
  .woocommerce ul.products li.product .mob-card-stock{font-size:11px;margin-bottom:9px}
  .woocommerce ul.products li.product a.button{font-size:.8rem;min-height:40px;padding:.6em .6em}
  .woocommerce ul.products li.product a.ct-media-container img{padding:7px}

  /* comfortable tap targets */
  .ct-header .site-logo-container{min-height:44px;display:inline-flex;align-items:center}
  .ct-header-search.ct-toggle,
  .ct-header-cart .ct-cart-item,
  .ct-header-trigger{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

@media (max-width:400px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.8rem!important}
  .woocommerce ul.products li.product a.button{font-size:.76rem}
}

/* tablet headline should not collapse to the mobile floor */
@media (min-width:700px) and (max-width:1024px){
  .mob-hero h1{font-size:42px}
}

/* ==========================================================================
   DARK SURFACES — the global link-hover colour must never leak onto them
   ========================================================================== */

/* header dropdown sits on a dark panel: keep text white, show hover as a tint */
.ct-header .sub-menu{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 40px rgba(14,26,38,.28);
  overflow:hidden;
  padding-block:6px;
}
.ct-header .sub-menu .ct-menu-link,
.ct-header .sub-menu a{color:#fff!important}
.ct-header .sub-menu li:hover>.ct-menu-link,
.ct-header .sub-menu li:focus-within>.ct-menu-link,
.ct-header .sub-menu .ct-menu-link:hover,
.ct-header .sub-menu .ct-menu-link:focus-visible,
.ct-header .sub-menu li.current-menu-item>.ct-menu-link{
  color:#fff!important;
  background:rgba(255,255,255,.10);
}
.ct-header .sub-menu .ct-menu-link{
  transition:background .16s ease,color .16s ease;
  border-radius:8px;
  margin-inline:6px;
}

/* offcanvas / mobile menu — same guard */
#offcanvas a:hover,#offcanvas .ct-menu-link:hover,
.ct-panel a:hover,.ct-panel .ct-menu-link:hover{color:#fff!important}

/* dark content panels */
.mob-panel a:hover{color:#fff!important}

/* ==========================================================================
   CATALOG MEGA MENU (header)
   ========================================================================== */

.mob-catmenu{position:relative;flex:0 0 auto}
.mob-catbtn__chev{width:15px;height:15px;opacity:.7;transition:transform .2s ease}
.mob-catmenu:hover .mob-catbtn__chev,
.mob-catmenu:focus-within .mob-catbtn__chev{transform:rotate(180deg)}
.mob-catmenu:hover .mob-catbtn,
.mob-catmenu:focus-within .mob-catbtn{background:var(--mob-accent)}

.mob-catmenu__panel{
  position:absolute;top:calc(100% + 10px);left:0;z-index:70;
  width:min(600px,92vw);
  background:#fff;border:1px solid var(--mob-line);border-radius:16px;
  box-shadow:0 22px 50px rgba(14,26,38,.16);
  padding:12px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* a small bridge so the pointer can travel from button to panel */
.mob-catmenu__panel::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}

.mob-catmenu:hover .mob-catmenu__panel,
.mob-catmenu:focus-within .mob-catmenu__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}

.mob-catmenu__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mob-catmenu__item{
  display:flex;align-items:center;gap:12px;
  padding:9px 10px;border-radius:11px;
  transition:background .15s ease;
}
.mob-catmenu__item:hover,.mob-catmenu__item:focus-visible{background:var(--mob-bg-soft)}
.mob-catmenu__thumb{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:10px;
  background:var(--mob-bg-soft);border:1px solid var(--mob-line-2);overflow:hidden;
}
.mob-catmenu__thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.mob-catmenu__text{display:flex;flex-direction:column;min-width:0}
.mob-catmenu__text strong{
  color:var(--mob-ink);font-size:14px;font-weight:600;line-height:1.28;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mob-catmenu__text em{font-style:normal;font-size:12px;color:var(--mob-muted);margin-top:1px}
.mob-catmenu__item:hover .mob-catmenu__text strong{color:var(--mob-accent)}

.mob-catmenu__all{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:8px;padding:11px;border-radius:11px;
  background:var(--mob-bg-soft);color:var(--mob-ink)!important;
  font-weight:600;font-size:14px;transition:background .15s ease,color .15s ease;
}
.mob-catmenu__all:hover{background:var(--mob-accent);color:#fff!important}
.mob-catmenu__all .mob-ic{width:17px;height:17px}

@media (max-width:1100px){
  .mob-catmenu__panel{width:min(460px,92vw)}
  .mob-catmenu__grid{grid-template-columns:1fr}
}

/* category icons in the mega menu */
.mob-catmenu__thumb{
  background:var(--mob-accent-soft);border-color:transparent;
  color:var(--mob-accent);
}
.mob-catmenu__thumb .mob-ic{width:22px;height:22px;padding:0}
.mob-catmenu__item:hover .mob-catmenu__thumb{background:var(--mob-accent);color:#fff}


/* ==========================================================================
   PAGE HERO (Blocksy hero type-2) — two cases sharing one markup.

   Archives and categories have no featured image: a compact light header,
   matching the static pages. Blog posts render the image behind the same hero,
   so there the text stays white and gets a scrim to sit on. :has() tells them
   apart by the <figure> Blocksy prints for the image.
   ========================================================================== */

/* --- without an image: light, compact ------------------------------------ */

.hero-section[data-type="type-2"]:not(:has(figure)){
  background:#fff!important;
  border-bottom:1px solid var(--mob-line);
  padding-block:24px!important;
}

/* Blocksy floors the inner container at 250px so the dark band had presence.
   On a white header that is just empty space. */
.hero-section[data-type="type-2"]:not(:has(figure))>[class*="ct-container"],
.hero-section[data-type="type-2"]:not(:has(figure)) .entry-header{
  min-height:0!important;
  padding-block:0!important;
  display:block!important;
  text-align:left!important;
}

.hero-section[data-type="type-2"]:not(:has(figure)) .page-title{
  color:var(--mob-ink)!important;
  font-size:clamp(25px,3.2vw,32px)!important;
  line-height:1.2;
  margin:6px 0 0!important;
  text-align:left!important;
}

.hero-section[data-type="type-2"]:not(:has(figure)) .page-description,
.hero-section[data-type="type-2"]:not(:has(figure)) .page-description *,
.hero-section[data-type="type-2"]:not(:has(figure)) p{color:var(--mob-muted)!important}

.hero-section[data-type="type-2"]:not(:has(figure)) .ct-breadcrumbs,
.hero-section[data-type="type-2"]:not(:has(figure)) .ct-breadcrumbs *{color:var(--mob-muted)!important}
.hero-section[data-type="type-2"]:not(:has(figure)) .ct-breadcrumbs a:hover,
.hero-section[data-type="type-2"]:not(:has(figure)) .ct-breadcrumbs a:focus-visible{color:var(--mob-accent)!important}
.hero-section[data-type="type-2"]:not(:has(figure)) .ct-breadcrumbs [aria-current],
.hero-section[data-type="type-2"]:not(:has(figure)) .ct-breadcrumbs span:last-child{color:var(--mob-ink)!important}

.hero-section[data-type="type-2"]:not(:has(figure)) a:not(.ct-breadcrumbs a){color:var(--mob-accent)!important}

.hero-section[data-type="type-2"]:not(:has(figure)) .page-description{
  max-width:70ch;
  margin:8px 0 0!important;
  font-size:15.5px;line-height:1.55;
  text-align:left!important;
}

/* --- with a featured image: white text on a scrim ------------------------ */

.hero-section[data-type="type-2"]:has(figure){
  position:relative;
  background:var(--mob-ink)!important;
}

/* Blocksy already lays its own scrim over the image
   (> figure .ct-media-container:after, rgba(16,20,23,.7)), so no second one
   here — stacking them just drowns the photograph. */

.hero-section[data-type="type-2"]:has(figure) .page-title,
.hero-section[data-type="type-2"]:has(figure) h1{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.hero-section[data-type="type-2"]:has(figure) .page-description,
.hero-section[data-type="type-2"]:has(figure) .page-description *,
.hero-section[data-type="type-2"]:has(figure) p{color:rgba(255,255,255,.88)!important}

/* The meta line was rgba(255,255,255,.5) — under 3:1 even on the scrim. */
.hero-section[data-type="type-2"]:has(figure) .entry-meta,
.hero-section[data-type="type-2"]:has(figure) .entry-meta *,
.hero-section[data-type="type-2"]:has(figure) .ct-meta,
.hero-section[data-type="type-2"]:has(figure) .ct-meta *{color:rgba(255,255,255,.86)!important}

.hero-section[data-type="type-2"]:has(figure) .entry-meta a:hover,
.hero-section[data-type="type-2"]:has(figure) .ct-meta a:hover{color:#fff!important}

.hero-section[data-type="type-2"]:has(figure) .ct-breadcrumbs,
.hero-section[data-type="type-2"]:has(figure) .ct-breadcrumbs *{color:rgba(255,255,255,.8)!important}
.hero-section[data-type="type-2"]:has(figure) .ct-breadcrumbs a:hover{color:#fff!important}

/* ==========================================================================
   OUTLINE BUTTONS — Blocksy fills the background on hover, so the text
   colour must flip with it. Both properties need !important to win the cascade.
   ========================================================================== */

.wp-block-button.is-style-outline>.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent!important;
  background-color:transparent!important;
  color:var(--mob-ink)!important;
  border:1.5px solid var(--mob-line)!important;
}

.wp-block-button.is-style-outline>.wp-block-button__link:hover,
.wp-block-button.is-style-outline>.wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--mob-accent-600)!important;
  background-color:var(--mob-accent-600)!important;
  border-color:var(--mob-accent-600)!important;
  color:#fff!important;            /* 6.0:1 on #155BB0 */
  box-shadow:0 6px 16px rgba(27,111,214,.24);
}

/* same guarantee for my own ghost buttons */
.mob-btn--ghost:hover,.mob-btn--ghost:focus-visible{
  background:var(--mob-accent-600)!important;
  border-color:var(--mob-accent-600)!important;
  color:#fff!important;
}
/* except on the dark panels, where a filled hover would be too heavy */
.mob-panel .mob-btn--ghost:hover,.mob-panel .mob-btn--ghost:focus-visible{
  background:rgba(255,255,255,.12)!important;
  border-color:#fff!important;
  color:#fff!important;
  box-shadow:none;
}

/* ==========================================================================
   PRODUCT CARD CTA — Blocksy wraps the button in .ct-woo-card-actions,
   so the bottom-pinning and the breathing room must live on the wrapper.
   ========================================================================== */

.woocommerce ul.products li.product .ct-woo-card-actions{
  margin-top:auto!important;   /* pin to the bottom, whatever the text length */
  padding-top:16px;            /* never hug the element above it */
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.woocommerce ul.products li.product .ct-woo-card-actions>*{width:100%}

/* the image keeps a clear separation from everything below */
.woocommerce ul.products li.product>figure{margin:0 0 16px!important}

@media (max-width:600px){
  .woocommerce ul.products li.product .ct-woo-card-actions{padding-top:12px}
  .woocommerce ul.products li.product>figure{margin-bottom:12px!important}
}

/* ==========================================================================
   HEADER CART DROPDOWN — dark panel, so every line inside must be light.
   Matches the catalog dropdown so the header reads as one system.
   ========================================================================== */

.ct-header-cart .ct-cart-content{
  background:var(--mob-ink)!important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  box-shadow:0 20px 44px rgba(14,26,38,.30);
  padding:14px!important;
}

/* product names */
.ct-header-cart .ct-cart-content a.product-title,
.ct-header-cart .ct-cart-content .product-title,
.ct-header-cart .ct-cart-content .woocommerce-mini-cart-item a:not(.remove){
  color:#fff!important;font-weight:600;line-height:1.35;
}
.ct-header-cart .ct-cart-content a.product-title:hover,
.ct-header-cart .ct-cart-content .woocommerce-mini-cart-item a:not(.remove):hover{
  color:var(--mob-accent-soft)!important;
}

/* quantity, prices, totals and any stray copy */
.ct-header-cart .ct-cart-content,
.ct-header-cart .ct-cart-content p,
.ct-header-cart .ct-cart-content .quantity,
.ct-header-cart .ct-cart-content .amount,
.ct-header-cart .ct-cart-content .woocommerce-Price-amount,
.ct-header-cart .ct-cart-content .woocommerce-Price-currencySymbol,
.ct-header-cart .ct-cart-content li{
  color:rgba(255,255,255,.78)!important;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__total,
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__total *,
.ct-header-cart .ct-cart-content .total,
.ct-header-cart .ct-cart-content .total *{
  color:#fff!important;font-weight:700;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__total{
  border-top:1px solid rgba(255,255,255,.12);padding-top:12px;margin-top:8px;
}

/* remove ("×") control */
.ct-header-cart .ct-cart-content a.remove,
.ct-header-cart .ct-cart-content .remove_from_cart_button{
  color:rgba(255,255,255,.55)!important;
}
.ct-header-cart .ct-cart-content a.remove:hover{color:#fff!important;background:transparent!important}

/* separators between items */
.ct-header-cart .ct-cart-content .woocommerce-mini-cart-item{
  border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;margin-bottom:10px;
}
.ct-header-cart .ct-cart-content .woocommerce-mini-cart-item:last-of-type{border-bottom:0}

/* buttons inside the panel */
/* Blocksy gives these buttons --theme-button-padding:0 10px and min-height:45px and
   relies on flex centring; display:block dropped the text to the top edge. The two
   Ukrainian labels are also too long to sit side by side in a 310px panel, so they
   stack at every width. */
.ct-header-cart .ct-cart-content .buttons{
  display:grid!important;grid-template-columns:1fr!important;
  gap:8px!important;margin:0!important;
}
.ct-header-cart .ct-cart-content .buttons a{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-width:0!important;margin:0!important;
  padding:11px 14px!important;min-height:44px;
  text-align:center;line-height:1.25;
  white-space:normal;overflow-wrap:anywhere;
  border-radius:var(--mob-r-btn);
}
.ct-header-cart .ct-cart-content .buttons a:first-child{
  background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;
}
.ct-header-cart .ct-cart-content .buttons a:first-child:hover{
  background:rgba(255,255,255,.10)!important;border-color:#fff!important;color:#fff!important;
}
.ct-header-cart .ct-cart-content .buttons a.checkout{
  background:var(--mob-accent)!important;color:#fff!important;border-color:var(--mob-accent)!important;
}
.ct-header-cart .ct-cart-content .buttons a.checkout:hover{
  background:var(--mob-accent-600)!important;border-color:var(--mob-accent-600)!important;
}

/* empty-cart message */
.ct-header-cart .ct-cart-content .woocommerce-mini-cart__empty-message{color:rgba(255,255,255,.72)!important}

/* ==========================================================================
   LIVE SEARCH SUGGESTIONS
   ========================================================================== */

.mob-searchform{position:relative}

.mob-sugg{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
  background:#fff;border:1px solid var(--mob-line);border-radius:14px;
  box-shadow:0 22px 50px rgba(14,26,38,.18);
  padding:6px;max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
}
.mob-sugg[hidden]{display:none}

.mob-sugg__item{
  display:flex;align-items:center;gap:12px;
  padding:9px 10px;border-radius:11px;
  transition:background .13s ease;
}
.mob-sugg__item:hover,.mob-sugg__item.is-active,.mob-sugg__item:focus-visible{
  background:var(--mob-bg-soft);
}
.mob-sugg__thumb{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:48px;height:48px;border-radius:9px;
  background:#fff;border:1px solid var(--mob-line-2);overflow:hidden;
}
.mob-sugg__thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.mob-sugg__body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.mob-sugg__body em{
  font-style:normal;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mob-muted);margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mob-sugg__body strong{
  color:var(--mob-ink);font-size:14px;font-weight:600;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mob-sugg__meta{display:flex;align-items:center;gap:10px;margin-top:3px}
.mob-sugg__meta b{color:var(--mob-ink);font-size:13.5px;font-weight:700}
.mob-sugg__meta i{font-style:normal;font-size:11.5px;color:var(--mob-muted)}
.mob-sugg__meta i.is-in{color:var(--mob-ok)}

.mob-sugg__all{
  display:block;text-align:center;margin-top:4px;padding:11px;
  border-radius:11px;background:var(--mob-bg-soft);
  color:var(--mob-ink)!important;font-weight:600;font-size:13.5px;
  transition:background .15s ease,color .15s ease;
}
.mob-sugg__all:hover{background:var(--mob-accent);color:#fff!important}

.mob-sugg__empty{
  padding:16px 12px;text-align:center;color:var(--mob-muted);font-size:13.5px;
}

@media (max-width:600px){
  .mob-sugg{max-height:62vh}
  .mob-sugg__body strong{font-size:13.5px}
}

/* suggestions inside the Blocksy search modal (mobile) */
#search-modal .mob-sugg,.ct-panel .mob-sugg{
  position:static;margin-top:14px;max-height:58vh;
  box-shadow:none;border-color:rgba(255,255,255,.14);
  background:#fff;
}
#search-modal form,.ct-panel form{position:relative}

/* ==========================================================================
   PRODUCT CARD v3 — informational, in the language of modern technical stores
   (model code + one-line summary + spec chips, image sits directly on the card)
   ========================================================================== */

:root{ --mob-r-card:12px; }

.woocommerce ul.products{
  align-items:stretch;
  gap:clamp(12px,1.2vw,18px)!important;
}

.woocommerce ul.products li.product{
  display:flex!important;flex-direction:column;height:100%;
  background:#fff;
  border:1px solid var(--mob-line);
  border-radius:12px;
  padding:14px 14px 16px;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .16s ease;
}
.woocommerce ul.products li.product:hover{
  border-color:#C7D5E8;
  box-shadow:0 10px 26px rgba(14,26,38,.09);
  transform:translateY(-2px);
}

/* --- media: no inner frame, the product simply sits on the card --- */
.woocommerce ul.products li.product>figure{margin:0 0 14px!important}
.woocommerce ul.products li.product a.ct-media-container,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link>figure{
  display:block!important;position:relative;width:100%;
  aspect-ratio:1/1!important;height:auto!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  overflow:hidden;padding:0!important;
}
.woocommerce ul.products li.product a.ct-media-container img,
.woocommerce ul.products li.product img.wp-post-image,
.woocommerce ul.products li.product figure img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  aspect-ratio:auto!important;object-fit:contain!important;object-position:center;
  padding:6px!important;margin:0!important;background:transparent!important;
  transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.woocommerce ul.products li.product:hover a.ct-media-container img{transform:scale(1.045)}

/* --- title --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px!important;line-height:1.33!important;font-weight:600;
  color:var(--mob-ink)!important;margin:0 0 3px!important;letter-spacing:-.005em;
  min-height:0!important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a{color:inherit!important}

/* --- model code, the way hardware stores label a part --- */
.mob-card-model{
  display:block;font-size:12px;color:var(--mob-muted);
  letter-spacing:.015em;margin:0 0 9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* --- one-line factual summary --- */
.mob-card-sum{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.8px;line-height:1.45;color:var(--mob-body);
  margin:0 0 10px;min-height:calc(2 * 1.45em);
}

/* --- spec chips --- */
.mob-card-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;min-height:22px}
.mob-card-chips i{
  font-style:normal;font-size:11.5px;line-height:1;
  padding:5px 8px;border-radius:5px;
  background:var(--mob-bg-soft);color:var(--mob-body);
  border:1px solid var(--mob-line-2);white-space:nowrap;
}

/* --- price --- */
.woocommerce ul.products li.product .price{
  display:block;color:var(--mob-ink)!important;
  font-weight:700!important;font-size:18px!important;letter-spacing:-.01em;
  margin:auto 0 0!important;
}
.woocommerce ul.products li.product .price del{opacity:.55;font-weight:500;font-size:13px!important;margin-right:6px}
.woocommerce ul.products li.product .price ins{text-decoration:none}

/* --- stock, quiet, directly under the price --- */
.mob-card-stock{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;margin:5px 0 0;
}
.mob-card-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mob-card-stock.is-in{color:var(--mob-ok)}
.mob-card-stock.is-low{color:#B26A00}
.mob-card-stock.is-out{color:var(--mob-muted)}

/* --- CTA --- */
.woocommerce ul.products li.product .ct-woo-card-actions{
  margin-top:14px!important;padding-top:0;width:100%;
}
/* Twelve saturated buttons in one screen out-shout the products they sell.
   The action keeps its button shape and accent text, and fills in on hover
   or keyboard focus. */
.woocommerce ul.products li.product a.button{
  width:100%;min-height:42px;font-size:.9rem;font-weight:600;
  background:transparent!important;color:var(--mob-accent)!important;
  border:1px solid var(--mob-line)!important;border-radius:9px!important;
}
.woocommerce ul.products li.product:hover a.button,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus-visible{
  background:var(--mob-accent)!important;color:#fff!important;
  border-color:var(--mob-accent)!important;
  box-shadow:0 6px 16px rgba(27,111,214,.22);
}
.woocommerce ul.products li.product .added_to_cart{
  display:block;text-align:center;margin-top:8px!important;font-size:12.5px;
}

@media (max-width:600px){
  .woocommerce ul.products li.product{padding:10px 10px 12px;border-radius:10px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13.2px!important}
  .mob-card-sum{display:none}
  .mob-card-chips{margin-bottom:9px;min-height:0}
  .mob-card-chips i:nth-child(n+3){display:none}
  .woocommerce ul.products li.product .price{font-size:16px!important}
  .woocommerce ul.products li.product a.button{min-height:38px;font-size:.8rem}
}


/* ==========================================================================
   STATIC PAGES
   A page is a document, not a stack of full-width blocks: compact header with
   a rule, a readable text column, and a rail of practical facts beside it.
   ========================================================================== */

/* page header — a title and a line, not 56px floating in whitespace */
body:not(.home) .hero-section[data-type="type-1"]{
  padding-block:clamp(22px,2.4vw,34px) 0!important;
  margin-bottom:0!important;
}
body:not(.home) .hero-section[data-type="type-1"] .entry-header{
  border-bottom:1px solid var(--mob-line);
  padding-bottom:clamp(13px,1.5vw,18px);
}
body:not(.home) .hero-section[data-type="type-1"] h1.page-title{
  font-size:clamp(25px,2.5vw,34px)!important;
  line-height:1.16;font-weight:600;margin:0;
}
body:not(.home) .hero-section[data-type="type-1"]+.entry-content{
  padding-top:clamp(24px,2.8vw,38px)!important;
}

/* Blocksy's per-page "content area spacing" made the gap under the header differ from
   page to page (60px on most, 0 on Контакти, which has the setting overridden).
   The compact title already carries its own padding, so level them all to Контакти. */
main.site-main>.ct-container-full:has(.hero-section[data-type="type-1"]){
  padding-top:0!important;
}

/* document layout — stays inside the theme's constrained content column */
.mob-doc{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(30px,4vw,66px);align-items:start;
}
.mob-doc__main{min-width:0}
.mob-doc__main>:first-child{margin-top:0}
.mob-doc__main>:last-child{margin-bottom:0}
.mob-doc__lead{
  font-size:clamp(16.5px,1.3vw,19.5px);line-height:1.5;
  color:var(--mob-ink);font-weight:500;max-width:58ch;margin:0 0 1.5em;
}
.mob-doc h2{
  font-size:clamp(18.5px,1.65vw,23px);font-weight:600;
  margin:clamp(30px,3.4vw,46px) 0 .8em;padding-bottom:11px;
  border-bottom:1px solid var(--mob-line);
}
.mob-doc h3{font-size:16px;font-weight:600;margin:26px 0 .5em;color:var(--mob-ink)}
.mob-doc p{max-width:68ch}
.mob-doc__note{font-size:13.6px;color:var(--mob-muted);margin-top:14px}

/* data rows — facts belong in rows, not bullet points */
.mob-rows{margin:0;border-top:1px solid var(--mob-line)}
.mob-rows>div{
  display:grid;grid-template-columns:210px minmax(0,1fr);gap:6px 26px;
  padding:13px 0;border-bottom:1px solid var(--mob-line);
}
.mob-rows dt{color:var(--mob-muted);font-size:14px;margin:0}
.mob-rows dd{margin:0;color:var(--mob-ink);font-size:15px;line-height:1.55}

/* category chips — real links, with live counts */
.mob-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mob-chips a{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--mob-line);border-radius:8px;
  padding:9px 13px;font-size:14px;font-weight:500;
  color:var(--mob-ink);background:#fff;
  transition:border-color .18s ease,background .18s ease;
}
.mob-chips a:hover{border-color:var(--mob-ink-2);background:var(--mob-bg-soft);color:var(--mob-ink)}
.mob-chips b{color:var(--mob-muted);font-weight:500;font-size:12.5px;font-variant-numeric:tabular-nums}

/* the side rail */
.mob-doc__aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}
.mob-side{
  border:1px solid var(--mob-line);border-radius:12px;
  padding:18px 20px 20px;background:#fff;
}
.mob-side h3{
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mob-muted);margin:0 0 12px;
}
.mob-side__phone{
  display:block;font-size:21px;font-weight:700;
  color:var(--mob-ink)!important;letter-spacing:-.01em;margin-bottom:12px;
}
.mob-side__phone:hover{color:var(--mob-accent)!important}
.mob-side p{margin:0 0 .7em;font-size:14px;color:var(--mob-ink-2);line-height:1.55;max-width:none}
.mob-side p:last-child{margin-bottom:0}
.mob-side .mob-btn{width:100%;justify-content:center;margin-top:14px}
.mob-side__list{list-style:none;margin:0;padding:0}
.mob-side__list li{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-top:1px solid var(--mob-line-2);font-size:14px;
}
.mob-side__list li:first-child{border-top:0;padding-top:0}
.mob-side__list span{color:var(--mob-muted)}
.mob-side__list b{font-weight:600;color:var(--mob-ink);text-align:right}

@media (max-width:980px){
  .mob-doc{grid-template-columns:1fr;gap:34px}
  .mob-doc__aside{position:static;flex-direction:row;flex-wrap:wrap}
  .mob-side{flex:1 1 250px}
}
@media (max-width:600px){
  .mob-doc__aside{flex-direction:column}
  .mob-rows>div{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .mob-rows dt{font-size:13px}
}



/* ==========================================================================
   ACCOUNT — password feedback
   The submit button is disabled by the strength meter; make both the reason and
   the disabled state visible, otherwise the form just goes dead.
   ========================================================================== */

.mob-pass-hint{
  display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--mob-muted);
}
.woocommerce-password-strength{
  display:block;margin-top:8px;padding:7px 11px;border-radius:7px;
  font-size:12.5px;font-weight:600;text-align:left;
  border:1px solid var(--mob-line);background:var(--mob-bg-soft);color:var(--mob-ink-2);
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad{background:#FDECEC;border-color:#F0C2C2;color:#8E2020}
.woocommerce-password-strength.good{background:#FFF6E5;border-color:#EFD5A2;color:#7A5200}
.woocommerce-password-strength.strong{background:#E8F6F0;border-color:#B4DECD;color:#0F6E50}
/* WooCommerce's stock hint insists on "at least 12 characters", which is not the
   rule in force here (the threshold is "medium"). Hide it rather than mislead. */
.woocommerce-password-hint{display:none!important}

/* a disabled button must read as disabled */
button[name="wp-submit"][disabled],
.ct-account-register-submit[disabled],
.woocommerce-form-register__submit[disabled],
button[type="submit"].disabled{
  opacity:.5!important;cursor:not-allowed!important;box-shadow:none!important;
}


/* ==========================================================================
   PRODUCT TABS — Огляд / Характеристики / Відгуки
   ========================================================================== */

.mob-specs__list{margin:0}
.mob-specs__list>div{
  display:grid;grid-template-columns:minmax(170px,34%) minmax(0,1fr);
  gap:5px 26px;padding:11px 0;border-bottom:1px solid var(--mob-line-2);
}
.mob-specs__list>div:first-child{border-top:1px solid var(--mob-line-2)}
.mob-specs__list dt{margin:0;color:var(--mob-muted);font-size:14px;line-height:1.5}
.mob-specs__list dd{margin:0;color:var(--mob-ink);font-size:15px;font-weight:500;line-height:1.5}

/* the overview stacks description, specifications and the newest reviews */
.mob-ov__block+.mob-ov__block{margin-top:clamp(28px,3.2vw,42px)}
.mob-ov__block h3{
  font-size:clamp(16.5px,1.4vw,19px);font-weight:600;color:var(--mob-ink);
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--mob-line);
}
.mob-ov__desc>*:first-child{margin-top:0}
.mob-ov__desc>*:last-child{margin-bottom:0}
.mob-ov__more{margin:16px 0 0}
.mob-ov__more a{font-size:14px;font-weight:600}
.mob-ov__empty{margin:0;color:var(--mob-muted);font-size:14.5px}

.mob-ov__reviews{list-style:none;margin:0;padding:0}
.mob-ov__reviews li{padding:14px 0;border-bottom:1px solid var(--mob-line-2)}
.mob-ov__reviews li:first-child{padding-top:0}
.mob-ov__rhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:6px}
.mob-ov__rhead b{color:var(--mob-ink);font-size:14.5px}
.mob-ov__rhead time{color:var(--mob-muted);font-size:13px;margin-left:auto}
.mob-ov__stars{color:#E8A317;font-size:14px;letter-spacing:1px}
.mob-ov__reviews p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mob-ink-2)}

@media (max-width:600px){
  .mob-specs__list>div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .mob-specs__list dt{font-size:13px}
  .mob-specs__list dd{font-size:14.5px}
  .mob-ov__rhead time{margin-left:0;width:100%}
}


/* ==========================================================================
   PRODUCT GALLERY — the photograph opens full size
   ========================================================================== */

.woocommerce-product-gallery figure,
.woocommerce-product-gallery .ct-media-container,
.woocommerce-product-gallery .ct-media-container img{cursor:zoom-in}

/* WooCommerce's raw "🔍" link, made into an actual button on the image */
.woocommerce-product-gallery{position:relative}
.woocommerce-product-gallery__trigger{
  position:absolute!important;top:12px!important;right:12px!important;left:auto!important;
  bottom:auto!important;margin:0!important;z-index:4;
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--mob-line);box-shadow:var(--mob-sh-1);
  font-size:16px;line-height:1;text-decoration:none;
  transition:border-color .18s ease,background .18s ease;
}
.woocommerce-product-gallery__trigger:hover{background:var(--mob-bg-soft);border-color:var(--mob-ink-2)}


/* ==========================================================================
   MOBILE FIXES — gallery thumbs, product tabs, off-canvas, cart table
   ========================================================================== */

/* 1. gallery thumbnails: one scrollable row instead of a wrapping block */
@media (max-width:782px){
  .woocommerce-product-gallery .flexy-pills>*{
    display:flex!important;flex-wrap:nowrap!important;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;gap:8px;padding:2px 0 4px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .woocommerce-product-gallery .flexy-pills>*::-webkit-scrollbar{display:none}
  .woocommerce-product-gallery .flexy-pills .ct-media-container,
  .woocommerce-product-gallery .flexy-pills>*>*{
    flex:0 0 62px!important;width:62px!important;max-width:62px!important;
    scroll-snap-align:start;margin:0!important;
  }
  .woocommerce-product-gallery .flexy-pills img{
    width:62px!important;height:62px!important;object-fit:contain;
  }
}

/* 2. product tabs: a scrollable strip, not three stacked full-width rows */
@media (max-width:782px){
  .woocommerce-tabs ul.wc-tabs{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    align-items:stretch!important;
    overflow-x:auto;overscroll-behavior-x:contain;
    gap:0!important;margin:0 0 20px!important;padding:0!important;
    border-bottom:1px solid var(--mob-line)!important;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .woocommerce-tabs ul.wc-tabs::-webkit-scrollbar{display:none}
  .woocommerce-tabs ul.wc-tabs li{
    flex:0 0 auto!important;width:auto!important;max-width:none!important;
    margin:0!important;border:0!important;background:none!important;
  }
  .woocommerce-tabs ul.wc-tabs li a{
    display:block!important;white-space:nowrap;width:auto!important;
    padding:12px 15px!important;font-size:13.5px!important;
    border-bottom:2px solid transparent!important;
  }
  .woocommerce-tabs ul.wc-tabs li.active a,
  .woocommerce-tabs ul.wc-tabs li[aria-selected="true"] a{
    border-bottom-color:var(--mob-accent)!important;color:var(--mob-ink)!important;
  }
}

/* 3. off-canvas menu: the active item was #14549F on #121519 — 2.44:1 */
.ct-panel .current-menu-item>a,
.ct-panel .current_page_item>a,
.ct-panel .current-menu-ancestor>a,
.ct-panel .current-menu-item>.ct-menu-link,
.ct-panel .current_page_item>.ct-menu-link,
.ct-panel .current-menu-ancestor>.ct-menu-link{
  color:#9CC6F7!important;          /* 8.9:1 on the panel background */
}

/* 4. cart rows on mobile: Blocksy moves quantity, price and remove into
      .product-mobile-actions inside the name cell — give that row a real layout
      instead of letting the desktop table columns collapse around it. */
@media (max-width:600px){
  .woocommerce-cart-form__contents thead{display:none}
  .woocommerce-cart-form__contents,
  .woocommerce-cart-form__contents tbody{display:block;width:100%}
  .woocommerce-cart-form__contents tr{display:block;width:100%}

  .woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item{
    display:grid!important;grid-template-columns:72px minmax(0,1fr);
    gap:4px 14px;align-items:start;
    padding:16px 0!important;border-bottom:1px solid var(--mob-line)!important;
  }
  .woocommerce-cart-form__contents td{
    width:auto!important;padding:0!important;border:0!important;
  }
  .woocommerce-cart-form__contents td.product-thumbnail img{
    width:72px!important;height:72px!important;object-fit:contain;
  }
  .woocommerce-cart-form__contents td.product-name>a{
    display:block;font-size:14.5px;line-height:1.35;
  }

  .product-mobile-actions{
    display:flex!important;align-items:center;flex-wrap:wrap;
    gap:10px;margin-top:12px;
  }
  .product-mobile-actions .quantity{flex:0 0 auto;margin:0!important}
  .product-mobile-actions .ct-product-multiply-symbol{color:var(--mob-muted)}
  .product-mobile-actions .amount{font-weight:700;font-size:15px;color:var(--mob-ink)}
  .product-mobile-actions a.remove{margin-left:auto;flex:0 0 auto}

  /* the coupon / update row */
  .woocommerce-cart-form__contents td.actions{
    display:block;padding:16px 0 0!important;
  }
  .woocommerce-cart-form__contents td.actions .coupon{
    display:flex;gap:8px;margin:0 0 12px;
  }
  .woocommerce-cart-form__contents td.actions .coupon input[type="text"]{flex:1 1 auto;min-width:0}
  .woocommerce-cart-form__contents td.actions .button{width:100%}
}


/* ==========================================================================
   MINI-CART DROPDOWN ON MOBILE
   The tap-target rule above used to name .ct-cart-content — the panel itself —
   so it became an inline-flex row and the list, total and buttons overlapped.
   The panel is a column, and it must fit a 390px screen.
   ========================================================================== */

@media (max-width:600px){
  .ct-header-cart .ct-cart-content{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;justify-content:flex-start!important;
    /* pinned to the viewport, not to the 44px icon it hangs from */
    position:fixed!important;
    top:calc(var(--mob-hdr-bottom,64px) + 8px)!important;
    right:12px!important;left:auto!important;
    width:min(320px,calc(100vw - 24px))!important;
    min-width:0!important;max-width:none!important;
    margin:0!important;
    max-height:70vh;overflow-y:auto;overscroll-behavior:contain;
  }
  .ct-header-cart .ct-cart-content>*{width:100%}

  .ct-header-cart .ct-cart-content .woocommerce-mini-cart{
    margin:0 0 12px!important;padding:0!important;list-style:none;
  }
  .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;gap:4px 10px;
    padding:10px 0!important;margin:0!important;
  }
  .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item .ct-media-container{
    grid-column:1;grid-row:1/3;width:48px!important;
  }
  .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item .ct-media-container img{
    width:48px!important;height:48px!important;object-fit:contain;
  }
  .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item .product-data{
    grid-column:2;min-width:0;
  }
  .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item .product-title{
    display:block;font-size:13.5px;line-height:1.35;
  }
  .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item a.remove{
    grid-column:3;grid-row:1;position:static!important;margin:0!important;
  }

  .ct-header-cart .ct-cart-content .woocommerce-mini-cart__total{
    display:flex!important;justify-content:space-between;align-items:baseline;
    margin:0 0 12px!important;padding-top:12px;
    border-top:1px solid rgba(255,255,255,.12);
  }
}



/* ==========================================================================
   Visual system — 2026-09-17
   One set of tokens for type, colour, density and states, applied to the
   catalogue and product pages. Page structure is unchanged.
   ========================================================================== */


/* --- Part numbers, models and spec chips read as data, not prose ---------- */

.mob-card-model,
.mob-card-chips,
.product_meta .sku,
.mob-ty-dl .mob-ty-muted {
	font-family: var(--mob-mono);
	font-size: .78rem;
	letter-spacing: .01em;
	text-transform: none;
}

.mob-card-model {
	color: var(--mob-muted);
}

/* Prices line up column-wise when the numerals are tabular. */
.price,
.mob-card-sum .price,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* --- Product cards --------------------------------------------------------
   Twelve saturated buttons in one screen out-shout the products themselves.
   The action keeps a clear button shape and accent text, and fills in on
   hover or keyboard focus.                                                   */

/* The added state has to stay legible once the button is no longer hovered. */
.products .product .ct-woo-card-actions .added_to_cart {
	color: var(--mob-ok);
}

/* The card summary is context, not the headline. */
.mob-card-sum {
	color: var(--mob-muted);
	font-size: .88rem;
	line-height: 1.45;
}

/* Stock state is the only place colour carries meaning in the grid. */
.mob-card-stock { color: var(--mob-ok); }
.mob-card-stock.is-low { color: var(--mob-warn); }

/* --- Product page ---------------------------------------------------------
   The price is the second thing people look for after the name, so it gets
   the weight its role deserves.                                              */

.single-product .summary .price,
.single-product .entry-summary .price {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--mob-ink);
}

.single-product .product_meta {
	font-size: .82rem;
	color: var(--mob-muted);
	border-top: 1px solid var(--mob-line);
	padding-top: 14px;
	margin-top: 18px;
}

@media (max-width: 600px) {
	.products .product .ct-media-container img,
	.woocommerce-product-gallery .ct-media-container img {
		padding: 6px;
	}
}

/* --- Product gallery plate -------------------------------------------------
   Blocksy sets aspect-ratio inline on the gallery image from the WooCommerce
   cropping ratio and covers the box, which sliced the leading character off
   wide artwork (RG-223/U showed as G-223/U). Source images here range
   from 0.6 to 1.99 in ratio, so the plate is square and the image is
   contained inside it. !important is needed to beat the inline style.        */

.single-product .woocommerce-product-gallery .flexy-item .ct-media-container{
  background:var(--mob-bg-soft);border-radius:var(--mob-r-card,12px);overflow:hidden;
}
.single-product .woocommerce-product-gallery .flexy-item .ct-media-container img{
  aspect-ratio:1/1!important;object-fit:contain!important;
  width:100%!important;height:auto!important;padding:14px;
}