/*
Theme Name: Sham Dent
Theme URI: http://localhost:8080
Description: Storefront for Sham Dent, Cairo. Arabic-first, RTL, built for a dentist checking stock on a phone between patients.
Author: Sham Dent
Template: astra
Version: 1.0
Text Domain: shamdent
*/

/* ==========================================================================
   Design tokens

   Taken from the Sham Dent brand assets: the deep indigo-blue of the logo
   field, the brighter electric blue of the campaign artwork, the magenta
   used on the "20% offer" flash, and the amber of the tools in that same
   artwork.

   The brand blue is intensely saturated, so it does the work of a brand
   colour - logo field, actions, footer - while the shopping surfaces stay
   neutral. A catalogue read at arm's length in a clinic cannot be a wall
   of saturated blue.
   ========================================================================== */

:root {
	/* Surfaces - neutral, very slightly cooled to sit under the blue */
	--surface:        #FFFFFF;
	--wash:           #F4F5FA;
	--wash-deep:      #E9EBF6;

	/* Text */
	--ink:            #14163A;
	--ink-2:          #3B3F63;
	--steel:          #676C8C;

	/* Lines */
	--line:           #DFE1EF;
	--line-strong:    #C4C8DF;

	/* Brand.
	   --brand        the logo field blue, used for actions
	   --brand-bright the campaign artwork blue, for gradients and hover
	   --brand-deep   the dark edge of the artwork, for the footer  */
	--clinic:         #1B18B5;
	--clinic-deep:    #14118C;
	--clinic-bright:  #2B4FE8;
	--clinic-night:   #0B0A52;
	--clinic-wash:    #EAEAFB;

	/* Promotions. The magenta from the "20% offer" flash - reserved for
	   discounts and sale badges so it keeps meaning something. */
	--accent:         #E93CBE;
	--accent-deep:    #B01490;
	--accent-wash:    #FCEAF7;

	/* Condition grading - the signature system.
	   Foreground values are darkened until each clears 4.5:1 against its
	   own tinted background; the chip text is only 11px, so it counts as
	   normal text for contrast purposes. */
	--cond-new:       #1B18B5;
	--cond-refurb:    #8A5A00;
	--cond-used:      #575C7D;
	--cond-new-bg:    #EAEAFB;
	--cond-refurb-bg: #FBF2DF;
	--cond-used-bg:   #EEEFF6;

	/* Status */
	--ok:             #15803D;
	--warn:           #8A5A00;
	--danger:         #B91C1C;

	/* Type */
	--font-ui:   'Plex Arabic', 'Segoe UI', system-ui, sans-serif;
	--font-data: 'Plex Mono', ui-monospace, 'Courier New', monospace;

	/* Spacing */
	--sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
	--sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

	/* Shape */
	--r-card: 8px;
	--r-btn:  8px;
	--r-chip: 3px;

	/* Elevation - kept shallow; this is a clinical surface, not a card game */
	--shadow-sm: 0 1px 2px rgba(15, 30, 36, .06);
	--shadow-md: 0 4px 16px rgba(15, 30, 36, .08);
	--shadow-lg: 0 12px 32px rgba(15, 30, 36, .12);

	/* Layout */
	--container: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--header-h: 56px;
	--bottombar-h: 60px;

	--ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 922px) {
	:root { --header-h: 72px; }
}

/* ==========================================================================
   Fonts - self-hosted so the store does not depend on a CDN reaching Egypt
   ========================================================================== */

@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plex-arabic-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plex-arabic-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/plex-arabic-arabic-500.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/plex-arabic-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/plex-arabic-arabic-600.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/plex-arabic-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/plex-arabic-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/plex-arabic-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plex-mono-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/plex-mono-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}

/* ==========================================================================
   Base
   ========================================================================== */

/* Astra shrinks the root to 91.2% below 921px, which drags every rem value
   down with it - card titles land at 13.7px and chips at 10px. Arabic does
   not survive that: the script carries more detail per glyph than Latin and
   needs the extra pixels. Hold the root at 16px on every screen. */
html,
html body { font-size: 100%; }

@media (max-width: 921px) {
	html { font-size: 100% !important; }
}

html { -webkit-text-size-adjust: 100%; }

