/*
Theme Name:   Pebble UK
Theme URI:    https://www.pebbleuk.com
Description:  Pebble UK — medical graduated compression hosiery. Child theme of Hello Elementor, built against the Pebble UK design system.
Author:       Pebble UK
Template:     hello-elementor
Version:      1.0.0
Text Domain:  pebble-child
Tags:         e-commerce, elementor, woocommerce
*/

/* Design tokens and components load from assets/css/pebble.css (enqueued in functions.php).
   Only additions that the source stylesheet does not already cover belong below. */

/* ---------------------------------------------------------------------------
   Hello Elementor collision fixes.

   The parent theme constrains .site-header:not(.dynamic-header) and
   .site-footer:not(.dynamic-footer) to its 1140px container. Our markup carries
   the .dynamic-header / .dynamic-footer classes so those rules exclude it —
   the mechanism Hello provides for exactly this case. These declarations match
   the parent's specificity as a backstop.
   --------------------------------------------------------------------------- */
.site-header:not(.x),
.site-footer:not(.x) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Page content on non-Elementor pages is likewise capped by the parent. */
body:not([class*="elementor-page-"]) .site-main {
  max-width: none;
}

/* ---------------------------------------------------------------------------
   WooCommerce → Pebble design system.

   The source HTML was written against bespoke markup; these rules map
   WooCommerce's own output onto the same visual language.
   --------------------------------------------------------------------------- */

/* --- PDP columns ---
   WooCommerce ships div.summary{width:48%;float:right} and div.images{width:48%},
   which halve the .pdp-layout grid cells. Neutralise both so the source's
   1fr 1fr / 64px gap governs the layout. */
.pdp-layout .pdp-info,
.pdp-layout .summary,
.pdp-layout .entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}
.pdp-layout .gallery,
.pdp-layout .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* --- Product gallery: white card + thumbnail row, per .gallery-main/.gallery-thumbs --- */
.gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.gallery .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}
/* Non-active slides are stacked by flexslider; keep only the first visible
   when the slider has not initialised. */
.gallery .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image:not(:first-child) {
  display: none;
}
/* Gallery thumbnails.

   WooCommerce lays these out as 25%-wide floats:
     .woocommerce div.product div.images .flex-control-thumbs li { width:25%; float:left }
   That selector is (0,4,3) and beat the simpler `.gallery .flex-control-thumbs li`,
   so each li came out ~142x76 while the image inside stayed square and overflowed -
   the odd crop. Match WooCommerce's own selector depth to win the cascade, and drop
   the float so the flex row does the layout. */
.woocommerce div.product div.images .flex-control-thumbs,
.gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}
.woocommerce div.product div.images .flex-control-thumbs li,
.gallery .flex-control-thumbs li {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  margin: 0;
  float: none;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img,
.gallery .flex-control-thumbs li img {
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 6px;
  background: #fff;
  border-radius: 10px;
  border: 2px solid var(--line);
  cursor: pointer;
  /* Woo dims inactive thumbs to .5; we show the border state instead. */
  opacity: 1;
  transition: border-color .15s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.gallery .flex-control-thumbs li img.flex-active,
.gallery .flex-control-thumbs li img:hover {
  border-color: var(--teal-700);
}
.woocommerce-product-gallery__trigger {
  background: var(--paper) !important;
  border: 1px solid var(--line);
  border-radius: 50%;
  z-index: 3;
}

/* --- Variation form ---
   WooCommerce renders a <table class="variations">. Flatten it into the
   source's two-column .opt-grid of labelled .field controls. */
.variations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 0;
  background: none;
  margin: 0 0 22px;
  width: 100%;
}
/* tbody dissolves so each <tr> becomes one grid cell holding its label above
   its select — the source's .opt-grid > .field arrangement. */
.variations tbody { display: contents; }
.variations tr { display: block; }
/* Elementor's reset.css zebra-stripes table rows via
   `table tbody > tr:nth-child(2n+1) > th` — specificity (0,1,4), which outranks
   any reasonable class selector here. !important is the proportionate override. */
.variations th,
.variations td {
  display: block;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  text-align: left;
  width: auto;
}
.variations th.label label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
  display: block;
}
.variations select {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234D5950' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.variations select:focus {
  border-color: var(--teal-700);
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,99,88,.1);
}
/* Clear sits under the last select, out of the flow: WooCommerce only hides
   it with visibility, so in flow it held open a blank line above the Size
   Guide button even when there was nothing to clear. */
.variations td.value { position: relative; }
.reset_variations {
  font-size: 13px;
  color: var(--ink-faint);
  display: inline-block;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
}
.reset_variations:hover { color: var(--clay-dark); }

/* Size Guide button beneath the selectors; opens the Size Guide tab. */
.size-guide-btn {
  padding: 0;
  font-size: 14px;
  margin: -10px 0 20px;
  border: none;
}
/* Text-style button: no fill on hover, just the link colour shift. */
.size-guide-btn:hover {
  background: transparent;
  color: var(--clay-dark);
}
.size-guide-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Clear the sticky header when the Size Guide button scrolls to the tabs. */
.woocommerce-tabs { scroll-margin-top: 120px; }

/* --- Quantity stepper + add to bag --- */
form.cart,
form.variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin: 0 0 22px;
  flex-wrap: nowrap;
}
form.variations_form.cart { display: block; }

.qty-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
.qty-box .qty-btn {
  width: 46px;
  height: 56px;
  background: #fff;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--teal-900);
  cursor: pointer;
}
.qty-box .qty-btn:hover { background: var(--stone); }
.qty-box .quantity { margin: 0; }
.qty-box .quantity input.qty {
  width: 50px;
  height: 56px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-box .quantity input.qty::-webkit-outer-spin-button,
.qty-box .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.single_add_to_cart_button {
  flex: 1;
  height: 56px;
  background: var(--teal-900) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 28px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  transition: background .2s ease, box-shadow .2s ease;
}
.single_add_to_cart_button:hover:not(.disabled) {
  background: var(--teal-700) !important;
  box-shadow: 0 10px 24px -10px rgba(13,59,53,.55);
}
.single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }

.woocommerce-variation-price { margin-bottom: 12px; }
.woocommerce-variation-price .price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--teal-900);
}

/* The PayPal band is a flex row; keep its copy as a single item so it does not
   break into columns. */
.pdp-paypal > span { flex: 1; }
.pdp-paypal svg { flex-shrink: 0; }

/* --- Price range shouldn't wrap mid-value --- */
.pdp-price { text-wrap: balance; }
.pdp-price .woocommerce-Price-amount { white-space: nowrap; }
.pdp-price del { color: var(--ink-faint); font-size: .7em; }
.pdp-price ins { text-decoration: none; color: var(--comp-high); }

