/* =========================================================================
   Käpprätt design tokens & komponentstil — Shoptimizer Child
   Speglar godkänd mockup: _work/pdp-redesign-2026-07-13.html
   ========================================================================= */

:root {
  --kr-brand: #fa7b4c;       /* logo-orange: fyllningar med mörk text */
  --kr-brand-deep: #b8501c;  /* orange text på vit botten (länkar, reapris) */
  --kr-ink: #1f2328;
  --kr-ink-soft: #40474f;
  --kr-muted: #5c6470;
  --kr-line: #e6e8ea;
  --kr-bg-warm: #f8f7f5;
  --kr-green: #2f9e63;
  --kr-badge-black: #0f0000;
  --kr-radius: 12px;
  --kr-shadow: 0 1px 2px rgba(20,24,28,.05), 0 8px 28px rgba(20,24,28,.06);
  --kr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Systemtypsnitt (webfonts fasas ut via aftertaste-optimizer) */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kr-font);
}

/* =========================================================================
   PRODUKTKORT (listningar/kategori)
   ========================================================================= */

ul.products li.product {
  background: #fff;
  border: 1px solid var(--kr-line);
  border-radius: var(--kr-radius);
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  padding-bottom: 14px;
}
ul.products li.product:hover {
  border-color: #cfd4d9;
  transform: translateY(-2px);
  box-shadow: var(--kr-shadow);
}

/* Mjuk bildyta */
ul.products li.product .shoptimizer-plp-image-wrapper,
ul.products li.product .woocommerce-LoopProduct-link > img {
  background: var(--kr-bg-warm);
  border-radius: 10px;
  margin: 8px;
}
ul.products li.product .shoptimizer-plp-image-wrapper img {
  mix-blend-mode: multiply;
  transition: transform .2s;
}
ul.products li.product:hover .shoptimizer-plp-image-wrapper img {
  transform: scale(1.03);
}

/* Textblocket i kortet */
ul.products li.product .woocommerce-loop-product__title {
  font-size: .95rem !important;
  font-weight: 700;
  line-height: 1.32;
  color: var(--kr-ink);
  padding: 0 14px;
}
.kr-card-brand {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kr-muted);
  padding: 6px 14px 0;
}
.kr-card-spec {
  display: block;
  font-size: .78rem;
  color: var(--kr-muted);
  padding: 2px 14px 0;
}
.kr-card-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: #1e6b43;
  padding: 4px 14px 0;
}
.kr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kr-green);
  flex: none;
}

/* Pris i kortet: svart ordinarie, käpp-orange reapris */
ul.products li.product .price {
  color: var(--kr-ink);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 4px 14px 0;
}
ul.products li.product .price del {
  color: #9aa1a8;
  font-weight: 500;
  font-size: .85rem;
}
ul.products li.product .price ins {
  color: var(--kr-brand-deep);
  text-decoration: none;
  font-weight: 800;
}

/* Swatch-chips (CommerceKit) i kortets stil */
ul.products li.product .cgkit-attribute-swatches {
  padding: 4px 14px 0;
}

/* =========================================================================
   BADGES — etablerat system (svart status, orange rea, mörk fet text)
   ========================================================================= */

.sale-item,
span.sale-item.product-label,
.sale-item.product-label.type-bubble {
  background-color: var(--kr-brand) !important;
  color: #2b2b2b !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .3px !important;
  border-radius: 6px !important;
  opacity: 1 !important;
}
.ckit-badge,
.ckit-badge-1,
.ckit-badge_wrapper .ckit-badge {
  background-color: var(--kr-badge-black) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .3px !important;
  border-radius: 6px !important;
  opacity: 1 !important;
}
.ckit-badge.ckit-badge-new {
  color: #fff !important;
}

/* =========================================================================
   PRODUKTSIDA (PDP)
   ========================================================================= */

/* Lös "Rea!"-textflagga i summaryn: bort — rea-badgen ligger redan på bilden */
.single-product .summary .onsale { display: none; }

/* Varumärke + titel */
.kr-brand-eyebrow {
  display: block;
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kr-brand-deep);
  text-decoration: none;
  margin-bottom: 4px;
}
.kr-brand-eyebrow:hover { text-decoration: underline; }
.single-product h1.product_title {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  font-weight: 800;
  color: var(--kr-ink);
}

/* Nyckelfakta-chips */
.kr-keyspecs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
  padding: 0;
  list-style: none;
}
.kr-keyspecs li {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--kr-bg-warm);
  border: 1px solid var(--kr-line);
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--kr-ink-soft);
  padding: 6px 13px;
}
.kr-keyspecs svg {
  width: 15px;
  height: 15px;
  color: var(--kr-brand-deep);
  flex: none;
}

/* Köpzonen: pris → lager → CTA i ett kort */
.kr-buybox {
  border: 1px solid var(--kr-line);
  border-radius: var(--kr-radius);
  background: #fff;
  box-shadow: var(--kr-shadow);
  padding: 18px;
  margin: 0 0 16px;
}
.kr-buybox p.price {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--kr-ink);
  margin-bottom: 6px;
}
.kr-buybox p.price del { color: #9aa1a8; font-weight: 600; font-size: 1.15rem; }
.kr-buybox p.price ins { color: var(--kr-brand-deep); text-decoration: none; }

/* Lagerrad som grön lugn pill */
.kr-buybox .stock.in-stock {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .92rem;
  font-weight: 600;
  color: #1e6b43;
  background: #f2faf5;
  border: 1px solid #d7eee0;
  border-radius: 10px;
  padding: 10px 13px;
  margin: 12px 0;
}
.kr-buybox .stock.in-stock::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kr-green);
  flex: none;
}

/* CTA-knappen (färgsystemet: ljus orange + mörk text) */
.kr-buybox form.cart .single_add_to_cart_button {
  border-radius: 10px;
  font-size: 1.08rem;
  font-weight: 800;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* USP-checklista */
.kr-usps {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--kr-line);
  border-radius: var(--kr-radius);
  background: #fff;
}
.kr-usps li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: .92rem;
  color: var(--kr-ink-soft);
  padding: 4px 0;
}
.kr-usps .kr-ck { color: var(--kr-green); font-weight: 800; flex: none; }
.kr-usps b { color: var(--kr-ink); }
.kr-usps a { color: var(--kr-brand-deep); text-decoration: underline; }

/* Galleri: mjuk varm bildyta utan hårda kanter */
.single-product div.product .images,
.single-product div.product .images .woocommerce-product-gallery__image {
  background: var(--kr-bg-warm);
  border-radius: 16px;
}
.single-product div.product .images img { mix-blend-mode: multiply; }

/* =========================================================================
   BESKRIVNING — läsbarhet
   ========================================================================= */

.woocommerce-Tabs-panel--description {
  font-size: 17px;
  line-height: 1.65;
  color: var(--kr-ink-soft);
}
.woocommerce-Tabs-panel--description > p,
.woocommerce-Tabs-panel--description > ul,
.woocommerce-Tabs-panel--description > h2,
.woocommerce-Tabs-panel--description > h3 {
  max-width: 72ch;
}
.woocommerce-Tabs-panel--description h2 { font-size: 1.35rem; color: var(--kr-ink); }
.woocommerce-Tabs-panel--description h3 { font-size: 1.08rem; color: var(--kr-ink); margin-top: 26px; }
.woocommerce-Tabs-panel--description a { color: var(--kr-brand-deep); text-decoration: underline; }

/* Produktfakta-tabellen som kort */
.woocommerce-Tabs-panel--description .wp-block-table table {
  border: 1px solid var(--kr-line);
  border-radius: var(--kr-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--kr-shadow);
  max-width: 72ch;
}
.woocommerce-Tabs-panel--description .wp-block-table td {
  padding: 10px 18px;
  font-size: .9rem;
  border: 0;
}
.woocommerce-Tabs-panel--description .wp-block-table tr:nth-child(odd) td {
  background: #fbfbfa;
}
.woocommerce-Tabs-panel--description .wp-block-table td:first-child { color: var(--kr-muted); }
.woocommerce-Tabs-panel--description .wp-block-table td:last-child { font-weight: 600; }

/* =========================================================================
   Mobil
   ========================================================================= */

@media (max-width: 720px) {
  .kr-buybox { padding: 14px; }
  .kr-keyspecs li { font-size: .8rem; padding: 5px 11px; }
  ul.products li.product .woocommerce-loop-product__title { font-size: .88rem !important; }
}

/* Prisfärger i köpkortet — vinn över temats regler */
.single-product div.product .summary p.price ins,
.single-product div.product .summary p.price ins .woocommerce-Price-amount {
  color: var(--kr-brand-deep) !important;
  text-decoration: none !important;
  font-weight: 800;
}
.single-product div.product .summary p.price del,
.single-product div.product .summary p.price del .woocommerce-Price-amount {
  color: #9aa1a8 !important;
}

/* CommerceKit-galleriets wrappers: mjuk varm yta + rundning */
.single-product .cgkit-gallery-horizontal,
.single-product .cgkit-gallery-horizontal .swiper,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper {
  background: var(--kr-bg-warm);
  border-radius: 16px;
  overflow: hidden;
}
.single-product .cgkit-thumb-slide img,
.single-product .cgkit-gallery-thumbs img {
  border-radius: 10px;
  background: var(--kr-bg-warm);
}

/* ===== Iteration 2: matcha mockupen (verifierade selektorer från dev-DOM) ===== */

/* Galleri: mjuk varm yta på rätt wrappers */
.single-product .images.cgkit-gallery-horizontal,
.single-product .images.cgkit-gallery-horizontal .cg-layout-horizontal,
.single-product .images.cgkit-gallery-horizontal .swiper {
  background: var(--kr-bg-warm) !important;
  border-radius: 16px;
}
.single-product .images.cgkit-gallery-horizontal .swiper-slide img {
  mix-blend-mode: multiply;
}
.single-product .images.cgkit-gallery-horizontal .swiper-slide {
  background: transparent;
}

/* Titeln: mockupens storlek och vikt, vinn över temat */
.single-product h1.product_title.entry-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em;
}

/* Produktfakta: hela figuren som kort */
.woocommerce-Tabs-panel--description figure.wp-block-table {
  border: 1px solid var(--kr-line);
  border-radius: var(--kr-radius);
  box-shadow: var(--kr-shadow);
  overflow: hidden;
  max-width: 72ch;
  margin-left: 0;
}
/* Kortets rubrik ritas av CSS på ALLA viewporter (desktop + mobil, båda
   sajter) så produktinnehållet slipper egen "Produktfakta"-rubrik — en enda
   källa för etiketten, kan aldrig spreta. Lokaliseras via :lang. */