body,
button, input, select, textarea,
.ast-container, .site-content {
	font-family: var(--font-ui);
	color: var(--ink);
}

body {
	background: var(--surface);
	/* Arabic needs a generous leading; diacritics and descenders collide otherwise */
	line-height: 1.8;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Arabic numerals stay Western - that is what Egyptian commerce uses */
body { font-variant-numeric: lining-nums tabular-nums; }

h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title, .product_title {
	font-family: var(--font-ui);
	color: var(--ink);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

h1, .entry-title { font-size: clamp(1.625rem, 4.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.3125rem, 3.2vw, 1.75rem); }
h3 { font-size: clamp(1.125rem, 2.4vw, 1.3125rem); }

p { line-height: 1.85; color: var(--ink-2); }

a { color: var(--clinic); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clinic-deep); }

/* Visible keyboard focus everywhere - non-negotiable */
:focus-visible {
	outline: 2px solid var(--clinic);
	outline-offset: 2px;
	border-radius: 2px;
}

img { max-width: 100%; height: auto; }

.ast-container,
.ast-width-md-content {
	max-width: var(--container);
	padding-inline: var(--gutter);
}

/* ==========================================================================
   Utility: the data face
   Monospaced technical text, borrowed from the stamped rating plate on a
   piece of equipment. Used for SKUs, specs and prices - never for prose.
   ========================================================================== */

.sd-data {
	font-family: var(--font-data);
	font-size: .8125rem;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SIGNATURE: condition chip

   Every item in this catalogue is new, refurbished or used, and that is
   the first thing a buyer needs to know. The chip encodes it with a
   colour-coded leading rule, like the grading stamp on a rating plate.
   ========================================================================== */

.sd-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-data);
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	padding: 5px 8px 5px 6px;
	border-radius: var(--r-chip);
	border-inline-start: 3px solid var(--cond-used);
	background: var(--cond-used-bg);
	color: var(--cond-used);
	white-space: nowrap;
}

.sd-chip--new    { border-inline-start-color: var(--cond-new);    background: var(--cond-new-bg);    color: var(--cond-new); }
.sd-chip--refurb { border-inline-start-color: var(--cond-refurb); background: var(--cond-refurb-bg); color: var(--cond-refurb); }
.sd-chip--used   { border-inline-start-color: var(--cond-used);   background: var(--cond-used-bg);   color: var(--cond-used); }

.sd-chip__warranty {
	color: var(--steel);
	font-weight: 400;
}

.sd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-end: var(--sp-2);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.2;
	border-radius: var(--r-btn);
	border: 1px solid transparent;
	padding: 13px 20px;
	/* 44px minimum tap target */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .1s var(--ease);
	cursor: pointer;
	text-decoration: none;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.wp-block-button__link {
	background: var(--clinic);
	color: #fff;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.wp-block-button__link:hover {
	background: var(--clinic-deep);
	color: #fff;
}

.button:active { transform: translateY(1px); }

/* Secondary */
.sd-btn-ghost,
.woocommerce a.button.wc-backward {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--line-strong);
}
.sd-btn-ghost:hover,
.woocommerce a.button.wc-backward:hover {
	background: var(--wash);
	color: var(--ink);
	border-color: var(--steel);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header,
.main-header-bar {
	background: var(--surface);
	border-block-end: 1px solid var(--line);
	box-shadow: none;
}

.main-header-bar { padding: 0; }

.site-title,
.site-title a {
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--ink) !important;
}

.site-description { display: none; }

/* Brand lockup: tooth mark + two-line wordmark, following the logo's own
   lowercase geometric styling. */
.sd-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--clinic);
	padding-block: 6px;
}
.sd-brand:hover { color: var(--clinic-deep); }

.sd-brand__mark {
	width: 34px;
	height: 34px;
	display: block;
	flex: none;
}

.sd-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
	/* The wordmark is Latin - keep it left-to-right inside the RTL page */
	direction: ltr;
	text-align: left;
}

.sd-brand__name {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--clinic);
}

.sd-brand__sub {
	font-size: .5625rem;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--steel);
	margin-block-start: 3px;
}

@media (min-width: 922px) {
	.sd-brand__mark { width: 40px; height: 40px; }
	.sd-brand__name { font-size: 1.5rem; }
	.sd-brand__sub  { font-size: .625rem; }
}