/* --- Tabs ---
   Mapped onto the source's .tab-nav: a flat row of text tabs on a 2px baseline,
   active marked by a 3px clay underline. WooCommerce's defaults draw rounded,
   bordered "folder" tabs with ::before/::after corner flourishes, all at
   `.woocommerce div.product .woocommerce-tabs ul.tabs li` specificity — so the
   overrides have to match that selector depth. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce-tabs {
  margin-top: 70px;
  clear: both;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  border-bottom: 2px solid var(--line);
  overflow: visible;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  display: none;
  content: none;
  border: 0;
}

/* li.active carries its own white background and border in WooCommerce's CSS at
   a higher specificity than plain li, so both states are reset here. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  margin: 0;
  padding: 0;
  background: transparent;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  display: none;
  content: none;
  border: 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-faint);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  text-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--teal-900);
  border-bottom-color: var(--clay);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { font-weight: 700; }

.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel {
  margin-bottom: 0;
  padding-bottom: 8px;
}
.woocommerce-tabs .panel p { margin-bottom: 14px; }

/* --- Reviews --- */
.woocommerce .star-rating span::before,
.woocommerce-product-rating .star-rating::before,
.woocommerce .star-rating::before { color: var(--gold); }
#reviews .commentlist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 18px;
}
/* The list is a grid, and grid items default to min-width:auto - so each review
   refused to shrink below its content's natural width and overflowed its column
   on a phone, clipping the text mid-sentence. min-width:0 lets them shrink and
   wrap; overflow-wrap catches any long word or pasted URL in a review body. */
#reviews .commentlist > li {
  min-width: 0;
}
#reviews .comment-text,
#reviews .comment-text p,
#reviews .description p {
  overflow-wrap: anywhere;
}
#reviews .comment_container {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: block;
}
/* WooCommerce ships `.woocommerce #reviews #comments ol.commentlist li .comment-text`
   at two ids and three classes, which indents the text 50px to clear the avatar AND
   draws a second border around it - a box inside a box. The theme's own
   `#reviews .comment-text` never stood a chance, so these match that depth.
   The avatar goes entirely: these are imported reviews with no accounts behind
   them, so every single one drew the same grey default silhouette. */
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  display: none;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0;
  border: 0;
  padding: 0;
}
#reviews .woocommerce-review__author { font-weight: 600; font-size: 14.5px; }
#reviews .woocommerce-review__published-date { font-size: 12.5px; color: var(--ink-faint); }

/* --- Related products --- */
.related > h2, .up-sells > h2 {
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 26px;
}
.related, .up-sells {
  margin-top: 0;
  padding: 80px 0 0;
  clear: both;
}

/* The gallery is sticky and its containing block is the full grid row, so it can
   travel to the bottom of .pdp-layout. Give the row a floor so the card never
   ends up flush against the tabs below. */
.pdp-layout { padding-bottom: 24px; }

/* ---------------------------------------------------------------------------
   Sub-category chips as a single-line carousel.

   The source's .sub-cats wraps onto multiple rows; with a full category tree
   that becomes three rows deep. Kept to one line with native horizontal
   scrolling, edge fades, and arrows that only appear when there is more to see.
   --------------------------------------------------------------------------- */
/* Grid items default to min-width:auto, so the main column would stretch to fit
   the chip row rather than letting it scroll. Allowing the columns to shrink is
   what makes the horizontal overflow possible at all. */
.plp-layout > * { min-width: 0; }

.sub-cats-wrap {
  position: relative;
  margin-bottom: 28px;
  max-width: 100%;
  min-width: 0;
}

.sub-cats-wrap .sub-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  margin-bottom: 0;
  padding: 2px 0;
  /* Hide the scrollbar; the arrows and fades communicate overflow instead. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.sub-cats-wrap .sub-cats::-webkit-scrollbar { display: none; }

.sub-cats-wrap .sub-cats a {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

/* Edge fades. Colour matches the page background so chips dissolve into it. */
.sub-cats-wrap::before,
.sub-cats-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 2;
}
.sub-cats-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--stone) 20%, rgba(241,243,238,0));
}
.sub-cats-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--stone) 20%, rgba(241,243,238,0));
}
.sub-cats-wrap.can-left::before,
.sub-cats-wrap.can-right::after { opacity: 1; }

/* Arrows.
   Scoped to .sub-cats-wrap so these beat the Elementor kit's generic
   `.elementor-kit-N button` padding, which would otherwise inflate them. */
.sub-cats-wrap .sub-cats-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--teal-900);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, border-color .15s ease, background .15s ease;
  box-shadow: 0 2px 8px -2px rgba(13,59,53,.18);
  padding: 0;
}
.sub-cats-wrap .sub-cats-nav svg { width: 16px; height: 16px; }
.sub-cats-wrap .sub-cats-nav.prev { left: 0; }
.sub-cats-wrap .sub-cats-nav.next { right: 0; }
.sub-cats-wrap .sub-cats-nav:hover {
  border-color: var(--teal-700);
  background: var(--teal-100);
}
.sub-cats-wrap.can-left .sub-cats-nav.prev,
.sub-cats-wrap.can-right .sub-cats-nav.next {
  opacity: 1;
  pointer-events: auto;
}

/* NB: do not add a `:not(.can-left):not(.can-right) { overflow-x: visible }`
   rule here. The state classes are applied by JS after first paint, so such a
   rule matches initially and lets the nowrap row expand to its full width for
   one frame — a very visible flash on every page load. `overflow-x: auto` is
   already a no-op when the content fits. */

