/* ==========================================================================
   petrascal — single product detail
   Ported 1:1 from the approved kela-design static page. Class names and every
   value are unchanged so the rendered page is pixel-identical; the only
   differences are:
     - the CSS-drawn phone placeholders are replaced by rules for real <img>
       elements (same box, same centring, same contain behaviour)
     - the Product Comparison block is removed (requested)
     - a hover magnifier layer is added for the main gallery image
     - .kela-design-deliverto and the review form accept an <a>/form as well
   ========================================================================== */

.kela-design-root{
  /* Brand — mapped onto the theme's own :root tokens, so changing the theme
     palette (--Primary, --Success, --Critical …) recolours this page too.
     Layout, spacing and type are untouched; only the hues move. */
  --kela-design-blue:var(--Primary,#bd6f43);
  --kela-design-blue-600:#6C6152;
  --kela-design-blue-tint:#F5F3F0;
  --kela-design-blue-line:#DED7CD;
  --kela-design-green:var(--Success,#3DAB25);
  --kela-design-green-600:#33901F;
  --kela-design-green-tint:#EEF7EB;
  --kela-design-amber:var(--Yellow,#F0A750);
  --kela-design-pink:var(--pink,#EC749D);
  --kela-design-rose:var(--Critical,#F03E3E);

  /* ink + surface */
  --kela-design-ink:var(--Onsurface,#181818);
  --kela-design-ink-2:var(--Secondary,#4D4E4F);
  --kela-design-muted:#6F7071;
  --kela-design-faint:var(--Secondary2,#A0A0A0);
  --kela-design-line:var(--line,#E9E9E9);
  --kela-design-line-2:#F1F1F1;
  --kela-design-surface:var(--Surface,#F6F6F6);
  --kela-design-white:var(--White,#ffffff);

  /* elevation */
  --kela-design-sh-1:0 1px 2px rgba(16,24,40,.05);
  --kela-design-sh-2:0 4px 16px rgba(16,24,40,.07);
  --kela-design-sh-3:0 12px 32px rgba(16,24,40,.11);

  /* type */
  --kela-design-display:"Lexend Deca",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --kela-design-sans:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* rhythm — every gap in the page comes from these */
  --kela-design-s1:4px;  --kela-design-s2:8px;  --kela-design-s3:12px;
  --kela-design-s4:16px; --kela-design-s5:24px; --kela-design-s6:32px;
  --kela-design-s7:48px; --kela-design-s8:72px;
  --kela-design-r-sm:8px; --kela-design-r:12px; --kela-design-r-lg:16px;
  --kela-design-col:32px;         /* the one column gap used site-wide */
  --kela-design-section:var(--kela-design-s8);
}

.kela-design-root *,.kela-design-root *::before,.kela-design-root *::after{box-sizing:border-box}

.kela-design-root{
  font-family:var(--kela-design-sans);
  font-size:15px;line-height:1.6;
  color:var(--kela-design-ink);
  background:var(--kela-design-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.kela-design-root img{max-width:100%;display:block}
.kela-design-root a{color:inherit;text-decoration:none}
.kela-design-root button,.kela-design-root select,.kela-design-root input,.kela-design-root textarea{font:inherit;color:inherit}
.kela-design-root button{background:none;border:0;cursor:pointer;padding:0}
.kela-design-root ul,.kela-design-root ol{margin:0;padding:0;list-style:none}
.kela-design-root h1,.kela-design-root h2,.kela-design-root h3,
.kela-design-root h4,.kela-design-root p,.kela-design-root figure{margin:0}
.kela-design-root :focus-visible{outline:2px solid var(--kela-design-blue);outline-offset:3px;border-radius:6px}

.kela-design-root .kela-design-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kela-design-root .kela-design-shell{width:100%;max-width:1400px;margin-inline:auto;padding-inline:clamp(16px,3vw,24px)}
.kela-design-root .kela-design-defer{content-visibility:auto;contain-intrinsic-size:auto 640px}
.kela-design-root .kela-design-section{margin-top:var(--kela-design-section)}
.kela-design-root .woocommerce-notices-wrapper:not(:empty){margin-block:var(--kela-design-s4)}

/* ---------- primitives ---------- */
.kela-design-icon{width:1em;height:1em;fill:currentColor;flex:none;display:block}

.kela-design-root .kela-design-shead{
  display:grid;grid-template-columns:1fr auto;align-items:end;
  column-gap:var(--kela-design-col);row-gap:var(--kela-design-s2);
  padding-bottom:var(--kela-design-s4);
  border-bottom:1px solid var(--kela-design-line);
  margin-bottom:var(--kela-design-s5);
}
.kela-design-root .kela-design-shead-eyebrow{
  grid-column:1;font-family:var(--kela-design-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kela-design-blue);
  display:flex;align-items:center;gap:var(--kela-design-s2);
}
.kela-design-root .kela-design-shead-eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.kela-design-root .kela-design-shead-title{
  grid-column:1;font-family:var(--kela-design-display);font-weight:600;
  font-size:clamp(21px,2.1vw,26px);line-height:1.25;color:var(--kela-design-ink);
}
.kela-design-root .kela-design-shead-aside{grid-column:2;grid-row:1/3;align-self:end;display:flex;align-items:center;gap:var(--kela-design-s3)}
.kela-design-root .kela-design-shead-link{
  display:inline-flex;align-items:center;gap:var(--kela-design-s2);
  font-family:var(--kela-design-display);font-size:14px;font-weight:500;color:var(--kela-design-blue);
}
.kela-design-root .kela-design-shead-link svg{width:14px;height:14px}
.kela-design-root .kela-design-shead-link:hover{text-decoration:underline}

.kela-design-root .kela-design-stars{display:inline-flex;gap:1px;color:var(--kela-design-amber);line-height:0;flex:none}
.kela-design-root .kela-design-stars svg{width:14px;height:14px;fill:currentColor}
.kela-design-root .kela-design-stars-off{color:#DBDEE4}

.kela-design-root .kela-design-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--kela-design-s2);
  height:44px;padding-inline:var(--kela-design-s5);border-radius:var(--kela-design-r-sm);
  font-family:var(--kela-design-display);font-size:14px;font-weight:500;
  white-space:nowrap;transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.kela-design-root .kela-design-btn svg{width:16px;height:16px}
.kela-design-root .kela-design-btn--primary{background:var(--kela-design-blue);color:#fff}
.kela-design-root .kela-design-btn--primary:hover{background:var(--kela-design-blue-600)}
.kela-design-root .kela-design-btn--go{background:var(--kela-design-green);color:#fff}
.kela-design-root .kela-design-btn--go:hover{background:var(--kela-design-green-600)}
.kela-design-root .kela-design-btn--ghost{border:1px solid var(--kela-design-line);background:#fff;color:var(--kela-design-ink)}
.kela-design-root .kela-design-btn--ghost:hover{border-color:var(--kela-design-blue);color:var(--kela-design-blue)}
.kela-design-root .kela-design-btn--soft{background:var(--kela-design-blue-tint);color:var(--kela-design-blue)}
.kela-design-root .kela-design-btn--soft:hover{background:var(--kela-design-blue-line)}
.kela-design-root .kela-design-btn--block{width:100%}
.kela-design-root .kela-design-btn--sm{height:36px;padding-inline:var(--kela-design-s4);font-size:13px}
.kela-design-root .kela-design-btn:disabled{opacity:.45;cursor:default}

/* image boxes — these replace the CSS-drawn phone of the static mock and keep
   exactly the same geometry: centred, height-bound, never cropped. */
.kela-design-phonebox{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden}
.kela-design-root .kela-design-phonebox img{width:auto;height:100%;max-width:100%;object-fit:contain}

/* ============================== BREADCRUMB ============================== */
.kela-design-crumbs{padding-block:var(--kela-design-s5) var(--kela-design-s4);font-size:14px}
.kela-design-root .kela-design-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kela-design-s1)}
.kela-design-root .kela-design-crumbs a{color:var(--kela-design-muted)}
.kela-design-root .kela-design-crumbs a:hover{color:var(--kela-design-blue)}
.kela-design-root .kela-design-crumbs li[aria-current]{color:var(--kela-design-ink);font-weight:600}
.kela-design-root .kela-design-crumbs-sep{color:var(--kela-design-faint);padding-inline:var(--kela-design-s1)}

/* ================================= HERO ================================= */
.kela-design-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--kela-design-s7) var(--kela-design-col)}
.kela-design-root .kela-design-hero-col{display:flex;flex-direction:column;gap:var(--kela-design-s7);min-width:0}

.kela-design-root .kela-design-gallery{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--kela-design-s3);align-items:start}
.kela-design-root .kela-design-gallery-rail{display:flex;flex-direction:column;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-gallery-track{
  display:flex;flex-direction:column;gap:var(--kela-design-s2);
  overflow:hidden;scroll-behavior:smooth;
}
.kela-design-root .kela-design-gallery-thumb{
  height:104px;border-radius:var(--kela-design-r);border:1px solid var(--kela-design-line);
  background:var(--kela-design-surface);padding:var(--kela-design-s2);flex:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.kela-design-root .kela-design-gallery-thumb:hover{border-color:var(--kela-design-blue-line)}
.kela-design-root .kela-design-gallery-thumb[aria-current="true"]{border-color:var(--kela-design-blue);box-shadow:0 0 0 3px var(--kela-design-blue-tint)}
.kela-design-root .kela-design-gallery-arrows{display:grid;grid-template-columns:1fr 1fr;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-gallery-arrow{
  height:32px;border-radius:var(--kela-design-r-sm);background:var(--kela-design-surface);
  border:1px solid var(--kela-design-line);display:flex;align-items:center;justify-content:center;
  color:var(--kela-design-ink-2);transition:background .16s ease;
}
.kela-design-root .kela-design-gallery-arrow:hover{background:var(--kela-design-line-2)}
.kela-design-root .kela-design-gallery-arrow svg{width:16px;height:16px}
.kela-design-root .kela-design-gallery-arrow--up svg{transform:rotate(-90deg)}
.kela-design-root .kela-design-gallery-arrow--down svg{transform:rotate(90deg)}

.kela-design-root .kela-design-gallery-stage{
  position:relative;border-radius:var(--kela-design-r-lg);
  background:linear-gradient(160deg,var(--kela-design-surface),#F2F4F8);
  aspect-ratio:538/600;padding:var(--kela-design-s6);
  display:flex;align-items:center;justify-content:center;
}
.kela-design-root .kela-design-gallery-flag{
  position:absolute;top:var(--kela-design-s4);left:var(--kela-design-s4);z-index:3;
  display:inline-flex;align-items:center;gap:6px;height:26px;padding-inline:10px;
  border-radius:999px;background:var(--kela-design-rose);color:#fff;
  font-family:var(--kela-design-display);font-size:11px;font-weight:600;letter-spacing:.04em;
}
.kela-design-root .kela-design-gallery-fav{
  position:absolute;top:var(--kela-design-s4);right:var(--kela-design-s4);z-index:3;
  width:40px;height:40px;border-radius:999px;background:#fff;box-shadow:var(--kela-design-sh-2);
  display:flex;align-items:center;justify-content:center;color:var(--kela-design-muted);
  transition:color .16s ease,transform .16s ease;
}
.kela-design-root .kela-design-gallery-flag[hidden]{display:none}
.kela-design-root .kela-design-gallery-fav svg{width:19px;height:19px}
.kela-design-root .kela-design-gallery-fav:hover{color:var(--kela-design-rose);transform:scale(1.06)}
.kela-design-root .kela-design-gallery-fav[aria-pressed="true"]{color:var(--kela-design-rose)}

/* hover magnifier: an overlay that shows the full-size file at scale, so the
   layout never moves and no second image box is introduced. Pointer-devices
   only; hidden entirely for touch and reduced-motion users. */
.kela-design-gallery-zoom{
  position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background-color:var(--kela-design-white);
  background-repeat:no-repeat;background-position:50% 50%;
  opacity:0;transition:opacity .18s ease;
}
.kela-design-root .kela-design-gallery-stage[data-kela-design-zooming="true"] .kela-design-gallery-zoom{opacity:1}
.kela-design-root .kela-design-gallery-stage[data-kela-design-zoomable="true"]{cursor:zoom-in}
.kela-design-root .kela-design-gallery-lens{
  position:absolute;z-index:3;border-radius:var(--kela-design-r-sm);pointer-events:none;
  border:1px solid var(--kela-design-blue-line);background:rgba(28,97,231,.10);
  opacity:0;transition:opacity .18s ease;
}
.kela-design-root .kela-design-gallery-stage[data-kela-design-zooming="true"] .kela-design-gallery-lens{opacity:1}

/* thumbnail grid — every cell has the same 2 rows, so baselines line up */
.kela-design-thumbgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--kela-design-s5) var(--kela-design-s3)}
.kela-design-root .kela-design-thumbgrid-cell{display:grid;grid-template-rows:auto auto;gap:var(--kela-design-s2);text-align:center}
.kela-design-root .kela-design-thumbgrid-media{
  height:112px;border-radius:var(--kela-design-r);border:1px solid var(--kela-design-line);
  background:var(--kela-design-surface);padding:var(--kela-design-s2);
  transition:border-color .16s ease;
}
.kela-design-root .kela-design-thumbgrid-cell:hover .kela-design-thumbgrid-media{border-color:var(--kela-design-blue-line)}
.kela-design-root .kela-design-thumbgrid-name{font-size:13px;line-height:1.4;color:var(--kela-design-muted)}

/* ---------- hero: buy column ---------- */
.kela-design-buybox{display:flex;flex-direction:column;gap:var(--kela-design-s5)}
.kela-design-root .kela-design-title{
  font-family:var(--kela-design-display);font-weight:600;
  font-size:clamp(22px,2.3vw,28px);line-height:1.25;color:var(--kela-design-ink);
}
.kela-design-root .kela-design-trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kela-design-s3) var(--kela-design-s4);font-size:14px}
.kela-design-root .kela-design-trust-rating{display:inline-flex;align-items:center;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-trust-score{font-family:var(--kela-design-display);font-weight:600;color:var(--kela-design-ink)}
.kela-design-root .kela-design-trust-count{color:var(--kela-design-muted)}
.kela-design-root .kela-design-trust-sep{width:1px;height:16px;background:var(--kela-design-line)}
.kela-design-root .kela-design-trust-sold{color:var(--kela-design-muted)}
.kela-design-root .kela-design-trust-sold b{color:var(--kela-design-ink);font-weight:600}

.kela-design-root .kela-design-pricebar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--kela-design-s3) var(--kela-design-s4);
  padding:var(--kela-design-s4) var(--kela-design-s5);
  background:var(--kela-design-blue-tint);border-radius:var(--kela-design-r);
}
.kela-design-root .kela-design-pricebar-now{
  font-family:var(--kela-design-display);font-weight:700;font-size:32px;line-height:1;
  color:var(--kela-design-blue);
}
.kela-design-root .kela-design-pricebar-was{color:var(--kela-design-faint);text-decoration:line-through;font-size:16px}
.kela-design-root .kela-design-pricebar-off{
  display:inline-flex;align-items:center;height:24px;padding-inline:10px;border-radius:999px;
  background:var(--kela-design-rose);color:#fff;font-size:12px;font-weight:600;
}
.kela-design-root .kela-design-pricebar-meta{margin-left:auto;text-align:right;font-size:13px;color:var(--kela-design-muted);line-height:1.5}
.kela-design-root .kela-design-pricebar-meta b{display:block;font-family:var(--kela-design-display);font-size:15px;font-weight:600;color:var(--kela-design-blue)}
.kela-design-root .kela-design-pricebar-compare{
  flex-basis:100%;font-size:13px;font-weight:600;color:var(--kela-design-pink);text-decoration:underline;
}
.kela-design-root .kela-design-pricebar-was[hidden],.kela-design-root .kela-design-pricebar-off[hidden]{display:none}

.kela-design-root .kela-design-field{display:flex;flex-direction:column;gap:var(--kela-design-s3)}
.kela-design-root .kela-design-field-label{
  font-family:var(--kela-design-display);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--kela-design-muted);
}
.kela-design-root .kela-design-field-label b{color:var(--kela-design-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:14px}
.kela-design-root .kela-design-pills{display:flex;flex-wrap:wrap;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-pill{
  height:36px;padding-inline:var(--kela-design-s4);border-radius:var(--kela-design-r-sm);
  border:1px solid var(--kela-design-line);background:#fff;
  font-family:var(--kela-design-display);font-size:13px;color:var(--kela-design-ink-2);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.kela-design-root .kela-design-pill:hover{border-color:var(--kela-design-blue-line)}
.kela-design-root .kela-design-pill[aria-pressed="true"]{border-color:var(--kela-design-blue);background:var(--kela-design-blue);color:#fff}
.kela-design-root .kela-design-pill[data-kela-design-unavailable="true"]{opacity:.4;text-decoration:line-through}
.kela-design-root .kela-design-swatches{display:flex;gap:var(--kela-design-s3)}
.kela-design-root .kela-design-swatch{
  width:36px;height:36px;border-radius:999px;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px var(--kela-design-line);position:relative;
  transition:border-color .16s ease;
}
.kela-design-root .kela-design-swatch[aria-pressed="true"]{border-color:var(--kela-design-blue)}
.kela-design-root .kela-design-swatch::after{content:"";position:absolute;inset:4px;border-radius:999px;background:var(--kela-design-sw,#ccc);background-size:cover;background-position:center}
.kela-design-root .kela-design-swatch[data-kela-design-unavailable="true"]{opacity:.4}

.kela-design-root .kela-design-specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--kela-design-s2) var(--kela-design-s5)}
.kela-design-root .kela-design-specs-row{display:contents}
.kela-design-root .kela-design-specs-row[hidden]{display:none}
.kela-design-root .kela-design-specs dt{font-size:14px;font-weight:600;color:var(--kela-design-ink-2)}
.kela-design-root .kela-design-specs dd{margin:0;font-size:14px;color:var(--kela-design-muted)}
.kela-design-root .kela-design-more{
  display:inline-flex;align-items:center;gap:var(--kela-design-s2);align-self:start;
  font-family:var(--kela-design-display);font-size:13px;font-weight:500;color:var(--kela-design-blue);
}
.kela-design-root .kela-design-more svg{width:13px;height:13px;transition:transform .2s ease}
.kela-design-root .kela-design-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.kela-design-root .kela-design-more[hidden]{display:none}

.kela-design-root .kela-design-actions{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:var(--kela-design-s3);align-items:stretch}
.kela-design-root .kela-design-qty{display:grid;grid-template-columns:40px 48px 40px;height:48px;border:1px solid var(--kela-design-line);border-radius:var(--kela-design-r-sm);overflow:hidden}
.kela-design-root .kela-design-qty button{display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--kela-design-muted);background:var(--kela-design-surface)}
.kela-design-root .kela-design-qty button:hover{background:var(--kela-design-line-2);color:var(--kela-design-ink)}
.kela-design-root .kela-design-qty input{
  border:0;border-inline:1px solid var(--kela-design-line);text-align:center;
  font-family:var(--kela-design-display);font-size:14px;
  -moz-appearance:textfield;appearance:textfield;min-width:0;background:#fff;
}
.kela-design-root .kela-design-qty input::-webkit-outer-spin-button,.kela-design-root .kela-design-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kela-design-root .kela-design-actions .kela-design-btn{height:48px;padding-inline:var(--kela-design-s4)}

.kela-design-root .kela-design-stock-note{font-size:14px;color:var(--kela-design-rose);font-weight:600}

/* WooCommerce wraps the pickers, specs and buttons in its own <form>, so the
   form itself carries the buy column's rhythm instead of collapsing it. */
.kela-design-buybox form.cart{display:flex;flex-direction:column;gap:var(--kela-design-s5);margin:0}
.kela-design-root .kela-design-buybox .single_variation_wrap{display:flex;flex-direction:column;gap:var(--kela-design-s5)}
.kela-design-root .kela-design-buybox .woocommerce-variation{display:none}
.kela-design-root .kela-design-buybox .woocommerce-variation-add-to-cart{display:block}
.kela-design-root .kela-design-buybox .woocommerce-variation-description,
.kela-design-root .kela-design-buybox .woocommerce-variation-availability{display:none}

.kela-design-root .kela-design-promises{display:grid;gap:var(--kela-design-s3)}
.kela-design-root .kela-design-promise{
  display:grid;grid-template-columns:20px minmax(0,1fr) auto;
  column-gap:var(--kela-design-s3);row-gap:2px;align-items:start;
  padding:var(--kela-design-s4);border:1px solid var(--kela-design-line);
  border-radius:var(--kela-design-r);background:#fff;
}
.kela-design-root .kela-design-promise>svg{width:20px;height:20px;color:var(--kela-design-blue);margin-top:2px}
.kela-design-root .kela-design-promise-t{font-family:var(--kela-design-display);font-size:14px;font-weight:500;color:var(--kela-design-ink)}
.kela-design-root .kela-design-promise-s{grid-column:2;font-size:13px;color:var(--kela-design-muted)}
.kela-design-root .kela-design-promise-x{grid-column:3;grid-row:1;text-align:right;font-family:var(--kela-design-display);font-size:14px;font-weight:600;color:var(--kela-design-ink)}
.kela-design-root .kela-design-promise-y{grid-column:3;grid-row:2;text-align:right;font-size:13px;color:var(--kela-design-muted)}
.kela-design-root .kela-design-promise-y a{color:var(--kela-design-blue);text-decoration:underline}

.kela-design-root .kela-design-alts{display:grid;grid-template-columns:1fr 1fr;gap:var(--kela-design-s3)}
.kela-design-root .kela-design-alt{
  display:flex;align-items:center;justify-content:center;gap:var(--kela-design-s2);
  height:42px;border-radius:var(--kela-design-r-sm);background:var(--kela-design-green-tint);
  border:1px solid #D6E9D0;font-family:var(--kela-design-display);font-size:13px;font-weight:500;
  color:#2E6A1F;transition:background .16s ease;
}
.kela-design-root .kela-design-alt:hover{background:#E3F2DE}
.kela-design-root .kela-design-alt svg{width:16px;height:16px}

.kela-design-root .kela-design-deliverto{
  display:flex;align-items:center;gap:var(--kela-design-s2);
  padding:var(--kela-design-s3) var(--kela-design-s4);
  border:1px dashed var(--kela-design-line);border-radius:var(--kela-design-r-sm);
  font-size:14px;color:var(--kela-design-ink-2);
}
.kela-design-root .kela-design-deliverto svg{width:16px;height:16px;color:var(--kela-design-blue)}
.kela-design-root .kela-design-deliverto button,.kela-design-root .kela-design-deliverto a{margin-left:auto;font-size:13px;font-weight:600;color:var(--kela-design-blue)}

.kela-design-root .kela-design-desc{display:flex;flex-direction:column;gap:var(--kela-design-s3)}
.kela-design-root .kela-design-desc-title{font-family:var(--kela-design-display);font-weight:600;font-size:17px;color:var(--kela-design-ink)}
.kela-design-root .kela-design-desc-body{position:relative;overflow:hidden;max-height:260px;transition:max-height .3s ease}
.kela-design-root .kela-design-desc-body p{color:var(--kela-design-muted);font-size:14px;line-height:1.7}
.kela-design-root .kela-design-desc-body p+p{margin-top:var(--kela-design-s3)}
.kela-design-root .kela-design-desc-body::after{
  content:"";position:absolute;inset:auto 0 0;height:96px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%);
}
.kela-design-root .kela-design-desc[data-open="true"] .kela-design-desc-body{max-height:none}
.kela-design-root .kela-design-desc[data-open="true"] .kela-design-desc-body::after{display:none}

/* =========================== FREQUENTLY PAIRED =========================== */
.kela-design-bundle{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--kela-design-col);align-items:start}
.kela-design-root .kela-design-bundle-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kela-design-s5)}
.kela-design-root .kela-design-bundle-item{
  display:grid;grid-template-rows:auto 180px auto auto;gap:var(--kela-design-s3);
  padding:var(--kela-design-s4);border:1px solid var(--kela-design-line);
  border-radius:var(--kela-design-r);background:#fff;transition:border-color .16s ease,box-shadow .16s ease;
}
.kela-design-root .kela-design-bundle-item:has(input:checked){border-color:var(--kela-design-blue-line);box-shadow:0 0 0 3px var(--kela-design-blue-tint)}
.kela-design-root .kela-design-bundle-check{display:flex;align-items:center;gap:var(--kela-design-s2);font-size:12px;color:var(--kela-design-muted);cursor:pointer}
.kela-design-root .kela-design-bundle-check input{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;border-radius:5px;
  border:1.5px solid var(--kela-design-line);background:#fff;position:relative;cursor:pointer;transition:background .14s ease,border-color .14s ease;
}
.kela-design-root .kela-design-bundle-check input:checked{background:var(--kela-design-blue);border-color:var(--kela-design-blue)}
.kela-design-root .kela-design-bundle-check input::after{
  content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;
}
.kela-design-root .kela-design-bundle-check input:checked::after{opacity:1}
.kela-design-root .kela-design-bundle-name{font-size:13px;line-height:1.5;color:var(--kela-design-ink-2)}
.kela-design-root .kela-design-bundle-price{font-family:var(--kela-design-display);font-weight:600;font-size:15px;color:var(--kela-design-blue);align-self:end}
.kela-design-root .kela-design-bundle-total{
  position:sticky;top:var(--kela-design-s4);
  display:flex;flex-direction:column;gap:var(--kela-design-s3);
  padding:var(--kela-design-s5);border-radius:var(--kela-design-r);
  background:var(--kela-design-surface);border:1px solid var(--kela-design-line);
}
.kela-design-root .kela-design-bundle-total dl{display:grid;grid-template-columns:1fr auto;gap:var(--kela-design-s2);margin:0;font-size:14px}
.kela-design-root .kela-design-bundle-total dt{color:var(--kela-design-muted)}
.kela-design-root .kela-design-bundle-total dd{margin:0;text-align:right;color:var(--kela-design-ink)}
.kela-design-root .kela-design-bundle-total-grand{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  padding-top:var(--kela-design-s3);border-top:1px solid var(--kela-design-line);
}
.kela-design-root .kela-design-bundle-total-grand span{font-family:var(--kela-design-display);font-size:14px;color:var(--kela-design-muted)}
.kela-design-root .kela-design-bundle-total-grand b{font-family:var(--kela-design-display);font-size:24px;font-weight:700;color:var(--kela-design-ink)}

/* ========================== EXPLORE / PRODUCT GRID ======================= */
.kela-design-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--kela-design-s3);
  margin-bottom:var(--kela-design-s5);
}
.kela-design-root .kela-design-chip{
  display:inline-flex;align-items:center;gap:var(--kela-design-s2);height:36px;
  padding-inline:var(--kela-design-s4);border-radius:999px;border:1px solid var(--kela-design-line);
  background:#fff;font-family:var(--kela-design-display);font-size:13px;color:var(--kela-design-ink-2);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.kela-design-root .kela-design-chip:hover{border-color:var(--kela-design-blue-line)}
.kela-design-root .kela-design-chip[aria-pressed="true"]{border-color:var(--kela-design-blue);background:var(--kela-design-blue-tint);color:var(--kela-design-blue);font-weight:500}
.kela-design-root .kela-design-chip-x{
  width:16px;height:16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(16,16,16,.07);color:inherit;
}
.kela-design-root .kela-design-chip[aria-pressed="true"] .kela-design-chip-x{background:var(--kela-design-blue-line)}
.kela-design-root .kela-design-chip-x svg{width:7px;height:7px}

.kela-design-root .kela-design-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-toolbar-spacer{flex:1 1 auto}
.kela-design-root .kela-design-toolbar-count{font-size:13px;color:var(--kela-design-muted);white-space:nowrap}
.kela-design-root .kela-design-select{
  height:36px;padding-inline:var(--kela-design-s3);border-radius:var(--kela-design-r-sm);
  border:1px solid var(--kela-design-line);background:#fff;
  font-family:var(--kela-design-display);font-size:13px;color:var(--kela-design-ink-2);cursor:pointer;
}
.kela-design-root .kela-design-filterwrap{position:relative}
.kela-design-root .kela-design-filterbtn{
  display:inline-flex;align-items:center;gap:var(--kela-design-s2);height:36px;
  padding-inline:var(--kela-design-s4);border-radius:var(--kela-design-r-sm);
  border:1px solid var(--kela-design-line);background:#fff;
  font-family:var(--kela-design-display);font-size:13px;color:var(--kela-design-ink-2);
}
.kela-design-root .kela-design-filterbtn:hover{border-color:var(--kela-design-blue-line)}
.kela-design-root .kela-design-filterbtn[aria-expanded="true"]{border-color:var(--kela-design-blue);color:var(--kela-design-blue)}
.kela-design-root .kela-design-filterbtn svg{width:13px;height:13px;transition:transform .2s ease}
.kela-design-root .kela-design-filterbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.kela-design-root .kela-design-filterbtn-dot{
  min-width:18px;height:18px;padding-inline:5px;border-radius:999px;background:var(--kela-design-blue);
  color:#fff;font-size:11px;font-weight:600;display:none;align-items:center;justify-content:center;
}
.kela-design-root .kela-design-filterbtn[data-count]:not([data-count="0"]) .kela-design-filterbtn-dot{display:inline-flex}

.kela-design-root .kela-design-filterpanel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:min(560px,88vw);
  background:#fff;border:1px solid var(--kela-design-line);border-radius:var(--kela-design-r);
  box-shadow:var(--kela-design-sh-3);padding:var(--kela-design-s5);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kela-design-s5);
}
.kela-design-root .kela-design-filterpanel[hidden]{display:none}
.kela-design-root .kela-design-filtergroup{display:flex;flex-direction:column;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-filtergroup h3{
  font-family:var(--kela-design-display);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--kela-design-muted);margin-bottom:var(--kela-design-s1);
}
.kela-design-root .kela-design-filteropt{display:flex;align-items:center;gap:var(--kela-design-s2);font-size:13px;color:var(--kela-design-ink-2);cursor:pointer}
.kela-design-root .kela-design-filteropt input{
  appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;border-radius:4px;
  border:1.5px solid var(--kela-design-line);background:#fff;position:relative;cursor:pointer;
}
.kela-design-root .kela-design-filteropt input[type=radio]{border-radius:999px}
.kela-design-root .kela-design-filteropt input:checked{background:var(--kela-design-blue);border-color:var(--kela-design-blue)}
.kela-design-root .kela-design-filteropt input[type=checkbox]:checked::after{
  content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.kela-design-root .kela-design-filteropt input[type=radio]:checked::after{
  content:"";position:absolute;inset:3.5px;border-radius:999px;background:#fff;
}
.kela-design-root .kela-design-filterfoot{
  grid-column:1/-1;display:flex;justify-content:flex-end;gap:var(--kela-design-s2);
  padding-top:var(--kela-design-s4);border-top:1px solid var(--kela-design-line);
}

.kela-design-root .kela-design-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--kela-design-s5) var(--kela-design-s4)}
.kela-design-root .kela-design-card{
  position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:var(--kela-design-s3);
  padding:var(--kela-design-s3);border:1px solid var(--kela-design-line);
  border-radius:var(--kela-design-r);background:#fff;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.kela-design-root .kela-design-card:hover{box-shadow:var(--kela-design-sh-2);border-color:var(--kela-design-line-2);transform:translateY(-2px)}
.kela-design-root .kela-design-card[hidden]{display:none}
.kela-design-root .kela-design-card-media{
  position:relative;display:block;border-radius:var(--kela-design-r-sm);overflow:hidden;
  background:var(--kela-design-surface);aspect-ratio:1/1;
}
.kela-design-root .kela-design-card-media--pad{padding:14px}
.kela-design-root .kela-design-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.kela-design-root .kela-design-card-media.kela-design-phonebox img{width:auto;height:100%;object-fit:contain}
.kela-design-root .kela-design-card:hover .kela-design-card-media img{transform:scale(1.045)}
.kela-design-root .kela-design-card-tag{
  position:absolute;top:8px;left:8px;height:22px;padding-inline:8px;border-radius:999px;
  background:var(--kela-design-ink);color:#fff;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;font-family:var(--kela-design-display);
}
.kela-design-root .kela-design-card-tag--sale{background:var(--kela-design-rose)}
.kela-design-root .kela-design-card-tag--new{background:var(--kela-design-green)}
.kela-design-root .kela-design-card-fav{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:var(--kela-design-sh-1);
  display:flex;align-items:center;justify-content:center;color:var(--kela-design-faint);
  opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,color .16s ease;
}
.kela-design-root .kela-design-card:hover .kela-design-card-fav,.kela-design-root .kela-design-card-fav:focus-visible{opacity:1;transform:none}
.kela-design-root .kela-design-card-fav svg{width:15px;height:15px}
.kela-design-root .kela-design-card-fav:hover,.kela-design-root .kela-design-card-fav[aria-pressed="true"]{color:var(--kela-design-rose)}
.kela-design-root .kela-design-card-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.kela-design-root .kela-design-card-cat{font-family:var(--kela-design-display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--kela-design-faint)}
.kela-design-root .kela-design-card-name{
  font-family:var(--kela-design-display);font-size:14px;font-weight:500;line-height:1.4;color:var(--kela-design-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kela-design-root .kela-design-card-name a:hover{color:var(--kela-design-blue)}
.kela-design-root .kela-design-card-rate{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--kela-design-muted)}
.kela-design-root .kela-design-card-rate b{font-weight:600;color:var(--kela-design-ink-2)}
.kela-design-root .kela-design-card-price{display:flex;align-items:baseline;gap:var(--kela-design-s2);margin-top:auto}
.kela-design-root .kela-design-card-price b{font-family:var(--kela-design-display);font-size:17px;font-weight:700;color:var(--kela-design-ink)}
.kela-design-root .kela-design-card-price s{font-size:13px;color:var(--kela-design-faint)}
.kela-design-root .kela-design-card-foot{display:grid;grid-template-columns:1fr auto;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-card-foot .kela-design-btn{height:38px;padding-inline:var(--kela-design-s3);font-size:13px}
.kela-design-root .kela-design-card-quick{
  width:38px;height:38px;border-radius:var(--kela-design-r-sm);border:1px solid var(--kela-design-line);
  display:flex;align-items:center;justify-content:center;color:var(--kela-design-muted);
  transition:border-color .16s ease,color .16s ease;
}
.kela-design-root .kela-design-card-quick:hover{border-color:var(--kela-design-blue);color:var(--kela-design-blue)}
.kela-design-root .kela-design-card-quick svg{width:16px;height:16px}
.kela-design-root .kela-design-empty{
  grid-column:1/-1;padding:var(--kela-design-s8) var(--kela-design-s5);text-align:center;
  border:1px dashed var(--kela-design-line);border-radius:var(--kela-design-r);color:var(--kela-design-muted);
}
.kela-design-root .kela-design-empty[hidden]{display:none}
.kela-design-root .kela-design-gridfoot{display:flex;justify-content:center;margin-top:var(--kela-design-s6)}
.kela-design-root .kela-design-gridfoot [hidden]{display:none}

/* live toast for cart feedback */
.kela-design-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:90;
  display:flex;align-items:center;gap:var(--kela-design-s2);
  padding:var(--kela-design-s3) var(--kela-design-s5);border-radius:999px;
  background:var(--kela-design-ink);color:#fff;font-family:var(--kela-design-display);font-size:14px;
  box-shadow:var(--kela-design-sh-3);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.kela-design-root .kela-design-toast[data-show="true"]{transform:translate(-50%,0)}
.kela-design-root .kela-design-toast svg{width:16px;height:16px;color:#7ee2a8}

/* ============================== STORY + FAQ ============================== */
.kela-design-story{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--kela-design-col);align-items:start}
.kela-design-root .kela-design-story-rail{display:grid;gap:var(--kela-design-s4)}
.kela-design-root .kela-design-story-rail img{
  width:100%;aspect-ratio:250/225;object-fit:cover;
  border-radius:var(--kela-design-r);background:var(--kela-design-surface);
}
.kela-design-root .kela-design-story-body{display:flex;flex-direction:column;gap:var(--kela-design-s5);min-width:0}
.kela-design-root .kela-design-story-copy p{font-size:17px;line-height:1.75;color: #000000;font-weight: 500;}
.kela-design-root .kela-design-story-copy p+p{margin-top:var(--kela-design-s4)}
.kela-design-root .kela-design-story-copy ul,.kela-design-root .kela-design-story-copy ol{margin:var(--kela-design-s4) 0 0 var(--kela-design-s5);color:var(--kela-design-muted);font-size:15px;line-height:1.75}
.kela-design-root .kela-design-story-copy ul{list-style:disc}
.kela-design-root .kela-design-story-copy ol{list-style:decimal}
.kela-design-root .kela-design-story-copy img{border-radius:var(--kela-design-r);margin-top:var(--kela-design-s4)}

.kela-design-root .kela-design-faq{display:grid;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-faq-item{
  border:1px solid var(--kela-design-line);border-radius:var(--kela-design-r);background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.kela-design-root .kela-design-faq-item[data-open="true"]{border-color:var(--kela-design-blue-line);box-shadow:0 0 0 3px var(--kela-design-blue-tint)}
.kela-design-root .kela-design-faq-q{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;
  gap:var(--kela-design-s4);text-align:left;padding:var(--kela-design-s4) var(--kela-design-s5);
  font-family:var(--kela-design-display);font-size:15px;font-weight:500;line-height:1.5;color:var(--kela-design-ink);
}
.kela-design-root .kela-design-faq-item[data-open="true"] .kela-design-faq-q{color:var(--kela-design-blue)}
.kela-design-root .kela-design-faq-q svg{width:14px;height:14px;color:var(--kela-design-blue);transition:transform .22s ease}
.kela-design-root .kela-design-faq-item[data-open="true"] .kela-design-faq-q svg{transform:rotate(180deg)}
.kela-design-root .kela-design-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.kela-design-root .kela-design-faq-item[data-open="true"] .kela-design-faq-a{grid-template-rows:1fr}
.kela-design-root .kela-design-faq-a>div{overflow:hidden}
.kela-design-root .kela-design-faq-a p{padding:0 var(--kela-design-s5) var(--kela-design-s5);font-size:14px;line-height:1.7;color:var(--kela-design-muted)}

/* ========================= PRODUCT SPECIFICATIONS ======================== */
.kela-design-spectable{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--kela-design-s8)}
.kela-design-root .kela-design-spectable-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:var(--kela-design-s4);padding-block:var(--kela-design-s3);
  border-bottom:1px solid var(--kela-design-line);
}
.kela-design-root .kela-design-spectable-row[hidden]{display:none}
.kela-design-root .kela-design-spectable-row dt{font-family:var(--kela-design-display);font-size:14px;font-weight:500;color:var(--kela-design-ink)}
.kela-design-root .kela-design-spectable-row dd{margin:0;font-size:14px;color:var(--kela-design-muted)}
.kela-design-root .kela-design-spectable-foot{display:flex;justify-content:center;margin-top:var(--kela-design-s5)}

/* ============================ CAROUSEL SECTION =========================== */
.kela-design-carousel{position:relative}
.kela-design-root .kela-design-carousel-viewport{overflow:hidden}
.kela-design-root .kela-design-carousel-track{display:flex;gap:var(--kela-design-s4);transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}
.kela-design-root .kela-design-carousel-slide{flex:0 0 calc((100% - (var(--kela-design-s4) * 4)) / 5);min-width:0}
.kela-design-root .kela-design-navs{display:flex;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-nav{
  width:36px;height:36px;border-radius:999px;border:1px solid var(--kela-design-line);
  background:#fff;display:flex;align-items:center;justify-content:center;color:var(--kela-design-ink-2);
  transition:border-color .16s ease,color .16s ease;
}
.kela-design-root .kela-design-nav:hover:not(:disabled){border-color:var(--kela-design-blue);color:var(--kela-design-blue)}
.kela-design-root .kela-design-nav:disabled{opacity:.35;cursor:default}
.kela-design-root .kela-design-nav svg{width:14px;height:14px}
.kela-design-root .kela-design-nav--prev svg{transform:rotate(180deg)}
.kela-design-root .kela-design-nav--next svg{transform:none}

/* ================================ RATINGS =============================== */
.kela-design-ratings{
  display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:var(--kela-design-col);
  align-items:center;padding:var(--kela-design-s6);
  border:1px solid var(--kela-design-line);border-radius:var(--kela-design-r-lg);background:var(--kela-design-surface);
}
.kela-design-root .kela-design-ratings-score{display:flex;flex-direction:column;gap:var(--kela-design-s2);align-items:flex-start}
.kela-design-root .kela-design-ratings-num{font-family:var(--kela-design-display);font-weight:700;font-size:44px;line-height:1;color:var(--kela-design-ink)}
.kela-design-root .kela-design-ratings-num sup{font-size:18px;font-weight:500;color:var(--kela-design-muted);top:-.7em}
.kela-design-root .kela-design-ratings-of{font-size:13px;color:var(--kela-design-muted)}
.kela-design-root .kela-design-ratings-acts{display:flex;flex-wrap:wrap;gap:var(--kela-design-s2);margin-top:var(--kela-design-s2)}
.kela-design-root .kela-design-bars{display:grid;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-bar{display:grid;grid-template-columns:56px minmax(0,1fr) 52px;align-items:center;gap:var(--kela-design-s3);font-size:13px;color:var(--kela-design-ink-2)}
.kela-design-root .kela-design-bar-track{height:8px;border-radius:999px;background:#E4E7EC;overflow:hidden}
.kela-design-root .kela-design-bar-fill{display:block;height:100%;border-radius:999px;background:var(--kela-design-blue);width:0;transition:width .7s cubic-bezier(.4,0,.2,1)}
.kela-design-root .kela-design-bar-n{text-align:right;color:var(--kela-design-muted);font-size:12px}

/* ============================== REVIEWS LIST ============================= */
.kela-design-root .kela-design-reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kela-design-s5)}
.kela-design-root .kela-design-review{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--kela-design-s4);
  padding:var(--kela-design-s5);border:1px solid var(--kela-design-line);
  border-radius:var(--kela-design-r);background:#fff;transition:box-shadow .18s ease;
}
.kela-design-root .kela-design-review[hidden]{display:none}
.kela-design-root .kela-design-review:hover{box-shadow:var(--kela-design-sh-2)}
.kela-design-root .kela-design-review-avatar{
  width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--kela-design-blue-tint);color:var(--kela-design-blue);
  font-family:var(--kela-design-display);font-size:17px;font-weight:600;
}
.kela-design-root .kela-design-review-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--kela-design-s2) var(--kela-design-s3)}
.kela-design-root .kela-design-review-name{font-family:var(--kela-design-display);font-size:15px;font-weight:600;color:var(--kela-design-ink)}
.kela-design-root .kela-design-review-verified{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
  color:var(--kela-design-green);background:var(--kela-design-green-tint);
  padding:2px 8px;border-radius:999px;
}
.kela-design-root .kela-design-review-verified svg{width:10px;height:10px}
.kela-design-root .kela-design-review-date{margin-left:auto;font-size:12px;color:var(--kela-design-faint)}
.kela-design-root .kela-design-review-body{grid-column:2;display:flex;flex-direction:column;gap:var(--kela-design-s2)}
.kela-design-root .kela-design-review-text{font-size:14px;line-height:1.7;color:var(--kela-design-muted)}
.kela-design-root .kela-design-review-text p+p{margin-top:var(--kela-design-s2)}
.kela-design-root .kela-design-review-foot{display:flex;align-items:center;gap:var(--kela-design-s4);font-size:12px;color:var(--kela-design-faint)}
.kela-design-root .kela-design-review-helpful{display:inline-flex;align-items:center;gap:6px;color:var(--kela-design-muted)}
.kela-design-root .kela-design-review-helpful:hover{color:var(--kela-design-blue)}
.kela-design-root .kela-design-review-helpful svg{width:13px;height:13px}
.kela-design-root .kela-design-reviewsfoot{display:flex;justify-content:center;margin-top:var(--kela-design-s6);padding-bottom:var(--kela-design-s8)}
.kela-design-root .kela-design-reviewsfoot [hidden]{display:none}

/* Review form — only ever visible after "Write a review" is pressed, so the
   page as designed is unchanged. Uses the same tokens as everything else. */
.kela-design-reviewform{
  margin-top:var(--kela-design-s5);padding:var(--kela-design-s5);
  border:1px solid var(--kela-design-line);border-radius:var(--kela-design-r);background:#fff;
}
.kela-design-root .kela-design-reviewform[hidden]{display:none}
.kela-design-root .kela-design-reviewform .comment-reply-title{
  font-family:var(--kela-design-display);font-size:17px;font-weight:600;
  color:var(--kela-design-ink);display:block;margin-bottom:var(--kela-design-s4);
}
.kela-design-root .kela-design-reviewform p{margin-bottom:var(--kela-design-s4)}
.kela-design-root .kela-design-reviewform label{display:block;font-size:13px;font-weight:600;color:var(--kela-design-ink-2);margin-bottom:var(--kela-design-s2)}
.kela-design-root .kela-design-reviewform input[type=text],
.kela-design-root .kela-design-reviewform input[type=email],
.kela-design-root .kela-design-reviewform textarea{
  width:100%;padding:10px var(--kela-design-s3);border:1px solid var(--kela-design-line);
  border-radius:var(--kela-design-r-sm);background:#fff;font-size:14px;
}
.kela-design-root .kela-design-reviewform textarea{min-height:120px;resize:vertical}
.kela-design-root .kela-design-reviewform .stars a{color:var(--kela-design-amber);font-size:16px;padding-inline:2px}
.kela-design-root .kela-design-reviewform .submit{
  display:inline-flex;align-items:center;justify-content:center;height:44px;
  padding-inline:var(--kela-design-s5);border-radius:var(--kela-design-r-sm);border:0;
  background:var(--kela-design-blue);color:#fff;cursor:pointer;
  font-family:var(--kela-design-display);font-size:14px;font-weight:500;
}
.kela-design-root .kela-design-reviewform .submit:hover{background:var(--kela-design-blue-600)}


/* WooCommerce's real variation table stays in the DOM and stays functional —
   it is only moved out of sight, because the swatches and pills above are the
   same control wearing the design's clothes. */
.kela-design-root .kela-design-varitable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* WooCommerce adds .disabled (not the disabled attribute) until a variation
   is picked, and its own script shows the "choose an option" message. */
.kela-design-root .kela-design-btn.disabled,
.kela-design-root .kela-design-btn.wc-variation-selection-needed{opacity:.45;cursor:default}
.kela-design-root .kela-design-field-label [hidden]{display:none}
.kela-design-root .kela-design-reviews-empty{grid-column:1/-1;padding:var(--kela-design-s7) var(--kela-design-s5);text-align:center;border:1px dashed var(--kela-design-line);border-radius:var(--kela-design-r);color:var(--kela-design-muted)}


/* ---- integration tidy-ups -------------------------------------------------
   WooCommerce shows its own variation panel with .show(), which writes an
   inline display, so it needs !important to stay out of the way — the price
   bar above already carries the live price. The panel stays in the DOM and
   stays functional, it is simply not drawn twice. */
.kela-design-root .woocommerce-variation.single_variation{display:none!important}
.kela-design-root .woocommerce-variation-price,
.kela-design-root .woocommerce-variation-availability,
.kela-design-root .woocommerce-variation-description{display:none!important}

/* The theme's own add-to-cart classes ride along on the design's buttons, so
   its drawer, loading spinner and "added" state all fire. Neutralise only the
   parts of .tf-btn / .btn-main-product that would fight the design's box. */
.kela-design-root .kela-design-btn.tf-btn,
.kela-design-root .kela-design-btn.btn-main-product{
  width:auto;min-width:0;letter-spacing:normal;text-transform:none;border-radius:var(--kela-design-r-sm);
}
.kela-design-root .kela-design-btn--block.tf-btn,
.kela-design-root .kela-design-btn--block.btn-main-product{width:100%}
.kela-design-root .kela-design-btn.loading{opacity:.6;pointer-events:none}
.kela-design-root .kela-design-btn.added::after{content:none}
.kela-design-root .kela-design-card-foot .added_to_cart{display:none}

/* Quantity: the live total lives in the price bar, so the stepper only needs
   to look right next to the two buttons. */
.kela-design-root .kela-design-qty input::-webkit-outer-spin-button,
.kela-design-root .kela-design-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* =============================== RESPONSIVE ============================== */
@media (max-width:1200px){
  .kela-design-root .kela-design-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kela-design-root .kela-design-carousel-slide{flex:0 0 calc((100% - (var(--kela-design-s4) * 3)) / 4)}
  
  .kela-design-root .kela-design-bundle{grid-template-columns:1fr}
  .kela-design-root .kela-design-bundle-total{position:static;max-width:360px}
}
@media (max-width:980px){
  .kela-design-root{--kela-design-section:56px}
  .kela-design-root .kela-design-hero{grid-template-columns:1fr}
  .kela-design-root .kela-design-story{grid-template-columns:1fr}
  .kela-design-root .kela-design-story-rail{grid-template-columns:repeat(5,1fr)}
  .kela-design-root .kela-design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kela-design-root .kela-design-carousel-slide{flex:0 0 calc((100% - (var(--kela-design-s4) * 2)) / 3)}
  .kela-design-root .kela-design-ratings{grid-template-columns:1fr;gap:var(--kela-design-s5)}
  .kela-design-root .kela-design-reviews{grid-template-columns:1fr}
  .kela-design-root .kela-design-spectable{grid-template-columns:1fr;column-gap:0}
  .kela-design-root .kela-design-filterpanel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .kela-design-root{--kela-design-section:44px;--kela-design-col:20px}
  .kela-design-root .kela-design-gallery{grid-template-columns:1fr}
  .kela-design-root .kela-design-gallery-rail{order:2;flex-direction:row;align-items:center;gap:var(--kela-design-s2)}
  .kela-design-root .kela-design-gallery-track{flex-direction:row;overflow-x:auto;flex:1}
  .kela-design-root .kela-design-gallery-thumb{width:72px;height:84px}
  .kela-design-root .kela-design-gallery-arrows{display:none}
  .kela-design-root .kela-design-thumbgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kela-design-root .kela-design-bundle-items{grid-template-columns:1fr}
  .kela-design-root .kela-design-bundle-item{grid-template-rows:auto 160px auto auto}
  .kela-design-root .kela-design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kela-design-root .kela-design-carousel-slide{flex:0 0 calc((100% - var(--kela-design-s4)) / 2)}
  
  .kela-design-root .kela-design-story-rail{grid-template-columns:repeat(3,1fr)}
  .kela-design-root .kela-design-actions{grid-template-columns:1fr;gap:var(--kela-design-s2)}
  .kela-design-root .kela-design-qty{justify-self:start}
  .kela-design-root .kela-design-alts{grid-template-columns:1fr}
  .kela-design-root .kela-design-filterpanel{grid-template-columns:1fr;position:fixed;inset:auto 12px 12px;width:auto;max-height:76vh;overflow:auto}
  .kela-design-root .kela-design-shead{grid-template-columns:1fr}
  .kela-design-root .kela-design-shead-aside{grid-column:1;grid-row:auto;justify-content:flex-start}
  .kela-design-root .kela-design-review{grid-template-columns:1fr}
  .kela-design-root .kela-design-review-body{grid-column:1}
}
@media (hover:none),(pointer:coarse){
  .kela-design-root .kela-design-gallery-zoom,.kela-design-root .kela-design-gallery-lens{display:none}
}
@media (prefers-reduced-motion:reduce){
  .kela-design-root *,.kela-design-root *::before,.kela-design-root *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
  }
  .kela-design-root .kela-design-gallery-zoom,.kela-design-root .kela-design-gallery-lens{display:none}
}