/* rygcrawl.dk design layer ("tighten, do not redesign"). Loaded after the theme CSS and after the product-row plugin CSS (prInFooter).
   Colour tokens are the only per-site part. Everything is scoped to #masthead, main#page, main#post, main.page-search or #footer. */

/* ---- Tokens ---- */
:root {
  --sp-1: .8rem;
  --sp-2: 1.6rem;
  --sp-3: 2.4rem;
  --sp-4: 4rem;
  --d-radius: .8rem;             /* same as the theme's --roUnd */

  /* Brand colours already used by the theme */
  --d-ink: #001A19;              /* theme --black: text, dark surfaces */
  --d-ink-soft: #595959;         /* theme --c3: meta text, 6.3:1 on the light greys */
  --d-brand: #6DB0B0;            /* theme --c1: decoration, and text on dark surfaces (7.3:1 on ink) */
  --d-tint: #f2faff;             /* theme --c4: light page sections */
  --d-grey: #F5F3F3;             /* theme --gray-light */
  --d-accent: #FD6363;           /* theme --attention: rank discs */
  --d-mint: linear-gradient(180deg, #6BFBCE, #00DED9);   /* theme --gradiant: recommendation badge */

  /* Darkened only as far as AA needs */
  --d-teal: #3c7777;             /* brand teal for text on white/tint/grey: 5.1 / 4.9 / 4.6:1 */
  --d-teal-hover: #28504f;       /* hover for teal links: 8.9:1 */
  --d-btn: #00805f;              /* theme --success (#00A278) darkened: white text 4.9:1 */
  --d-btn-hover: #00654c;        /* button hover: white text 7:1 */
  --d-chip: #dcefef;             /* small label chips, ink text 11:1 */

  --d-line: rgba(0, 26, 25, .12);
  --d-shadow: 0 .2rem 1.2rem rgba(0, 26, 25, .07);
}

/* ---- Focus: the theme sets outline:0 on every link ---- */
#masthead a:focus-visible, #masthead button:focus-visible, #masthead input:focus-visible, #masthead [tabindex]:focus-visible,
main#page a:focus-visible, main#post a:focus-visible, main.page-search a:focus-visible,
main#post button:focus-visible, main#post [tabindex]:focus-visible, main#post .toc_button:focus-visible {
  outline: .3rem solid var(--d-teal);
  outline-offset: .2rem;
  border-radius: .4rem;
}
/* Whole-card overlay links: draw the ring inside the card */
main#page a.fixed:focus-visible, main.page-search a.fixed:focus-visible, main#post aside.sidebar a.fixed:focus-visible {
  outline-offset: -.3rem;
  border-radius: var(--d-radius);
}
/* On dark surfaces the ring uses the light brand teal */
#footer a:focus-visible, main#post .testvinder a:focus-visible, main#post .testvinder button:focus-visible {
  outline: .3rem solid var(--d-brand);
  outline-offset: .2rem;
  border-radius: .4rem;
}

/* ---- Header ---- */
/* A hairline separates the white header from the light home page and article photo */
#masthead .head { border-bottom: 1px solid var(--d-line); }
/* Search placeholder was light grey on light grey */
#masthead .search input[type=text]::placeholder { color: var(--d-ink-soft); opacity: 1; }
#masthead .search input[type=text]:focus { border-color: var(--d-teal); background-color: #fff; }

/* Mega menu (opens on click, so a page sweep never sees it): light teal on the light-blue panel was about 2.3:1 */
#masthead .mega-nav-block .nav-inner a { color: var(--d-teal); }
#masthead .mega-nav-block .nav-inner a:hover { color: var(--d-teal-hover); text-decoration: underline; }
#masthead .mega-nav-block .nav-inner p.c1 { color: var(--d-teal); }
#masthead .parent-menu-item:hover .parent-menu-element,
#masthead .parent-menu-item[aria-expanded=true] .parent-menu-element,
#masthead nav .parent-menu-item[aria-expanded=true] .parent-menu-element:after { color: var(--d-teal); }