@media (prefers-reduced-motion: reduce) {
  .sub-cats-wrap .sub-cats { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   `.blog` collides with a WordPress body class.

   WordPress puts a `blog` class on <body> for the posts index, and the source
   defines `.blog { padding: 70px 0 }` for its <section class="blog">. On /blog/
   that rule therefore pads the whole document, producing a gap above the header.
   Scoped off the body; sections keep their padding.
   --------------------------------------------------------------------------- */
body.blog {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Topbar links.

   Elementor's kit sets a global link colour (Teal 700), which is close to
   unreadable on the Teal 900 topbar. Match the plain topbar text instead.
   Specificity here clears `.elementor-kit-N a`.
   --------------------------------------------------------------------------- */
.topbar .topbar-left a,
.topbar .topbar-right a,
.topbar a {
  color: #EAF2EF;
}
.topbar .topbar-left a:hover,
.topbar .topbar-right a:hover,
.topbar a:hover {
  color: #fff;
  opacity: 1;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   .blog-grid collision between two source files.

   index.html defines it full width; blog-article.html narrows it to 1040px and
   centres it, to match the article's reading measure. Both blocks live in
   pebble-pages.css, so the article version was winning everywhere — including
   the homepage and blog index, where the grid sat inset from its own heading.

   Default restored to full width; the narrow measure is scoped to the related
   posts block on an article, which is the only place it was intended.
   --------------------------------------------------------------------------- */
.blog-grid {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.blog-related .blog-grid,
.blog-related .section-head {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Native Elementor layout helpers.

   The homepage is built from Elementor containers rather than the source's own
   grid rules, so equal-width children are set here instead of via .cat-grid /
   .reviews-grid, which assumed a CSS grid parent.
   --------------------------------------------------------------------------- */
/* Boxed Elementor containers wrap their children in .e-con-inner, full-width
   ones do not — so both levels are targeted. */
.cat-grid-row > .elementor-element,
.cat-grid-row > .e-con-inner > .elementor-element,
.reviews-grid-row > .elementor-element,
.reviews-grid-row > .e-con-inner > .elementor-element,
.infoband-grid > .e-con,
.infoband-grid > .e-con-inner > .e-con {
  flex: 1 1 0;
  min-width: 0;
}

/* A boxed container's .e-con-inner shrink-wraps to its content when the row is
   flex; force it to fill the boxed width so the two info cards split it evenly
   rather than sitting at their natural width. */
.infoband-grid > .e-con-inner,
.cat-grid-row > .e-con-inner,
.reviews-grid-row > .e-con-inner {
  width: 100%;
}

/* .product-card is a flex column in the source; as a direct Elementor child it
   needs to fill its track. */
.cat-grid-row > .elementor-element > .elementor-widget-container > .cat-tile,
.reviews-grid-row > .elementor-element > .elementor-widget-container > .t-card {
  height: 100%;
}

/* NB: do not add a `grid-template-columns: unset` override for product grids
   inside Elementor widgets. `unset` computes to `none` (single column), and at
   that selector depth it outranks Elementor's own per-element column CSS.
   Elementor's `.elementor-element-X ul.products` rule is already more specific
   than `.plp-grid`, so the widget's column control wins unaided. */

/* ul.products carries a list style we do not want. */
ul.products.plp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.products.plp-grid > .product-card { margin: 0; }

/* Posts widget on the homepage, styled as the source's blog cards. */
.home-blog-posts .elementor-posts-container { gap: 24px; }
.home-blog-posts .elementor-post {
  background: none;
  border: 0;
  padding: 0;
}
.home-blog-posts .elementor-post__thumbnail {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}
.home-blog-posts .elementor-post__title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.35;
  margin: 8px 0;
}
.home-blog-posts .elementor-post__title a { color: var(--teal-900); }
.home-blog-posts .elementor-post__title a:hover { color: var(--teal-700); }
.home-blog-posts .elementor-post__excerpt p {
  font-size: 14.5px;
  color: var(--ink-soft);
}
.home-blog-posts .elementor-post-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--clay-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---------------------------------------------------------------------------
   Native Elementor header / footer.

   The source CSS assumed `.site-header .wrap` etc.; these templates are built
   from Elementor containers instead, so equal-width children and the pieces
   that depended on the old DOM are re-expressed here.
   --------------------------------------------------------------------------- */

/* Trust strip: four equal columns. */
.trust-row > .elementor-element { flex: 1 1 0; min-width: 0; }
.trust-row .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 16px; text-align: left; }
.trust-row .elementor-icon-box-icon { margin: 0; flex-shrink: 0; }
.trust-row .elementor-icon-box-title { margin: 0 0 2px; }
.trust-row .elementor-icon-box-description { margin: 0; }

/* Footer: brand column fixed, link columns share the rest. */
.footer-grid-row > .elementor-element { flex: 1 1 0; min-width: 0; }
.footer-grid-row > .footer-brand { flex: 0 0 28%; }
.footer-col .elementor-nav-menu--main .elementor-item { padding-left: 0; padding-right: 0; }
.footer-col .elementor-nav-menu li { margin-bottom: 4px; }
.site-footer .elementor-heading-title { color: #fff; }
.site-footer .elementor-widget-text-editor { color: #A9C4BC; font-size: 14.5px; line-height: 1.7; }
.site-footer .footer-bottom .elementor-widget-text-editor,
.site-footer .footer-bottom span { font-family: var(--font-mono); font-size: 13px; color: #81A49A; }

/* Social icons: outlined circles, per the source. */
.footer-social .elementor-social-icon {
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
}
.footer-social .elementor-social-icon:hover { background: rgba(255,255,255,.12); }

/* Topbar text widgets sit inline. Elementor text widgets take the kit's body
   colour, which is near-black on the teal bar — restore the topbar colour. */
.topbar .elementor-widget-text-editor,
.topbar .elementor-widget-text-editor p,
.topbar .elementor-widget-text-editor span { color: #EAF2EF; }
.topbar .elementor-widget-text-editor p { margin: 0; }
.topbar .topbar-right,
.topbar .topbar-right p { font-family: var(--font-mono); font-size: 12.5px; }
.topbar .topbar-left, .topbar .topbar-left p { font-size: 13.5px; }

/* Header nav: the source's own .main-nav rules no longer apply, so the
   Elementor nav menu carries the styling via its own controls. Dropdown gets
   the card treatment here. */
.pebble-nav .elementor-nav-menu--dropdown {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  min-width: 240px;
}
.pebble-nav .elementor-nav-menu--main > li > a.elementor-item { font-family: var(--font-body); }
.header-icons-widget { margin-left: auto; }

/* Sale menu item keeps its clay treatment. */
.pebble-nav .menu-item.has-sale > a.elementor-item { color: var(--clay-dark) !important; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Native archive / product / post templates.
   --------------------------------------------------------------------------- */

/* Filter sidebar holds its 264px; Elementor's flex_shrink control does not
   reliably emit, so pin it here. */
.plp-layout-row > .filters-col { flex: 0 0 264px; }
.plp-layout-row > .plp-main { flex: 1 1 0; min-width: 0; }
.filters-col .filters { position: sticky; top: 104px; }

/* PDP columns: neutralise WooCommerce's own 48% float widths inside the
   Elementor containers. */
.pdp-layout-row > .gallery,
.pdp-layout-row > .pdp-info { min-width: 0; }
.pdp-layout-row .woocommerce-product-gallery,
.pdp-layout-row .summary,
.pdp-layout-row .entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.pdp-info .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* Article body: Elementor's post-content widget wraps paragraphs. */
.article-body .elementor-widget-theme-post-content > .elementor-widget-container > * { max-width: none; }
.article-cover-wrap img { border-radius: var(--radius-lg); width: 100%; }
.article-cta .elementor-heading-title { color: #fff; }
.article-cta .elementor-widget-text-editor { color: #BFE0D7; }
.article-cta .phone { display: block; margin-top: 10px; color: #fff; font-size: 15px; }

/* ---------------------------------------------------------------------------
   Content pages (About, FAQs, Delivery, Terms and the rest).
   --------------------------------------------------------------------------- */
.page-body .elementor-widget-heading .elementor-heading-title {
  font-size: 26px;
  color: var(--teal-900);
  margin-top: 14px;
}
.page-body .elementor-widget-text-editor {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.page-body .elementor-widget-text-editor p { margin-bottom: 16px; }
.page-body .elementor-widget-text-editor a { color: var(--teal-700); text-decoration: underline; }
.page-body .elementor-widget-text-editor a:hover { color: var(--clay-dark); }
.page-body .lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.6;
}
.page-body ol, .page-body ul { margin: 0 0 16px 20px; }
.page-body li { margin-bottom: 10px; }

/* Tables on content pages match the size-guide treatment. */
.page-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 8px 0 20px;
}
.page-body th, .page-body td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
}
.page-body th {
  background: var(--stone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal-900);
  font-weight: 600;
}
.page-body tbody tr:nth-child(even) { background: var(--stone); }

/* FAQ accordion */
.page-body .elementor-accordion .elementor-accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--paper);
}
.page-body .elementor-accordion .elementor-tab-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--teal-900);
  padding: 18px 22px;
}
.page-body .elementor-accordion .elementor-tab-content {
  border-top: 1px solid var(--line);
  padding: 18px 22px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* Contact Form 7 */
.wpcf7 .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wpcf7 .field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  background: #fff;
  margin-top: 6px;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
  border-color: var(--teal-700);
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,99,88,.1);
}
.wpcf7 input[type="submit"] {
  background: var(--teal-900);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--teal-700); }
@media (max-width: 620px) { .wpcf7 .field-row { grid-template-columns: 1fr; } }

/* The fixed search overlay and mini basket size themselves to the scroll width,
   which on narrow screens feeds back into a small horizontal overflow. `clip`
   rather than `hidden` prevents the scroll without creating a scroll container,
   so the sticky header keeps working. */
html, body { overflow-x: clip; }
.search-overlay, .mb-panel { max-width: 100vw; }

/* ---------------------------------------------------------------------------
   Responsive behaviour for the Elementor-native rows.

   The source media queries target its own grid classes (.cat-grid, .trust-strip
   .wrap and so on). These rows are Elementor flex containers with different
   class names, so they need their own breakpoints or they stay N-across on a
   phone.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pdp-layout-row { flex-wrap: wrap; }
  .pdp-layout-row > .gallery,
  .pdp-layout-row > .pdp-info { flex: 1 1 100%; width: 100% !important; }
  .plp-layout-row { flex-wrap: wrap; }
  .plp-layout-row > .filters-col { flex: 1 1 100%; }
  .filters-col .filters { position: static; }
}

@media (max-width: 980px) {
  .cat-grid-row,
  .reviews-grid-row,
  .trust-row,
  .footer-grid-row,
  .infoband-grid { flex-wrap: wrap; }
  .cat-grid-row > .elementor-element,
  .trust-row > .elementor-element { flex: 1 1 45%; }
  .reviews-grid-row > .elementor-element { flex: 1 1 100%; }
  .footer-grid-row > .elementor-element { flex: 1 1 45%; }
  .footer-grid-row > .footer-brand { flex: 1 1 100%; }
  .infoband-grid { grid-template-columns: 1fr; }
}

/* Header must stay a single row on mobile: logo left, burger and icons right.
   Elementor wraps container children at mobile breakpoints by default, which
   otherwise stacks all three onto separate rows. */
@media (max-width: 1024px) {
  .site-header > .e-con,
  .site-header .e-con-inner {
    flex-wrap: nowrap !important;
    align-items: center;
    min-height: 66px !important;
    gap: 12px;
  }
  .site-header > .e-con,
  .site-header .e-con-inner { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .site-header .elementor-widget-image { flex: 0 0 auto; }
  .site-header .elementor-widget-image img { width: 118px !important; }
  /* Icons sit before the burger, both pushed right. */
  .site-header .header-icons-widget { flex: 0 0 auto; order: 2; margin-left: auto; }
  .site-header .elementor-widget-nav-menu { flex: 0 0 auto; order: 3; margin-left: 0; }
  .site-header .header-icons { gap: 14px; }
  .site-header .elementor-menu-toggle { margin: 0; }
  .topbar .e-con-inner,
  .topbar > .e-con { flex-wrap: wrap; row-gap: 4px; }
  .topbar .elementor-widget-text-editor { font-size: 12px; }
}

@media (max-width: 620px) {
  .cat-grid-row > .elementor-element,
  .trust-row > .elementor-element,
  .footer-grid-row > .elementor-element { flex: 1 1 100%; }
  .hero .e-con-inner,
  .hero > .e-con { flex-wrap: wrap; }
  .hero .e-con > .e-con { flex: 1 1 100%; width: 100% !important; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Centred content column.

   These containers are full-width with a fixed 1280px width so their flex
   children stay direct (a boxed container inserts .e-con-inner, which broke the
   info-band row). Full-width containers are not auto-centred, so without this
   every template renders hard against the left edge.
   --------------------------------------------------------------------------- */
.pebble-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100%;
}

/* The source's .section-head is a flex row with space-between, intended for a
   text block plus a button. Where it holds only a heading and a paragraph, that
   pushes them to opposite ends — keep those stacked. */
.reviews .section-head,
.blog-related .section-head {
  display: block;
}

/* Product price.
   Two third-party rules outrank a plain class here: WooCommerce core sets an
   olive colour via `.woocommerce div.product p.price`, and Elementor's generated
   post CSS sets the display font via
   `.woocommerce .elementor-widget-woocommerce-product-price .price`. Overriding
   both by specificity alone is brittle, so this is a justified !important. */
.elementor-widget-woocommerce-product-price .price,
.elementor-widget-woocommerce-product-price .price .amount,
.elementor-widget-woocommerce-product-price .price bdi {
  font-family: var(--font-mono) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  color: var(--teal-900) !important;
}
.elementor-widget-woocommerce-product-price .price del,
.elementor-widget-woocommerce-product-price .price del bdi {
  color: var(--ink-faint);
  font-size: .7em;
}
.elementor-widget-woocommerce-product-price .price ins,
.elementor-widget-woocommerce-product-price .price ins bdi {
  text-decoration: none;
  color: var(--comp-high);
}

/* --- Empty archive state --- */
.plp-empty {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  color: var(--ink-soft);
}
.plp-empty a { color: var(--teal-700); font-weight: 600; }

/* --- Woo notices --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--teal-700);
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--teal-700); }

/* The parent lays its header out as a flex row; ours uses .wrap internally. */
.site-header {
  display: block;
}

/* Elementor wraps shortcode output in a div that would otherwise break the
   sticky header's containing block. */
.elementor-location-header .elementor-shortcode { display: contents; }

/* Elementor's default widget spacing would gap the topbar off the header. */
.elementor-location-header .elementor-widget:not(:last-child) { margin-block-end: 0; }
.elementor-location-footer .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* The source design put a 90px gap between the trust strip and the footer
   body. Shaun asked for them flush, so the source rule is neutralised here and
   the spacing is left to the footer container's own padding in Elementor. */
.site-footer {
  margin-top: 0;
}

/* Overflow counter on a swatch row, e.g. "+4" when a product has more colours
   than the card has space for. Sized to match .swatch. */
.swatch-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--stone-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
}

/* --- Size Guide tab --- */
.size-guide-img {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  margin-bottom: 24px;
}
.size-guide-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.size-guide-table th,
.size-guide-table td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
}
.size-guide-table th {
  background: var(--stone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal-900);
  font-weight: 600;
}
.size-guide-table tbody tr:nth-child(even) { background: var(--stone); }
.size-guide-table td { color: var(--ink-soft); }

.measure-steps {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.measure-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.measure-step-n {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-900);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.measure-step-body h4 {
  font-size: 16px;
  margin-bottom: 4px;
}
.measure-step-body p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.desc-note {
  margin-top: 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--clay);
  background: var(--stone);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}


/* ==========================================================================
   October round of fixes
   ========================================================================== */

/* --- Compression chip: stack the reading above its label -----------------
   The chip was one flex row (bars | mmHg | word), so on a narrow product card
   the figure wrapped mid-value ("15-20" above "mmHg"). The reading and the
   word now sit in their own column with the figure held on a single line. */
.compression-chip {
  align-items: center;
}
.compression-chip .chip-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.compression-chip .chip-text b {
  white-space: nowrap;
  line-height: 1;
  font-size: 13px;
}
.compression-chip .chip-text .lvl-word {
  line-height: 1;
}

/* --- Product card hover: blurred scrim behind the CTA ---------------------
   The quick-add / view-product button is absolutely positioned over the foot
   of the card, where it landed on top of the price and rating. A scrim now
   sits between the two so the button reads as deliberate. Pseudo-element
   rather than an extra node, so the card markup is untouched.
   Gated on (hover: hover): on touch there is no un-hover, so the scrim would
   stick on after a tap. */
@media (hover: hover) {
  .product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .product-card:hover::after {
    opacity: 1;
  }
  .product-card .quickadd {
    z-index: 3;
  }
  .product-card .badge {
    z-index: 4;
  }
}

/* --- Footer menus: always a plain list ------------------------------------
   Belt and braces alongside the widgets' own dropdown:none setting, so the
   toggle can never reappear if a menu is re-saved in the editor. */
.pebble-footer-menu .elementor-menu-toggle {
  display: none !important;
}
.pebble-footer-menu .elementor-nav-menu--main {
  display: block !important;
}
.pebble-footer-menu .elementor-nav-menu--dropdown {
  display: none !important;
}

/* --- "New to compression hosiery?" band: stack on small screens -----------
   .ntc-inner is a two-column grid (copy | levels) with no breakpoint of its
   own, so below ~900px the copy column was squeezed to roughly one word per
   line and the level cards overlapped it. */
@media (max-width: 900px) {
  .ntc-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 34px 26px;
  }
  .ntc-levels {
    width: 100%;
  }
  .ntc-level {
    min-width: 0;
  }
  .ntc p {
    max-width: none;
  }
}

/* --- Product tabs: two per row on small screens ---------------------------
   Four tabs across a phone gave two-line labels and a cramped row. A 2-up
   grid replaces the flex row; the baseline moves from the <ul> onto each
   link so both rows keep an underline. */
@media (max-width: 620px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 0;
    margin-bottom: 26px;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 12px 10px;
    font-size: 14px;
    text-align: center;
    border-bottom: 2px solid var(--line);
    margin-bottom: 0;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
  .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    border-bottom-color: var(--clay);
    border-bottom-width: 3px;
  }
}

/* --- Mobile header: keep the burger inside the viewport -------------------
   The toggle sat at x=354..387 in a 375px viewport, so overflow-x:clip cut
   roughly a third of the icon off. */
@media (max-width: 767px) {
  .dynamic-header .elementor-menu-toggle {
    margin-right: 4px;
  }
}


/* --- Currency switcher (header) ------------------------------------------
   Sits in the icon row beside search / account / bag. The button shows the
   active symbol and code; the dropdown is a plain list, opened by JS which
   toggles [hidden] so it stays closed and accessible without JS. */
.pebble-currency {
  position: relative;
  display: inline-flex;
}
.pebble-currency .currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.pebble-currency .currency-toggle:hover,
.pebble-currency .currency-toggle[aria-expanded="true"] {
  background: var(--teal-100);
  color: var(--teal-900);
}
.pebble-currency .currency-symbol {
  font-size: 15px;
}
.pebble-currency .currency-code {
  letter-spacing: 0.02em;
}

.pebble-currency .currency-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 148px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(13, 59, 53, 0.14);
}
.pebble-currency .currency-menu[hidden] {
  display: none;
}
.pebble-currency .currency-menu li {
  margin: 0;
  list-style: none;
}
.pebble-currency .currency-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.pebble-currency .currency-option:hover {
  background: var(--teal-100);
  color: var(--teal-900);
}
.pebble-currency .currency-option.is-current {
  background: var(--teal-900);
  color: #fff;
  font-weight: 600;
}
.pebble-currency .currency-option-symbol {
  opacity: 0.7;
}
.pebble-currency .currency-option.is-current .currency-option-symbol {
  opacity: 0.85;
}

/* The converted figure is indicative; checkout is taken in GBP. */
.pebble-currency-note {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

@media (max-width: 767px) {
  .pebble-currency .currency-code {
    display: none;
  }
  .pebble-currency .currency-toggle {
    padding: 6px 4px;
  }
}


/* --- Mini basket -----------------------------------------------------------
   The panel is now rendered server side from the real cart, so these rules
   extend the source design's .mb-* classes to cover the empty and loading
   states and the new three-column item row. */
.mb-dim.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.mb-open {
  overflow: hidden;
}
.mb-panel.is-busy {
  opacity: 0.55;
  pointer-events: none;
}
.mb-loading,
.mb-empty {
  padding: 44px 24px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 15px;
}
.mb-empty p {
  margin: 0 0 18px;
}
.mb-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: start;
}
.mb-item img,
.mb-item-ph {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--stone);
  display: block;
}
.mb-item-main {
  min-width: 0;
}
.mb-item-name {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--teal-900);
  text-decoration: none;
  margin-bottom: 4px;
}
.mb-item-name:hover {
  text-decoration: underline;
}
.mb-item-meta,
.mb-item-meta p {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0 0 6px;
  line-height: 1.5;
}
.mb-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.mb-free-ship.is-met {
  color: var(--teal-900);
  font-weight: 600;
}
.mb-count {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 14px;
}