/* Sticky header, but compact so it never eats the small screen */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
}

.main-header-menu > .menu-item > .menu-link {
	font-weight: 500;
	font-size: .9375rem;
	color: var(--ink-2);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link {
	color: var(--clinic);
}

/* ==========================================================================
   Home: the four doors

   The hero is not a photograph. This business has four genuinely different
   ways in - buy new, buy consumables, buy used, get something repaired -
   and choosing between them is the visitor's actual first decision. So the
   decision itself is the hero.
   ========================================================================== */

/* The brand's own artwork is a bright blue glow fading to dark at the
   edges, with the content floating on top. The hero follows it rather
   than washing it out into a tint. */
.sd-hero {
	background:
		radial-gradient(ellipse 120% 90% at 50% 30%,
			var(--clinic-bright) 0%,
			var(--clinic) 42%,
			var(--clinic-night) 100%);
	color: #fff;
	padding-block: clamp(32px, 8vw, 64px) clamp(28px, 6vw, 48px);
	border-block-end: 0;
}

.sd-hero h1 { color: #fff; }

.sd-hero__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.sd-hero__eyebrow {
	font-family: var(--font-data);
	font-size: .75rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .72);
	margin-block-end: var(--sp-3);
	display: block;
}

.sd-hero h1 {
	margin: 0 0 var(--sp-3);
	max-width: 20ch;
}

.sd-hero__lede {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, .86);
	max-width: 52ch;
	margin: 0 0 var(--sp-5);
}

.sd-doors {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
}

@media (min-width: 720px) {
	.sd-doors { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
}

.sd-door {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 128px;
	padding: var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	text-decoration: none;
	color: var(--ink);
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

.sd-door:hover {
	border-color: var(--clinic);
	box-shadow: var(--shadow-md);
	color: var(--ink);
}

@media (hover: hover) {
	.sd-door:hover { transform: translateY(-2px); }
}

.sd-door__icon {
	width: 32px;
	height: 32px;
	color: var(--clinic);
}
.sd-door__icon svg { width: 100%; height: 100%; display: block; }

.sd-door__title {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}

.sd-door__meta {
	font-family: var(--font-data);
	font-size: .6875rem;
	color: var(--steel);
	letter-spacing: .02em;
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.sd-section { padding-block: clamp(32px, 6vw, 56px); }
.sd-section--wash { background: var(--wash); }

.sd-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-block-end: var(--sp-5);
}

.sd-section__head h2 { margin: 0; }

.sd-section__more {
	font-size: .875rem;
	font-weight: 500;
	white-space: nowrap;
}

/* ==========================================================================
   Product grid + cards
   ========================================================================== */

.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	/* Every row the same height, so the catalogue reads as a regular grid
	   rather than a ragged one when titles differ in length. */
	grid-auto-rows: 1fr;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
@media (min-width: 992px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
}

.woocommerce ul.products li.product,
ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-md);
}

/* Image area - fixed ratio so the grid never jumps as images load */
.woocommerce ul.products li.product a img,
ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	margin: 0;
	background: var(--wash);
	display: block;
}

/* Astra's card markup is:
     li.product
       .astra-shop-thumbnail-wrap  > a > img   (+ our chip)
       .astra-shop-summary-wrap    > category, title, price, button
   so the layout is built against those two wrappers rather than against
   WooCommerce's default flat structure. */

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	margin: 0;
	line-height: 0;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap,
ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	padding: var(--sp-3);
}

/* Condition chip rides on the image, like a grading sticker on the crate */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .sd-chips,
ul.products li.product .astra-shop-thumbnail-wrap .sd-chips {
	position: absolute;
	top: var(--sp-2);
	inset-inline-start: var(--sp-2);
	margin: 0;
	line-height: 1;
	z-index: 2;
	pointer-events: none;
}

.woocommerce ul.products li.product .sd-chip {
	box-shadow: 0 1px 3px rgba(15, 30, 36, .10);
}

/* Astra floats a second cart icon over the image; the full-width button
   below already does that job, so remove the duplicate. */
.ast-on-card-button { display: none !important; }

/* A product with no photograph still gets a full-bleed plate: the SVG
   placeholder is generated in functions.php, so nothing here needs to fake it. */