/* ---- Text colours: brand teal, darkened to AA ---- */
main#page .c1, main#post .c1, main.page-search .c1 { color: var(--d-teal); }
main#post .testvinder .c1 { color: var(--d-brand); }
/* Author/date line under the article title is meta text, not a heading */
main#post .auhtor i.c1, main#post .auhtor .c1 { color: var(--d-ink-soft); }

/* ---- Cards on the front page and in search results ---- */
/* Masonry columns gave three different image heights per row; use a grid with one image ratio */
main#page .card-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-count: auto;
  gap: var(--sp-3);
  align-items: start;
}
main#page .card-columns .card { display: flex; width: 100%; margin: 0 !important; }
main#page .card__element > .sect,
main.page-search .block-news > .sect {
  border-radius: var(--d-radius);
  border: 1px solid var(--d-line);
  box-shadow: none !important;
  background: #fff;
}
main.page-search .block-news > .sect { height: 100%; }
main#page .card__element picture,
main.page-search .block-news picture { aspect-ratio: 4 / 3; width: 100%; height: auto !important; min-height: 0 !important; }
main#page .card__element picture img,
main.page-search .block-news picture img { height: 100%; width: 100%; object-fit: cover; }
main#page .card__element .caption,
main.page-search .block-news .caption { background: #fff !important; padding: var(--sp-2) !important; }
main#page .card__element h4, main.page-search .block-news h4 { line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
/* Hover lifts the card 4px instead of 16px */
main#page .thumb-hover:hover .h-ll, main.page-search .thumb-hover:hover .h-ll { transform: translateY(-.4rem); }
main#page .thumb-hover:hover .h-ll, main.page-search .thumb-hover:hover .h-ll { box-shadow: var(--d-shadow) !important; }
@media (max-width: 880px) {
  main#page .card-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
}
/* Phones: one compact row per article (thumbnail left, title right) instead of two narrow columns */
@media (max-width: 560px) {
  main#page .card-columns { grid-template-columns: 1fr; gap: var(--sp-1); }
  main#page .card__element > .sect, main.page-search .block-news > .sect {
    display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: stretch;
  }
  main#page .card__element picture, main.page-search .block-news picture { aspect-ratio: auto; height: 100% !important; min-height: 9rem !important; }
  main#page .card__element .caption, main.page-search .block-news .caption { align-self: center; padding: var(--sp-1) var(--sp-2) !important; }
  main#page .card__element h4, main.page-search .block-news h4 { font-size: 1.5rem !important; }
}
/* Search results: uniform spacing, and less air above the first card */
main#page.page-search > section.sect { padding-block: var(--sp-3) var(--sp-2) !important; }
main.page-search .row > .col-sm-12 { margin-top: 0 !important; margin-bottom: var(--sp-3) !important; }
main.page-search .block-news { margin-bottom: var(--sp-3) !important; }
/* The header is absolutely positioned below 880px, so the title needs room under it */
@media (max-width: 880px) { main#page.page-search > section.sect { padding-top: 8rem !important; } }
@media (max-width: 560px) { main.page-search .block-news { margin-bottom: var(--sp-1) !important; } }

/* ---- Front page ---- */
main#page:not(.page-search) > section.sect.py-4 { padding-block: var(--sp-3) var(--sp-4) !important; }
/* weekly most-read list: calm card, readable meta line */
main#page .block-split.shadow { box-shadow: var(--d-shadow) !important; border-radius: var(--d-radius); }
main#page .block-split .caption p.f-5, main#page .block-split .caption .c1 { color: var(--d-ink-soft); font-weight: 400; }
main#page .block-split .caption .c1 { color: var(--d-teal); font-weight: 600; }
main#page .block-split article.block__element { padding-block: .6rem; border-bottom: 1px solid var(--d-line); margin-bottom: 0 !important; }
main#page .block-split article.block__element:last-of-type { border-bottom: 0; }
@media (max-width: 879px) { main#page > section.sect.py-4 .col-md-3 { margin-top: var(--sp-3); } }

/* Text block under the article list on the front page: 8rem of padding above and below */
main#page:not(.page-search) > section.sect.py-6 { padding-block: var(--sp-4) !important; }

/* ---- Article hero ---- */
/* The hero text sits on a photo under an 80% dark overlay; a dark base colour keeps it readable while the photo loads */
:is(main#post, main#page) .sub-hero, :is(main#post, main#page) .sub-hero-- { background-color: var(--d-ink); }
:is(main#post, main#page) .sub-hero h1.f-u { line-height: 1.15; }
:is(main#post, main#page) .sub-hero p.f-3 { line-height: 1.6; max-width: 72ch; }
/* Photo-only hero (posts without a winner card) was 62rem tall on desktop and 51rem on phones */
:is(main#post, main#page) .sub-hero-- { height: 40rem; max-height: 40rem; }
:is(main#post, main#page) .sub-hero-- picture { height: 100%; }
:is(main#post, main#page) .sub-hero-- picture img { height: 100%; object-fit: cover; object-position: center 30%; }
@media (max-width: 719px) { :is(main#post, main#page) .sub-hero-- { height: 26rem; max-height: 26rem; } }
/* Posts and pages without a featured image render an empty <img src="">: keep a slim dark band so the title card does not slide up under the header */
:is(main#post, main#page) .sub-hero--:has(img[src=""]) { height: 14rem; max-height: 14rem; }
:is(main#post, main#page) .sub-hero-- img[src=""] { display: none; }
/* Title card that overlaps the photo */
:is(main#post, main#page) .pu-ux.bg-wh { border: 1px solid var(--d-line); border-radius: var(--d-radius); box-shadow: var(--d-shadow) !important; }
:is(main#post, main#page) .pu-ux.bg-wh > div.z6 { padding: var(--sp-3) var(--sp-3) !important; }
:is(main#post, main#page) .pu-ux.bg-wh h1.f-u { line-height: 1.15; margin-bottom: var(--sp-1) !important; }
@media (max-width: 680px) { :is(main#post, main#page) .pu-ux.bg-wh > div.z6 { padding: var(--sp-2) !important; } }

/* Foldable intro text (design.js adds the toggle): keeps the winner card near the top on phones */
:is(main#post, main#page) .sub-hero p.f-3.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
:is(main#post, main#page) .intro-toggle {
  appearance: none; background: none; border: 0; padding: .4rem 0; margin-top: var(--sp-1);
  font: 700 1.5rem/1 var(--fw); color: #fff; cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}

/* ---- Article body ---- */
:is(main#post, main#page) section.sect.bg-wh { padding-top: var(--sp-3); }
/* Body copy: 1.9 line height and 65px paragraph gaps were loose, and lines ran to 110 characters */
:is(main#post, main#page) .write { line-height: 1.7; }
:is(main#post, main#page) .write p { margin-bottom: var(--sp-2); }
:is(main#post, main#page) .write > p, :is(main#post, main#page) .write > ul, :is(main#post, main#page) .write > ol { max-width: 75ch; }
:is(main#post, main#page) .write h2, :is(main#post, main#page) .write h3, :is(main#post, main#page) .write h4 { line-height: 1.25; }
:is(main#post, main#page) .write > h2 { margin-top: var(--sp-4); }
:is(main#post, main#page) .write > h3 { margin-top: var(--sp-3); }
:is(main#post, main#page) .write > h2:first-child, :is(main#post, main#page) .write > h3:first-child { margin-top: 0; }
:is(main#post, main#page) .write h2, :is(main#post, main#page) .write h3, :is(main#post, main#page) .write h4, :is(main#post, main#page) .write h2 b, :is(main#post, main#page) .write h2 strong { color: var(--d-teal); }

/* Links in body text: AA brand teal with an underline instead of light teal only */
:is(main#post, main#page) .write a:not(.btn):not(.black):not(.fixed):not(.fi-xd):not(.buttonavc),
:is(main#post, main#page) .pricetag a, :is(main#post, main#page) .test-row a:not(.btn):not(.black):not(.fi-xd) {
  color: var(--d-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
:is(main#post, main#page) .write a:not(.btn):not(.black):not(.fixed):not(.fi-xd):not(.buttonavc):hover,
:is(main#post, main#page) .pricetag a:hover, :is(main#post, main#page) .test-row a:not(.btn):not(.black):not(.fi-xd):hover { color: var(--d-teal-hover); }
:is(main#post, main#page) .pricetag a { display: inline; border-bottom: 0; }
:is(main#post, main#page) .write a.black { color: var(--d-ink); }
/* In-post call-to-action link from the editor */
:is(main#post, main#page) .write center { display: block; margin: var(--sp-2) 0; }
:is(main#post, main#page) .write a.buttonavc {
  display: inline-block; padding: 1.2rem 2.4rem; border-radius: .4rem;
  background: var(--d-btn); color: #fff; font-weight: 700; text-decoration: none;
}
:is(main#post, main#page) .write a.buttonavc:hover, :is(main#post, main#page) .write a.buttonavc:focus-visible { background: var(--d-btn-hover); color: #fff; }

/* Buttons: theme green darkened until white text passes AA; hover no longer lightens (light green + white text failed) */
:is(main#post, main#page) .btn, :is(main#post, main#page) a.btn, :is(main#post, main#page) span.btn, :is(main#post, main#page) .toc_button {
  background: var(--d-btn); color: #fff; font-weight: 700;
}
:is(main#post, main#page) .btn:hover, :is(main#post, main#page) a.btn:hover, :is(main#post, main#page) .toc_button:hover,
:is(main#post, main#page) .pr-row:hover .btn, :is(main#post, main#page) .bestproducts:hover .dealer-btn .btn {
  background: var(--d-btn-hover); color: #fff; box-shadow: none !important;
}
:is(main#post, main#page) .btn.tt { letter-spacing: .04em; }
:is(main#post, main#page) .toc_box .toc_button { display: inline-block; border-radius: .4rem; margin-bottom: var(--sp-1) !important; }
:is(main#post, main#page) .toc_box ol { margin: 0 0 var(--sp-3); padding-block: var(--sp-1) !important; }
:is(main#post, main#page) .toc_box ol li { padding-block: .2rem; }
/* Empty disclaimer frame (design.js hides it when it has no content) */
:is(main#post, main#page) #disclaimer { border-color: var(--d-line) !important; border-radius: var(--d-radius) !important; }
:is(main#post, main#page) #disclaimer.is-empty { display: none; }

/* Stock text was 9.6px light teal */
:is(main#post, main#page) .stockStatus, :is(main#post, main#page) .stockStatus span { font-size: 1.2rem; color: var(--d-ink); }
:is(main#post, main#page) .stocK { color: var(--d-ink); }
:is(main#post, main#page) .pricetag, :is(main#post, main#page) .pricetag > span { color: var(--d-ink); }
:is(main#post, main#page) .oldPrice { color: var(--d-ink-soft); text-decoration-color: var(--d-ink-soft); }

/* ---- recommendation and discount badges: ink on brand colour instead of white on light teal ---- */
:is(main#post, main#page) .promotionLine > span,
:is(main#post, main#page) .bestproducts-wrap .bestproducts .promotionLine .winner__,
:is(main#post, main#page) .bestproducts-wrap .bestproducts .promotionLine .discountPercent {
  background: var(--d-brand) !important; color: var(--d-ink) !important;
  font-size: 1.2rem !important; font-weight: 700; line-height: 1;
  border-radius: 99px !important; padding: .5rem 1rem .6rem !important;
  z-index: 2;
}
/* The label text sits in a nested span that the theme also pills; keep it plain */
:is(main#post, main#page) .promotionLine > span > span { background: none !important; color: inherit !important; padding: 0 !important; border-radius: 0 !important; font-size: inherit !important; z-index: auto; }
/* The theme draws .winner__ as an 8rem absolute circle; here it is an inline pill inside .promotionLine */
:is(main#post, main#page) .bestproducts-wrap .promotionLine .winner__ { position: static; width: auto; height: auto; display: inline-flex; align-items: center; white-space: nowrap; text-transform: none; }
:is(main#post, main#page) .testInfo.testet { background: var(--d-btn); color: #fff; }

/* ---- Winner card (dark) ---- */
:is(main#post, main#page) .testvinder { box-shadow: var(--d-shadow) !important; margin-top: var(--sp-4); margin-bottom: var(--sp-3); }
:is(main#post, main#page) .testvinder .conTnt { padding: var(--sp-3) var(--sp-3) !important; }
:is(main#post, main#page) .testvinder .colImg { padding: var(--sp-3); }
:is(main#post, main#page) .testvinder .txt p { margin-top: var(--sp-1) !important; }
:is(main#post, main#page) .testvinder .pricetag { margin-bottom: var(--sp-2) !important; color: #fff; }
:is(main#post, main#page) .testvinder .pricetag > span, :is(main#post, main#page) .testvinder .stockStatus, :is(main#post, main#page) .testvinder .stockStatus span { color: #fff; }
:is(main#post, main#page) .testvinder .pricetag a { color: var(--d-brand); }
:is(main#post, main#page) .testvinder .btn { border-radius: .8rem; }
/* The 10rem circle hung outside the card corner (and off-screen on phones); make it a tab that straddles the top edge */
:is(main#post, main#page) .testvinder .shape {
  width: auto; height: auto; left: var(--sp-3); right: auto; top: 0; transform: translateY(-50%);
  padding: .7rem 1.4rem; border-radius: 99px; color: var(--d-ink);
  font-size: 1.3rem !important; font-weight: 700; line-height: 1; letter-spacing: .02em;
  box-shadow: 0 .3rem 1rem rgba(0, 26, 25, .25);
}
:is(main#post, main#page) .testvinder .shape:before { color: var(--d-ink); }
@media (max-width: 767px) {
  :is(main#post, main#page) .testvinder .conTnt { padding: var(--sp-2) var(--sp-2) var(--sp-3) !important; }
  :is(main#post, main#page) .testvinder .colImg { padding: var(--sp-3) var(--sp-2) var(--sp-1); }
  :is(main#post, main#page) .testvinder .shape { left: var(--sp-2); }
}

/* ---- Product overview: one card, hairline dividers, fixed columns ---- */
:is(main#post, main#page) .bestproducts-wrap {
  background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius);
  box-shadow: var(--d-shadow); overflow: hidden;
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-3) !important;
}
:is(main#post, main#page) .bestproducts-wrap .heaDer { margin-bottom: var(--sp-2); padding-inline: var(--sp-2); }
:is(main#post, main#page) .bestproducts-wrap .heaDer:before { color: var(--d-teal); letter-spacing: .06em; }
:is(main#post, main#page) .bestproducts-wrap ul.bestproducts-row { margin: 0 !important; border-top: 1px solid var(--d-line); }
:is(main#post, main#page) .bestproducts-wrap li.bestproducts {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2);
  position: relative; left: auto; right: auto; width: auto;
  margin: 0 !important; padding: 1.2rem var(--sp-3);
  background: transparent; border: 0 !important; border-bottom: 1px solid var(--d-line) !important;
  border-radius: 0; box-shadow: none !important; font-size: 1.5rem;
  transition: background-color .15s;
}
:is(main#post, main#page) .bestproducts-wrap li.bestproducts:last-child { border-bottom: 0 !important; }
:is(main#post, main#page) .bestproducts-wrap li.bestproducts:hover { background: var(--d-tint); box-shadow: none !important; }
:is(main#post, main#page) .bestproducts-wrap li.bestproducts:first-child { background: var(--d-tint); box-shadow: inset .4rem 0 0 var(--d-brand) !important; }
:is(main#post, main#page) .bestproducts-wrap li.bestproducts > div { flex: none; width: auto; max-width: none; padding: 0; margin: 0; order: 0 !important; }
:is(main#post, main#page) .bestproducts-wrap li.bestproducts > .descR { flex: 1 1 auto; min-width: 0; }
:is(main#post, main#page) .bestproducts-wrap li.bestproducts > .offer { width: 16.4rem; }
:is(main#post, main#page) .bestproducts-wrap li.bestproducts > .price { width: 9rem; text-align: right !important; font-size: 1.8rem; }
:is(main#post, main#page) .bestproducts-wrap .promotionLine { left: auto !important; right: var(--sp-3) !important; top: 0 !important; width: auto !important; transform: translateY(-50%); }
:is(main#post, main#page) .bestproducts-wrap .descR .overflow-txt { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
:is(main#post, main#page) .bestproducts-wrap .moRinfO { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .4rem; color: var(--d-ink-soft); font-size: 1.3rem; }
:is(main#post, main#page) .bestproducts-wrap .moRinfO .stockStatus, :is(main#post, main#page) .bestproducts-wrap .moRinfO .stockStatus span { color: var(--d-ink-soft); font-size: 1.3rem; }
:is(main#post, main#page) .bestproducts-wrap .cta { background: var(--d-chip); border: 0 !important; color: var(--d-ink); font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 99px; line-height: 1; }
/* Rank discs: white numerals on the coral burst failed AA; solid coral disc with ink numerals */
:is(main#post, main#page) .bestproducts-wrap .num {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--d-ink-soft);
}
:is(main#post, main#page) .bestproducts-wrap .num.lbb { background: var(--d-accent) !important; color: var(--d-ink) !important; }
:is(main#post, main#page) .bestproducts-wrap .img, :is(main#post, main#page) .bestproducts-wrap .smAlImg img { width: 5.6rem; }
:is(main#post, main#page) .bestproducts-wrap .smAlImg img { height: 5.6rem; object-fit: contain; }
:is(main#post, main#page) .bestproducts-wrap .offer img { min-width: 0; max-width: 6rem; max-height: 2.4rem; object-fit: contain; }
:is(main#post, main#page) .bestproducts-wrap .dealer-btn {
  width: 100%; justify-content: space-between; white-space: nowrap; background: #fff; color: var(--d-ink);
  border: 1px solid var(--d-line) !important; border-radius: .8rem !important;
  padding: .6rem 1.2rem !important; font-size: 1.3rem !important;
}
:is(main#post, main#page) .bestproducts-wrap li.bestproducts:hover .dealer-btn { border-color: var(--d-teal) !important; }
:is(main#post, main#page) .bestproducts-wrap > .text-center { padding-inline: var(--sp-2); }
/* Rows stay one line high on wide screens */
@media (min-width: 992px) {
  :is(main#post, main#page) .bestproducts-wrap .moRinfO { flex-wrap: nowrap; white-space: nowrap; }
  :is(main#post, main#page) .bestproducts-wrap li.bestproducts { padding-inline: var(--sp-2); }
  :is(main#post, main#page) .bestproducts-wrap li.bestproducts > .offer { width: 14.4rem; }
  :is(main#post, main#page) .bestproducts-wrap li.bestproducts > .price { width: 8rem; }
}
/* The theme hides the dealer button below 768px, so the row shows a chevron to say it is a link */
@media (max-width: 767px) {
  :is(main#post, main#page) .bestproducts-wrap li.bestproducts::after { content: "\203A"; margin-left: auto; font-size: 2.4rem; line-height: 1; color: var(--d-teal); }
  :is(main#post, main#page) .bestproducts-wrap li.bestproducts { padding: 1.2rem var(--sp-2); gap: 1.2rem; }
  :is(main#post, main#page) .bestproducts-wrap .promotionLine { right: var(--sp-2) !important; }
}
@media (max-width: 575px) {
  :is(main#post, main#page) .bestproducts-wrap .num { width: 2.8rem; height: 2.8rem; }
  :is(main#post, main#page) .bestproducts-wrap .img, :is(main#post, main#page) .bestproducts-wrap .smAlImg img { width: 4.8rem; }
  :is(main#post, main#page) .bestproducts-wrap .smAlImg img { height: 4.8rem; }
  :is(main#post, main#page) .bestproducts-wrap .descR .overflow-txt { font-size: 1.5rem; }
}

/* ---- Product detail cards ---- */
/* Torn-paper edges and a heavy shadow on white-on-white made a dotted line under every card */
:is(main#post, main#page) .test-row::before, :is(main#post, main#page) .test-row::after, :is(main#post, main#page) .faQs::before, :is(main#post, main#page) .faQs::after { display: none; }
:is(main#post, main#page) .test-row {
  background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius);
  box-shadow: var(--d-shadow) !important;
  padding: var(--sp-3) !important; margin: 0 0 var(--sp-4) !important;
}
:is(main#post, main#page) .test-rows { margin-top: var(--sp-3); }
:is(main#post, main#page) .test-row .titLe { color: var(--d-teal); margin-bottom: var(--sp-1) !important; }
:is(main#post, main#page) .test-row .pricetag { margin-bottom: var(--sp-2) !important; }
/* Nested boxes: hairline instead of a shadow on a shadow */
:is(main#post, main#page) .test-row .highlights, :is(main#post, main#page) .test-row .rou-nd { box-shadow: none !important; border: 1px solid var(--d-line); border-radius: var(--d-radius); }
:is(main#post, main#page) .test-row .highlights { background: var(--d-grey); }
:is(main#post, main#page) .test-row .rou-nd { background: #fff; }
:is(main#post, main#page) .test-row .pr-tabel { margin-bottom: var(--sp-2) !important; }
:is(main#post, main#page) .test-row .pr-tabel .tbTitLe { font-size: 1.8rem !important; margin-bottom: .4rem !important; }
/* Shop row: logo, name, stock, price and button in fixed columns; the button used to wrap below and overlap the card edge */
:is(main#post, main#page) .test-row .pr-row-wrap .pr-row {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr) 9rem 8rem 12rem; align-items: center; column-gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2) !important;
  border: 1px solid var(--d-line); border-radius: var(--d-radius); box-shadow: none !important; background: #fff;
}
:is(main#post, main#page) .test-row .pr-row-wrap .pr-row > * { width: auto; padding: 0; margin: 0; }
:is(main#post, main#page) .test-row .pr-row-wrap .pr-row:hover { border-color: var(--d-teal); }
:is(main#post, main#page) .test-row .pr-row .priCe { text-align: right; font-size: 1.6rem; }
:is(main#post, main#page) .test-row .pr-row .stoCk { text-align: center; }
:is(main#post, main#page) .test-row .pr-row .btn { font-size: 1.2rem; padding: .8rem 1rem; border-radius: .6rem; text-align: center; }
@media (max-width: 767px) {
  :is(main#post, main#page) .test-row { padding: var(--sp-2) !important; }
  :is(main#post, main#page) .test-row .pr-row-wrap .pr-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .6rem; }
  :is(main#post, main#page) .test-row .pr-row-wrap .pr-row .naMe { grid-column: 1; }
  :is(main#post, main#page) .test-row .pr-row-wrap .pr-row .loGo { grid-column: 2; grid-row: 1; justify-self: end; }
  :is(main#post, main#page) .test-row .pr-row-wrap .pr-row .offer-btn { grid-column: 1 / -1; }
}

/* ---- Sidebar popular-products ---- */
:is(main#post, main#page) aside.sidebar .block-split.shadow { box-shadow: var(--d-shadow) !important; border-radius: var(--d-radius); }
:is(main#post, main#page) aside.sidebar .recap-products > .rela-ti { padding-block: .6rem; border-bottom: 1px solid var(--d-line); margin-bottom: 0 !important; }
:is(main#post, main#page) aside.sidebar .recap-products > .rela-ti:last-of-type { border-bottom: 0; }
:is(main#post, main#page) aside.sidebar .recap-products .c1 { color: var(--d-ink-soft); }
:is(main#post, main#page) aside.sidebar .recap-products .pricetag { font-size: 1.2rem !important; }

/* ---- FAQ accordion ---- */
:is(main#post, main#page) .faQs h2.f-2 { color: var(--d-teal); }
:is(main#post, main#page) .faQs .card { border: 1px solid var(--d-line); border-radius: var(--d-radius) !important; background: var(--d-grey) !important; }

/* ---- Footer ---- */
/* 8rem padding above and below every column pair left a large empty band */
#footer.bg-black { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
#footer .row.py-6 { padding-block: var(--sp-3) !important; }
#footer a:hover { color: var(--d-brand); }
#footer .logo.col-sm-auto { margin-top: var(--sp-2) !important; margin-bottom: 0 !important; }