.woocommerce-Tabs-panel--description figure.wp-block-table::before {
  content: "Produktfakta";
  display: block;
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 800;
  background: var(--kr-bg-warm);
  border-bottom: 1px solid var(--kr-line);
}
:lang(en) .woocommerce-Tabs-panel--description figure.wp-block-table::before { content: "Product facts"; }
.woocommerce-Tabs-panel--description figure.wp-block-table table {
  border: 0;
  margin: 0;
  box-shadow: none;
}
.woocommerce-Tabs-panel--description figure.wp-block-table td {
  padding: 10px 18px !important;
  font-size: .9rem;
  border: 0 !important;
}
.woocommerce-Tabs-panel--description figure.wp-block-table tr:nth-child(odd) td {
  background: #fbfbfa !important;
}
.woocommerce-Tabs-panel--description figure.wp-block-table td:first-child { color: var(--kr-muted); }
.woocommerce-Tabs-panel--description figure.wp-block-table td:last-child { font-weight: 600; }

/* It25 (Thomas): ett långt sammansatt etikettord ("Apparatensstandardtryck:")
   tvingade annars etikettkolumnen bred och klämde värdekolumnen smal (auto-
   layout låter längsta cellen bestämma bredden). Fasta proportioner 40/60 +
   avstavning bryter ordet snyggt i stället. Gäller båda sajter. */
.woocommerce-Tabs-panel--description figure.wp-block-table table {
  table-layout: fixed;
  width: 100%;
}
.woocommerce-Tabs-panel--description figure.wp-block-table td:first-child {
  width: 40%;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.woocommerce-Tabs-panel--description figure.wp-block-table td:last-child {
  overflow-wrap: break-word;
}

/* Köpkortet: mer luft, tydligare pris */
.kr-buybox { padding: 20px 22px; }
.kr-buybox p.price {
  font-size: 2rem !important;
  margin-bottom: 8px !important;
}
.kr-buybox .wp-element-button,
.kr-buybox .single_add_to_cart_button { width: 100%; }

/* Thumbs under galleriet (CK horisontell layout) */
.single-product .cgkit-gallery-horizontal .swiper-thumbs .swiper-slide,
.single-product .cg-thumb-slide {
  background: var(--kr-bg-warm);
  border-radius: 10px;
  overflow: hidden;
}

/* Fix: CTA i köpkortet — flex-rad med antal, ingen overflow */
.kr-buybox form.cart {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
}
.kr-buybox form.cart .quantity { flex: none; }
.kr-buybox .single_add_to_cart_button,
.kr-buybox .wp-element-button {
  width: auto !important;
  flex: 1;
  min-width: 0;
}

/* =========================================================================
   Iteration 3: mockup-paritet — galleri, rytm, tillbehörskort
   ========================================================================= */

/* ---- Galleri: varm yta, luft runt bilden, mjuka thumbs (verifierade klasser) ---- */
.single-product .images .cg-main-swiper {
  background: var(--kr-bg-warm) !important;
  border-radius: 16px;
  overflow: hidden;
}
.single-product .cg-main-swiper .swiper-slide {
  background: transparent !important;
  padding: 5%;
}
.single-product .cg-main-swiper .swiper-slide img {
  mix-blend-mode: multiply;
}
.single-product .cg-thumb-swiper { margin-top: 10px; }
.single-product .cg-thumb-swiper .swiper-slide {
  background: var(--kr-bg-warm);
  border-radius: 10px;
  padding: 7px;
  opacity: .7;
  transition: opacity .15s, box-shadow .15s;
  cursor: pointer;
}
.single-product .cg-thumb-swiper .swiper-slide:hover { opacity: 1; }
.single-product .cg-thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(184,80,28,.35), 0 0 0 4px rgba(250,123,76,.14);
}
.single-product .cg-thumb-swiper img { mix-blend-mode: multiply; border-radius: 6px; }

/* ---- Summary-rytm: mockupens luft och skala ---- */
.single-product .summary.entry-summary > * { margin-top: 0; margin-bottom: 14px; }
.single-product .summary .kr-brand-eyebrow { margin-bottom: 2px; }
.single-product h1.product_title.entry-title { margin-bottom: 10px !important; }
.kr-keyspecs { margin: 0 0 18px !important; gap: 8px; }
.kr-keyspecs li {
  margin: 0 !important;
  font-size: .86rem !important;
  padding: 6px 13px !important;
  line-height: 1.3;
}

/* Omnibus (tidigare lägsta pris) + SVEA: dämpade, små, täta */
.aph-omnibus-info, .aph-omnibus-price {
  font-size: .82rem !important;
  color: var(--kr-muted) !important;
  font-style: normal !important;
}
.kr-buybox .aph-omnibus-info { margin: 0 0 8px; }
.kr-buybox .svea-part-payment-module { margin: 0 0 6px; font-size: .85rem; }

/* Pris-raden */
.kr-buybox p.price { margin: 0 0 4px !important; line-height: 1.15; }
.kr-buybox p.price del { font-size: 1.15rem !important; font-weight: 600; }
.kr-buybox p.price ins { font-size: 2rem !important; }

/* Lager-pill kompakt */
.kr-buybox .stock.in-stock { font-size: .9rem; line-height: 1.4; margin: 10px 0 14px; }

/* Antal + CTA i jämnhöjd */
.kr-buybox form.cart { margin: 0 0 6px; }
.kr-buybox form.cart .quantity,
.kr-buybox form.cart .quantity input { min-height: 52px; }
.kr-buybox .single_add_to_cart_button { min-height: 52px; }

/* ---- Tillbehör: eget kort under köpkortet ("Passar ihop med") ----
   OBS: skopat till .summary — sidbottens section.related-wrapper ska INTE ha kortram */
.single-product .summary .related-wrapper {
  border: 1px solid var(--kr-line);
  border-radius: var(--kr-radius);
  background: #fff;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.single-product .aftertaste-related-products-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--kr-ink);
}
.single-product .aftertaste-related-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--kr-line);
}
.single-product .aftertaste-related-product:first-of-type { border-top: 0; }
.single-product .aftertaste-related-product img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--kr-bg-warm);
  border-radius: 8px;
}

/* "Snabba leveranser"-widgeten på PDP: dubblerar gröna lagerpillens budskap — dölj */
.single-product div.product .widget_custom_html { display: none; }

/* =========================================================================
   Iteration 4: Thomas genomgång — balans, ordning, komponentdesign
   ========================================================================= */

/* ---- Produktens tvåkolumnsgrid som mockupen (58/42, 44px gap, max 1240) ---- */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(360px, 42fr);
  gap: 0 44px;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.single-product div.product > .images {
  grid-column: 1; grid-row: 1;
  width: 100% !important; float: none !important; margin: 0 !important;
}
.single-product div.product > .summary {
  grid-column: 2; grid-row: 1;
  width: 100% !important; float: none !important; margin: 0 !important;
}
.single-product div.product > *:not(.images):not(.summary) { grid-column: 1 / -1; }

/* ---- Galleri: fixa utdragen bild + thumbs utanför ramen ---- */
.single-product .cg-main-swiper .swiper-slide { padding: 0 !important; }
.single-product .cg-main-swiper .swiper-slide img {
  padding: 5%;
  box-sizing: border-box;
  width: 100%; height: auto;
  object-fit: contain;
}
.single-product .images { overflow: hidden; }
.single-product .cg-thumb-swiper { overflow: hidden; max-width: 100%; }

/* ---- Summary: flex-kolumn med mockupens ordning ---- */
.single-product div.product .summary { display: flex; flex-direction: column; }
.single-product .summary > * { order: 20; }
.single-product .summary > .kr-brand-eyebrow { order: 1; }
.single-product .summary > .product_title { order: 2; }
.single-product .summary > .kr-keyspecs { order: 3; }
.single-product .summary > .kr-buybox { order: 4; }
.single-product .summary > .commercekit-inventory { order: 5; margin: -6px 0 16px; }
.single-product .summary > .aftertaste-related-products-list,
.single-product .summary > .related-wrapper { order: 6; }
.single-product .summary > .kr-usps { order: 7; }
.single-product .summary > .product-widget { order: 8; }
.single-product .summary > .commercekit-wishlist { order: 9; }

/* Dölj: lös rea-flagga, short desc-dubblett, Snabba leveranser-widget */
.single-product .summary > .onsale,
.single-product .summary > .woocommerce-product-details__short-description,
.single-product div.product .widget_custom_html { display: none !important; }