li.product.sd-no-image img { background: var(--wash); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-size: .9375rem !important;
	font-weight: 500;
	line-height: 1.5;
	padding: 0 !important;
	margin: 0;
	color: var(--ink);
	/* Two lines, then ellipsis - keeps every card the same height */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	font-family: var(--font-data);
	font-size: 1rem !important;
	font-weight: 500;
	color: var(--ink) !important;
	margin: 0;
	margin-block-start: auto;
	padding-block-start: var(--sp-2);
}

.woocommerce ul.products li.product .price del { color: var(--steel); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--danger); }

/* Category label above the title, from Astra's markup */
.woocommerce ul.products li.product .ast-woo-product-category {
	font-size: .6875rem !important;
	font-family: var(--font-data);
	color: var(--steel);
	letter-spacing: .02em;
	margin: 0;
	line-height: 1.4;
}

/* Add-to-cart pinned to the bottom of every card, full width and tappable */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button,
ul.products li.product .astra-shop-summary-wrap > .button {
	width: 100%;
	margin: var(--sp-2) 0 0;
	margin-block-start: auto;
	font-size: .875rem;
	padding: 11px 14px;
	min-height: 44px;
}

/* Price sits just above the button, not pushed by it */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .price {
	margin-block-start: auto;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .price + .button {
	margin-block-start: var(--sp-2);
}

/* The title link is a plain wrapper - it must not add its own spacing */
.woocommerce ul.products li.product .ast-loop-product__link,
ul.products li.product .ast-loop-product__link { display: block; }

.woocommerce ul.products li.product .added_to_cart {
	display: none;
}

/* Out of stock */
.sd-oos {
	font-family: var(--font-data);
	font-size: .6875rem;
	color: var(--danger);
}

/* Sale flash. The brand already uses magenta for "20% offer", so discounts
   inherit that meaning rather than inventing a new colour. */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	top: var(--sp-2);
	inset-inline-end: var(--sp-2);
	inset-inline-start: auto;
	z-index: 3;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 5px 9px;
	border-radius: var(--r-chip);
	background: var(--accent);
	color: #fff;
	font-family: var(--font-data);
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	box-shadow: 0 1px 3px rgba(15, 30, 36, .14);
}

/* Discounted prices: the old price recedes, the new one carries the flash */
.woocommerce ul.products li.product .price ins,
.single-product .summary .price ins {
	text-decoration: none;
	color: var(--accent-deep);
}
.woocommerce ul.products li.product .price del,
.single-product .summary .price del {
	color: var(--steel);
	font-weight: 400;
	opacity: .8;
}

/* ==========================================================================
   Single product
   ========================================================================== */

.single-product .product_title {
	font-size: clamp(1.375rem, 4vw, 2rem);
	margin-block-end: var(--sp-3);
}

.single-product .summary .price {
	font-family: var(--font-data);
	font-size: 1.625rem !important;
	font-weight: 500;
	color: var(--ink) !important;
	margin-block: var(--sp-3) var(--sp-4);
}

.single-product .woocommerce-product-details__short-description {
	color: var(--ink-2);
	font-size: 1.0625rem;
	line-height: 1.8;
	padding-block-end: var(--sp-4);
	border-block-end: 1px solid var(--line);
	margin-block-end: var(--sp-4);
}

/* The rating plate: the specification block on a real instrument */
.sd-plate {
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--sp-4);
	margin-block: var(--sp-4);
}

.sd-plate__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-4);
	padding-block: 9px;
	border-block-end: 1px solid var(--line);
}
.sd-plate__row:last-child { border-block-end: 0; padding-block-end: 0; }
.sd-plate__row:first-child { padding-block-start: 0; }

.sd-plate__key {
	font-size: .8125rem;
	color: var(--steel);
	white-space: nowrap;
}

.sd-plate__val {
	font-family: var(--font-data);
	font-size: .8125rem;
	color: var(--ink);
	text-align: end;
	font-weight: 500;
}

/* Stock state carries meaning, so it carries colour */
.sd-stock--ok   { color: var(--ok); }
.sd-stock--low  { color: var(--warn); }
.sd-stock--out  { color: var(--danger); }

/* The gallery placeholder must hold a square, or the page reflows on load */
.woocommerce-product-gallery__image--placeholder {
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
}
.woocommerce-product-gallery__image--placeholder img,
img.woocommerce-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.woocommerce-product-gallery { margin-block-end: var(--sp-4); }