/* Elementor's global kit styles every <button> as a teal pill at
   `.elementor-kit-8 button` (0-2-1), which outranks the source's `.mb-close`
   and `.mb-remove` (0-1-0). These restore them to plain icon buttons. */
.mb-panel .mb-close,
.mb-panel .mb-remove {
  background: none;
  background-color: transparent;
  color: var(--ink-faint);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 4px;
  width: auto;
  height: auto;
  min-width: 0;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.mb-panel .mb-close:hover,
.mb-panel .mb-remove:hover {
  background: var(--stone);
  color: var(--teal-900);
}
.mb-panel .mb-remove {
  font-size: 18px;
}
.mb-panel .mb-remove:hover {
  color: #A82020;
}

/* The quantity stepper inside the panel gets the same treatment. */
.mb-panel .mb-qty button {
  background: none;
  background-color: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  min-width: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mb-panel .mb-qty button:hover {
  background: var(--teal-100);
  border-color: var(--teal-300);
  color: var(--teal-900);
}
.mb-panel .mb-qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mb-panel .mb-qty-value {
  min-width: 18px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Search overlay close button, same cause. */
.search-overlay .s-close {
  background: none;
  background-color: transparent;
  color: var(--ink-faint);
  border: 0;
  padding: 6px;
  width: auto;
  height: auto;
  min-width: 0;
  cursor: pointer;
}
.search-overlay .s-close:hover {
  color: var(--teal-900);
}
.search-overlay .s-tag {
  display: inline-block;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  width: auto;
  height: auto;
  min-width: 0;
  cursor: pointer;
}
.search-overlay .s-tag:hover {
  background: var(--teal-100);
  border-color: var(--teal-300);
  color: var(--teal-900);
}


/* The hero's phone and reviews lines are custom HTML (they carry inline SVG
   icons a native widget cannot). `.hero-phone a` already gets the emphasised
   treatment; the reviews figure is not a link, so <b> is matched to it. */
.hero-phone b {
  font-weight: 700;
  color: var(--teal-900);
  font-size: 16px;
}


/* --- Cart / checkout totals: keep the row labels ---------------------------
   WooCommerce's small-screen stylesheet and Elementor's cart widget both hide
   `tbody th` on responsive shop tables, assuming the label is repeated in a
   td::before. The totals tables carry no such fallback, so every row rendered
   as a bare figure — "£6.69" with nothing saying it is VAT. These put
   Subtotal / Shipment / VAT / Total back at all widths. */
.woocommerce .cart_totals table.shop_table_responsive tbody th,
.woocommerce-page .cart_totals table.shop_table_responsive tbody th,
.elementor-widget-woocommerce-cart .woocommerce .cart_totals table.shop_table_responsive tbody th,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout-review-order-table tbody th,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout-review-order-table tfoot th,
.woocommerce table.woocommerce-checkout-review-order-table tbody th,
.woocommerce table.woocommerce-checkout-review-order-table tfoot th {
  display: table-cell;
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-right: 18px;
}
.woocommerce .cart_totals .order-total th,
.woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total th {
  color: var(--teal-900);
}

/* The overseas duties notice and its confirmation box. */
.pebble-duties-notice {
  background: var(--stone);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pebble-duties-notice strong {
  color: var(--teal-900);
}
.pebble-duties-check {
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
}
.pebble-duties-check label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.pebble-duties-check input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  flex: 0 0 auto;
}


/* Swatches backed by a real fabric photo rather than a flat hex value. */
.swatch.has-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(13, 59, 53, 0.18);
}


/* Visually hidden labels (share buttons etc). */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.share a{flex:0 0 auto;transition:background .2s ease,color .2s ease;}
.share a svg{display:block;}


/* ---------------------------------------------------------------
   Accessibility fixes (WCAG 2.1 AA) - 6 Oct 2026
   --------------------------------------------------------------- */
/* Woo's default label grey is 4.4:1 on white - just under AA. */
.woocommerce form .form-row label,
.woocommerce-form__label-for-checkbox span,
.woocommerce-shipping-fields label span { color: var(--ink-soft); }

/* Links inside body copy must not rely on colour alone (WCAG 1.4.1). */
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-checkbox-text a,
.pebble-duties-notice a { text-decoration: underline; text-underline-offset: 2px; }

/* Keep a visible focus ring for keyboard users on our custom controls. */
.icon-btn:focus-visible,
.quickadd:focus-visible,
.share a:focus-visible,
.skip-link:focus { outline: 3px solid var(--teal-500); outline-offset: 2px; border-radius: 4px; }

/* Elementor's checkout widget defaults checkbox labels to #69727d (4.4:1). */
.elementor-widget-woocommerce-checkout-page { --sections-checkboxes-color: #4D5950; }

/* Breadcrumb links need a cue other than colour (WCAG 1.4.1). */
.crumb a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.crumb a:hover { text-decoration-thickness: 2px; }

/* Links inside article copy need a cue other than colour (WCAG 1.4.1). */
.article-body a:not(.btn):not(.button),
.entry-content a:not(.btn):not(.button) { text-decoration: underline; text-underline-offset: 2px; }

/* Clay on the clay tint is only 3.9:1 - darken the emphasised amount. */
.pdp-paypal b { color: #9A4E2C; }


/* --- Cart / checkout totals: layout ---------------------------------------
   Totals: one label per row. WooCommerce's responsive stylesheet repeats each
   row label in `td::before` for narrow screens. We put the real <th> back
   above, so that pseudo-element is now a duplicate - every row printed its
   label twice. */
.woocommerce .cart_totals table.shop_table_responsive tbody td::before,
.woocommerce-page .cart_totals table.shop_table_responsive tbody td::before,
.elementor-widget-woocommerce-cart .cart_totals table.shop_table_responsive tbody td::before,
.woocommerce table.woocommerce-checkout-review-order-table tbody td::before,
.woocommerce table.woocommerce-checkout-review-order-table tfoot td::before,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout-review-order-table tbody td::before,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout-review-order-table tfoot td::before {
  content: none !important;
}

/* The shipping row holds a list of postage options rather than a single
   figure, and the table's value column squeezed it into half the panel.
   Making the row a block is not enough - a block-level <tr> is still sized by
   the table's column widths - so the totals are taken out of table layout and
   rebuilt with flex: label and figure on one line for Subtotal and Total,
   stacked full width for Shipment.

   Scope matters. On the cart the totals table contains nothing else, so the
   whole table converts. On checkout the same table also lists the products in
   <tbody>, and converting that collapses the product column - so only <tfoot>
   converts there. */
/* Scope matters. Converting only <tfoot> does not work: a block-level tfoot
   inside a table is still sized by the table's columns. So the whole table
   converts, and the product rows are given their own flex layout. */
.cart_totals table.shop_table,
.cart_totals table.shop_table > tbody,
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table > thead,
.woocommerce-checkout-review-order-table > tbody,
.woocommerce-checkout-review-order-table > tfoot {
  display: block;
  width: 100%;
}
.cart_totals table.shop_table > tbody > tr,
.woocommerce-checkout-review-order-table > thead > tr,
.woocommerce-checkout-review-order-table > tbody > tr,
.woocommerce-checkout-review-order-table > tfoot > tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.cart_totals table.shop_table > tbody > tr > th,
.cart_totals table.shop_table > tbody > tr > td,
.woocommerce-checkout-review-order-table > thead > tr > th,
.woocommerce-checkout-review-order-table > tbody > tr > th,
.woocommerce-checkout-review-order-table > tbody > tr > td,
.woocommerce-checkout-review-order-table > tfoot > tr > th,
.woocommerce-checkout-review-order-table > tfoot > tr > td {
  display: block;
  width: auto;
  /* Woo's responsive shop-table CSS caps these cells with an !important
     max-width meant for phones; it survives the flex rebuild above. */
  max-width: none !important;
  padding-right: 0;
}
/* Product line: name takes the slack, money sits hard right. */
.woocommerce-checkout-review-order-table .product-name {
  flex: 1 1 auto;
}
.woocommerce-checkout-review-order-table .product-total {
  flex: 0 0 auto;
  text-align: right;
}

/* Product line reads as one compact row: name left, price right, one rule
   under the pair. It used to wrap the price onto its own line, and each cell
   carried its own bottom border from the checkout widget, so a single item
   spread over two bordered rows. */
.woocommerce-checkout-review-order-table > tbody > tr.cart_item {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  /* Right inset matches the 12px the totals cells keep, so every figure
     lines up in one column. */
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout-review-order-table > tbody > tr.cart_item > td {
  padding: 0 !important;
  border: 0 !important;
}
.woocommerce-checkout-review-order-table > tbody > tr.cart_item > td.product-name {
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.45;
}
.woocommerce-checkout-review-order-table > tbody > tr.cart_item > td.product-total {
  white-space: nowrap;
  font-weight: 600;
}

/* --- Checkout payment methods: card logos inline after the name ----------
   Each gateway label held a full-size logo image that dropped onto its own
   line under the name. Radio, name and a small logo now share one line; the
   card form still opens full width beneath. */
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input.input-radio {
  flex: 0 0 auto;
  margin: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label img {
  display: inline-block !important;
  float: none !important;
  height: 22px !important;
  max-height: 22px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}
.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > .payment_box {
  flex: 0 0 100%;
}
/* Shipment stacks instead. */
.cart_totals table.shop_table > tbody > tr.woocommerce-shipping-totals,
.woocommerce-checkout-review-order-table > tfoot > tr.woocommerce-shipping-totals {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.cart_totals table.shop_table > tbody > tr.woocommerce-shipping-totals > td,
.woocommerce-checkout-review-order-table > tfoot > tr.woocommerce-shipping-totals > td {
  width: 100%;
}
.cart_totals table.shop_table > tbody > tr.woocommerce-shipping-totals > th,
.woocommerce-checkout-review-order-table > tfoot > tr.woocommerce-shipping-totals > th {
  padding-bottom: 4px;
}

/* The method list itself - one option per full-width line. */
.cart_totals ul#shipping_method,
.woocommerce-checkout-review-order-table ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.cart_totals ul#shipping_method li,
.woocommerce-checkout-review-order-table ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.cart_totals ul#shipping_method li:last-child,
.woocommerce-checkout-review-order-table ul#shipping_method li:last-child {
  border-bottom: 0;
}
.cart_totals ul#shipping_method li input,
.woocommerce-checkout-review-order-table ul#shipping_method li input {
  flex: 0 0 auto;
  margin: 3px 0 0;
}
.cart_totals ul#shipping_method li label,
.woocommerce-checkout-review-order-table ul#shipping_method li label {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  cursor: pointer;
}

/* "Shipping to CAM." and the change-address toggle. */
.cart_totals .woocommerce-shipping-destination,
.cart_totals .shipping-calculator-button {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
}


/* --- Product card on mobile ----------------------------------------------
   Narrow cards have no room for the mmHg figure and the level word stacked on
   top of each other, so the chip drops to the word alone ("Low" / "Medium" /
   "High"). The figure is still on the product page, and the coloured bars
   still carry the level, so nothing is lost at a glance.

   The card also gains a 10px inset: the photo sits inside the border with its
   own radius rather than running edge to edge, and .pc-body drops its own
   horizontal padding so the text lines up with the photo instead of being
   inset twice. 767px is Elementor's mobile breakpoint, matched here. */
@media (max-width: 767px) {

  .elementor-products-grid ul.products.elementor-grid li.product.product-card,
  .woocommerce ul.products li.product.product-card,
  ul.products li.product.product-card,
  .product-card {
    padding: 10px;
  }

  .product-card .pc-img {
    border-radius: 10px;
    overflow: hidden;
  }

  /* The card's own padding now does the insetting. */
  .product-card .pc-img img {
    padding: 0;
  }

  /* Brand sits closer under the photo. */
  .product-card .pc-body {
    padding: 10px 0 4px;
    gap: 7px;
  }

  .product-card .pc-name {
    font-size: 14px;
  }

  /* Word only - hide the mmHg reading and unstack the chip. */
  .product-card .compression-chip .chip-text {
    flex-direction: row;
    gap: 0;
  }
  .product-card .compression-chip .chip-text b {
    display: none;
  }
}


/* Elementor hides submenus with `.elementor-nav-menu ul{display:none}` and only
   reopens them from its hover JS, so keyboard users could not reach the dropdown
   items at all - Tab went straight from Ladies to Mens. That mattered little when
   the dropdowns held six links; it matters a lot now they hold thirteen, including
   Medical Compression Stockings. :focus-within opens the panel for keyboard users
   without touching the mouse behaviour. (0,3,2) to beat Elementor's (0,1,1). */
@media (min-width: 1025px) {
  .pebble-nav .elementor-nav-menu > li:focus-within > ul.sub-menu {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}

/* --- Nav dropdowns: never let a long list run off the screen ---------------
   Dropdowns now carry the full category list (13 under Ladies), which measures
   520px and clears a 650px-tall viewport by only 7px. Rather than rely on that,
   cap the panel to the space below the header and let it scroll, so every
   category stays reachable on a short laptop screen. Desktop only - the mobile
   burger menu is a separate accordion. */
@media (min-width: 1025px) {
  .pebble-nav .elementor-nav-menu .sub-menu {
    /* The panel was a fixed 240px, which clipped two of the new labels - the
       longest label now is "Lymphoedema Sleeves & Gauntlets" at 255px, and the
       items are white-space:nowrap so they were cut, not wrapped. */
    min-width: 288px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* --- Hero image -----------------------------------------------------------
   Replaces the featured-product grid on the right of the hero with a single
   lifestyle shot.

   The shape is done here rather than with Elementor's native image mask: those
   mask shapes are fixed-aspect SVGs (blob is 121x89, landscape), so on a
   portrait photo "cover" crops the blob until the shape stops reading and the
   model loses her head, and "contain" letterboxes her into a wide sliver. An
   organic border-radius follows whatever box it is given, so the whole figure
   survives and the edge still reads as a soft abstract shape.

   The photo is shot on near-white, and the hero is white, so the shape would
   be invisible on its own - the tinted blob behind it is what makes the edge
   read. It is deliberately offset and rotated so the two shapes do not line
   up exactly. */
.hero-figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(100%, 470px);
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--teal-100) 0%, var(--stone-deep) 100%);
  border-radius: 48% 52% 56% 44% / 56% 44% 56% 44%;
  transform: translate(22px, 26px) rotate(-6deg);
}

.hero-figure .hero-figure-img {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  margin-inline: auto;
}

.hero-figure .hero-figure-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 56% 44% 50% 50% / 46% 50% 50% 54%;
  box-shadow: 0 24px 60px -28px rgba(13, 59, 53, .45);
}

/* Elementor wraps the image in its own figure; let it inherit the sizing. */
.hero-figure .hero-figure-img figure,
.hero-figure .hero-figure-img .elementor-widget-container {
  margin: 0;
  line-height: 0;
}

@media (max-width: 1024px) {
  .hero-figure .hero-figure-img { width: min(100%, 360px); }
  .hero-figure::before { width: min(100%, 384px); transform: translate(16px, 18px) rotate(-6deg); }
}

/* The old product grid was hidden on phones. A single photo is not the same
   clutter, so it stays - just smaller, under the copy. */
@media (max-width: 767px) {
  .hero-figure { margin-top: 32px; }
  .hero-figure .hero-figure-img { width: min(78%, 300px); }
  .hero-figure::before { width: min(82%, 318px); transform: translate(12px, 14px) rotate(-6deg); }
}


/* --- "25 Years, 71 Countries" band ----------------------------------------
   Sits directly under the hero.

   The band is --teal-900 (#0D3B35), the same green as the Shop Ladies Hosiery
   button. It was briefly the terracotta of the hero's word "works" (#C2724B),
   which forced a compromise: white body copy on that is only 3.62:1 and fails
   AA. On this green it is 12.4:1, so the brand token can be used exactly as it
   is with no darkening.

   The flags are decorative - the heading already says "71 countries" - so the
   cluster is aria-hidden rather than making a screen reader list seventeen
   country names. SVGs are stored in the theme and referenced relatively from
   this stylesheet, so nothing breaks when the site moves to its live domain. */
.world-band {
  background-image: linear-gradient(155deg, #0D3B35 0%, #0A2F2A 100%);
  overflow: hidden;
}

.world-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
}

.world-copy h2 em {
  font-family: inherit;
  font-weight: inherit;
  font-style: italic;
}

.world-copy p:last-child {
  margin-bottom: 0;
}

.wf-gb { background-image: url(assets/flags/gb.svg); }
.wf-ie { background-image: url(assets/flags/ie.svg); }
.wf-fr { background-image: url(assets/flags/fr.svg); }
.wf-de { background-image: url(assets/flags/de.svg); }
.wf-nl { background-image: url(assets/flags/nl.svg); }
.wf-it { background-image: url(assets/flags/it.svg); }
.wf-ch { background-image: url(assets/flags/ch.svg); }
.wf-se { background-image: url(assets/flags/se.svg); }
.wf-dk { background-image: url(assets/flags/dk.svg); }
.wf-no { background-image: url(assets/flags/no.svg); }
.wf-us { background-image: url(assets/flags/us.svg); }
.wf-ca { background-image: url(assets/flags/ca.svg); }
.wf-au { background-image: url(assets/flags/au.svg); }
.wf-nz { background-image: url(assets/flags/nz.svg); }
.wf-jp { background-image: url(assets/flags/jp.svg); }
.wf-br { background-image: url(assets/flags/br.svg); }

/* ---- the globe and its ring of flags ----
   Seventeen badges sit on one circle. Each is placed by rotating it out from
   the centre, pushing it along the radius, then counter-rotating it by the same
   angle so the flag itself stays upright. Only the angle differs per badge, so
   the radius is a single custom property and the whole ring resizes with one
   value per breakpoint rather than seventeen rules.

   Deliberately not interactive: no hover, no transition. */
.world-globe {
  --r: 168px;
  position: relative;
  width: 430px;
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  color: rgba(255, 255, 255, .34);
}

.globe-wire {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 252px;
  height: 252px;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.world-globe .wflag {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 3px #0D3B35, 0 0 0 4px rgba(255, 255, 255, .5), 0 8px 18px -8px rgba(3, 26, 22, .55);
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}

.world-globe .wflag:nth-child(2)  { --a:   0deg; }
.world-globe .wflag:nth-child(3)  { --a:  21.176deg; }
.world-globe .wflag:nth-child(4)  { --a:  42.353deg; }
.world-globe .wflag:nth-child(5)  { --a:  63.529deg; }
.world-globe .wflag:nth-child(6)  { --a:  84.706deg; }
.world-globe .wflag:nth-child(7)  { --a: 105.882deg; }
.world-globe .wflag:nth-child(8)  { --a: 127.059deg; }
.world-globe .wflag:nth-child(9)  { --a: 148.235deg; }
.world-globe .wflag:nth-child(10) { --a: 169.412deg; }
.world-globe .wflag:nth-child(11) { --a: 190.588deg; }
.world-globe .wflag:nth-child(12) { --a: 211.765deg; }
.world-globe .wflag:nth-child(13) { --a: 232.941deg; }
.world-globe .wflag:nth-child(14) { --a: 254.118deg; }
.world-globe .wflag:nth-child(15) { --a: 275.294deg; }
.world-globe .wflag:nth-child(16) { --a: 296.471deg; }
.world-globe .wflag:nth-child(17) { --a: 317.647deg; }
.world-globe .wflag:nth-child(18) { --a: 338.824deg; }

.world-globe .wf-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #0D3B35;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
}

@media (max-width: 1024px) {
  .world-globe { --r: 132px; width: 340px; }
  .world-globe .wflag { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .globe-wire { width: 196px; height: 196px; }
  .world-globe .wf-more { font-size: 13px; }
}

@media (max-width: 767px) {
  .world-globe { --r: 116px; width: 300px; }
  .world-globe .wflag { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .globe-wire { width: 172px; height: 172px; }
  .world-globe .wf-more { font-size: 12px; }
}


/* --- "New to compression hosiery?" level cards ----------------------------
   The right column was `auto` in the grid, so it only ever took the width its
   content happened to need and the three cards read small next to the copy.
   An even split gives them half the panel.

   Everything here is scoped to .ntc-level on purpose: .compression-chip and
   .grad-bars are shared with the product cards and the product page, where
   they are deliberately smaller. Sizing them globally would blow those up. */
@media (min-width: 901px) {
  .ntc-inner {
    grid-template-columns: 1fr 1fr;
  }
}

.ntc-level {
  min-width: 0;
  gap: 18px;
  padding: 16px 22px;
}

.ntc-level-text b {
  font-size: 16.5px;
  margin-bottom: 3px;
}

.ntc-level-text span {
  font-size: 13.5px;
}

/* The coloured pill: bigger, and heavier so the reading carries. */
.ntc-level .compression-chip {
  font-size: 15px;
  font-weight: 600;
  gap: 11px;
  padding: 9px 16px 9px 13px;
}

.ntc-level .compression-chip b {
  font-weight: 700;
}

.ntc-level .compression-chip .lvl-word {
  font-size: 13.5px;
  font-weight: 600;
}

.ntc-level .grad-bars {
  height: 21px;
}

.ntc-level .grad-bars i {
  width: 5px;
  border-radius: 2.5px;
}

/* Phones: the pill and its text side by side left the text a sliver of the
   card, so it broke a word per line and ran past the card edge. Stack them:
   pill on top, heading and uses underneath at full card width. */
@media (max-width: 600px) {
  .ntc-level {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
  }
  .ntc-level-text {
    min-width: 0;
  }
}

/* --- "New to compression hosiery?" panel: spacing --------------------------
   The START HERE pill was removed, so the button comes up closer under the
   copy, and the three level cards get a little more air between them. */
.ntc p {
  margin-bottom: 14px;
}

.ntc-ctas {
  margin-top: 2px;
}

.ntc-levels {
  gap: 18px;
}


/* --- Login: "you need a new password" migration notice --------------------
   Shown above the login form and the checkout's returning-customer login.
   Deliberately informative rather than an error: nothing has gone wrong, and a
   red warning would read as a failure. Full width of the form, on the teal
   tint already used for quiet panels. */
.pebble-login-note {
  background: var(--teal-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 0 0 24px;
}

.pebble-login-note .pln-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--teal-900);
  margin: 0 0 8px;
}

.pebble-login-note p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 10px;
}

.pebble-login-note p:last-child {
  margin-bottom: 0;
}

.pebble-login-note a {
  color: var(--teal-700);
  font-weight: 600;
  text-decoration: underline;
}

.pebble-login-note a:hover {
  color: var(--teal-900);
}

@media (max-width: 767px) {
  .pebble-login-note {
    padding: 15px 17px;
    margin-bottom: 20px;
  }
  .pebble-login-note .pln-title { font-size: 16px; }
  .pebble-login-note p { font-size: 14.5px; }
}