/* Scarcity (CommerceKit): kompakt röd rad direkt under köpkortet */
.commercekit-inventory { font-size: .85rem; color: #b3261e; font-weight: 600; }

/* ---- CTA: mörk text enligt färgsystemet + stabil placering ---- */
.kr-buybox .single_add_to_cart_button {
  color: #2b2b2b !important;
  background: var(--kr-brand) !important;
  border-color: var(--kr-brand) !important;
  text-align: center;
}
.kr-buybox form.cart .quantity {
  border: 1px solid #cfd4d9;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.kr-buybox form.cart .quantity .qty { font-weight: 700; border: 0; color: var(--kr-ink); }

/* ---- Svea: ren textrad utan logotyp ---- */
.kr-buybox .svea-part-payment-module img,
.kr-buybox .svea-part-payment-module svg { display: none !important; }
.kr-buybox .svea-part-payment-module,
.kr-buybox .svea-part-payment-module * {
  font-size: .9rem !important;
  color: var(--kr-muted) !important;
  margin: 0 !important;
}
.kr-buybox .svea-part-payment-module { margin: 0 0 4px !important; }

/* Omnibus tät under priset (lagkrav vid rea — behåller, dämpar) */
.kr-buybox .aph-omnibus-info { margin: 0 0 10px !important; }

/* USP: inga fula radbryt */
.kr-usps { font-size: .92rem; }
.kr-usps a { white-space: nowrap; }

/* ---- Tillbehörskortet: modern raddesign ---- */
.aftertaste-related-products-list {
  border: 1px solid var(--kr-line);
  border-radius: var(--kr-radius);
  background: #fff;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.aftertaste-related-products-list .aftertaste-related-products-title {
  font-size: 1rem; font-weight: 800; margin: 0 0 6px; color: var(--kr-ink);
}
.aftertaste-related-product {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--kr-line);
}
.aftertaste-related-product:first-of-type { border-top: 0; }
.aftertaste-related-product img {
  width: 48px; height: 48px; object-fit: contain;
  background: var(--kr-bg-warm); border-radius: 8px; padding: 4px;
}
.aftertaste-related-product .button,
.aftertaste-related-product a.button {
  background: var(--kr-brand) !important;
  color: #2b2b2b !important;
  border-radius: 8px; font-weight: 800; font-size: .8rem; padding: 7px 14px;
}

/* ---- Offert-kortet som mockupens streckade quote-kort ---- */
.single-product .summary .product-widget {
  border: 1px dashed #d9cfc7 !important;
  border-radius: var(--kr-radius);
  background: var(--kr-bg-warm);
  padding: 13px 16px;
  font-size: .92rem;
  color: var(--kr-ink-soft);
}
.single-product .summary .commercekit-wishlist { font-size: .85rem; }

/* ---- Beskrivning: tvåkolumn med sticky Produktfakta (mockupen) ---- */
@media (min-width: 921px) {
  .woocommerce-Tabs-panel--description {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
    gap: 0 44px;
    align-items: start;
  }
  .woocommerce-Tabs-panel--description > * { grid-column: 1; max-width: 70ch; }
  .woocommerce-Tabs-panel--description > figure.wp-block-table {
    grid-column: 2;
    grid-row: 1 / span 60;
    position: sticky; top: 16px;
    max-width: none;
    margin: 0;
  }
  /* Kortrubriken ("Produktfakta"/"Product facts") ligger i bas-stilen ovan
     (::before, visas på ALLA viewporter). Produktinnehållet har inga egna
     rubriker längre = inga döljregler behövs — därav borttaget här. */
}
.woocommerce-Tabs-panel--description p  { font-size: 17px !important; line-height: 1.65 !important; }
.woocommerce-Tabs-panel--description li { font-size: 16px !important; line-height: 1.6 !important; }
.woocommerce-Tabs-panel--description h2 { font-size: 1.35rem !important; font-weight: 800 !important; }
.woocommerce-Tabs-panel--description h3 { font-size: 1.08rem !important; font-weight: 700 !important; }

/* ===== Iteration 4b: sista resterna ===== */

/* "Snabba leveranser"-textwidgeten inuti product-widget: dölj (dubblett av lagerpillen) */
.single-product .summary .product-widget #text-6,
.single-product .summary .product-widget .widget_text { display: none !important; }

/* CTA: mörk text — vinn specificitetskriget mot temats .alt-regler */
.single-product .summary .kr-buybox form.cart button.single_add_to_cart_button.alt,
.single-product .summary .kr-buybox form.cart .single_add_to_cart_button {
  color: #2b2b2b !important;
}

/* Tillbehörslistan: visa alla rader, ingen intern scroll */
.single-product .aftertaste-related-products-list,
.single-product .aftertaste-related-products-list .related-wrapper {
  max-height: none !important;
  overflow: visible !important;
}

/* =========================================================================
   Iteration 5: Thomas rond 2 — köpkort exakt som mockup, kompakta tillbehör,
   bildfyllnad, bredd/balans, städade detaljer
   ========================================================================= */

/* ---- Bredd & balans: temats egna 1170px (≈1254 band ≈ mockupens 1240) och 58/42.
   OBS: samma siffror som 8c/9-regeln längre ner — ändra aldrig ena utan andra ---- */
.single-product .col-full { max-width: 1170px; }
.single-product div.product {
  grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr);
  gap: 0 44px;
}
/* Sticky galleri så vänsterspalten följer med den högre högerspalten */
.single-product div.product > .images { position: sticky; top: 16px; align-self: start; }

/* ---- Huvudbilden: fyll ytan (mockup) ---- */
.single-product .cg-main-swiper .swiper-slide {
  display: flex; align-items: center; justify-content: center;
}
.single-product .cg-main-swiper .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 3%;
}

/* ---- Köpkortet: mockupens exakta ordning via flex ---- */
.kr-buybox { display: flex; flex-direction: column; }
.kr-buybox > * { order: 20; }
.kr-buybox > p.price { order: 1; margin: 0 0 2px !important; }
.kr-buybox > .svea-part-payment-module { order: 2; margin: 0 0 6px !important; }
.kr-buybox > .aph-omnibus-info { order: 3; margin: 0 0 12px !important; }
.kr-buybox > .stock, .kr-buybox > .kr-stock { order: 4; }
.kr-buybox > form.cart { order: 5; }
.kr-buybox > .commercekit-inventory { order: 6; margin: 12px 0 0 !important; }