/* Quantity stepper: thumb-sized controls, built in app.js */
.quantity.sd-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-btn);
	overflow: hidden;
	background: var(--surface);
}

.sd-qty__btn {
	width: 44px;
	min-height: 48px;
	border: 0;
	background: var(--wash);
	color: var(--ink);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1;
	padding: 0;
	border-radius: 0;
	cursor: pointer;
	min-width: 44px;
	transition: background-color .15s var(--ease);
}
.sd-qty__btn:hover { background: var(--wash-deep); }

.single-product .quantity input.qty,
.quantity.sd-qty input.qty {
	height: 48px;
	min-height: 48px;
	width: 56px;
	border: 0;
	border-inline: 1px solid var(--line-strong);
	border-radius: 0;
	text-align: center;
	font-family: var(--font-data);
	font-size: 1rem;
	padding: 0;
	-moz-appearance: textfield;
}
.quantity.sd-qty input.qty::-webkit-outer-spin-button,
.quantity.sd-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart {
	display: flex;
	gap: var(--sp-3);
	align-items: stretch;
	margin-block: var(--sp-4);
	flex-wrap: wrap;
}

.single-product form.cart .single_add_to_cart_button {
	flex: 1;
	min-width: 180px;
	min-height: 48px;
	font-size: 1rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-block-end: var(--sp-4);
	border-block-end: 1px solid var(--line);
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 12px 4px;
	font-weight: 500;
	color: var(--steel);
	border-block-end: 2px solid transparent;
	margin-inline-end: var(--sp-4);
	display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--clinic);
	border-block-end-color: var(--clinic);
}

/* ==========================================================================
   Sticky buy bar - phone only

   On a phone the price and the buy button scroll away while the customer
   reads the specification. This brings them back once they have scrolled
   past the real one.
   ========================================================================== */

.sd-buybar {
	position: fixed;
	inset-inline: 0;
	bottom: var(--bottombar-h);
	z-index: 190;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--surface);
	border-block-start: 1px solid var(--line);
	box-shadow: 0 -4px 16px rgba(15, 30, 36, .07);
	transform: translateY(130%);
	transition: transform .26s var(--ease);
}

.sd-buybar.is-visible { transform: translateY(0); }

.sd-buybar__price {
	font-family: var(--font-data);
	font-weight: 500;
	font-size: 1rem;
	white-space: nowrap;
}

.sd-buybar__btn {
	flex: 1;
	min-height: 46px;
}

@media (min-width: 922px) {
	.sd-buybar { display: none !important; }
}

/* ==========================================================================
   Mobile bottom navigation

   Four destinations that cover almost every session: home, the catalogue,
   the cart, and a direct line to a human. Thumb-reachable, unlike a menu
   button in the top corner.
   ========================================================================== */

.sd-bottomnav {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 195;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--surface);
	border-block-start: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transition: transform .26s var(--ease);
}

.sd-bottomnav.is-hidden { transform: translateY(110%); }

.sd-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: var(--bottombar-h);
	text-decoration: none;
	color: var(--steel);
	font-size: .6875rem;
	font-weight: 500;
	position: relative;
	transition: color .15s var(--ease);
}

.sd-bottomnav__item:hover,
.sd-bottomnav__item.is-active { color: var(--clinic); }

.sd-bottomnav__item svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.75;
}

