/* Navigation belongs to the standalone installation, not to WordPress.
   Use the same calm spacing and dark rounded buttons on both content sections. */
/* The shared WordPress stylesheet expands .polargo-shop out of a theme's
   narrow content column with calc(50% - 50vw). A standalone page already fills
   its available width. Here 100vw includes a classic vertical scrollbar while
   its parent does not, making those margins negative and causing horizontal
   scrolling. Use the actual parent width, including padding in that width.
   Keep this override scoped to the standalone wrapper: WordPress's intended
   full-width presentation and nested product/modal layouts remain unchanged.
   Do not hide page overflow; real layout errors must still be detectable. */
.standalone-shop-content > .polargo-shop {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.standalone-content-page {
  box-sizing: border-box;
  padding: 24px 18px 0;
}
.standalone-content-page > h1 {
  margin: 0 0 24px;
}
.standalone-breadcrumbs {
  margin: 0 0 24px;
  font-size: .94rem;
  line-height: 1.5;
}
.standalone-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.standalone-breadcrumbs li {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
}
/* Separators are decoration and remain outside the link's click target. */
.standalone-breadcrumbs li + li::before {
  content: "›";
  color: #64706d;
  padding: 0 10px;
}
.standalone-breadcrumbs a {
  color: #24453c;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.standalone-breadcrumbs [aria-current="page"] {
  color: #454f4c;
  overflow-wrap: anywhere;
}
.standalone-breadcrumbs a:focus-visible,
.standalone-content-back:focus-visible {
  outline: 3px solid #075b45;
  outline-offset: 4px;
}
.standalone-content-actions {
  display: flex;
  justify-content: center;
  margin: 28px 0;
}
.standalone-content-actions .standalone-content-back {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  min-height: 48px;
  min-width: 180px;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background: #383b39;
  color: #fff;
  font: inherit;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
.standalone-content-actions .standalone-content-back:hover {
  background: #202a25;
  color: #fff;
}
@media (max-width: 600px) {
  .standalone-content-page { padding-top: 20px; }
  .standalone-breadcrumbs { margin-bottom: 20px; }
  .standalone-content-actions { margin: 24px 0; }
}

/* Standalone full articles only: a two-column grid, never a float. Long text
   stays to the right even after it extends beyond the image's natural height.
   Title-first source order becomes title/image/text below the 700px breakpoint.
   The scoped important overrides are necessary because the inherited article
   stylesheet declares image width/margins important; the WordPress file itself
   stays untouched. */
.standalone-content-page .standalone-article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 28px;align-items:start}
.standalone-content-page .standalone-article-layout.has-image{grid-template-columns:minmax(0,min(42%,600px)) minmax(0,1fr)}
.standalone-content-page .standalone-article-layout>:is(h1,h2){grid-column:1;grid-row:1;margin:0!important;min-width:0;overflow-wrap:anywhere}
.standalone-content-page .standalone-article-layout.has-image>:is(h1,h2){grid-column:2;grid-row:1}
.standalone-content-page .standalone-article-layout>.polargo-article-full-image{grid-column:1;grid-row:1 / span 2;float:none!important;width:100%!important;max-width:600px!important;height:auto!important;margin:0!important;display:block;border-radius:6px}
.standalone-content-page .standalone-article-text{grid-column:1;grid-row:2;min-width:0;overflow-wrap:anywhere}
.standalone-content-page .standalone-article-layout.has-image>.standalone-article-text{grid-column:2;grid-row:2}
.standalone-content-page .standalone-article-text>:first-child{margin-top:0}
.standalone-content-page .standalone-article-text img,.standalone-content-page .standalone-article-text iframe{max-width:100%}
@media(max-width:700px){
.standalone-content-page .standalone-article-layout.has-image{grid-template-columns:minmax(0,1fr);gap:18px}
.standalone-content-page .standalone-article-layout.has-image>:is(h1,h2){grid-column:1;grid-row:1}
.standalone-content-page .standalone-article-layout>.polargo-article-full-image{grid-column:1;grid-row:2;margin-left:auto!important;margin-right:auto!important}
.standalone-content-page .standalone-article-layout.has-image>.standalone-article-text{grid-column:1;grid-row:3}
}

/* Account-managed dividers sit outside the colored header/footer, so their
   spacing moves only the separator and cannot obscure links or shop content. */
.standalone-shell-divider{box-sizing:border-box;display:flow-root;width:100%;clear:both}

/* The whole page needs clearance after the footer. Padding inside the shop
   alone cannot lift footer text above checkout controls fixed to the viewport.
   :has supplies a no-script first-paint fallback; the measured JS variable
   replaces it and removes all extra space as soon as the cart becomes empty. */
.standalone-cart-clearance{height:var(--standalone-cart-clearance,0px)}
.polargo-parity:has(.polargo-cart-bottom-bar) .standalone-cart-clearance{height:var(--standalone-cart-clearance,118px)}
@media(max-width:700px){.polargo-parity:has(.polargo-cart-bottom-bar) .standalone-cart-clearance{height:var(--standalone-cart-clearance,220px)}}

/* Predictable three/four-column overviews replace the shared renderer's
   auto-fit layout only inside standalone landing/overview content. Tablet
   and phone breakpoints keep titles and links readable without sideways scroll. */
:is(.standalone-content-page,.standalone-content-module) .polargo-introduction-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:28px 24px!important}
:is(.standalone-content-page,.standalone-content-module) .polargo-articles-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important;align-items:stretch}
:is(.standalone-content-page,.standalone-content-module) .polargo-introduction-category-card{min-width:0;text-align:center}
:is(.standalone-content-page,.standalone-content-module) .polargo-introduction-card-image{position:relative;aspect-ratio:2.1;overflow:hidden}
:is(.standalone-content-page,.standalone-content-module) .polargo-introduction-card-image img{height:100%!important;object-fit:cover}
.standalone-introduction-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;max-width:calc(100% - 32px);width:max-content;padding:14px 18px;border-radius:4px;background:rgba(16,24,20,.65);color:#fff!important;font-size:17px;font-style:italic;font-weight:400;line-height:1.35;overflow-wrap:anywhere;pointer-events:none}
:is(.standalone-content-page,.standalone-content-module) .polargo-introduction-card-.polargo-parity h3{font-size:22px!important;line-height:1.3!important}
:is(.standalone-content-page,.standalone-content-module) .polargo-introduction-card-.polargo-parity p{font-size:17px!important;line-height:1.45!important;margin-bottom:0!important;color:#60676b}
.standalone-introduction-without-image{display:block;padding:16px 16px 0;color:#68747b;font-size:13px}

/* Each article grows to its row's full height. Auto margin pushes the single
   read-more control to the bottom even with different title/excerpt lengths. */
:is(.standalone-content-page,.standalone-content-module) .polargo-article-card{display:flex;flex-direction:column;min-width:0}
:is(.standalone-content-page,.standalone-content-module) .polargo-article-card-.polargo-parity{display:flex;flex-direction:column;flex:1;min-width:0}
:is(.standalone-content-page,.standalone-content-module) .polargo-article-card h3{font-size:20px!important;overflow-wrap:anywhere}
:is(.standalone-content-page,.standalone-content-module) .standalone-article-more{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin-top:auto!important;padding-top:16px;min-height:44px;color:#5f6872!important}
.standalone-article-more svg{flex:0 0 22px}
.standalone-article-more:hover svg{transform:translateX(3px)}
@media(prefers-reduced-motion:no-preference){.standalone-article-more svg{transition:transform .15s ease}}

/* Category labels occupy their own line *inside* each navigation row, below
   its divider and above its thumbnail/title. The image and text remain a
   separate two-column group, including when a category label is missing. */
.standalone-shop-content .polargo-introduction-nav .polargo-introduction-row{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
.standalone-introduction-row-content{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:start;min-width:0}
.standalone-introduction-row-content>span:only-child{grid-column:1/-1}
.standalone-shop-content .polargo-introduction-nav .polargo-introduction-row>.standalone-introduction-category{font-size:12px!important;font-weight:400!important;line-height:1.35!important;color:#68747b!important;margin:0!important;padding:0!important}
@media(max-width:1199px){:is(.standalone-content-page,.standalone-content-module) .polargo-articles-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:900px){:is(.standalone-content-page,.standalone-content-module) :is(.polargo-introduction-grid,.polargo-articles-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}}
@media(max-width:600px){:is(.standalone-content-page,.standalone-content-module) :is(.polargo-introduction-grid,.polargo-articles-grid){grid-template-columns:minmax(0,1fr)!important}}

/* A hidden customer header moves its four plain links to the country row.
   Both the country and nav occupy the same grid row/baseline; the logo has
   its own row above. Scoped classes leave the visible-header layout intact. */
.standalone-toolbar-with-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  row-gap: .15rem;
  column-gap: 1rem;
}
.standalone-toolbar-with-navigation > div { display: contents; }
.standalone-toolbar-with-navigation .polargo-desktop-logo { grid-column: 1 / -1; grid-row: 1; }
.standalone-toolbar-with-navigation > div > span { grid-column: 1; grid-row: 2; }
.standalone-toolbar-navigation {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  gap: 18px;
  align-items: baseline;
  justify-content: flex-end;
  background: transparent;
  color: #111;
  line-height: 1.45;
}
.standalone-toolbar-navigation a {
  background: transparent;
  color: inherit;
  padding: 0;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.standalone-toolbar-navigation a:hover,
.standalone-toolbar-navigation a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.standalone-toolbar-navigation a:focus-visible { outline: 2px solid #16463b; outline-offset: 4px; border-radius: 2px; }
/* Content-only routes use the same toolbar, without the main product wrapper. */
.standalone-content-page .polargo-desktop-logo { display: block; width: auto; height: auto; max-width: 170px; max-height: 34px; object-fit: contain; }
.standalone-content-page .polargo-shop-toolbar { border-bottom-color: #d9dde2; }
.standalone-content-page .polargo-shop-toolbar span { color: #5f6b73; }
/* Match the existing shop mobile header (860px), where the desktop link row
   must be hidden. Existing mobile shop controls keep their usual behavior. */
@media (max-width: 860px) {
  .standalone-toolbar-navigation { display: none; }
  .standalone-toolbar-with-navigation { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the independent privacy controls above the fixed cart controls too.
   The existing observer measures the live bar after AJAX and viewport changes;
   the same clearance also limits the dialog height to keep its close control
   inside the viewport. This remains usable when the customer footer is hidden. */
.polargo-parity:has(.polargo-cart-bottom-bar) { --standalone-cart-clearance: 118px; }
@media (max-width: 700px) {
  .polargo-parity:has(.polargo-cart-bottom-bar) { --standalone-cart-clearance: 220px; }
}
.polargo-cookie-reopen { bottom: calc(var(--standalone-cart-clearance, 0px) + 16px); }
.polargo-cookie-panel {
  bottom: max(74px, calc(var(--standalone-cart-clearance, 0px) + 16px));
  max-height: calc(100vh - max(105px, calc(var(--standalone-cart-clearance, 0px) + 48px)));
}

/* Category links inherit the menu rows' horizontal padding. In the small
   breadcrumb this compounds the flex gap around each slash and needlessly
   pushes the selected category onto a new line. Remove only that horizontal
   padding/margin here; preserve vertical click space and natural wrapping for
   longer category paths. The separate WordPress stylesheet stays untouched. */
.polargo-accordion-breadcrumb { column-gap: 3px !important; }
.polargo-accordion-breadcrumb > a,
.polargo-accordion-breadcrumb > strong {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Standalone branding/search row: country information remains above its
   divider without the old logo-height gap. The logo uses the left flexible
   column; language and search share one label baseline and 42px field height.
   All overrides live in this standalone asset, preserving WordPress styles. */
.standalone-shop-content .polargo-shop { padding-top: 16px; }
.standalone-shop-content .standalone-shop-country-toolbar { margin-bottom: 0; padding-bottom: 12px; }
.standalone-shop-country-toolbar.standalone-toolbar-with-navigation > div > span,
.standalone-shop-country-toolbar .standalone-toolbar-navigation { grid-row: 1; }
.standalone-shop-brand-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 470px);
  align-items: center;
  column-gap: 36px;
  row-gap: 16px;
  margin-bottom: 16px;
  padding: 12px 0;
}
.polargo-shop .standalone-shop-brand-logo {
  /* Cap the desktop logo while allowing its grid column to shrink on
     narrower screens. Automatic height preserves the original proportions. */
  width: min(100%, 330px) !important;
  max-width: 330px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
}
.standalone-shop-brand-controls .polargo-country-form { gap: 16px; flex-wrap: nowrap; min-width: 0; }
.standalone-shop-brand-controls .standalone-selector-field { display: grid; grid-template-rows: auto 42px; gap: 4px; align-self: end; min-width: 0; }
.standalone-shop-brand-controls .standalone-language-field { width: 138px; }
.standalone-shop-brand-controls .standalone-pricelist-field { width: 180px; }
.standalone-shop-brand-controls .standalone-selector-field > label,
.standalone-shop-brand-controls .polargo-search-form label > span {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.standalone-shop-brand-controls .standalone-selector-field > select { width: 100%; min-width: 0; height: 42px; min-height: 42px; margin: 0; }
.standalone-shop-brand-controls .polargo-country-selector-search { margin-left: 0; min-width: 0; }
.standalone-shop-brand-controls .polargo-search-form label { flex: 1; min-width: 0; gap: 4px; }
.standalone-shop-brand-controls .polargo-search-form input[type="search"] { width: 100%; }
.standalone-shop-brand-controls .polargo-search-form button { flex: 0 0 48px; }
/* A permitted second price list consumes another selector column. Reduce
   only the logo's flexible allocation/gaps rather than wrapping labels apart
   from their fields or pushing the search outside tablet-sized screens. */
.standalone-shop-brand-controls:has(.standalone-pricelist-field) { grid-template-columns: minmax(120px, 1fr) auto minmax(220px, 470px); column-gap: 24px; }
/* Mobile keeps the established compact logo/search header. Do not duplicate
   the large desktop logo there; country/language controls still wrap safely. */
@media (max-width: 860px) {
  /* The compact sticky menu is already top: 0 in the shared shop CSS.
     Remove only its parent's branding padding when the customer has hidden
     the outer header, so the same top position holds on the initial paint.
     Keep the menu's internal touch-target/search spacing and desktop padding. */
  .standalone-header-hidden .standalone-shop-content .polargo-shop { padding-top: 0; }
  .standalone-shop-brand-controls { display: block; padding: 12px 0 16px; }
  .polargo-shop .standalone-shop-brand-logo { display: none !important; }
  .standalone-shop-brand-controls .polargo-country-form { flex-wrap: wrap; gap: 12px 16px; }
  .standalone-shop-brand-controls .polargo-country-selector-search { display: none; }
}


/* Content-only branding shares the shop's 16px initial top inset and 1440px
   inner canvas (the shop's outer horizontal padding is 16px on both sides).
   A separate row used to place the logo above country/nav and made those links
   jump. Here the logo replaces the country text on a single flex row; the nav
   itself is aligned to its top just like the country toolbar in the shop. */
.standalone-content-page { --standalone-content-gap: 24px; max-width: 1472px; padding: 16px 16px 0; }
.standalone-content-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 var(--standalone-content-gap); padding: 0; border: 0; }
.standalone-content-toolbar > .polargo-desktop-logo { display: block; width: 120px; max-width: 120px; height: auto; max-height: none; flex: 0 0 120px; margin: 0; }
.standalone-content-toolbar > .standalone-toolbar-navigation { align-self: flex-start; line-height: 1.45; font-size: 16px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.standalone-content-page > .standalone-breadcrumbs,
.standalone-content-page > h1 { margin-bottom: var(--standalone-content-gap); }

/* Detail pages have a quiet back action beside the green shopping action.
   Overview pages show just the shopping action. Wrapping preserves generous
   touch targets on small screens and with longer translated button labels. */
.standalone-content-actions { gap: 12px; flex-wrap: wrap; }
.standalone-content-actions .standalone-content-continue { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 180px; max-width: 100%; padding: 12px 28px; border: 0; border-radius: 999px; background: #b8e34a; color: #111; font: inherit; line-height: 1.4; text-decoration: none; text-align: center; white-space: normal; }
.standalone-content-actions .standalone-content-continue:hover { background: #acd839; color: #111; }
.standalone-content-continue:focus-visible { outline: 3px solid #075b45; outline-offset: 4px; }

/* Product progress CSS is reused for cards/rows. Keep the spinner from
   shrinking, and allow long translated category names to wrap inside its card. */
[data-standalone-content-loading] > .polargo-inline-progress { overflow-wrap: anywhere; gap: 10px; }
[data-standalone-content-loading] > .polargo-inline-progress::before { flex: 0 0 20px; margin-right: 0; }
@media (prefers-reduced-motion: reduce) { [data-standalone-content-loading] > .polargo-inline-progress::before { animation: none; } }
@media (max-width: 600px) { .standalone-content-page { --standalone-content-gap: 20px; } }

/* Company information reuses the content canvas, toolbar and breadcrumbs.
   Contact and purchase responsibilities come before the story; two equal
   service cards are easy to scan on desktop and stack in reading order on
   mobile. Every grid column can shrink, and long Finnish labels/email wrap
   rather than widening the viewport. Plain text stays outside photographs. */
.standalone-about{color:#243b33;line-height:1.65;overflow-wrap:anywhere}
.standalone-about h2{font-size:clamp(1.25rem,1.8vw,1.65rem);line-height:1.3;margin:0 0 14px;color:#203d32}
.standalone-about p{margin:0 0 16px}.standalone-about p:last-child{margin-bottom:0}
.standalone-about-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;margin-bottom:32px}
.standalone-about-hero>img{display:block;width:100%;height:auto;border-radius:6px}
.standalone-about-no-image{grid-template-columns:minmax(0,1fr)}
.standalone-about .standalone-about-eyebrow{font-size:13px;font-weight:600;color:#5b6d62;margin-bottom:10px}
.standalone-about-service-grid,.standalone-about-story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:28px;align-items:stretch}
.standalone-about-card{min-width:0;box-sizing:border-box;padding:24px;border:1px solid #d9e1dd;border-radius:6px;background:#fff}
.standalone-about-contact{background:#f6f9f7}
/* Optional owner details live within the support card, under its introduction.
   An inset section and subordinate heading preserve the page hierarchy. Long
   addresses wrap; links retain generous touch targets on narrow displays. */
.standalone-about-contact .standalone-partner-contact{margin:20px 0;padding:16px;border-left:3px solid #bdcfc5;border-radius:4px;background:#fff}
.standalone-partner-contact h3{font-size:1.1rem;line-height:1.3;margin:0 0 12px;color:#203d32}
.standalone-about .standalone-partner-contact p{margin:0 0 8px}
.standalone-about .standalone-partner-contact p:last-child{display:flex;flex-wrap:wrap;gap:0 16px;margin:0}
.standalone-partner-contact a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere;color:#164d39;text-decoration:underline;text-underline-offset:3px}
.standalone-partner-contact a:hover{color:#075b45}
.standalone-about-contact-links{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 12px}
.standalone-about-contact-links a{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:64px;max-width:100%;padding:10px 14px;border:1px solid #bdcfc5;border-radius:5px;color:#164d39;text-decoration:none;background:#fff;box-sizing:border-box;overflow-wrap:anywhere}
.standalone-about-contact-links span{font-size:13px;color:#5a6d61}.standalone-about-contact-links strong{font-size:16px}
.standalone-about-contact-links a:hover{border-color:#28684c;background:#eff5f1}
.standalone-about a:focus-visible{outline:3px solid #075b45;outline-offset:3px}
.standalone-about .standalone-about-hours{font-size:14px;color:#52665a}
.standalone-about-terms{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:44px;color:#164d39;text-underline-offset:3px}
.standalone-about-company{margin-bottom:32px}.standalone-about-company dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0 0}
.standalone-about-company dt{font-size:13px;color:#5b6d62;margin-bottom:4px}.standalone-about-company dd{margin:0;font-weight:600}
.standalone-about-vision,.standalone-about-history{max-width:960px;margin:0 0 32px}
.standalone-about-story{padding:0;overflow:hidden}.standalone-about-story>img{display:block;width:100%;height:auto;aspect-ratio:2.1;object-fit:cover}.standalone-about-story>div{padding:24px}
/* A restrained image crop gives both story cards the same height without
   stretching photographs. On phones, retain the full science montage instead
   of losing its field/sea context in a narrow crop. */
@media(max-width:700px){
.standalone-about-hero{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:24px}
.standalone-about-service-grid,.standalone-about-story-grid{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:24px}
.standalone-about-card,.standalone-about-story>div{padding:20px}.standalone-about-story{padding:0}
.standalone-about-company dl{grid-template-columns:minmax(0,1fr);gap:16px}
.standalone-about-company,.standalone-about-vision,.standalone-about-history{margin-bottom:24px}
.standalone-about-story>img{aspect-ratio:var(--standalone-about-image-ratio,2.1);object-fit:contain}
}
/* This uses the existing mobile drawer and its close/focus behavior. The
   visible page links keep company/support information one tap away regardless
   of optional product/category settings. The separate WordPress menu is intact. */
.standalone-mobile-page-nav{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 16px;border-bottom:1px solid #e0e5e2}
.standalone-mobile-page-nav a{display:flex;align-items:center;min-height:44px;padding:10px 16px;color:#203d32;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.standalone-mobile-page-nav a:hover{background:#f0f6f2}.standalone-mobile-page-nav a:focus-visible{outline:2px solid #075b45;outline-offset:-3px}

/* Content pages share the same mobile menu without fetching category data.
   Hide the desktop toolbar once the drawer header is visible, preserving one
   logo and the existing shop breakpoint. No new scripts or menu state needed. */
@media(max-width:860px){
  .standalone-content-page > .standalone-content-toolbar{display:none}
  .standalone-header-hidden .standalone-content-page{padding-top:0}
  .standalone-content-page > .polargo-mobile-header{margin:0 -16px 24px;padding-left:16px;padding-right:16px}
}

/* Content navigation is outside the product wrapper, so carry over its
   visually hidden menu label without hiding it from assistive technology. */
.standalone-content-page .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Embedded articles occupy one normal product-grid cell. A full-height flex
   .polargo-parity anchors read-more at the bottom, matching neighbouring purchase rows.
   Scoped selectors avoid changing standalone article index/detail layouts. */
.polargo-products>.polargo-embedded-article{display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.polargo-products>.polargo-embedded-article .polargo-article-card-.polargo-parity{display:flex;flex-direction:column;flex:1;min-width:0}
.polargo-products>.polargo-embedded-article h3{font-size:20px!important;overflow-wrap:anywhere}
.polargo-products>.polargo-embedded-article p{overflow-wrap:anywhere}
.polargo-products>.polargo-embedded-article .standalone-article-more{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin-top:auto!important;padding-top:16px;min-height:44px;color:#5f6872!important}

/* Keep a consistent reading rhythm on both embedded and index article cards.
   Body padding leaves 16px after the image; the same gap separates title,
   subjects and excerpt. Reset inherited heading/list/paragraph margins so
   they cannot stack with that gap. Missing subjects add no placeholder row.
   The existing auto margin still pins read-more to the bottom of tall cards,
   and topic links retain their separate hit areas and mobile touch targets. */
.polargo-article-card .polargo-article-card-.polargo-parity{display:flex;flex-direction:column;gap:16px}
.polargo-article-card .polargo-article-card-.polargo-parity>h3,
.polargo-article-card .polargo-article-card-.polargo-parity>.standalone-article-topics,
.polargo-article-card .polargo-article-card-.polargo-parity>p{margin:0!important}

/* Subjects use the article API's translated labels, with no extra request.
   A compact wrapping list provides the same visual cue on index/embedded
   cards, article pages and modals. Long labels can wrap even at 320px; an
   article without categories emits no container and adds no vertical space.
   Explicit colours keep the small labels readable beside every shop theme. */
.standalone-article-topics{display:flex;flex-wrap:wrap;gap:6px;list-style:none!important;margin:0 0 12px!important;padding:0!important;max-width:100%;min-width:0}
.standalone-article-topic{display:inline-block;max-width:100%;box-sizing:border-box;padding:4px 9px;border:1px solid #d9e7de;border-radius:999px;background:#edf5ef;color:#315d46;font-size:12px!important;line-height:1.4!important;font-weight:600;overflow-wrap:anywhere;margin:0!important}

/* Topic anchors retain compact pills while exposing normal link hover/focus.
   The outer list item has no extra border/padding. Touch targets become 44px
   on small screens; labels and the active-filter bar wrap without overflow. */
.standalone-article-topic{padding:0;border:0;border-radius:0;background:transparent}
.standalone-article-topic-link,.standalone-article-topic-text{display:inline-flex;align-items:center;box-sizing:border-box;max-width:100%;padding:4px 9px;min-height:32px;border:1px solid #d9e7de;border-radius:999px;background:#edf5ef;color:#315d46!important;line-height:1.4;font-size:12px!important;font-weight:600;text-decoration:none!important;overflow-wrap:anywhere}
.standalone-article-topic-link:hover,.standalone-article-topic-link[aria-current="true"]{background:#dcecdf;border-color:#639575;color:#204b35!important;text-decoration:underline!important;text-underline-offset:3px}
.standalone-article-topic-link:focus-visible,.standalone-article-topic-clear:focus-visible{outline:3px solid #075b45;outline-offset:3px}
.standalone-article-topic-filter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px;padding:12px 16px;background:#f1f6f3;border:1px solid #d9e7de;border-radius:8px;color:#24453c;overflow-wrap:anywhere}
.standalone-article-topic-filter>strong{min-width:0;max-width:100%}
.standalone-article-topic-clear{display:inline-flex;align-items:center;min-height:32px;color:#24453c!important;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.standalone-article-topic-link,.standalone-article-topic-clear{min-height:44px}}

/* Only article cards embedded in the product grid get a full-card hit area.
   Stretch a real heading anchor, preserving normal new-tab/context-menu and
   no-JavaScript navigation. Reset intermediate positioning so the containing
   block is the card, never the text column. Independent topic links sit above
   the overlay and retain their own filter action. Keep keyboard focus inside
   the clipped border so it remains visible around the entire clickable card. */
.polargo-products>.polargo-embedded-article{position:relative}
.polargo-products>.polargo-embedded-article .polargo-article-card-.polargo-parity,
.polargo-products>.polargo-embedded-article h3,
.polargo-products>.polargo-embedded-article .standalone-embedded-article-link{position:static}
.polargo-products>.polargo-embedded-article .standalone-embedded-article-link::after{
    content:"";position:absolute;inset:0;z-index:1;border-radius:8px;cursor:pointer
}
.polargo-products>.polargo-embedded-article .standalone-article-topic-link{position:relative;z-index:2}
.polargo-products>.polargo-embedded-article .standalone-embedded-article-link:focus-visible{outline:none}
.polargo-products>.polargo-embedded-article .standalone-embedded-article-link:focus-visible::after{outline:3px solid #075b45;outline-offset:-4px}
.polargo-products>.polargo-embedded-article:hover{box-shadow:0 3px 10px rgba(0,0,0,.12)}


/* Embedded article artwork uses its own proportions, at the full card width.
   Remove the shared 16:10 crop only inside the product grid: article overview
   and detail pages keep their established design. The intrinsic image height
   updates as a lazy image loads; CSS Grid recalculates the row automatically.
   Stretch both card types to that row's tallest content, with flex bodies
   keeping reading/purchase controls at the bottom. No measured pixel heights
   or resize listeners are needed, including after responsive column changes. */
.polargo-products{align-items:stretch;grid-auto-rows:auto}
.polargo-products>.polargo-product,
.polargo-products>.polargo-embedded-article{align-self:stretch;min-height:0}
.polargo-products>.polargo-embedded-article .polargo-article-card-image{flex:0 0 auto;min-height:0}
.polargo-products>.polargo-embedded-article .polargo-article-card-image img{
    width:100%!important;height:auto!important;max-height:none!important;
    aspect-ratio:auto!important;object-fit:contain!important
}

/* Country and language share one compact row when both selectors exist.
   Each can shrink on narrow phones; the one-language layout stays unchanged. */
@media(max-width:860px){.standalone-shop-brand-controls:has(.standalone-pricelist-field) .standalone-selector-field{flex:1 1 120px;width:auto;max-width:100%}}