/* Lagerpillen: en rad, fet + liten */
.kr-buybox .kr-stock { display: flex; align-items: baseline; flex-wrap: wrap; }
.kr-buybox .kr-stock b { font-weight: 700; }
.kr-buybox .kr-stock small { font-weight: 500; font-size: .84rem; color: #2f7a51; }

/* ---- Köprad: centrerad CTA + mockupens steppar (− 1 +) ---- */
.kr-buybox form.cart { display: flex; gap: 10px; align-items: stretch; margin: 0 !important; }
.kr-buybox form.cart .quantity {
  display: flex; align-items: stretch;
  border: 1px solid #cfd4d9; border-radius: 10px;
  background: #fff; overflow: hidden;
  min-height: 52px; margin: 0;
}
.kr-buybox .quantity .qty {
  order: 2; width: 44px; min-height: auto;
  border: 0 !important; text-align: center; font-weight: 700;
  background: #fff;
}
.kr-buybox .quantity .quantity-nav { display: contents; }
.kr-buybox .quantity .quantity-button {
  position: static !important;
  width: 36px; height: auto !important;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: #fff;
  color: var(--kr-ink-soft); font-size: 1.15rem; cursor: pointer;
}
.kr-buybox .quantity .quantity-down { order: 1; }
.kr-buybox .quantity .quantity-up { order: 3; }
.kr-buybox .single_add_to_cart_button {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
  min-height: 52px; padding: 0 18px !important;
}

/* ---- Tillbehör: kompakt om-design (mini-rader, hairlines, uppercase-rubrik) ---- */
.aftertaste-related-products-list { padding: 12px 14px; margin: 0 0 14px; }
.aftertaste-related-products-list .aftertaste-related-products-title {
  font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--kr-muted); margin: 0 0 2px;
}
.aftertaste-related-product { gap: 10px; padding: 7px 0; border-top: 1px solid #f0f1f2; }
.aftertaste-related-product img { width: 34px; height: 34px; padding: 3px; border-radius: 7px; }
.aftertaste-related-product a { font-size: .85rem; line-height: 1.3; }
.aftertaste-related-product .button,
.aftertaste-related-product a.button { font-size: .75rem; padding: 5px 12px !important; border-radius: 7px; }

/* ---- Offert-kortet: visa innehållet igen, dölj bara Snabba lev-delarna ---- */
.single-product .summary .product-widget .widget_text { display: block !important; }
.single-product .summary .product-widget .textwidget > p:first-child,
.single-product .summary .product-widget .textwidget > ul { display: none !important; }

/* ---- Artikelnr/Kategorier-raden: ren, utan lösa linjer ---- */
.single-product .product_meta,
.single-product .product_meta > * {
  border: 0 !important;
  box-shadow: none !important;
}
.single-product .product_meta {
  padding: 16px 0 !important;
  margin: 4px 0 0;
  font-size: .85rem;
  color: var(--kr-muted);
  border-top: 1px solid var(--kr-line) !important;
}

/* ===== Iteration 5b: rätt selektorer för köpkortets ordning ===== */

/* Ordning på de FAKTISKA direkta barnen */
.kr-buybox > .cgkit-as-variation-price { order: 1; margin: 0; }
.kr-buybox > .sale-item.product-label {
  order: 2;
  position: static !important;
  display: inline-block;
  width: max-content;
  align-self: flex-start;
  margin: 2px 0 6px !important;
}
.kr-buybox > .svea-part-payment-module { order: 3; }
.kr-buybox > .aph-omnibus-price { order: 4; margin: 0 0 12px !important; font-size: .82rem; color: var(--kr-muted); }
.kr-buybox > .aph-omnibus-price i { font-style: normal; }
.kr-buybox > .kr-stock { order: 5; }
.kr-buybox > form.cart { order: 6; }
.kr-buybox > .commercekit-inventory { order: 7; }
.kr-buybox > .clear, .kr-buybox > div:empty { display: none; }

/* Priset inne i wrappern */
.kr-buybox .cgkit-as-variation-price p.price { margin: 0 !important; }

/* Dubblerad lagermätare utanför kortet: bort (den inne i kortet gäller) */
.single-product .summary > .commercekit-inventory { display: none !important; }

/* Lagerpillen: naturligt flöde = en rad när det får plats */
.kr-buybox .kr-stock { display: block; }
.kr-buybox .kr-stock b, .kr-buybox .kr-stock small { display: inline; }
.kr-buybox .kr-stock small { font-size: .82rem; }

/* Stepparen: egna +/− symboler (temats ikon-CSS slogs ut av display:contents) */
.kr-buybox .quantity .quantity-button { background-image: none !important; }
.kr-buybox .quantity .quantity-button::before,
.kr-buybox .quantity .quantity-button::after { content: none !important; }
.kr-buybox .quantity .quantity-up::before   { content: "+" !important; font-size: 1.2rem; line-height: 1; }
.kr-buybox .quantity .quantity-down::before { content: "−" !important; font-size: 1.2rem; line-height: 1; }

/* ===== Iteration 5c: egen steppar + enradig lagerpill ===== */

/* Temats pil-markup: bort helt (ersätts av .kr-qbtn från child-JS) */
.kr-buybox .quantity .quantity-nav { display: none !important; }
.kr-buybox form.cart .quantity {
  display: flex;
  align-items: center;
  padding: 0;
}
.kr-buybox .quantity .kr-qbtn {
  width: 38px;
  height: 50px;
  border: 0;
  background: #fff;
  color: var(--kr-ink-soft);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kr-buybox .quantity .kr-qbtn:hover { background: var(--kr-bg-warm); }
.kr-buybox .quantity input.qty {
  order: 0;
  width: 40px;
  min-height: auto;
  height: 50px;
  border: 0 !important;
  outline: 0;
  text-align: center;
  font-weight: 700;
  color: var(--kr-ink);
  background: #fff;
  -moz-appearance: textfield;
}
.kr-buybox .quantity input.qty::-webkit-outer-spin-button,
.kr-buybox .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Lagerpillen: en rad */
.kr-buybox .kr-stock { padding: 9px 12px; }
.kr-buybox .kr-stock small { font-size: .8rem; letter-spacing: -.01em; }

/* Lagerpillen: en rad (vinn över äldre flex-regel) */
.kr-buybox .stock.in-stock.kr-stock { display: block; }

/* Artikelnr/Kategorier/Varumärke: egen lugn rad, ingen flytande överhäng */
.single-product .product_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  float: none !important;
  width: 100% !important;
  max-width: 100%;
  text-align: left !important;
  justify-content: flex-start;
}
.single-product .product_meta > span { display: inline-flex; gap: 5px; white-space: normal; }

/* ===== Iteration 6: bredd, svart pris, kompakta tillbehör, galleri-ram, offertfix ===== */

/* Full bredd: samma kant som huvudmenyn */
.single-product div.product { max-width: 100%; }

/* Priser: svarta (färgbalans — orange reserveras för CTA/chip) */
.kr-buybox .cgkit-as-variation-price p.price ins,
.kr-buybox .cgkit-as-variation-price p.price ins .woocommerce-Price-amount,
.single-product div.product .summary p.price ins,
.single-product div.product .summary p.price ins .woocommerce-Price-amount {
  color: var(--kr-ink) !important;
}

/* ORDINARIE pris i köpkortet: tvinga svart. På Spagat färgar Shoptimizers
   accentfärg (#fa7b4c, från sajtens theme_mods) ordinariepriset orange och
   slår child-temats basregel på specificitet — den här !important-regeln
   vinner på båda sajter. Rea-priset (ins ovan) förblir opåverkat. */
.single-product div.product .summary p.price,
.single-product div.product .summary p.price > .woocommerce-Price-amount,
.kr-buybox .cgkit-as-variation-price p.price,
.kr-buybox .cgkit-as-variation-price p.price > .woocommerce-Price-amount,
.kr-buybox .cgkit-product-price,
.kr-buybox .cgkit-product-price .woocommerce-Price-amount {
  color: var(--kr-ink) !important;
}

/* -15%-chippen inline efter priset (flyttas dit av child-JS) */
.kr-buybox p.price .sale-item {
  position: static !important;
  display: inline-block;
  margin: 0 0 0 10px !important;
  vertical-align: middle;
  transform: translateY(-3px);
}

/* Galleri: ram endast runt huvudbilden — thumbs utanför */
.single-product div.product .images,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .images.cgkit-gallery-horizontal,
.single-product .images.cgkit-gallery-horizontal .cg-layout-horizontal {
  background: transparent !important;
  border-radius: 0;
  overflow: visible;
}
.single-product .images .cg-main-swiper {
  background: var(--kr-bg-warm) !important;
  border-radius: 16px;
  overflow: hidden;
}
.single-product .cg-thumb-swiper { margin-top: 12px; }

/* Tillbehör: ännu kompaktare rader */
.aftertaste-related-products-list { padding: 10px 14px 8px; }
.aftertaste-related-product { padding: 5px 0; gap: 9px; }
.aftertaste-related-product img { width: 28px; height: 28px; padding: 2px; }
.aftertaste-related-product a { font-size: .82rem; }
.aftertaste-related-product .button,
.aftertaste-related-product a.button { font-size: .72rem; padding: 4px 11px !important; }

/* Offert-kortet: häv gamla ID-regeln som dolde HELA widgeten */
.single-product .summary .product-widget #text-6 { display: block !important; }

/* ===== Iteration 7: bredd = menyns kant, steppar-gap, thumbs-brickor, täta tillbehör ===== */

/* Innehålls-containern: samma kant som huvudmenyn — ersatt av 8c/9-regeln
   längre ner (temats 1170px + 2.617924em med !important) */

/* Köprad: stepparen + CTA tätt ihop, knappen fyller resten */
.kr-buybox form.cart {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: stretch;
}
.kr-buybox form.cart .quantity { margin: 0 !important; flex: none; }
.kr-buybox .single_add_to_cart_button {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

/* Lagerpillen: mindre text = en rad */
.kr-buybox .kr-stock small { font-size: .78rem; }
.kr-buybox .kr-stock { padding: 9px 11px; }

/* Thumbs: mjuka varma brickor igen (fristående under ramen) */
.single-product .cg-thumb-swiper .swiper-slide,
.single-product .cg-thumb-swiper li {
  background: var(--kr-bg-warm) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 6px !important;
  opacity: .7;
  transition: opacity .15s, box-shadow .15s;
  overflow: hidden;
}
.single-product .cg-thumb-swiper .swiper-slide:hover,
.single-product .cg-thumb-swiper li:hover { opacity: 1; }
.single-product .cg-thumb-swiper .swiper-slide-thumb-active,
.single-product .cg-thumb-swiper .flex-active-slide,
.single-product .cg-thumb-swiper .swiper-slide[aria-current] {
  opacity: 1;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(184,80,28,.35), 0 0 0 4px rgba(250,123,76,.14) !important;
}
.single-product .cg-thumb-swiper img {
  mix-blend-mode: multiply;
  border-radius: 6px;
  border: 0 !important;
}

/* Tillbehör: vinn över pluginets frontend.css */
.single-product .aftertaste-related-products-list {
  padding: 8px 12px 4px !important;
  margin: 0 0 14px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-radius) !important;
}
.single-product .aftertaste-related-product {
  margin-bottom: 0 !important;
  padding: 4px 0 !important;
  border-bottom: 0 !important;
  border-top: 1px solid #f0f1f2 !important;
}
.single-product .aftertaste-related-product:first-of-type { border-top: 0 !important; }
.single-product .aftertaste-related-product .product-image {
  flex: 0 0 28px !important;
  margin-right: 8px !important;
}
.single-product .aftertaste-related-product .product-image img {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}
.single-product .aftertaste-related-product .product-details { gap: 10px !important; }
.single-product .aftertaste-related-product .product-details h2 a { font-size: .82rem !important; }

/* ===== Iteration 7b: offert-kortets inre, meta-raden, jämnhöga kort ===== */

/* Offert-kortet: döda widgetens inline-bakgrund/padding, centrera vertikalt */
.single-product .summary .product-widget { padding: 4px 16px !important; display: flex; align-items: center; min-height: 64px; }
.single-product .summary .product-widget .widget_text { width: 100%; }
.single-product .summary .product-widget .textwidget > div {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.single-product .summary .product-widget .textwidget a { text-decoration: none !important; }
.single-product .summary .product-widget .textwidget img[src*="pil"] { margin-top: 10px !important; }

/* Artikelnr-raden: vänsterställd, ren */
.single-product .product_meta {
  justify-content: flex-start !important;
  margin: 0 !important;
  float: none !important;
  border: 0 !important;
  border-top: 1px solid var(--kr-line) !important;
  box-shadow: none !important;
  background: none !important;
}

/* Produktkorten: jämn höjd — pris/lager/swatchar ankras i botten */
ul.products li.product { display: flex; flex-direction: column; }
ul.products li.product .price { margin-top: auto !important; }
ul.products li.product .woocommerce-loop-product__title {
  -webkit-line-clamp: 2 !important;
  min-height: 2.65em !important;
  max-height: 2.65em !important;
}

/* ===== Iteration 8: linjerad container, mockupens typvikter ===== */

/* Iteration 9: headern behåller TEMATS geometri (1170px + 2.617924em ≈ 1254px band,
   inom rekommenderade 1200–1300 och = mockupens 1240). Innehållet får exakt samma
   värden i 8c-regeln nedan — ingen egen headerregel behövs längre. */

/* Mockupens typvikter: kraftigt pris + kraftiga rubriker */
.single-product .summary p.price,
.single-product .summary p.price ins,
.single-product .summary p.price .woocommerce-Price-amount {
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
.single-product .summary p.price del,
.single-product .summary p.price del .woocommerce-Price-amount {
  font-weight: 600 !important;
}
.single-product h1.product_title.entry-title { font-weight: 800 !important; }
.woocommerce-Tabs-panel--description h2 { font-weight: 800 !important; letter-spacing: -.01em; }
.woocommerce-Tabs-panel--description h3 { font-weight: 750 !important; }
.aftertaste-related-products-list .aftertaste-related-products-title { font-weight: 800 !important; }
h2.blocktitle, .up-sells h2, .related h2 { font-weight: 800 !important; letter-spacing: -.01em; }

/* ===== Iteration 8b: elementens EGNA max-bredder var boven — släpp dem ===== */
.single-product .woocommerce-breadcrumb,
.single-product div.product,
.single-product .woocommerce-tabs,
.single-product .up-sells,
.single-product .related.products {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== Iteration 8c/9: EXAKT samma geometri som headermenyn =====
   Temats .col-full är content-box: max-width 1170px + padding 2.617924em.
   Innehållets col-full har en temaregel som nollar padding
   (.single-product .site-content .col-full{padding:0}) — därför upprepas
   TEMATS EGNA värden här med högre specificitet. Samma siffror som headern
   = linjering vid alla viewport-bredder, och ingen breddhoppning mellan sidor. */
.single-product .site-content .col-full,
.single-product #content .col-full {
  max-width: 1170px !important;
  padding-left: 2.617924em !important;
  padding-right: 2.617924em !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.single-product .woocommerce-breadcrumb { padding-left: 0 !important; margin-left: 0 !important; }

/* Även main/primary-wrapprarna har egna tak — släpp dem */
.single-product main.site-main,
.single-product #primary,
.single-product #main {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ===== Iteration 8e: wrappern ÄR tvåkolumnslayouten — gör den till grid =====
   DOM på dev: div.product > .product-details-wrapper > (.images, div, .summary).
   Temats float-layout ersätts med grid direkt på wrappern; i div.product-gridden
   spänner wrappern hela raden. */
.single-product div.product > .product-details-wrapper { grid-column: 1 / -1; grid-row: auto; }
.single-product .product-details-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr);
  gap: 0 44px;
  align-items: start;
}
.single-product .product-details-wrapper > .images {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  position: sticky;
  top: 16px;
  align-self: start;
}
.single-product .product-details-wrapper > .summary {
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
}
.single-product .product-details-wrapper > *:not(.images):not(.summary) { grid-column: 1 / -1; }
@media (max-width: 992px) {
  .single-product .product-details-wrapper { display: block !important; }
  .single-product .product-details-wrapper > .images { position: static; }
}

/* ===== Iteration 9: sektionsindrag, mockupens typsnitt, thumbs-brickor ===== */

/* a) Sektionerna under galleriet har EGNA tema-containrar (max-width 1170 +
   em-padding) — inuti vår col-full blev det dubbelindrag. Släpp dem. */
.single-product .woocommerce-tabs.wc-tabs-wrapper,
.single-product .woocommerce-Tabs-panel,
.single-product .related.products,
.single-product .up-sells,
.single-product .wc-prl-recommendations {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* b) Mockupen använder systemtypsnittet — dev laddade webfonten Inter, som ger
   annan vikt/bredd på H1 och pris trots samma font-weight. Systemstacken är
   dessutom prestandamålet (inga font-nedladdningar). */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif !important;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.single-product h1.product_title.entry-title {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem) !important;
}
.kr-buybox p.price del,
.kr-buybox p.price del .woocommerce-Price-amount { font-size: 1.15rem !important; }

/* c) Thumbs = mockupens brickor: kvadratiska, luft mellan (vit border-box-ram
   som inte rubbar swipers mått) och AKTIV RING SOM INSET så den aldrig klipps
   av swiperns overflow:hidden. */
.single-product .cg-thumb-swiper .swiper-slide,
.single-product .cg-thumb-swiper li {
  border: 5px solid #fff !important;
  border-radius: 15px !important;
  padding: 7px !important;
  background: var(--kr-bg-warm) !important;
  opacity: .75;
  overflow: hidden;
  height: auto !important;
  box-shadow: none !important;
}
.single-product .cg-thumb-swiper .swiper-slide img,
.single-product .cg-thumb-swiper li img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 8px;
}
.single-product .cg-thumb-swiper .swiper-slide:hover,
.single-product .cg-thumb-swiper li:hover { opacity: 1; }
.single-product .cg-thumb-swiper .swiper-slide-thumb-active,
.single-product .cg-thumb-swiper .swiper-slide[aria-current] {
  opacity: 1;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(184, 80, 28, .4),
              inset 0 0 0 5px rgba(250, 123, 76, .16) !important;
}