.sd-bottomnav__item--wa:hover,
.sd-bottomnav__item--wa { color: #128C7E; }

.sd-bottomnav__count {
	position: absolute;
	top: 6px;
	inset-inline-end: calc(50% - 20px);
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border-radius: 9px;
	background: var(--clinic);
	color: #fff;
	font-family: var(--font-data);
	font-size: .625rem;
	font-weight: 500;
	line-height: 17px;
	text-align: center;
}

.sd-bottomnav__count[hidden] { display: none; }

/* Keep the last of the page clear of the fixed bar */
@media (max-width: 921px) {
	body.sd-has-bottomnav { padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 922px) {
	.sd-bottomnav { display: none; }
}

/* ==========================================================================
   Floating WhatsApp - desktop only, since mobile has it in the bottom bar
   ========================================================================== */

.sd-wa-float {
	position: fixed;
	inset-inline-end: 24px;
	bottom: 24px;
	z-index: 190;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	background: #25D366;
	color: #fff;
	box-shadow: var(--shadow-lg);
	transition: transform .18s var(--ease);
}
.sd-wa-float:hover { transform: scale(1.06); color: #fff; }
.sd-wa-float svg { width: 28px; height: 28px; }

@media (min-width: 922px) {
	.sd-wa-float { display: flex; }
}

/* ==========================================================================
   Cart, checkout and notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--r-card);
	border: 1px solid var(--line);
	border-inline-start: 3px solid var(--clinic);
	background: var(--wash);
	color: var(--ink);
	padding: var(--sp-3) var(--sp-4);
	font-size: .9375rem;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error { border-inline-start-color: var(--danger); }

.woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th {
	font-weight: 600;
	font-size: .875rem;
	color: var(--ink);
	background: var(--wash);
}
.woocommerce table.shop_table td { border-block-start: 1px solid var(--line); }

.woocommerce table.shop_table .amount,
.woocommerce-Price-amount {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}

/* Form fields big enough to tap and to avoid iOS zoom (16px minimum) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"],
textarea, select {
	font-family: var(--font-ui);
	font-size: 16px;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-btn);
	background: var(--surface);
	color: var(--ink);
	width: 100%;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

textarea { min-height: 120px; line-height: 1.7; }

.woocommerce form .form-row input.input-text:focus,
input:focus, textarea:focus, select:focus {
	border-color: var(--clinic);
	box-shadow: 0 0 0 3px var(--clinic-wash);
	outline: none;
}

.woocommerce form .form-row label {
	font-size: .875rem;
	font-weight: 500;
	color: var(--ink-2);
	margin-block-end: 6px;
	display: block;
}

.required { color: var(--danger); text-decoration: none; }

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 24px;
	padding-inline-start: 0;
	color: var(--ink);
}

/* Checkout layout: stack on mobile, two columns on desktop */
@media (min-width: 992px) {
	.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
}

#order_review, .woocommerce-checkout-review-order {
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--sp-4);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	padding: var(--sp-3);
	margin-block-end: var(--sp-2);
	list-style: none;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--clinic-wash);
	border-radius: var(--r-btn);
	font-size: .875rem;
	color: var(--ink-2);
	margin-block-start: var(--sp-2);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* ==========================================================================
   Breadcrumb + shop header
   ========================================================================== */

.woocommerce-breadcrumb {
	font-size: .8125rem;
	color: var(--steel);
	margin-block-end: var(--sp-4);
}
.woocommerce-breadcrumb a { color: var(--steel); }
.woocommerce-breadcrumb a:hover { color: var(--clinic); }

.woocommerce-result-count { font-size: .8125rem; color: var(--steel); }

.woocommerce .woocommerce-ordering select {
	min-height: 44px;
	font-size: .875rem;
	width: auto;
	min-width: 200px;
}

/* Shop toolbar: keep count and sorting on one line, wrapping gracefully */
.woocommerce .products-header,
.woocommerce-products-header { margin-block-end: var(--sp-4); }

/* ==========================================================================
   Footer
   ========================================================================== */

/* Contact strip above the footer */
.sd-contactbar {
	background: var(--clinic);
	color: #fff;
	padding-block: var(--sp-5);
}

.sd-contactbar__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
}

@media (min-width: 720px) {
	.sd-contactbar__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-5); }
}

.sd-contactbar__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sd-contactbar__label {
	font-family: var(--font-data);
	font-size: .6875rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .66);
}