/* ===== Iteration 10: buybox-rytm (Thomas Compass-feedback) ===== */

/* 1: delbetalningsraden tätt under priset */
.kr-buybox p.price { margin-bottom: 2px !important; }
.kr-buybox .svea-part-payment-module { margin: 0 0 4px !important; }

/* 2: mindre luft ovanför/under lagerpillen */
.kr-buybox .stock.in-stock { margin: 10px 0 !important; }

/* 3: bokningspluginets (aftertaste-booking-system) inre kort plattas ut —
   köpkortet ÄR redan kortet, ingen dubbel ram/padding */
.kr-buybox .aftertaste-bs-buybox { margin: 0 !important; }
.kr-buybox .aftertaste-bs-buybox__cart {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 4: jämn luft ovan/under "Bara X kvar i lager!" */
.kr-buybox .commercekit-inventory { margin: 12px 0 !important; }

/* Demo-bokningen: eget luftigt block under köpraden */
.kr-buybox .aftertaste-bs-accordion { margin-top: 12px !important; }

/* Iteration 10b: även bokningspluginets YTTRE wrapper har ram/padding — bort,
   demo-blocket separeras med en hårlinje istället */
.kr-buybox .aftertaste-bs-buybox {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.kr-buybox .aftertaste-bs-accordion {
  border-top: 1px solid var(--kr-line) !important;
  padding-top: 4px !important;
}

/* ===== Iteration 10c: Compass-finlir (Thomas rond 2) ===== */

/* 1: delbetalningsraden ännu 4px närmare priset */
.kr-buybox .svea-part-payment-module { margin: -4px 0 4px !important; }

/* 2: mätaren UPPLEVS indragen pga kraftigt rundade ändar (kurvan äter ~4px
   innan spåret når full höjd) — mindre radie ger skarp, linjerad vänsterkant */
.kr-buybox .commercekit-inventory .progress-bar,
.kr-buybox .commercekit-inventory .progress-bar span {
  border-radius: 3px !important;
  margin-left: 0 !important;
}
.kr-buybox .commercekit-inventory .progress-bar { width: 100% !important; }

/* 3: dubbla linjer före "Boka demo" — accordionens egen första radlinje bort,
   endast vår hårlinje (10b) kvar; avdelaren mellan demo-raderna behålls */
.kr-buybox .aftertaste-bs-accordion__row:first-child { border-top: 0 !important; }

/* Priset exakt på samma vänsterlinje som övriga rader */
.kr-buybox .cgkit-as-variation-price,
.kr-buybox p.price { margin-left: 0 !important; padding-left: 0 !important; }

/* Iteration 10d: product_meta — temats full-bleed-trick (position:relative;
   left:50%; margin -50vw) förskjöt raden åt höger ur containern. Nollställ
   HELA tricket, inte bara bredd/marginal. Vänsterställd i botten. */
.single-product .product_meta {
  position: static !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

/* ===== Iteration 11: Relaterade produkter-sektionen (Thomas feedback) ===== */

/* Sektionen: ingen jätteram — ren yta med luft */
.single-product section.related-wrapper {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 4px !important;
}

/* 1+3: riktig GRID istället för temats float-kolumner: luft mellan korten
   och automatiskt LIKA HÖJD per rad (grid-spårets höjd = radens högsta kort).
   ENDAST DESKTOP — på mobil används temats horisontella snap-karusell
   (kort 320px, scroll-snap), som våra grid/li-regler annars saboterar. */
@media (min-width: 993px) {
  .single-product .up-sells ul.products,
  .single-product .related.products ul.products,
  .single-product section.related-wrapper ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }
  .single-product section.related-wrapper ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
  }
}

/* 2: reabadgen — något större och indragen från hörnet */
.single-product section.related-wrapper li.product .sale-item.product-label {
  font-size: 13px !important;
  padding: 4px 9px !important;
  margin: 10px 0 0 10px !important;
}

/* 4: större pris i korten */
ul.products li.product .price { font-size: 1.15rem !important; }

/* ===== Iteration 11b: stepparraden (Thomas lösning) =====
   Ett osynligt flex-barn i form.cart åt upp en gap-lucka till vänster om
   stepparen → gap 0 och luften läggs som margin på knappen istället. */
.kr-buybox form.cart { gap: 0 !important; }
.kr-buybox form.cart .single_add_to_cart_button { margin-left: 10px !important; }

/* Exakt samma höjd på steppar och Lägg till i varukorg */
.kr-buybox form.cart .quantity,
.kr-buybox form.cart .quantity input.qty {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
}
.kr-buybox form.cart .quantity { display: inline-flex; align-items: stretch; }
.kr-buybox form.cart .quantity .kr-qbtn { height: 100% !important; }
.kr-buybox form.cart .single_add_to_cart_button {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Iteration 11c: lagerpillen under köpraden (Thomas) ===== */
.kr-buybox form.cart { flex-wrap: wrap !important; margin-top: 12px !important; }
.kr-buybox form.cart .kr-stock {
  flex: 1 1 100%;
  width: 100%;
  margin: 12px 0 0 !important;
  order: 10;
}
.kr-buybox .commercekit-inventory { margin: 10px 0 12px !important; }

/* It11c-fix: knappen fick radbrytas av gamla width:100% när formen nu wrappar —
   flex-basis 0 håller steppar + knapp på EN rad, pillen wrappar under */
.kr-buybox form.cart .single_add_to_cart_button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}
.kr-buybox form.cart .quantity { flex: 0 0 auto !important; }

/* ===== Iteration 12: luft/storlekar i botten av PDP (Thomas) ===== */

/* Mindre luft mellan beskrivningens slut och Artikelnr-raden */
.single-product .woocommerce-tabs { padding-bottom: 10px !important; }
.single-product .product_meta { padding: 12px 0 !important; }
.single-product section.related-wrapper section {
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}
.single-product section.related-wrapper > section > h2 {
  padding-top: 16px !important;
  margin-bottom: 14px !important;
}

/* Rea-badgen: större i förhållande till bilden */
.single-product section.related-wrapper li.product .sale-item.product-label {
  font-size: 14px !important;
  padding: 5px 11px !important;
}

/* Kortens rytm: priset följer direkt på titeln (luften hamnar i botten
   istället för mitt i kortet) + något större pris. Lagerraden får därmed
   automatiskt luft mot ramen. */
ul.products li.product .price {
  margin-top: 6px !important;
  font-size: 1.25rem !important;
}
ul.products li.product .kr-card-stock { padding-bottom: 4px; }

/* It12b: resterande luft före Artikelnr-raden — panelens och avslutande
   hr:ens marginaler */
.single-product .woocommerce-Tabs-panel {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.single-product .woocommerce-Tabs-panel--description hr:last-child,
.single-product .woocommerce-Tabs-panel--description > *:last-child {
  margin-bottom: 10px !important;
}
.single-product .product_meta { margin-top: 0 !important; }

/* It12c: titel→pris — komprimera boxarnas inbyggda luft (padding + line-height),
   inte bara marginalerna. Priset ytterligare något större. */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
  padding-bottom: 0 !important;
  margin-bottom: 2px !important;
  min-height: 0 !important;
  max-height: none !important;
}
ul.products li.product .cgkit-as-variation-price { margin: 0 !important; }
ul.products li.product .price {
  font-size: 1.3rem !important;
  line-height: 1.15 !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
}
ul.products li.product .kr-card-stock { padding-top: 2px; }

/* ===== Iteration 13: kategorilistningar (Thomas) ===== */

/* Samma grid som relaterade produkter: 4 kolumner, luft åt BÅDA håll
   (raderna gick ihop vertikalt), automatiskt jämna korthöjder per rad */
.woocommerce-shop ul.products,
.post-type-archive-product ul.products,
.tax-product_cat ul.products,
.tax-product_brand ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 18px !important;
  width: 100% !important;
  margin: 0 0 28px !important;
}
.woocommerce-shop ul.products li.product,
.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product,
.tax-product_brand ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
@media (max-width: 992px) {
  .woocommerce-shop ul.products,
  .post-type-archive-product ul.products,
  .tax-product_cat ul.products,
  .tax-product_brand ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px !important;
  }
}

/* 3–4px mindre luft ner mot priset i listningarna */
.tax-product_cat ul.products li.product .price,
.tax-product_brand ul.products li.product .price,
.woocommerce-shop ul.products li.product .price,
.post-type-archive-product ul.products li.product .price {
  margin-top: 0 !important;
}

/* ===== Iteration 13b: buybox-balans (Thomas) ===== */

/* 1+2: samma luft ovanför köpraden som mellan köprad och lagerpill */
.kr-buybox form.cart { margin-top: 6px !important; }
.kr-buybox form.cart .kr-stock { margin: 8px 0 0 !important; }

/* 3: "Bara X kvar i lager!" nedtonad — svart, ej fet (rött+fett blev för
   mycket färg i helheten; mätaren bär signalen) */
.commercekit-inventory,
.commercekit-inventory span.title,
.commercekit-inventory .title.low-stock {
  color: var(--kr-ink) !important;
  font-weight: 400 !important;
}

/* It13c: +6px luft mellan köpraden och lagerpillen (balans med raden ovan) */
.kr-buybox form.cart .kr-stock { margin: 14px 0 0 !important; }

/* ===== Iteration 14: variantprodukter + Produktfakta i columns-block ===== */

/* Variantköpraden: samma layout och rytm som enkla produkter */
.kr-buybox .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  gap: 0 !important;
}
.kr-buybox .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto !important; }
.kr-buybox .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 10px !important;
}
.kr-buybox .woocommerce-variation-add-to-cart .kr-stock {
  flex: 1 1 100%;
  width: 100%;
  margin: 14px 0 0 !important;
}

/* Produktfakta som ligger i ett wp-block-columns (t.ex. Andersen-produkterna):
   lyft ut blockets innehåll till beskrivnings-gridden (display:contents) så
   tabellen kan ta högerkolumnen precis som på produkter med tabellen direkt */
@media (min-width: 921px) {
  .woocommerce-Tabs-panel--description > .wp-block-columns:has(figure.wp-block-table),
  .woocommerce-Tabs-panel--description > .wp-block-columns:has(figure.wp-block-table) > .wp-block-column {
    display: contents;
  }
  .woocommerce-Tabs-panel--description figure.wp-block-table {
    grid-column: 2;
    grid-row: 1 / span 60;
    position: sticky;
    top: 16px;
    max-width: none;
    margin: 0;
  }
  /* ::before-rubriken och döljreglerna är borttagna — rubriken ligger nu i
     bas-stilen (alla viewporter) och innehållet har inga egna rubriker. */
}