.sd-contactbar__value {
	font-size: .9375rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	line-height: 1.5;
}
a.sd-contactbar__value:hover { color: #fff; text-decoration: underline; }

/* Phone numbers read left-to-right even inside the RTL page */
.sd-contactbar__tel {
	font-family: var(--font-data);
	font-size: 1.0625rem;
	letter-spacing: .01em;
	/* Comfortably tappable on a phone, where this is a call button */
	display: inline-block;
	padding-block: 4px;
	text-align: start;
}

.site-footer,
.ast-small-footer {
	background: var(--clinic-night);
	color: #B9BCE6;
	border: 0;
}
.site-footer a, .ast-small-footer a { color: #DDDEF7; }
.site-footer a:hover, .ast-small-footer a:hover { color: #fff; }

/* Clear the fixed bottom bar */
@media (max-width: 921px) {
	.site-footer { padding-bottom: var(--sp-5); }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.sd-bottomnav, .sd-buybar { transition: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.sd-bottomnav, .sd-buybar, .sd-wa-float, .site-header { display: none !important; }
	body { padding-bottom: 0; }
}

/* ==========================================================================
   Catalogue filters

   A horizontal chip row rather than a sidebar. On a phone a sidebar either
   collapses behind a button nobody presses, or pushes the grid off the
   screen. Chips stay visible, stay thumb-sized, and scroll sideways when
   there are more than fit.
   ========================================================================== */

.sd-filters {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding-block: var(--sp-3) var(--sp-4);
	margin-block-end: var(--sp-4);
	border-block-end: 1px solid var(--line);
}

.sd-filters__group {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 0;
}

.sd-filters__label {
	font-family: var(--font-data);
	font-size: .6875rem;
	letter-spacing: .03em;
	color: var(--steel);
	flex: none;
	width: 3.5em;
}

.sd-filters__chips {
	display: flex;
	gap: var(--sp-2);
	overflow-x: auto;
	padding-block: 2px;
	/* Hide the scrollbar but keep the scrolling */
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
}
.sd-filters__chips::-webkit-scrollbar { display: none; }

.sd-filter {
	flex: none;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-2);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}

.sd-filter:hover {
	border-color: var(--clinic);
	color: var(--clinic);
}

.sd-filter.is-on {
	background: var(--clinic);
	border-color: var(--clinic);
	color: #fff;
}

.sd-filter__n {
	font-family: var(--font-data);
	font-size: .6875rem;
	opacity: .65;
}

.sd-filters__clear {
	align-self: flex-start;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--accent-deep);
	text-decoration: none;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}
.sd-filters__clear:hover { color: var(--accent-deep); text-decoration: underline; }

@media (min-width: 720px) {
	.sd-filters { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-5); }
	.sd-filters__chips { overflow-x: visible; flex-wrap: wrap; }
	.sd-filters__clear { margin-inline-start: auto; }
}

/* Empty state: a dead end with a way out */
.sd-empty {
	text-align: center;
	padding-block: var(--sp-8);
	max-width: 34ch;
	margin-inline: auto;
}

.sd-empty__title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 var(--sp-2);
}

.sd-empty__hint {
	color: var(--steel);
	font-size: .9375rem;
	margin: 0 0 var(--sp-4);
}

/* ==========================================================================
   Shop header density

   On a 812px phone the grid was starting 476px down - header, breadcrumb,
   page title, result count and sort row stacked up before a single product
   appeared. A catalogue that shows no catalogue above the fold is not doing
   its job, so the chrome above the grid is compressed.
   ========================================================================== */

@media (max-width: 921px) {
	.ast-woocommerce-container { padding-block-start: var(--sp-3); }

	.woocommerce-breadcrumb {
		margin-block-end: var(--sp-2);
		font-size: .75rem;
	}

	/* The page title repeats the breadcrumb and the highlighted nav item.
	   Kept in the document for search engines and screen readers, but it
	   does not need to occupy the first screen. */
	.woocommerce-products-header__title.page-title {
		font-size: 1.25rem;
		margin: 0 0 var(--sp-2);
	}

	.woocommerce-products-header { margin-block-end: 0; }

	.sd-filters {
		padding-block: var(--sp-2) var(--sp-3);
		margin-block-end: var(--sp-3);
		gap: var(--sp-2);
	}
}

/* Result count and sort share one compact line instead of stacking */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-block-end: var(--sp-3);
}

.woocommerce .woocommerce-ordering {
	float: none;
	display: inline-block;
}

.sd-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.sd-toolbar .woocommerce-result-count,
.sd-toolbar .woocommerce-ordering { margin-block-end: 0; }

.sd-toolbar select {
	min-height: 40px;
	padding-block: 8px;
	font-size: .875rem;
	width: auto;
	min-width: 0;
}

@media (max-width: 921px) {
	.sd-toolbar { margin-block-end: var(--sp-3); }
	.sd-toolbar .woocommerce-result-count { font-size: .75rem; }
}