/* ===== Iteration 15: MOBILPASS ===== */

/* Grundorsak till header/overflow-felet: div.product-gridden hade min-bredd
   ~424px (minmax 360/380px-kolumn + gap) utan mobil-fallback → hela sidan
   blev bredare än viewporten. Block-layout under 992px. */
@media (max-width: 992px) {
  .single-product div.product {
    display: block !important;
    max-width: 100% !important;
  }
  .single-product div.product > .images,
  .single-product div.product > .summary {
    width: 100% !important;
  }
  .single-product div.product > .images { position: static !important; }

  /* Buybox: mindre padding på små skärmar = mer plats för köpraden */
  .kr-buybox { padding: 14px; }
  .kr-buybox form.cart .quantity { width: 116px; }
  .kr-buybox form.cart .single_add_to_cart_button { font-size: 1rem; }

  /* Variantprodukter: komprimera luften mellan swatchar och köprad */
  .kr-buybox .single_variation { margin: 0 !important; min-height: 0 !important; }
  .kr-buybox .woocommerce-variation.single_variation:empty { display: none !important; }
  .kr-buybox table.variations { margin-bottom: 4px !important; }
}

/* It15b: mobil-overflow — grid/flex-barn med min-width:auto vägrar krympa
   under sitt innehåll (kortens swatchrader, kategorilänkarna) och tvingar
   layout-viewporten bredare än skärmen → hela sajten "zoomas ut" på mobil. */
ul.products li.product,
ul.products li.product > *,
ul.products li.product a {
  min-width: 0;
}
ul.products li.product .cgkit-attribute-swatches,
ul.products li.product .cgkit-attribute-swatches ul,
ul.products li.product .cgkit-swatch-wrapper {
  flex-wrap: wrap !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.single-product .product_meta { flex-wrap: wrap !important; }
.single-product .product_meta > span { flex-wrap: wrap !important; min-width: 0; }
.kr-buybox .cgkit-attribute-swatches { flex-wrap: wrap !important; max-width: 100%; }
.kr-buybox table.variations { width: 100% !important; max-width: 100% !important; }

/* It15c: mobil-polering av köpkortet */
@media (max-width: 992px) {
  /* Knappen får inte svälta ur sin bakgrund när raden krymper */
  .kr-buybox form.cart .single_add_to_cart_button {
    white-space: nowrap;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: .98rem;
  }
  .kr-buybox form.cart .quantity { width: 104px; }

  /* Variant: död luft mellan swatchar och köprad */
  .kr-buybox .single_variation_wrap .woocommerce-variation {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .kr-buybox .woocommerce-variation-add-to-cart { margin-top: 0 !important; }
  .kr-buybox .single_variation_wrap { margin: 0 !important; }

  /* Galleri → summary: luft så varumärkesraden inte kolliderar med thumbsen */
  .single-product .images { margin-bottom: 16px !important; }
  .single-product .summary .kr-brand-eyebrow { margin-top: 8px; }
}

/* It15d: mobil — sista resterna */
@media (max-width: 992px) {
  /* 8e-regeln (margin:0 !important på .images) åt upp mobilmarginalen */
  .single-product .product-details-wrapper > .images,
  .single-product div.product > .images {
    margin: 0 0 18px !important;
  }
  /* Tom variations-platshållare ska inte ta plats (:empty biter inte på whitespace) */
  .kr-buybox .woocommerce-variation:not(:has(*)) { display: none !important; }
  .kr-buybox table.variations { margin-bottom: 0 !important; }
}

/* It15e: CK sticky köpknapp (mobil) i vårt färgsystem — mörk text på orange,
   fullbredd med priset synligt till vänster */
.commercekit-sticky-add-to-cart {
  padding: 10px 14px !important;
  box-shadow: 0 -4px 16px rgba(20, 24, 28, .08);
}
.commercekit-sticky-add-to-cart .commercekit-sticky-add-to-cart__content-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.commercekit-sticky-add-to-cart .commercekit-sticky-add-to-cart__content-price {
  display: inline-block !important;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--kr-ink);
  white-space: nowrap;
}
.commercekit-sticky-add-to-cart .sticky-atc_button,
.commercekit-sticky-add-to-cart .sticky-atc_button.button {
  color: #2b2b2b !important;
  -webkit-text-fill-color: #2b2b2b !important;
  flex: 1 1 auto;
  text-align: center;
  border-radius: 10px !important;
  font-weight: 800 !important;
  padding: 13px 16px !important;
}

/* It15f: sticky-ATC-aktiveringen fick CK att wrappa formulärinnehållet i
   .commercekit-pdp-simple-form (resp -variations-form) → köpradens
   flex-regler måste ligga på WRAPPERN, annars tappar knappen bredd och
   pillen sin luft, även på desktop. OBS: exakta klasser — attributselektor
   träffar CK:s stängknapp m.m. */
/* Strukturen är form.cart > .commercekit-pdp-sticky-inner > .commercekit-pdp-
   simple-form > (intersector[display:contents] > quantity+knapp, pill) */
.kr-buybox .commercekit-pdp-simple-form,
.kr-buybox .commercekit-pdp-variations-form {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  align-items: stretch;
  width: 100%;
}
.kr-buybox .commercekit-pdp-simple-form .quantity,
.kr-buybox .commercekit-pdp-variations-form .quantity { flex: 0 0 auto !important; }
.kr-buybox .commercekit-pdp-simple-form .single_add_to_cart_button,
.kr-buybox .commercekit-pdp-variations-form .single_add_to_cart_button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 10px !important;
}
.kr-buybox .commercekit-pdp-simple-form .kr-stock,
.kr-buybox .commercekit-pdp-variations-form .kr-stock {
  flex: 1 1 100%;
  width: 100%;
  margin: 14px 0 0 !important;
}

/* It15g: CK:s sticky-inner ska fylla formuläret, pillen får aldrig svälla ut */
.kr-buybox form.cart > .commercekit-pdp-sticky-inner {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
.kr-buybox .kr-stock { min-width: 0 !important; max-width: 100% !important; }

/* It15h: intersector-diven är köpradens faktiska container — full bredd flexrad */
.kr-buybox .commercekit-sticky-atc-intersector {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  align-items: stretch;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* It15i: sticky-baren kompakt — flik-länkarna och containerpadding gav
   onödig höjd (baren är mobil-endast; sticky_atc_desktop=0) */
.commercekit-sticky-add-to-cart { padding: 8px 14px !important; min-height: 0 !important; }
.commercekit-sticky-add-to-cart .commercekit-atc-tab-links { display: none !important; }
.commercekit-sticky-add-to-cart .commercekit-container,
.commercekit-sticky-add-to-cart .commercekit-sticky-add-to-cart__content {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.commercekit-sticky-add-to-cart .commercekit-sticky-add-to-cart__content-button { margin: 0 !important; }
.commercekit-sticky-add-to-cart .sticky-atc_button,
.commercekit-sticky-add-to-cart .sticky-atc_button.button { padding: 11px 16px !important; }

/* It15j: mobil — lagom sidopadding (42px för mycket, 16px för lite;
   20px är läsvänlig standard), hel steppar */
@media (max-width: 992px) {
  .single-product .site-content .col-full,
  .single-product #content .col-full {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .kr-buybox form.cart .quantity { width: 118px !important; }
  .kr-buybox form.cart .quantity input.qty { min-width: 0; width: 40px !important; }
  .kr-buybox .kr-qbtn { flex: 0 0 34px; }
  /* Temats mobilkarusell för relaterade: behåll kortstil utan att rubba mått */
  .single-product section.related-wrapper ul.products li.product {
    min-width: 280px !important;
    max-width: 280px !important;
  }
}

/* It15k: Produktfakta-kortet på mobil — full bredd, mindre cellpadding så
   värdekolumnen inte klipps och etiketterna slipper brytas i onödan */
@media (max-width: 920px) {
  .woocommerce-Tabs-panel--description .wp-block-columns,
  .woocommerce-Tabs-panel--description .wp-block-column,
  .woocommerce-Tabs-panel--description figure.wp-block-table {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .woocommerce-Tabs-panel--description figure.wp-block-table { overflow-x: auto; }
  .woocommerce-Tabs-panel--description figure.wp-block-table table {
    width: 100% !important;
    table-layout: auto;
  }
  .woocommerce-Tabs-panel--description figure.wp-block-table td {
    padding: 9px 12px !important;
    font-size: .88rem;
  }
}

/* It15l: toppbaren (Fri frakt/Säker betalning/tel) döljs på mobil —
   USP:arna finns redan i köpkolumnens lista, spara skärmhöjd */
@media (max-width: 992px) {
  .top-bar { display: none !important; }
}

/* It15m: relaterade-karusellen på mobil — bort med card-headerns skugglinje,
   lika höga kort (stretch) med priset i botten */
@media (max-width: 992px) {
  .single-product section.related-wrapper ul.products { align-items: stretch !important; }
  .single-product section.related-wrapper ul.products li.product {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .single-product section.related-wrapper li.product .woocommerce-card__header {
    box-shadow: none !important;
    border-top: 0 !important;
    padding: 0 0 10px !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .single-product section.related-wrapper li.product .woocommerce-card__header .price {
    margin-top: auto !important;
  }
}

/* ===== Iteration 16: resterande tema-containrar med egen max-width =====
   Samma orsak som tabs-dubbelindraget: temat ger dessa element egna
   1170px-containrar som centreras INUTI vår col-full → inset på båda sidor.
   Gäller varukorgsmeddelandet + alla sektioner ur temats containerlista. */
.single-product .woocommerce-message,
.single-product .woocommerce-error,
.single-product .woocommerce-info,
.single-product .woocommerce:has(> .woocommerce-message),
.single-product #sspotReviews,
.single-product .wc-prl-recommendations,
.single-product .yith-wfbt-section.woocommerce,
.single-product .composite_summary,
.single-product .composite_wrap {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* It16b: varukorgsmeddelandets WRAPPER hade också em-padding */
.single-product .woocommerce:has(.woocommerce-message) {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* It16c: startsidans produktblock = exakt samma grid som kategorilistningen */
.home ul.products,
.page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 18px !important;
  width: 100% !important;
  margin: 0 0 28px !important;
}
.home ul.products li.product,
.page ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
@media (max-width: 992px) {
  .home ul.products,
  .page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px !important;
  }
}

/* It16d: swatch-chipsen i korten — luft mot lagerraden och kortkanten */
ul.products li.product .cgkit-attribute-swatches {
  padding: 8px 14px 4px !important;
  margin-top: 2px !important;
}

/* It16e: Customizer-CSS:ens gamla max-height:60px klipper swatch-raderna på
   DESKTOP (junifixen hävde bara mobil ≤900px). Häv överallt — korten är
   grid-höjdsutjämnade så växande chips-rader är ofarliga. */
html body .woocommerce ul.products li.product .cgkit-as-wrap-plp,
html body ul.products li.product .cgkit-as-wrap-plp {
  max-height: none !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

/* It16f: mer luft mellan kortets övre kant och bilden */
ul.products li.product .woocommerce-image__wrapper { margin-top: 6px; }

/* It16g: gridkolumnerna följer Woo-inställningen (columns-4/5-klassen) —
   byt antal i Customizer/wp-cli utan CSS-ändring */
.woocommerce-shop ul.products.columns-5,
.post-type-archive-product ul.products.columns-5,
.tax-product_cat ul.products.columns-5,
.tax-product_brand ul.products.columns-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* It16h: start-/sidgriddar följer också columns-5-klassen */
.home ul.products.columns-5,
.page ul.products.columns-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* It16i: samma luft under lagerraden som ovanför bilden */
ul.products li.product { padding-bottom: 14px !important; }
ul.products li.product .kr-card-stock { padding-bottom: 0 !important; }

/* It16j: symmetri — 14px från övre kant till bild, 14px från lagerrad till
   nedre kant (16f:s margin-top:6px ERSATTE basens 8px av misstag) */
ul.products li.product .woocommerce-image__wrapper { margin-top: 14px !important; }

/* It16k: toppbarens wrapper (sajtspecifik div.col-full.topbar-wrapper) ska
   INTE fångas av col-full-taket — bakgrunden måste gå kant till kant, annars
   syns mörka fält vid sidorna när megamenyns dim-overlay tänds */
.single-product .col-full.topbar-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* It16l: swatch-rader i relaterade-korten får aldrig klippas — höjden styrs
   av gridens stretch (lika höjder ändå), inte av fasta lås */
.single-product section.related-wrapper li.product {
  height: auto !important;
  max-height: none !important;
}
.single-product section.related-wrapper li.product .woocommerce-card__header {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.single-product section.related-wrapper li.product .cgkit-as-wrap-plp,
.single-product section.related-wrapper li.product .cgkit-attribute-swatches,
.single-product section.related-wrapper li.product [class*="swatch"] {
  max-height: none !important;
  overflow: visible !important;
}

/* It16m: KLIPPGÅTAN LÖST — height:100% !important på grid-korten hindrade
   spåret från att växa med innehållet (li overflow:hidden åt sista chipsraden).
   Grid-stretch ger lika höjder ändå; höjdlåsen bort överallt. */
.woocommerce-shop ul.products li.product,
.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product,
.tax-product_brand ul.products li.product,
.home ul.products li.product,
.page ul.products li.product,
.single-product section.related-wrapper ul.products li.product {
  height: auto !important;
  max-height: none !important;
}

/* It16n: CK:s swatch-överflöd är ABSOLUT positionerat (hover-klon) och kan
   aldrig ge kortet höjd — li:ets overflow:hidden högg det. Släpp kortets
   overflow; bildzoomen klipps av bildwrappern istället. */
ul.products li.product { overflow: visible !important; }
ul.products li.product .shoptimizer-plp-image-wrapper {
  overflow: hidden;
  border-radius: 10px;
}
/* Klonen ska ligga ovanpå det som följer, med kortets vita yta */
ul.products li.product .cgkit-as-swatches-clone {
  background: #fff;
  z-index: 5;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 18px rgba(20, 24, 28, .08);
}

/* It16o: 60px-klippets SISTA hål — på PDP:er sitter .woocommerce-klassen på
   BODY (ingen inre div som på kategorisidor), så häv-regeln behöver
   body.woocommerce-varianten för att slå Customizer-regelns (0,4,2) */
html body.woocommerce ul.products li.product .cgkit-as-wrap-plp {
  max-height: none !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

/* It17: varumärkeslogotyp istället för textrad ovanför H1 (namn = mouseover) */
.kr-brand-eyebrow--logo {
  display: inline-block;
  margin-bottom: 6px;
  line-height: 0;
}
.kr-brand-eyebrow--logo img {
  height: 30px;
  width: auto;
  display: block;
  mix-blend-mode: multiply; /* jpg-loggor med vit platta smälter in på vitt */
}
.kr-brand-eyebrow--logo:hover img { opacity: .85; }

/* It17b: större varumärkeslogga (50px) och tätare mot produkttiteln */
.kr-brand-eyebrow--logo { margin-bottom: 0 !important; }
.kr-brand-eyebrow--logo img { height: 50px !important; }
.kr-brand-eyebrow--logo + .product_title { margin-top: 2px !important; }

/* It17c: tillbaka till TEXT-eyebrow (Thomas), men mer "logotypisk":
   tyngre vikt, större spärrning, aning större grad — och nedtryckt 5px */
.kr-brand-eyebrow {
  font-size: .85rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
@media (min-width: 993px) {
  .single-product .summary .kr-brand-eyebrow { margin-top: 5px; }
}

/* It17d: eyebrow som diskret etikett — tunn svart lätt rundad ram,
   vanlig svart text utan fetstil */
.kr-brand-eyebrow {
  display: inline-block !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  color: var(--kr-ink) !important;
  border: 1px solid var(--kr-ink);
  border-radius: 6px;
  padding: 4px 10px;
  text-decoration: none !important;
}
.kr-brand-eyebrow:hover {
  text-decoration: none !important;
  background: var(--kr-bg-warm);
}

/* It17d-fix: summaryns flex-stretch drog ut etiketten — krymp till innehållet */
.single-product .summary .kr-brand-eyebrow { align-self: flex-start; width: auto !important; }

/* It17e: etiketten ska ALLTID krympa till texten (alla kontexter) + finputs:
   mindre grad, tajtare padding, mjukare svärta */
.kr-brand-eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: max-content !important;
  align-self: flex-start !important;
  align-items: center;
  font-size: .74rem !important;
  letter-spacing: .09em !important;
  line-height: 1 !important;
  padding: 5px 9px !important;
  border: 1px solid #3a4046;
  border-radius: 6px;
  color: #23272b !important;
  margin: 5px 0 4px !important;
}

/* It17f: subtilare etikett — ljusgrå ram och mycket svag varm bakgrund */
.kr-brand-eyebrow {
  border-color: var(--kr-line) !important;
  background: var(--kr-bg-warm) !important;
  color: var(--kr-ink-soft) !important;
}
.kr-brand-eyebrow:hover {
  border-color: #cfd4d9 !important;
  background: #f3f1ee !important;
}

/* It17g: etiketten med vit bakgrund (Thomas slutgiltiga val) */
.kr-brand-eyebrow { background: #fff !important; }
.kr-brand-eyebrow:hover { background: var(--kr-bg-warm) !important; }

/* It17h: 60px-klippet, tredje varianten — Customizer-blocket har även
   .kr-landing/.sp-products/.elementor-scopade selektorer (0,5,2) som slog
   häv-regeln på startsidan. Övertrumfa samtliga. */
html body .kr-landing .kr-products ul.products li.product .cgkit-as-wrap-plp,
html body .sp-products ul.products li.product .cgkit-as-wrap-plp,
html body .elementor-widget-wc-products ul.products li.product .cgkit-as-wrap-plp {
  max-height: none !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

/* It17i: CK:s galleri-CSS satte position:relative — då blev vår top:16px en
   PERMANENT nedförskjutning (16px in i tabs-sektionen, kapade thumbs på
   produkter med kort summary). Sticky måste vinna; annars ingen top alls. */
@media (min-width: 993px) {
  .single-product .product-details-wrapper > .images {
    position: sticky !important;
    top: 16px !important;
  }
}
@media (max-width: 992px) {
  .single-product .product-details-wrapper > .images,
  .single-product div.product > .images {
    position: static !important;
    top: auto !important;
  }
}

/* It17j: andrum under thumbsraden mot beskrivningssektionen */
.single-product .cg-thumb-swiper { margin-bottom: 18px !important; }

/* It17k: luft under breadcrumben mot galleriet (Thomas förslag) */
.single-product .woocommerce-breadcrumb { padding-bottom: 10px !important; }

/* ===== Iteration 18: surfplattor + spökpaneler (Samsung Tab-testet) ===== */

/* a) Responsiva kolumner för ALLA produktgriddar — columns-5-regeln vann
   tidigare på alla bredder. Desktop 5 → liten desktop 4 → tablet 3 → mobil 2 */
@media (max-width: 1199px) and (min-width: 901px) {
  .woocommerce-shop ul.products,
  .post-type-archive-product ul.products,
  .tax-product_cat ul.products,
  .tax-product_brand ul.products,
  .home ul.products,
  .page ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) and (min-width: 641px) {
  .woocommerce-shop ul.products,
  .post-type-archive-product ul.products,
  .tax-product_cat ul.products,
  .tax-product_brand ul.products,
  .home ul.products,
  .page ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .woocommerce-shop ul.products,
  .post-type-archive-product ul.products,
  .tax-product_cat ul.products,
  .tax-product_brand ul.products,
  .home ul.products,
  .page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* b) CK reserverar hover-yta i korten (li::before padding) och klonen fick
   vit platta av oss även när den är TOM → spökpaneler under korten.
   Chipsen är alltid fullt synliga nu, så reserven behövs inte. */
/* Temats mobilkortyta (li::before) får sin HÖJD av CK:s dynamiska padding —
   nollad padding = avhuggen vit yta, behållen = spökflikar. Lösning: kortet
   SJÄLVT bär ytan (som på desktop) och ::before pensioneras helt. */
ul.products li.product {
  background: #fff !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-radius) !important;
}
ul.products li.product:not(.product-category)::before {
  content: none !important;
  padding-bottom: 0 !important;
}
ul.products li.product .cgkit-as-swatches-clone:not(:has(*)) {
  background: transparent !important;
  box-shadow: none !important;
  display: none !important;
}

/* It18c: kortens tomrumsfördelning — bilden får ALDRIG växa (gapet hamnade
   mitt i kortet), innehållet toppstaplas, och chipsraden ankras i botten så
   alla kort i raden får linjerade bottnar. */
ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
}
ul.products li.product > .woocommerce-image__wrapper,
ul.products li.product .shoptimizer-plp-carousel-container,
ul.products li.product > a img {
  flex: 0 0 auto !important;
}
ul.products li.product .woocommerce-card__header {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0;
}
/* Chipsen sist och bottenankrade (samma starka selektorer som klipp-häven,
   senare i filen = vinner) */
html body.woocommerce ul.products li.product .cgkit-as-wrap-plp,
html body .woocommerce ul.products li.product .cgkit-as-wrap-plp,
html body ul.products li.product .cgkit-as-wrap-plp,
html body .kr-landing .kr-products ul.products li.product .cgkit-as-wrap-plp {
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* ===== Iteration 19: pekskärmarnas kortbotten + Produktfakta-fritext ===== */

/* GRUNDORSAKEN till "smutsiga" kortbottnar på platta/mobil: på pekskärm döljer
   CK ordinarie chipsraden (.cgkit-as-wrap-plp) och visar KLONEN som den
   riktiga — men klonen bar vår hover-platta (vit bg + skugga + rundade hörn)
   → skuggan blödde ut under kortets nederkant på alla kort med chips.
   OBS: klonen får INTE gömmas (då försvinner chipsen) — bara neutraliseras. */
@media (hover: none) {
  ul.products li.product .cgkit-as-swatches-clone {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: auto !important;
    padding-top: 8px !important;
  }
}

/* Produktfakta: fritext (tabellens figcaption, t.ex. Tvättråd) låg dikt an
   mot boxens ram — samma padding-rytm som tabellcellerna */
.woocommerce-Tabs-panel--description figure.wp-block-table figcaption.wp-element-caption {
  padding: 12px 18px 14px;
  margin: 0;
  text-align: left;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--kr-ink);
}

/* It19b: recensionsfliken — Woo reserverar 100px vänsterindrag i .comment-text
   (float + calc-bredd) för en avatar vi inte visar → texten linjerar nu med
   resten av sidan i nya fullbreddslayouten */
.single-product #reviews .commentlist .comment-text {
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* It19c: hela högerspalten (summary) ner i linje med galleriet — galleriet
   renderas 16px lägre (sticky-offset), eyebrow-chippen bär redan 5px egen
   marginal → 11px lyfter chippens överkant exakt till bildens */
@media (min-width: 993px) {
  .single-product .product-details-wrapper > .summary { padding-top: 12px !important; }
}

/* It19d: Produktfakta-etiketterna bröts MITT I ordet av temats word-break
   (break-word) när etikettkolumnen blir trång → ensamt kolon på egen rad
   ("Handtagshöjd / :"). Bryt endast vid mellanslag — tabellens auto-layout
   breddar hellre kolumnen. */
.woocommerce-Tabs-panel--description figure.wp-block-table td:first-child {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* It19e: köpraden på mobil +4px höjd (Thomas 2026-07-14) — steppar och
   knapp håller ALLTID exakt samma höjd (hans tidigare krav) */
@media (max-width: 992px) {
  .kr-buybox form.cart .quantity,
  .kr-buybox form.cart .quantity input.qty,
  .kr-buybox form.cart .single_add_to_cart_button {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }
}

/* It20: Bygg din shoppingvagn (YITH composite) — totalsumman renderades i
   14px/400, mindre än delsummorna. Totalen ska se ut som ett pris. */
#ywcp_wcp_tr_order_total td {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--kr-line);
}
#ywcp_wcp_tr_order_total td:last-child,
#ywcp_wcp_tr_order_total .woocommerce-Price-amount {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
}

/* It20b: Summa-radens etikett och belopp har olika teckenstorlek — linjera
   på textens baslinje istället för cellmitten (annars "hoppig" rad) */
#ywcp_wcp_tr_order_total td { vertical-align: baseline !important; }

/* ============================================================
   It21 (go-live, Thomas mobilfynd): CK:s snabbval på produktkort.
   1) Knapp-swatchar med långa etiketter ("XS/S (Extra Small/Small)")
      fick sticka utanför kortramen — nu krymper de inom kortet och
      klipper med ellipsis i stället.
   2) "Flera val"-summaryn hängde löst i kortets hörn — nu en ordnad
      avslutsrad med hårlinje överst och samlad plus-markör.
   Gäller BÅDE JS-klonen (pekskärm) och originalwrappen (desktop).
   ============================================================ */
ul.products li.product .ckit-attributes-wrap,
ul.products li.product .cgkit-as-swatches-clone {
  min-width: 0;
  max-width: 100%;
}
ul.products li.product .ckit-attributes-wrap table.variations,
ul.products li.product .ckit-attributes-wrap table.variations tbody,
ul.products li.product .ckit-attributes-wrap table.variations tr,
ul.products li.product .ckit-attributes-wrap table.variations td.value {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
ul.products li.product .cgkit-attribute-swatches {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
ul.products li.product .cgkit-attribute-swatch {
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  float: none !important;
}
ul.products li.product .cgkit-attribute-swatch button.cgkit-swatch,
ul.products li.product .cgkit-attribute-swatch .cgkit-swatch {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  padding: 5px 10px !important;
  border-radius: 8px;
  box-sizing: border-box;
}
/* "Flera val" — diskret avslutsrad i kortet i stället för lös länk */
ul.products li.product details > summary {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0 !important; /* temats margin-left:15px gav dubbelt indrag */
  padding: 8px 0 0 !important;
  border-top: 1px solid #eee;
  font-size: 0.8rem;
  color: #666;
  cursor: pointer;
  list-style: none;
  width: 100%;
}
ul.products li.product details > summary::-webkit-details-marker { display: none; }
/* Desktop (hover-enheter): details står öppen med alla val synliga — då är
   "Flera val"-summaryn missvisande (det FINNS inga fler val). Dölj den i
   öppet läge; på pekskärm är details stängd och summaryn förblir togglare. */
@media (hover: hover) {
  ul.products li.product details[open] > summary { display: none !important; }
}
/* Bottenankring + overflow-stopp för snabbvalsformen:
   - details ligger i form.cgkit-swatch-form (block) — auto-marginal måste
     sitta på FORMEN, vars förälder .woocommerce-card__header är flex
   - temat blöder ut details med margin -15px i sidled = 29px utanför
     kortramen på mobil; nollställ och håll den inom kortets padding */
ul.products li.product .woocommerce-card__header form.cgkit-swatch-form { margin-top: auto !important; min-width: 0; max-width: 100%; }
/* Kortets innehållsindrag görs per element (14px, jfr .kr-card-brand) —
   snabbvalsformen saknade det och låg dikt mot vänsterramen.
   Vänster 10px (Thomas: 4px närmare kanten än textlinjen, itererat 14→12→10). */
ul.products li.product .woocommerce-card__header form.cgkit-swatch-form {
  padding-left: 10px !important;
  padding-right: 14px !important;
  box-sizing: border-box;
}

/* It23 (Thomas iPhone-fynd, fanns före go-live): startsidans kategorikort
   bröt "Shoppingvagnar"/"Träningsredskap" mitt i ordet med ensam bokstav
   på egen rad. Svensk avstavning + snäppet mindre rubrik på smal skärm. */
.kr-landing .kr-cat h3 {
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
@media (max-width: 480px) {
  .kr-landing .kr-cat h3 { font-size: 0.98rem; }
}

/* It24 (Thomas): startsidans USP-ruta delar klassnamn med PDP-checklistan
   (.kr-usps) och ärvde dess ram — men sidans egen inline-regel nollade
   paddingen, så ikonerna låg dikt mot ramen. Träffa på strukturen: bara
   startsidans variant har .kr-usp-barn (PDP-checklistan har li). */
.kr-usps:has(> .kr-usp) { padding: 18px 16px !important; }
ul.products li.product form.cgkit-swatch-form details { margin: 10px 0 0 !important; padding: 0 !important; max-width: 100%; min-width: 0; }
ul.products li.product details > summary { width: auto; }
/* Temat blöder ut ÄVEN swatch-klonen (synliga knappraden på pekskärm) med
   negativa sidomarginaler — knapparna började vid kortets ytterkant i
   stället för innehållets vänsterlinje. Nollställ i sidled på hela
   wrap-klassen (klon + inre wrappar); toppankaret från It19 röres inte. */
ul.products li.product .cgkit-as-wrap-plp {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
  min-width: 0;
}
/* Mindre typsnitt på mobil så även långa etiketter får plats utan klipp */
@media (max-width: 640px) {
  ul.products li.product .cgkit-attribute-swatch button.cgkit-swatch,
  ul.products li.product .cgkit-attribute-swatch .cgkit-swatch {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }
}

/* It22 (Thomas): lagermätarens text närmare stapeln (CK:s standard är 10px) */
.commercekit-inventory .progress-bar { margin-top: 5px !important; }

/* Paginering centrerad på ALLA skärmstorlekar (inkl. desktop).
   Ärvd Shoptimizer-CSS sätter margin-left:auto + grid-column:span 2 på
   .woocommerce-pagination, vilket skjuter boxen åt höger trots dess egen
   text-align:center. Tvingar full bredd + ingen auto-margin.
   Samma fix som på käpprätt.se (KR), applicerad på Spagat 2026-08-02. */
.woocommerce-pagination {
  grid-column: 1 / -1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Filter-pluginets EGEN paginering (wcf-pagination-container, syns på
   filtrerade/sökta kategorisidor). Dess interna knapprad har
   flex-wrap:nowrap, så på smala mobilskärmar med flera sidor blir raden
   bredare än sin behållare och sticker ut åt höger. Tillåt radbrytning +
   centrera. Samma fix som KR, applicerad på Spagat 2026-08-02. */
.wcf-pagination-container {
  max-width: 100% !important;
  width: 100% !important;
}
.wcf-pagination-container > div {
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  row-gap: 6px !important;
}

/* Grid-luckan (ensam produkt på udda-antal-rad, mobil/tablet 2-kolumner)
   löstes vid roten: woocommerce_catalog_rows 5->6 (30/sida, delbart med
   både 5 desktop-kolumner OCH 2 mobil/tablet-kolumner). Ingen CSS-
   specialbehandling behövs. Rör ALDRIG woocommerce_catalog_columns. */

/* =========================================================================
   It: Breda tabeller (jämförelse/storleksguide/batteritid) — opt-out ur
   Product facts-kortet. Sätt klassen "kr-wide-table" på figuren (block
   className) så tabellen renderas i full innehållsbredd som en vanlig
   tabell: ingen "Product facts"-::before-rubrik, ingen fast 40/60-layout,
   ingen sticky högerkolumn. Vanliga 2-kolumns Product facts-tabeller
   påverkas INTE. (Porterad från KR:s kappratt.css 2026-08-10 i samband
   med Spagat-importen av iRun Power M-300 — samma regel som Thomas
   införde på KR 2026-07-17.)
   ========================================================================= */
.woocommerce-Tabs-panel--description figure.wp-block-table.kr-wide-table::before {
  content: none !important;
}
.woocommerce-Tabs-panel--description figure.wp-block-table.kr-wide-table {
  max-width: 100%;
  overflow-x: auto;
}
.woocommerce-Tabs-panel--description figure.wp-block-table.kr-wide-table table {
  table-layout: auto !important;
  width: 100%;
}
.woocommerce-Tabs-panel--description figure.wp-block-table.kr-wide-table td,
.woocommerce-Tabs-panel--description figure.wp-block-table.kr-wide-table td:first-child {
  width: auto !important;
}
@media (min-width: 921px) {
  .woocommerce-Tabs-panel--description > figure.wp-block-table.kr-wide-table {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
    max-width: 100% !important;
  }
}