/*
Theme Name: Medisource Bangladesh
Theme URI: https://medisourcebangladesh.com/
Author: Medisource Bangladesh
Author URI: https://medisourcebangladesh.com/
Description: Custom WooCommerce theme for Medisource Bangladesh, a pharmacy in Mohakhali, Dhaka. Mobile-first, bilingual (Bangla and English), built to work offline without any CDN.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medisource
Tags: e-commerce, custom-menu, custom-logo, translation-ready
*/

/* =========================================================================
   1. Self-hosted fonts
   Noto Sans Bengali, SIL Open Font License (see assets/fonts/OFL.txt).
   The unicode-range keeps Latin text on the system stack, so only Bengali
   characters download the webfont.
   ====================================================================== */

@font-face {
	font-family: "Noto Sans Bengali";
	src: url("assets/fonts/noto-sans-bengali-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0980-09FF, U+200C-200D;
}

@font-face {
	font-family: "Noto Sans Bengali";
	src: url("assets/fonts/noto-sans-bengali-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0980-09FF, U+200C-200D;
}

@font-face {
	font-family: "Noto Sans Bengali";
	src: url("assets/fonts/noto-sans-bengali-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0980-09FF, U+200C-200D;
}

/* =========================================================================
   2. Design tokens
   Change the whole palette from this one block.
   ====================================================================== */

:root {
	/* Brand. Taken from the logo: the deep green wordmark, with the emblem's
	   blue kept below as the secondary. Buttons, the active tab pill, badges,
	   the search focus ring and the "See all" links all read this green. */
	--ms-primary: #00704a;
	--ms-primary-dark: #00583f;
	--ms-primary-soft: #eaf6f0;
	--ms-primary-tint: #d5ebe1;

	/* Secondary: the blue-green of the emblem. Links, notices and small
	   accents only — never a button or a badge, so green stays the colour the
	   visitor reads as "this is the shop". */
	--ms-secondary: #0b63b5;
	--ms-secondary-dark: #094f92;
	--ms-secondary-soft: #e8f1fb;

	/* Accents */
	--ms-green: #16a34a; /* In stock / safe. */
	--ms-green-soft: #e8f7ee;
	--ms-amber: #d97706; /* Prescription (Rx) notices and badges. */
	--ms-amber-soft: #fef3c7;
	--ms-dark: #0b1220;
	--ms-red: #dc2626;

	/* Text and surfaces.
	   --ms-bg-soft is the quiet surface behind search fields, card photos and
	   table headers. It is near-white rather than tinted: it has to stay
	   distinct from --ms-primary-soft, or an Rx button sitting on it would
	   disappear into its own background. */
	--ms-text: #0f172a;
	--ms-muted: #64748b;
	--ms-border: #e2e8f0;
	--ms-card: #ffffff;
	--ms-bg: #ffffff;
	--ms-bg-soft: #f4f7f5;

	/* Shape */
	--ms-r-sm: 10px;
	--ms-r: 14px;
	--ms-r-lg: 20px;
	--ms-r-pill: 999px;

	/* Elevation */
	--ms-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--ms-shadow: 0 4px 16px rgba(15, 23, 42, .08);
	--ms-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

	/* Type */
	--ms-font: "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Layout */
	--ms-container: 1200px;
	--ms-gutter: 16px;
	--ms-tap: 44px;

	/* Motion */
	--ms-ease: cubic-bezier(.4, 0, .2, 1);
	--ms-speed: .22s;
}

/* =========================================================================
   3. Base
   ====================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--ms-bg);
	color: var(--ms-text);
	font-family: var(--ms-font);
	font-size: 16px;
	line-height: 1.55;
	overflow-x: hidden;
}

/* Bengali conjuncts need more room than Latin, and must never be clipped. */
body.ms-lang-bn {
	line-height: 1.7;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 .5em;
	line-height: 1.3;
	font-weight: 700;
	overflow-wrap: break-word;
}

body.ms-lang-bn h1,
body.ms-lang-bn h2,
body.ms-lang-bn h3,
body.ms-lang-bn h4 {
	line-height: 1.5;
}

p {
	margin: 0 0 1em;
}

/*
 * A link in running text is the secondary blue. Everything that carries the
 * brand — buttons, badges, the tab pill, the navigation, "See all" — names its
 * own green below, so only plain links in body copy pick this up.
 */
a {
	color: var(--ms-secondary);
	text-decoration: none;
}

a:hover {
	color: var(--ms-secondary-dark);
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

button {
	font: inherit;
	color: inherit;
}

/* Visible focus for keyboard users, on every interactive element. */
:focus-visible {
	outline: 3px solid var(--ms-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================================================================
   4. Utilities
   ====================================================================== */

.ms-container {
	width: 100%;
	max-width: var(--ms-container);
	margin-inline: auto;
	padding-inline: var(--ms-gutter);
}

.ms-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ms-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 20px;
	background: var(--ms-dark);
	color: #fff;
	border-radius: 0 0 var(--ms-r) 0;
}

.ms-skip:focus {
	left: 0;
	color: #fff;
}

.ms-i {
	display: inline-block;
	vertical-align: middle;
	flex: none;
}

body.ms-drawer-open {
	overflow: hidden;
}

/* =========================================================================
   5. Buttons
   ====================================================================== */

.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--ms-tap);
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--ms-r-pill);
	background: var(--ms-primary);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background var(--ms-speed) var(--ms-ease),
		transform var(--ms-speed) var(--ms-ease),
		box-shadow var(--ms-speed) var(--ms-ease);
}

.ms-btn:hover {
	background: var(--ms-primary-dark);
	color: #fff;
}

.ms-btn:active {
	transform: translateY(1px);
}

.ms-btn--dark {
	background: var(--ms-dark);
}

.ms-btn--dark:hover {
	background: #1e293b;
}

.ms-btn--ghost {
	background: #fff;
	color: var(--ms-text);
	border-color: var(--ms-border);
}

.ms-btn--ghost:hover {
	background: var(--ms-bg-soft);
	color: var(--ms-text);
}

.ms-btn--wa {
	background: #25d366;
	color: #06331a;
}

.ms-btn--wa:hover {
	background: #1eb457;
	color: #06331a;
}

.ms-btn--rx {
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
	border-color: var(--ms-primary-tint);
}

.ms-btn--rx:hover {
	background: var(--ms-primary-tint);
	color: var(--ms-primary-dark);
}

.ms-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
}

/* Round icon buttons, as in the reference app. */
.ms-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ms-tap);
	height: var(--ms-tap);
	padding: 0;
	border: 1px solid var(--ms-border);
	border-radius: 50%;
	background: #fff;
	color: var(--ms-text);
	cursor: pointer;
	position: relative;
	transition: background var(--ms-speed) var(--ms-ease),
		border-color var(--ms-speed) var(--ms-ease);
}

.ms-round:hover {
	background: var(--ms-bg-soft);
	color: var(--ms-text);
}

.ms-round--sm {
	width: 40px;
	height: 40px;
}

/*
 * Hidden below the desktop breakpoint, where the drawer carries these
 * actions instead.
 *
 * This has to stay *after* `.ms-btn` and `.ms-round`: those rules also set
 * `display`, and at equal specificity the later one wins, so declaring this
 * earlier would leave the desktop-only buttons visible on a phone and push
 * the header into horizontal scroll.
 */
.ms-only-desktop {
	display: none;
}

/* =========================================================================
   6. Count badges
   ====================================================================== */

.ms-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-primary);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	display: none;
}

.ms-count.is-on {
	display: block;
}

.ms-count.is-pulse {
	animation: ms-pulse .5s var(--ms-ease);
}

@keyframes ms-pulse {
	0% { transform: scale(1); }
	45% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* =========================================================================
   7. Language switcher
   ====================================================================== */

.ms-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	background: #fff;
}

.ms-lang__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 34px;
	padding: 0 10px;
	border-radius: var(--ms-r-pill);
	color: var(--ms-muted);
	font-size: .82rem;
	font-weight: 700;
	line-height: 1;
}

.ms-lang__opt:hover {
	color: var(--ms-text);
	background: var(--ms-bg-soft);
}

.ms-lang__opt.is-active {
	background: var(--ms-primary);
	color: #fff;
}

.ms-lang--drawer .ms-lang__opt,
.ms-lang--footer .ms-lang__opt {
	min-height: var(--ms-tap);
	min-width: 56px;
	font-size: .9rem;
}

/* =========================================================================
   8. Header
   ====================================================================== */

.ms-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--ms-border);
}

.ms-header__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 64px;
}

.ms-brand {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.ms-brand__link {
	display: inline-flex;
	flex-direction: column;
	color: var(--ms-text);
	line-height: 1.15;
}

/*
 * The logo, whether it is the owner's own upload or the artwork bundled with
 * the theme. The height is fixed and the width follows it, so the mark always
 * keeps its own proportions and is never stretched or cropped. The markup
 * carries matching width and height attributes, which is what stops the header
 * shifting sideways while the image is still arriving.
 *
 * These selectors carry two classes on purpose. WooCommerce ships its own
 * `.woocommerce-page img { height: auto; max-width: 100% }`, which is more
 * specific than a single class and wins on the shop, cart and checkout pages.
 * A lone `.ms-logo--header` therefore lost there, and the header drew the logo
 * at its natural 640px wide — pushing the menu and the cart a screen and a
 * half off the right edge. Scoping by container outranks WooCommerce's rule,
 * and the logo is the same size on every page again.
 */
.ms-brand .ms-logo--header,
.ms-brand .custom-logo {
	width: auto;
	height: 38px;
}

.ms-footer .ms-logo--footer,
.ms-footer .custom-logo {
	width: auto;
	height: 48px;
}

.ms-nav {
	display: none;
}

.ms-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

/* --- Home page search bar --- */

.ms-searchbar {
	padding-bottom: 14px;
}

.ms-search {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	padding: 6px 6px 6px 14px;
	background: var(--ms-bg-soft);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	transition: border-color var(--ms-speed) var(--ms-ease),
		box-shadow var(--ms-speed) var(--ms-ease);
}

.ms-search:focus-within {
	border-color: var(--ms-primary);
	box-shadow: 0 0 0 3px var(--ms-primary-soft);
}

.ms-search__icon {
	display: inline-flex;
	color: var(--ms-muted);
	flex: none;
}

.ms-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--ms-tap);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ms-text);
	font: inherit;
	font-size: .95rem;
}

.ms-search__input:focus {
	outline: none;
}

.ms-search__input::placeholder {
	color: var(--ms-muted);
	opacity: 1;
}

.ms-search__rx {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ms-tap);
	height: var(--ms-tap);
	flex: none;
	border-radius: 50%;
	background: var(--ms-primary);
	color: #fff;
	transition: background var(--ms-speed) var(--ms-ease);
}

.ms-search__rx:hover {
	background: var(--ms-primary-dark);
	color: #fff;
}

/* =========================================================================
   9. Desktop navigation
   ====================================================================== */

.ms-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-menu > li {
	position: relative;
}

.ms-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: var(--ms-tap);
	padding: 0 12px;
	border-radius: var(--ms-r-pill);
	color: var(--ms-text);
	font-weight: 600;
	font-size: .93rem;
	white-space: nowrap;
}

.ms-menu > li > a:hover,
.ms-menu > li.is-open > a,
.ms-menu > li.current-menu-item > a {
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
}

.ms-menu .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	min-width: 250px;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	box-shadow: var(--ms-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--ms-speed) var(--ms-ease),
		transform var(--ms-speed) var(--ms-ease),
		visibility var(--ms-speed);
}

.ms-menu > li:hover > .sub-menu,
.ms-menu > li.is-open > .sub-menu,
.ms-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ms-menu .sub-menu a {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: var(--ms-tap);
	padding: 8px 12px;
	border-radius: var(--ms-r-sm);
	color: var(--ms-text);
	font-size: .9rem;
}

.ms-menu .sub-menu a:hover {
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
}

/*
 * A third level inside the dropdown is drawn as an indented branch of the same
 * panel rather than a fly-out. The panel sits near the middle of the header,
 * so a fly-out would leave the viewport on a 1024px screen.
 */
.ms-menu:not(.ms-menu--drawer) .sub-menu .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	max-height: none;
	overflow: visible;
	margin: 2px 0 4px 12px;
	padding: 0 0 0 8px;
	border: 0;
	border-left: 2px solid var(--ms-border);
	border-radius: 0;
	box-shadow: none;
}

.ms-menu:not(.ms-menu--drawer) .sub-menu .sub-menu a {
	min-height: 36px;
	padding: 6px 10px;
	font-size: .86rem;
}

/* The chevron only marks a branch; it never carries meaning on its own. */
.ms-catnav__item > a > .ms-i:last-child {
	margin-left: auto;
	flex: none;
	color: var(--ms-muted);
}

.ms-catnav__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================================
   10. Drawer
   ====================================================================== */

.ms-overlay {
	position: fixed;
	inset: 0;
	z-index: 140;
	background: rgba(11, 18, 32, .45);
}

.ms-drawer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 150;
	width: min(86vw, 340px);
	height: 100%;
	padding: 16px;
	background: #fff;
	box-shadow: var(--ms-shadow-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Without JavaScript the drawer is simply part of the page flow. */
.ms-js .ms-drawer {
	transform: translateX(-104%);
	visibility: hidden;
	transition: transform var(--ms-speed) var(--ms-ease), visibility var(--ms-speed);
}

.ms-js .ms-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.ms-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.ms-drawer__title {
	font-size: 1.05rem;
	font-weight: 700;
}

.ms-drawer__lang {
	margin-bottom: 12px;
}

.ms-drawer__nav {
	margin-bottom: 16px;
}

.ms-menu--drawer {
	display: block;
}

.ms-menu--drawer > li {
	border-bottom: 1px solid var(--ms-border);
}

.ms-menu--drawer > li:last-child {
	border-bottom: 0;
}

.ms-menu--drawer > li > a {
	display: flex;
	width: 100%;
	min-height: 52px;
	padding: 0 4px;
	border-radius: 0;
	font-size: 1rem;
}

.ms-menu--drawer > li > a:hover,
.ms-menu--drawer > li.is-open > a {
	background: transparent;
	color: var(--ms-primary);
}

.ms-menu--drawer .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	margin: 0 0 8px;
	padding: 0 0 0 12px;
	border: 0;
	border-left: 2px solid var(--ms-border);
	border-radius: 0;
	box-shadow: none;
}

.ms-menu--drawer .sub-menu a {
	min-height: var(--ms-tap);
	display: flex;
	align-items: center;
}

/*
 * In the drawer the script injects its own 44px toggle beside a branch, and
 * that button draws its own arrow. The inline chevron the desktop dropdown
 * needs would be a second arrow on the same row, so it is dropped here.
 */
.ms-menu--drawer .ms-catnav__item > a > .ms-i--chevron {
	display: none;
}

/* Submenu toggle injected by main.js. */
.ms-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--ms-muted);
}

.ms-submenu-toggle > span {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--ms-speed) var(--ms-ease);
}

.ms-submenu-toggle[aria-expanded="true"] > span {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/*
 * Descendant, not direct child: a category nested inside another one gets the
 * same toggle button, and the row has to lay out the same way at any depth.
 */
.ms-menu--drawer li.has-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ms-menu--drawer li.has-toggle > a {
	flex: 1 1 auto;
}

.ms-menu--drawer li.has-toggle > .sub-menu {
	flex: 1 1 100%;
}

.ms-drawer__cta {
	width: 100%;
	margin-bottom: 14px;
}

.ms-drawer__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ms-drawer__links a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 4px;
	color: var(--ms-text);
	font-weight: 600;
}

.ms-drawer__links a:hover {
	color: var(--ms-primary);
}

.ms-drawer__license {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--ms-border);
	color: var(--ms-muted);
	font-size: .8rem;
}

/* =========================================================================
   11. Default hero
   ====================================================================== */

.ms-home {
	padding-block: 16px 32px;
}

.ms-hero {
	margin-bottom: 24px;
}

/*
 * z-index: 0 looks redundant on a positioned element, but it is what keeps a
 * slide's own layers — the picture, the shade, the stretched link and the
 * button — inside the slide. Without it the button could paint over the dots
 * and the arrows, which are the section's own children and have to stay on
 * top and reachable.
 */
.ms-hero__slide {
	position: relative;
	z-index: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-primary-dark) 100%);
	box-shadow: var(--ms-shadow);
}

/*
 * The built-in default hero holds one slide, and that slide carries the
 * heading, the tagline and the two buttons rather than a picture, so it is
 * sized by its own content instead of by a picture's ratio.
 *
 * Both halves of that matter. The track below is a flex scroller written for
 * the uploaded-banner slider, whose slides are told to fill it; without the
 * same instruction here the single slide sized itself to its own longest line
 * of text, which on a desktop column left the box a third of the width it
 * should be. And a fixed ratio, which suits a banner image, does not suit
 * three lines of Bangla text plus a button: on a phone a fixed box was
 * shorter than its own content, and the slide clips what it cannot show, so
 * the button was cut off at the bottom of the box.
 *
 * Uploaded banners are unaffected — they are pictures, and the slider keeps
 * their ratio. The box only stops being a fixed shape when it is this
 * placeholder, which disappears as soon as the owner publishes a banner.
 */
.ms-hero--default .ms-hero__slide {
	width: 100%;
	aspect-ratio: auto;
}

/*
 * This hero has no picture, so its words sit in the flow rather than in a
 * fixed box. The extra room at the bottom keeps them clear of the Shop
 * button, which is pinned to the same corner a real banner's button uses.
 * The box is sized by its content, so the padding grows it rather than
 * squeezing anything.
 */
.ms-hero--default .ms-hero__body {
	padding-bottom: 84px;
}

.ms-hero__art {
	position: absolute;
	inset: 0;
}

.ms-hero__art svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ms-hero__body {
	position: relative;
	z-index: 1;
	height: 100%;
	padding: 5.5% 6%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	color: #fff;
}

.ms-hero__eyebrow {
	margin: 0 0 .4em;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .9;
}

.ms-hero__title {
	margin: 0 0 .35em;
	max-width: 62%;
	font-size: clamp(1.25rem, 5.4vw, 2.4rem);
	line-height: 1.25;
	color: #fff;
}

body.ms-lang-bn .ms-hero__title {
	line-height: 1.45;
}

.ms-hero__text {
	margin: 0 0 1em;
	max-width: 60%;
	font-size: clamp(.8rem, 2.4vw, 1rem);
	opacity: .95;
}

.ms-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ms-hero__actions .ms-btn {
	min-height: 42px;
	padding: 8px 16px;
	font-size: .88rem;
}

/* -------------------------------------------------------------------------
   11b. Hero slider (uploaded banners)

   The track is the scroller and each slide snaps to its start edge, so one
   banner fills the box at a time. The base .ms-hero__slide rule above already
   supplies the ratio, radius and shadow, so only the slider behaviour is
   added here.
   ---------------------------------------------------------------------- */

.ms-hero--slider {
	position: relative;
}

.ms-hero__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ms-hero__track::-webkit-scrollbar {
	display: none;
}

.ms-hero__track:focus-visible {
	outline: 2px solid var(--ms-primary);
	outline-offset: 4px;
}

.ms-hero--slider .ms-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.ms-hero__media {
	display: block;
	height: 100%;
}

/*
 * The stretched link. When the owner asks for the picture to be clickable, an
 * empty link is laid over the whole slide; the button sits above it at z-index
 * 3 and the two are siblings, never one inside the other. It is pulled out of
 * the tab order and hidden from screen readers in the markup, so the button
 * remains the single link a visitor meets.
 */
.ms-hero__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ms-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The bottom shade. The picture carries the headline, so the lower third is
 * darkened a little to keep the button's white text readable over a bright or
 * busy photo. It sits under the button and never touches the dots, which are
 * centred below the picture.
 */
.ms-hero__shade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 34%;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
	pointer-events: none;
}

/*
 * The one button every banner carries.
 *
 * It lives inside the slide, so it travels with its own picture, and it is
 * never hidden at any width: at 320px it is still there, still bottom-left,
 * and still clear of the dots below it. It is deliberately not switchable
 * off — a banner without a way onward is a dead end.
 */
.ms-hero__btn {
	position: absolute;
	left: 16px;
	bottom: 30px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 13px;
	border-radius: var(--ms-r-pill);
	background: #0b1220;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	transition: background-color var(--ms-speed) var(--ms-ease);
}

.ms-hero__btn:hover,
.ms-hero__btn:focus {
	background: #16233a;
	color: #fff;
}

.ms-hero__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.ms-hero__btn-label {
	white-space: nowrap;
}

.ms-hero__btn-arrow {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
}

@media (min-width: 760px) {
	.ms-hero__btn {
		left: 4%;
		bottom: 40px;
		gap: 10px;
		height: 48px;
		padding: 0 18px;
		font-size: 15px;
	}

	.ms-hero__btn-arrow {
		width: 26px;
		height: 26px;
	}
}

/* Dots: a real button each, with a padded hit area so the 8px dot is still
   comfortable to tap. The active dot stretches into a short pill. */
.ms-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 2;
}

.ms-hero__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: width var(--ms-speed) var(--ms-ease), background-color var(--ms-speed) var(--ms-ease);
}

.ms-hero__dot::before {
	content: "";
	position: absolute;
	inset: -14px -8px;
}

/*
 * The active dot is the brand green rather than plain white. The dots sit on
 * the owner's own banner photo, which may itself be green, so the ring keeps
 * the current slide readable on any picture — colour alone never has to carry
 * that.
 */
.ms-hero__dot[aria-current="true"] {
	width: 22px;
	background: var(--ms-primary);
	box-shadow: 0 0 0 2px #fff;
}

.ms-hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
}

/* Arrows sit on the sides from 900px up, where there is room for them. */
.ms-hero__nav {
	display: none;
}

@media (min-width: 900px) {
	.ms-hero__nav {
		position: absolute;
		top: 50%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		transform: translateY(-50%);
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .9);
		color: var(--ms-primary-dark);
		box-shadow: var(--ms-shadow);
		cursor: pointer;
		transition: background-color var(--ms-speed) var(--ms-ease);
	}

	.ms-hero__nav:hover {
		background: #fff;
	}

	.ms-hero__nav--prev {
		left: 14px;
	}

	.ms-hero__nav--next {
		right: 14px;
	}

	.ms-hero__nav--prev .ms-i {
		transform: rotate(180deg);
	}
}

/*
 * The desktop image is 3:1 and the mobile one 4:3. The box can only carry a
 * single ratio for every slide, so the wide one is used only when the PHP set
 * ms-hero--wide, which means every active banner has a desktop image. When it
 * does not — because one banner has no desktop picture, and cropping it to
 * 3:1 would cut it about badly — the phone ratio is kept on desktop too,
 * centred at a comfortable reading width.
 */
@media (min-width: 760px) {
	.ms-hero--wide .ms-hero__slide {
		aspect-ratio: 3 / 1;
	}

	.ms-hero--slider:not(.ms-hero--wide) {
		max-width: 760px;
		margin-inline: auto;
	}

	.ms-hero--slider:not(.ms-hero--wide) .ms-hero__slide {
		aspect-ratio: 4 / 3;
	}

	.ms-hero--default .ms-hero__body {
		padding-bottom: 104px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-hero__track {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------
   11c. Shared home section furniture
   ---------------------------------------------------------------------- */

.ms-sec {
	margin-top: 32px;
}

.ms-sec__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.ms-sec__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.4;
}

.ms-sec__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	font-size: .86rem;
	font-weight: 600;
	color: var(--ms-primary);
	text-decoration: none;
}

.ms-sec__more:hover {
	color: var(--ms-primary-dark);
	text-decoration: underline;
}

.ms-sec__foot {
	margin: 18px 0 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
   11d. Category icons and the home category chips
   ---------------------------------------------------------------------- */

/*
 * Shared category icon. One drawing serves every size: the SVG is emitted
 * with a width and height, and only the rendered box changes here.
 *
 * The overflow is left visible so the soft shadow on the ground, and the
 * corners of a capsule drawn on the diagonal, are not clipped by whatever box
 * the drawing happens to sit in.
 */
.ms-cico {
	display: block;
	flex: none;
	overflow: visible;
}

.ms-cico--mini {
	width: 24px;
	height: 24px;
}

.ms-cico--large {
	width: 100%;
	height: auto;
	max-width: 96px;
}

.ms-cico--photo {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
}

/*
 * One tint per category, so a category keeps the same colour wherever it
 * appears: the home chips, the shop chips, the archive banner and the empty
 * state. These are the colours the drawings were drawn against and match the
 * fills inside them in inc/categories.php.
 *
 * The default below is the Ayurvedic tint; a category is given the modifier
 * class it needs by ms_cat_icon_key().
 */
.ms-catcard,
.ms-cathero,
.ms-catempty {
	--ms-tint: #eaf6f0;
	--ms-tint-deep: #cbe9db;
	--ms-tint-ink: #00704a;
}

.ms-tint--allopathic {
	--ms-tint: #e8f1fb;
	--ms-tint-deep: #c7ddf6;
	--ms-tint-ink: #0b63b5;
}

.ms-tint--unani {
	--ms-tint: #fbf1dc;
	--ms-tint-deep: #f3e0b8;
	--ms-tint-ink: #b45309;
}

.ms-tint--ayurvedic {
	--ms-tint: #eaf6f0;
	--ms-tint-deep: #cbe9db;
	--ms-tint-ink: #00704a;
}

.ms-tint--homeopathic {
	--ms-tint: #eef0fb;
	--ms-tint-deep: #d6daf5;
	--ms-tint-ink: #4f46e5;
}

.ms-tint--pain {
	--ms-tint: #ffefe8;
	--ms-tint-deep: #fbd8c9;
	--ms-tint-ink: #c2410c;
}

.ms-tint--vitamins {
	--ms-tint: #fff4dc;
	--ms-tint-deep: #f8e3b4;
	--ms-tint-ink: #a16207;
}

.ms-tint--diabetes {
	--ms-tint: #fde9ee;
	--ms-tint-deep: #f8ccd7;
	--ms-tint-ink: #be123c;
}

.ms-tint--heart {
	--ms-tint: #fdeaea;
	--ms-tint-deep: #f8cfcf;
	--ms-tint-ink: #b91c1c;
}

.ms-tint--skin {
	--ms-tint: #fbeee3;
	--ms-tint-deep: #f2d9c2;
	--ms-tint-ink: #b45309;
}

.ms-tint--respiratory {
	--ms-tint: #e4f2f8;
	--ms-tint-deep: #c3e2f0;
	--ms-tint-ink: #0369a1;
}

.ms-tint--general {
	--ms-tint: #ecf1f8;
	--ms-tint-deep: #d3dfef;
	--ms-tint-ink: #334155;
}

.ms-tint--products {
	--ms-tint: #f2eefb;
	--ms-tint-deep: #ddd4f3;
	--ms-tint-ink: #5b21b6;
}

.ms-tint--generic {
	--ms-tint: #f1f5f9;
	--ms-tint-deep: #e2e8f0;
	--ms-tint-ink: #475569;
}

/* Offers takes the coral of the price tag in its own drawing, so the chip, the
   page heading and the empty state read as the same shelf. Combos take the
   amber of the gift box. */
.ms-tint--offers {
	--ms-tint: #ffefe8;
	--ms-tint-deep: #fbd8c9;
	--ms-tint-ink: #c2410c;
}

.ms-tint--combo {
	--ms-tint: #fff3e6;
	--ms-tint-deep: #fbdcb9;
	--ms-tint-ink: #9a3412;
}

/*
 * The movement on the category drawings.
 *
 * Each drawing carries a class per moving part: `ms-bob` on the whole thing,
 * plus one more for the part that belongs to that category alone — a pestle
 * grinding, a drop falling, a heart beating. Only transform and opacity are
 * animated, so none of it can make the page lay itself out again.
 *
 * All of it starts paused. main.js adds `is-visible` once the drawing is on
 * screen, and that is what starts it; a drawing below the fold has no reason
 * to be running and nothing here moves at all with scripting off.
 *
 * The paused/running rules are deliberately written after the animations and
 * carry a class more than they do, because the `animation` shorthand resets
 * the play state it would otherwise have to fight.
 *
 * Only the large drawing moves. A 24px drawing that shifts about beside a word
 * saying the same thing is a distraction, not a decoration.
 */
.ms-cico--large .ms-bob {
	animation: ms-an-bob 3.2s ease-in-out infinite;
}

.ms-cico--large .ms-wob {
	animation: ms-an-wob 2.6s ease-in-out infinite;
}

.ms-cico--large .ms-sway {
	animation: ms-an-sway 3s ease-in-out infinite;
}

.ms-cico--large .ms-grind {
	animation: ms-an-grind 2.4s ease-in-out infinite;
}

.ms-cico--large .ms-pulse {
	animation: ms-an-pulse 2.2s ease-in-out infinite;
}

.ms-cico--large .ms-beat {
	animation: ms-an-beat 1.2s ease-in-out infinite;
}

.ms-cico--large .ms-squish {
	animation: ms-an-squish 2.4s ease-in-out infinite;
}

.ms-cico--large .ms-drop {
	animation: ms-an-drop 2.6s ease-in-out infinite;
}

.ms-cico--large .ms-drip {
	animation: ms-an-drip 2.6s ease-in infinite;
}

.ms-cico--large .ms-p1 {
	animation: ms-an-hop 2.4s ease-in-out infinite;
}

.ms-cico--large .ms-p2 {
	animation: ms-an-hop 2.4s .5s ease-in-out infinite;
}

.ms-cico--large .ms-p3 {
	animation: ms-an-hop 2.4s 1s ease-in-out infinite;
}

/* The sparkle turns about its own middle rather than the drawing's. */
.ms-cico--large .ms-twk {
	animation: ms-an-twk 2s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

/* The price tag turns on the string it hangs from — the origin is set on the
   element itself, at the point the string meets the tag — and the gift box
   hops. */
.ms-cico--large .ms-swing {
	animation: ms-an-swing 3.4s ease-in-out infinite;
}

.ms-cico--large .ms-bounce {
	animation: ms-an-hop 2.4s ease-in-out infinite;
}

.ms-cico--large [class^="ms-"] {
	animation-play-state: paused;
}

.ms-cico--large.is-visible [class^="ms-"] {
	animation-play-state: running;
}

@keyframes ms-an-bob {
	50% {
		transform: translateY(-3px);
	}
}

@keyframes ms-an-wob {
	50% {
		transform: rotate(5deg);
	}
}

@keyframes ms-an-sway {
	50% {
		transform: rotate(5deg);
	}
}

@keyframes ms-an-grind {
	0%,
	100% {
		transform: rotate(-5deg);
	}

	50% {
		transform: rotate(7deg);
	}
}

@keyframes ms-an-pulse {
	50% {
		transform: scale(1.1);
	}
}

@keyframes ms-an-beat {
	0%,
	100% {
		transform: scale(1);
	}

	30% {
		transform: scale(1.09);
	}

	55% {
		transform: scale(.98);
	}
}

@keyframes ms-an-squish {
	50% {
		transform: scale(1.05, .95);
	}
}

@keyframes ms-an-drop {
	50% {
		transform: translateY(4px);
	}
}

@keyframes ms-an-drip {
	0% {
		transform: translateY(-2px);
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	70% {
		transform: translateY(46px);
		opacity: 1;
	}

	100% {
		transform: translateY(52px);
		opacity: 0;
	}
}

@keyframes ms-an-hop {
	50% {
		transform: translateY(-4px);
	}
}

@keyframes ms-an-twk {
	50% {
		transform: scale(1.5) rotate(20deg);
		opacity: .6;
	}
}

/* A gentle turn either side of straight down, so the tag reads as hanging and
   swinging rather than spinning. */
@keyframes ms-an-swing {
	0%,
	100% {
		transform: rotate(-6deg);
	}

	50% {
		transform: rotate(6deg);
	}
}

/* One bounce on the drawing when a chip is tapped. Played by main.js. */
@keyframes ms-an-pop {
	40% {
		transform: scale(1.2) rotate(-6deg);
	}
}

/*
 * One row of compact chips. On a phone the row is wider than the screen. It
 * swipes, and it also drifts slowly sideways on its own so that a visitor can
 * see there is more of it than fits; main.js stops the drift for a touch, a
 * hover or a keyboard focus, and never starts it under reduced motion.
 *
 * The fade at each edge is what stops a chip that is half in and half out from
 * looking chopped off. The row keeps 5px of padding and takes it straight back
 * with a matching negative margin, so the first chip still lines up with the
 * page margin and the focus ring on it is not clipped by the row's own
 * overflow. Both go once all four fit.
 */
.ms-cats-row {
	--ms-fade: 18px;

	display: flex;
	gap: 8px;
	margin: 0 -5px;
	padding: 6px 5px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ms-fade), #000 calc(100% - var(--ms-fade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--ms-fade), #000 calc(100% - var(--ms-fade)), transparent);
}

.ms-cats-row::-webkit-scrollbar {
	display: none;
}

.ms-cats-row__item {
	display: flex;
	flex: none;
}

/*
 * 152px is measured, not chosen. Beside a 46px drawing it leaves 89px for the
 * name, and "Homeopathic" — the longest word of the four — takes 84px at
 * 12.5px bold. Narrower than that and the name breaks mid-word.
 */
.ms-catcard {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	width: 152px;
	min-height: 58px;
	padding: 10px 53px 10px 8px;
	background: var(--ms-tint);
	border: 1px solid var(--ms-tint-deep);
	border-radius: 14px;
	color: var(--ms-text);
	text-decoration: none;
	transition: transform var(--ms-speed) var(--ms-ease),
		box-shadow var(--ms-speed) var(--ms-ease),
		border-color var(--ms-speed) var(--ms-ease);
}

/*
 * The lift is for a mouse only. On a touchscreen a :hover rule sticks to the
 * last chip tapped, which reads as "this one is selected" when it is not.
 * A press still answers back, and :active cannot outlive the tap.
 */
@media (hover: hover) and (pointer: fine) {
	.ms-catcard:hover {
		transform: translateY(-2px);
		border-color: var(--ms-primary);
		box-shadow: var(--ms-shadow);
	}
}

.ms-catcard:active {
	transform: scale(.98);
}

/* The row clips its overflow, so the ring is offset by 1px and the row keeps
   enough padding on every side to show it whole. */
.ms-catcard:focus-visible {
	outline: 3px solid var(--ms-primary);
	outline-offset: 1px;
}

.ms-catcard__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: break-word;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

/* The drawing sits in the bottom-right corner, clear of the name's column. */
.ms-catcard__art {
	position: absolute;
	right: 4px;
	bottom: 4px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
}

.ms-catcard__art .ms-cico--large {
	width: 46px;
	max-width: 46px;
	height: 46px;
}

/* The owner's own photo, in the same corner: same size, softly squared off. */
.ms-catcard__art .ms-cico--photo {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	object-fit: cover;
}

/*
 * A tap answers back on the drawing. main.js adds the class as the finger goes
 * down and takes it off again straight away, so it can play more than once;
 * the link itself is followed the moment the browser would have followed it
 * anyway, with nothing waiting on the animation.
 */
.ms-catcard.is-pop .ms-catcard__art {
	animation: ms-an-pop .5s ease;
}

@media (min-width: 640px) {
	.ms-cats-row {
		margin-inline: 0;
		padding: 0;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ms-cats-row__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.ms-catcard {
		width: auto;
	}
}

/* -------------------------------------------------------------------------
   11e. Trust strip
   ---------------------------------------------------------------------- */

.ms-trust__list {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-trust__card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	height: 100%;
	padding: 16px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-lg);
	box-shadow: var(--ms-shadow-sm);
	color: inherit;
	text-decoration: none;
}

a.ms-trust__card:hover {
	border-color: var(--ms-primary);
}

.ms-trust__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ms-primary-soft);
	color: var(--ms-primary);
}

.ms-trust__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ms-trust__title {
	font-size: .94rem;
	font-weight: 700;
}

.ms-trust__text {
	font-size: .84rem;
	line-height: 1.5;
	color: var(--ms-muted);
}

@media (min-width: 640px) {
	.ms-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.ms-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
   11f. Prescription banner
   ---------------------------------------------------------------------- */

.ms-rxband__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 20px;
	background: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-primary-dark) 100%);
	border-radius: var(--ms-r-lg);
	box-shadow: var(--ms-shadow);
	color: #fff;
}

.ms-rxband__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
}

.ms-rxband__title {
	margin: 0 0 4px;
	font-size: 1.15rem;
	color: #fff;
}

.ms-rxband__text {
	margin: 0;
	font-size: .9rem;
	line-height: 1.55;
	opacity: .95;
}

/* The button sits on the blue card, so it inverts to white. */
.ms-rxband__cta {
	background: #fff;
	color: var(--ms-primary-dark);
}

.ms-rxband__cta:hover {
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
}

@media (min-width: 760px) {
	.ms-rxband__card {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		padding: 26px 28px;
	}

	.ms-rxband__body {
		flex: 1 1 auto;
	}

	.ms-rxband__cta {
		flex: none;
	}
}

/* =========================================================================
   12. Footer
   ====================================================================== */

.ms-footer {
	margin-top: 40px;
	padding-top: 32px;
	background: var(--ms-bg-soft);
	border-top: 1px solid var(--ms-border);
}

.ms-footer__grid {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
	padding-bottom: 28px;
}

.ms-footer__logo {
	margin: 0 0 12px;
	line-height: 0;
}

.ms-footer__tag {
	margin: 0 0 1em;
	color: var(--ms-muted);
	font-size: .9rem;
}

.ms-footer__list {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.ms-footer__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--ms-muted);
	font-size: .9rem;
}

.ms-footer__list .ms-i {
	margin-top: 3px;
	color: var(--ms-primary);
}

.ms-footer__head {
	margin: 0 0 .7em;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ms-muted);
}

.ms-footer__links {
	margin: 0 0 1.2em;
	padding: 0;
	list-style: none;
}

.ms-footer__links li {
	margin-bottom: 2px;
}

.ms-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--ms-text);
	font-size: .92rem;
}

.ms-footer__links a:hover {
	color: var(--ms-primary);
}

.ms-footer__links--fees li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
	color: var(--ms-muted);
	font-size: .92rem;
}

.ms-footer__links--fees b {
	color: var(--ms-text);
}

.ms-footer__social {
	display: flex;
	gap: 8px;
	margin-bottom: 1.2em;
}

.ms-footer__note {
	margin: 0 0 1em;
	color: var(--ms-muted);
	font-size: .9rem;
}

.ms-footer__license {
	margin: 0;
	color: var(--ms-muted);
	font-size: .85rem;
}

.ms-footer__bottom {
	border-top: 1px solid var(--ms-border);
	padding-block: 18px;
}

.ms-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.ms-footer__legal,
.ms-footer__copy {
	margin: 0;
	color: var(--ms-muted);
	font-size: .82rem;
}

/* =========================================================================
   13. Mobile bottom tab bar
   ====================================================================== */

.ms-tabbar {
	display: none;
}

.ms-js .ms-tabbar {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 4px;
	padding: 6px;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: saturate(180%) blur(12px);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	box-shadow: var(--ms-shadow-lg);
}

/*
 * The bar floats 10px above the bottom edge and is 58px tall, so it claims
 * the last ~68px of the viewport. The copyright line is the last thing in the
 * document, so without this padding the bar sits on top of it once the page is
 * scrolled to the end. Reset at 900px, where the bar is hidden.
 */
.ms-js .ms-footer {
	padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

.ms-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--ms-tap);
	padding: 0 14px;
	border-radius: var(--ms-r-pill);
	color: var(--ms-muted);
	font-size: .85rem;
	font-weight: 600;
}

.ms-tab__icon {
	position: relative;
	display: inline-flex;
}

.ms-tab.is-active {
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
	padding-inline: 16px;
}

.ms-tab__label {
	white-space: nowrap;
}

/* Keep content clear of the fixed bar. */
.ms-js .ms-main {
	padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* =========================================================================
   14. Floating chat
   ====================================================================== */

.ms-chat {
	position: fixed;
	right: 16px;
	bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	z-index: 130;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.ms-chat__menu {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.ms-chat__menu[hidden] {
	display: none;
}

.ms-chat__opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ms-tap);
	padding: 6px 8px 6px 16px;
	background: #fff;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	box-shadow: var(--ms-shadow);
	color: var(--ms-text);
	font-size: .88rem;
	font-weight: 600;
	animation: ms-chat-in .18s var(--ms-ease) both;
}

.ms-chat__opt-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
}

.ms-chat__opt--wa .ms-chat__opt-icon {
	background: #e7f9ee;
	color: #128c3e;
}

@keyframes ms-chat-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.ms-chat__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 50%;
	background: var(--ms-primary);
	color: #fff;
	box-shadow: var(--ms-shadow-lg);
	cursor: pointer;
	transition: background var(--ms-speed) var(--ms-ease),
		transform var(--ms-speed) var(--ms-ease);
}

.ms-chat__btn:hover {
	background: var(--ms-primary-dark);
}

.ms-chat__btn-close {
	display: none;
}

.ms-chat.is-open .ms-chat__btn-open {
	display: none;
}

.ms-chat.is-open .ms-chat__btn-close {
	display: inline-flex;
}

.ms-chat.is-open .ms-chat__btn {
	transform: rotate(90deg);
}

/* =========================================================================
   15. Inner pages
   ====================================================================== */

.ms-main {
	min-height: 40vh;
}

.ms-page {
	padding-block: 28px 40px;
}

.ms-page__head {
	margin-bottom: 20px;
}

.ms-page__title {
	margin: 0;
	font-size: clamp(1.4rem, 4.6vw, 2rem);
}

.ms-page__query {
	color: var(--ms-muted);
}

.ms-page__desc {
	color: var(--ms-muted);
}

.ms-entry__body > *:first-child {
	margin-top: 0;
}

.ms-entry img {
	border-radius: var(--ms-r);
}

.ms-empty {
	padding: 40px 20px;
	text-align: center;
	background: var(--ms-bg-soft);
	border: 1px dashed var(--ms-border);
	border-radius: var(--ms-r-lg);
}

.ms-posts {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

.ms-post__thumb img {
	width: 100%;
	border-radius: var(--ms-r);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ms-post__title {
	font-size: 1.1rem;
}

.ms-page--404 {
	text-align: center;
	padding-block: 48px 64px;
}

.ms-404__code {
	margin: 0;
	font-size: clamp(3rem, 16vw, 6rem);
	font-weight: 700;
	line-height: 1;
	color: var(--ms-primary-soft);
}

.ms-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 28px;
}

.ms-404__search {
	max-width: 460px;
	margin-inline: auto;
}

/* WordPress search form */
.search-form {
	display: flex;
	gap: 8px;
}

/*
 * WordPress wraps the field in a <label>, so the label is the flex item, not
 * the input. Without this the label keeps the input's intrinsic width, the
 * pair pushes the submit button off the right edge, and a 320px phone gets a
 * horizontal scrollbar.
 */
.search-form label {
	flex: 1 1 auto;
	min-width: 0;
}

.search-form .search-field {
	width: 100%;
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--ms-tap);
	padding: 0 16px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	background: var(--ms-bg-soft);
	font: inherit;
}

.search-form .search-submit {
	min-height: var(--ms-tap);
	padding: 0 20px;
	border: 0;
	border-radius: var(--ms-r-pill);
	background: var(--ms-primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

/* =========================================================================
   16. WooCommerce baseline
   Only enough to sit inside the theme chrome. Phase E styles the product
   card, archives, cart, checkout and account pages in full.
   ====================================================================== */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	padding: 14px 18px;
	border-radius: var(--ms-r);
	border-top: 0;
	background: var(--ms-primary-soft);
	color: var(--ms-text);
	list-style: none;
}

/*
 * The three notices are told apart by their wording, not by their colour
 * alone, so the tint is a hint rather than the message. Success stays on the
 * brand green; an informational notice — the coupon line on the checkout, a
 * "no products found" — takes the secondary blue, so green keeps meaning
 * "this went well".
 */
.woocommerce .woocommerce-info {
	background: var(--ms-secondary-soft);
}

.woocommerce .woocommerce-error {
	background: #fef2f2;
}

/*
 * WooCommerce prints a small decorative glyph in the left gutter of a notice,
 * and positions it for its own 3.5em left padding. These notices pad 18px
 * instead, so the glyph was drawn on top of the first word — on the checkout
 * it sat across the "H" of "Have a coupon?". The notice reads fine without it:
 * the message, not the glyph, carries the meaning, and colour is not the only
 * thing telling the three kinds apart.
 */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	display: none;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	min-height: var(--ms-tap);
	padding: 10px 20px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-primary);
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--ms-primary-dark);
	color: #fff;
}

/*
 * The product grids (shop, category, search, related, and the home page rails)
 * are CSS grids that the theme controls. WooCommerce's own stylesheets also
 * lay out `ul.products li.product`, and one of their rules is more specific
 * than a plain `.woocommerce ul.products li.product`:
 *
 *   .woocommerce ul.products[class*="columns-"] li.product { width: 48% }
 *
 * That attribute selector is one class heavier than ours, so it wins on
 * specificity no matter which stylesheet loads last — the cards end up half
 * the width of their cell with WooCommerce's float margins underneath. The
 * `[class*="columns-"]` selectors below match that specificity exactly and
 * come later in the cascade, so the grid wins. `float` and `clear` no longer
 * apply to a grid item anyway, but they are reset so the rule reads honestly
 * if the grid is ever removed.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
}

.woocommerce ul.products {
	display: grid;
	align-items: stretch;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 16px;
}

/* -------------------------------------------------------------------------
   16b. Product card (woocommerce/content-product.php)
   ---------------------------------------------------------------------- */

.ms-card {
	display: flex;
	flex-direction: column;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-lg);
	box-shadow: var(--ms-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--ms-speed) var(--ms-ease), transform var(--ms-speed) var(--ms-ease);
}

.ms-card:hover {
	box-shadow: var(--ms-shadow);
	transform: translateY(-2px);
}

.ms-card__media {
	position: relative;
	background: var(--ms-bg-soft);
}

/* Square box, so every card in a row is the same height whatever the photo's
   own proportions are. The image is fitted inside rather than cropped, which
   also lets the SVG placeholder fill the box at any card width. */
.ms-card__photo {
	display: block;
	aspect-ratio: 1 / 1;
	padding: 8px;
}

.ms-card__img,
.ms-card__photo .ms-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Badges stack down the left, leaving the right free for the heart. The
   width stops at the heart's column so a long badge ("Sale", "Save ৳120") can
   never grow under it, which is what made the two touch on a narrow card. */
.ms-card__badges {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	max-width: calc(100% - 70px);
}

.ms-card__rx,
.ms-card__sale,
.ms-card__combo,
.ms-card__offer,
.ms-card__ended,
.ms-card__save {
	padding: 3px 9px;
	border-radius: var(--ms-r-pill);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.4;
}

.ms-card__rx {
	background: var(--ms-amber-soft);
	color: #92400e;
}

.ms-card__sale {
	background: var(--ms-red);
	color: #fff;
	text-transform: uppercase;
}

/* A combo carries the gift box beside the word, so the badge stays short even
   beside "Save ৳...". The drawing is trimmed from the 24px a mini gets: at that
   size it stands taller than the line it sits on. */
.ms-card__combo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-left: 5px;
	background: #ffe8d6;
	border: 1px solid #fdba8c;
	color: #9a3412;
	text-transform: uppercase;
}

.ms-card__combo .ms-cico {
	width: 15px;
	height: 15px;
}

/* A product in Offers that is not a combo, or one that is simply on sale. */
.ms-card__offer {
	background: #ffefe8;
	border: 1px solid #fbd8c9;
	color: #c2410c;
	text-transform: uppercase;
}

/* An offer that has run out. Grey on purpose: it is not a call to buy. */
.ms-card__ended {
	background: var(--ms-border);
	color: #475569;
}

.ms-card__save {
	background: var(--ms-green-soft);
	border: 1px solid #bbf7d0;
	color: #166534;
}

/* The same badges on the product page, where they sit above the title rather
   than over a photo. The wording and the colours are the card's, so a product
   says the same thing in both places. */
.ms-prodbadges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
}

.ms-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: var(--ms-r-pill);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
	text-transform: uppercase;
}

.ms-badge .ms-cico {
	width: 17px;
	height: 17px;
}

.ms-badge--combo {
	background: #ffe8d6;
	border: 1px solid #fdba8c;
	color: #9a3412;
}

.ms-badge--offer {
	background: #ffefe8;
	border: 1px solid #fbd8c9;
	color: #c2410c;
}

.ms-badge--ended {
	background: var(--ms-border);
	color: #475569;
}

.ms-badge--save {
	background: var(--ms-green-soft);
	border: 1px solid #bbf7d0;
	color: #166534;
}

/* The heart sits above the photo, opposite the sale badge. */
.ms-wish {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: var(--ms-tap);
	height: var(--ms-tap);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--ms-muted);
	box-shadow: var(--ms-shadow-sm);
	cursor: pointer;
	transition: color var(--ms-speed) var(--ms-ease), background-color var(--ms-speed) var(--ms-ease);
}

.ms-wish:hover {
	color: var(--ms-red);
	background: #fff;
}

.ms-wish[aria-pressed="true"] {
	color: var(--ms-red);
}

.ms-wish[aria-pressed="true"] .ms-i--heart {
	fill: currentColor;
}

.ms-wish--single {
	position: static;
	width: auto;
	height: var(--ms-tap);
	padding: 0 16px;
	gap: 8px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	background: var(--ms-card);
	font-weight: 600;
	color: var(--ms-text);
}

.ms-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 5px;
	padding: 10px 12px 12px;
}

/* One line, cut with an ellipsis when a long category name does not fit.
   It fills the body width (no `align-self`), because a shrink-to-fit box
   never overflows and so would never show the ellipsis. */
.ms-card__cat {
	display: flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	overflow: hidden;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ms-primary);
	text-decoration: none;
}

/* The type icon repeats what the label says, so it is sized down and left
   decorative; the ellipsis lives on the name, never on the icon. */
.ms-card__cat .ms-cico--mini {
	width: 16px;
	height: 16px;
}

.ms-card__catname {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Two lines of name, then an ellipsis. The floor keeps the price row of
   neighbouring cards on the same line even when one name is shorter.
 *
 * The `li.product` selectors are load-bearing. WooCommerce's own card
 * stylesheet carries this rule:
 *
 *   .woocommerce ul.products li.product ... h3 { padding: .5em 0; font-size: 1em }
 *
 * At three classes it outranks a plain `.ms-card__title`, so every name in a
 * WooCommerce grid was getting 8px of padding above and below — 16px that no
 * other part of the card has — and was rendered at 16px rather than the size
 * below. A two-line name then measured 65.6px against the 44.8px floor a
 * one-line name was held to, so the names, and the descriptions under them,
 * fell out of step from card to card. Matching that specificity and resetting
 * both properties restores the two-line box. The wishlist page is not inside
 * `ul.products`, so it goes on using the plain selector. */
.ms-card__title,
.woocommerce ul.products li.product .ms-card__title,
.woocommerce-page ul.products li.product .ms-card__title {
	display: -webkit-box;
	overflow: hidden;
	/* Exactly two lines, whatever the line-height ends up being. */
	min-height: calc(2 * 1.4em);
	margin: 0;
	padding: 0;
	font-size: .95rem;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.ms-card__title a {
	color: var(--ms-text);
	text-decoration: none;
}

.ms-card__title a:hover {
	color: var(--ms-primary);
}

/* Two lines of description, then an ellipsis. */
.ms-card__desc {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--ms-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Price on top, the two actions underneath, pinned to the bottom of every
   card. */
.ms-card__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
}

.ms-card__price {
	min-width: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ms-primary-dark);
}

.ms-card__price del {
	margin-right: 5px;
	font-size: .8rem;
	font-weight: 500;
	color: var(--ms-muted);
	text-decoration: line-through;
}

.ms-card__price ins {
	color: var(--ms-primary);
	font-weight: 700;
	text-decoration: none;
}

/* Two equal-width pills. They share a row while both labels fit; flex-wrap
   drops the second one onto its own full-width row when the card is too
   narrow for the pair, so neither label is ever clipped. Each item's
   min-content width (text + icon + padding) sets that threshold. */
.ms-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ms-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 40px;
	padding: 0 6px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--ms-primary);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ms-speed) var(--ms-ease),
		border-color var(--ms-speed) var(--ms-ease),
		color var(--ms-speed) var(--ms-ease);
}

.ms-card__btn:focus-visible {
	border-radius: 999px;
}

/* The add button fills its half of the row, and grows to the whole row when
   it wraps. The basis is a floor, not a cap: min-content still wins. */
.ms-card__actions .ms-card__btn {
	flex: 1 1 100px;
}

.ms-card__btn-ico {
	display: grid;
	flex: none;
	place-items: center;
	line-height: 0;
}

.ms-card__btn-ico .ms-i {
	width: 15px;
	height: 15px;
}

.ms-card__btn--cart {
	border-color: var(--ms-primary);
	background: #fff;
	color: var(--ms-primary);
}

.ms-card__btn--cart:hover {
	border-color: var(--ms-primary-dark);
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
}

.ms-card__btn--primary {
	border-color: var(--ms-primary);
	background: var(--ms-primary);
	color: #fff;
}

.ms-card__btn--primary:hover {
	border-color: var(--ms-primary-dark);
	background: var(--ms-primary-dark);
	color: #fff;
}

.ms-card__btn--disabled,
.ms-card__btn:disabled {
	border-color: var(--ms-border);
	background: var(--ms-bg-soft);
	color: var(--ms-muted);
	cursor: not-allowed;
}

.ms-card__btn:active {
	transform: translateY(1px);
}

/* Loading, then the short-lived "Added" confirmation. The spinner is drawn
   with a pseudo-element so the markup stays text-only. */
.ms-card__btn.is-loading {
	opacity: .75;
	pointer-events: none;
}

.ms-card__btn.is-loading .ms-card__btn-ico {
	display: none;
}

.ms-card__btn.is-loading::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ms-spin .65s linear infinite;
}

.ms-card__btn.is-added {
	border-color: var(--ms-green);
	background: var(--ms-green);
	color: #fff;
}

.ms-card__btn.is-added .ms-card__btn-ico {
	display: none;
}

@keyframes ms-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-card__btn.is-loading::before {
		animation-duration: 1.4s;
	}
}

/* The single product page's own Add to cart button picks up the same outline
   treatment while the Buy now button sits beside it. */
#ms-main div.product form.cart:has(.ms-single-buynow) .single_add_to_cart_button {
	min-height: 40px;
	padding: 0 12px;
	border: 1.5px solid var(--ms-primary);
	background: #fff;
	color: var(--ms-primary);
	font-size: 13px;
	font-weight: 600;
}

#ms-main div.product form.cart:has(.ms-single-buynow) .single_add_to_cart_button:hover {
	border-color: var(--ms-primary-dark);
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
}

#ms-main div.product form.cart:has(.ms-single-buynow) .single_add_to_cart_button.is-added {
	border-color: var(--ms-green);
	background: var(--ms-green);
	color: #fff;
}

#ms-main div.product form.cart .ms-single-buynow {
	flex: 1 1 120px;
	min-height: 40px;
	padding: 0 12px;
	font-size: 13px;
}

/* Smaller type on tablet, and the shorter mobile height on phones. */
@media (max-width: 1099px) {
	.ms-card__btn {
		font-size: 12.5px;
	}
}

@media (max-width: 639px) {
	.ms-card__btn {
		min-height: 38px;
		padding: 0 6px;
	}

	#ms-main div.product form.cart:has(.ms-single-buynow) .single_add_to_cart_button,
	#ms-main div.product form.cart .ms-single-buynow {
		min-height: 38px;
		font-size: 12.5px;
	}
}

/* Bangla labels are wider than their Latin counterparts at the same size. A
   slightly shorter size keeps the pair on one row on wide cards. */
body.ms-lang-bn .ms-card__btn {
	font-size: 12px;
}

/* WooCommerce drops a text "View cart" link in after the button. The card is
   icon-and-label only by design and the cart badge already reports the
   change, so the link is hidden rather than left to break the action row.
 *
 * The `.woocommerce` in the later selectors is load-bearing: WooCommerce ships
 * `.woocommerce a.added_to_cart { display: inline-block }`, which is one element
 * heavier than a bare `.ms-card__actions .added_to_cart` and so won. */
.ms-card__actions .added_to_cart,
.woocommerce .ms-card__actions .added_to_cart,
.woocommerce-page .ms-card__actions .added_to_cart,
.ms-card__foot .added_to_cart,
.woocommerce .ms-card__foot .added_to_cart,
.woocommerce-page .ms-card__foot .added_to_cart {
	display: none;
}

/* Bangla takes more leading than Latin at the same size, and the two-line
   floor is pinned to the line-height, so it has to move with it. The
   selectors mirror the block above, for the same specificity reason. */
body.ms-lang-bn .ms-card__title,
body.ms-lang-bn .woocommerce ul.products li.product .ms-card__title,
body.ms-lang-bn .woocommerce-page ul.products li.product .ms-card__title {
	line-height: 1.55;
	min-height: calc(2 * 1.55em);
}

/* -------------------------------------------------------------------------
   16c. Wishlist page (page-wishlist.php)
   The grid is declared here rather than inherited from
   `.woocommerce ul.products`, because a plain page does not carry the
   `woocommerce` body class.
   ---------------------------------------------------------------------- */

.ms-wishpage {
	margin-top: 24px;
}

.ms-wishpage__grid {
	display: grid;
	align-items: stretch;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-wishpage__grid[hidden] {
	display: none;
}

/* The grid is filled by script, so dim it while the request is in flight. */
.ms-wishpage__grid[aria-busy="true"] {
	opacity: .55;
}

.ms-wishpage .ms-empty__title {
	margin: 0 0 6px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ms-text);
}

.ms-wishpage .ms-empty__text {
	margin: 0;
	color: var(--ms-muted);
}

.ms-wishpage .ms-empty__cta {
	margin: 18px 0 0;
}

.ms-wishpage .ms-empty[hidden] {
	display: none;
}

@media (min-width: 640px) {
	.ms-wishpage__grid {
		gap: 18px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.ms-wishpage__grid {
		gap: 20px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ms-crumbs {
	padding-block: 12px;
	color: var(--ms-muted);
	font-size: .85rem;
}

.ms-crumb-sep {
	margin-inline: 6px;
}

/* -------------------------------------------------------------------------
   16d. Shop and category archives
   WooCommerce's own layout CSS is left in place; these rules only replace
   the parts that fight the theme (floats, the unlabelled title, the plain
   select) and dress the pieces it leaves bare.
   ---------------------------------------------------------------------- */

.ms-shop {
	display: flow-root;
	padding-block: 4px 40px;
}

/* "Shop by type" chip row above the grid on the shop page. Scrolls sideways
   on a phone rather than wrapping into two untidy rows. */
.ms-chips {
	margin-bottom: 18px;
}

.ms-chips__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0 0 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ms-chips__list::-webkit-scrollbar {
	display: none;
}

.ms-chips__list > li {
	flex: none;
}

.ms-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ms-tap);
	padding: 6px 14px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	color: var(--ms-text);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--ms-speed) var(--ms-ease),
		background-color var(--ms-speed) var(--ms-ease);
}

.ms-chip:hover {
	border-color: var(--ms-primary);
	background: var(--ms-primary-soft);
}

.ms-chip:focus-visible {
	outline: 3px solid var(--ms-primary);
	outline-offset: 2px;
}

/*
 * The current chip is marked in the markup with aria-current, and the colour
 * follows from that attribute — so a visitor who cannot see the colour still
 * gets the same information.
 */
.ms-chip[aria-current="page"] {
	background: var(--ms-primary);
	border-color: var(--ms-primary);
	color: #fff;
}

/* Category archive banner. */
.ms-cathero {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: var(--ms-tint);
	border-radius: 20px;
}

.ms-cathero__art {
	display: grid;
	place-items: center;
	flex: none;
	width: 96px;
}

.ms-cathero__body {
	min-width: 0;
}

.ms-cathero__title {
	margin: 0 0 6px;
	font-size: 1.45rem;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.ms-cathero__desc {
	margin: 0;
	max-width: 60ch;
	color: #475569;
	font-size: .92rem;
	line-height: 1.6;
}

.ms-cathero__kids {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

/* Empty state for a category that holds nothing yet. */
.ms-catempty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 32px 20px;
	background: var(--ms-tint);
	border-radius: 20px;
	text-align: center;
}

.ms-catempty__art {
	display: grid;
	place-items: center;
	width: 96px;
}

.ms-catempty__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.ms-catempty__text {
	margin: 0 0 6px;
	max-width: 46ch;
	color: #475569;
	font-size: .92rem;
	line-height: 1.6;
}

@media (max-width: 639px) {
	.ms-cathero {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}

	.ms-cathero__art {
		width: 84px;
	}
}

/*
 * The offers list: the Offers page and the Offers category archive.
 *
 * The heading reuses the category banner's shape and the chips reuse the shop's
 * chip row, so the page reads as part of the shop rather than as a page built
 * separately. Only the pieces that are new are written here.
 */
.ms-offerspage {
	display: flow-root;
	padding-bottom: 40px;
}

.ms-offers__head {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: var(--ms-tint);
	border-radius: 20px;
}

.ms-offers__art {
	display: grid;
	place-items: center;
	flex: none;
	width: 96px;
}

.ms-offers__intro {
	min-width: 0;
}

.ms-offers__title {
	margin: 0 0 6px;
	font-size: 1.45rem;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.ms-offers__lead {
	margin: 0;
	max-width: 60ch;
	color: #475569;
	font-size: .92rem;
	line-height: 1.6;
}

.ms-offers__chips {
	margin: 16px 0 18px;
}

@media (max-width: 639px) {
	.ms-offers__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}

	.ms-offers__art {
		width: 84px;
	}
}

/* WooCommerce's own "no products" box is replaced on category archives. */
#ms-main .woocommerce-info {
	background: var(--ms-bg-soft);
	border-top-color: var(--ms-border);
	color: var(--ms-text);
}

#ms-main .woocommerce-products-header {
	margin-bottom: 18px;
}

#ms-main .woocommerce-products-header__title {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.3;
	letter-spacing: -.01em;
}

#ms-main .term-description,
#ms-main .woocommerce-product-archive-description {
	margin-top: 8px;
	color: var(--ms-muted);
}

#ms-main .term-description p:last-child {
	margin-bottom: 0;
}

/* Result count and sorting. */
.ms-loopbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

#ms-main .woocommerce-result-count,
#ms-main .woocommerce-ordering {
	float: none;
	margin: 0;
}

#ms-main .woocommerce-result-count {
	color: var(--ms-muted);
	font-size: .9rem;
}

#ms-main .woocommerce-ordering select {
	min-height: var(--ms-tap);
	max-width: 100%;
	padding: 8px 38px 8px 14px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	background-color: var(--ms-card);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	color: var(--ms-text);
	font: inherit;
	font-size: .9rem;
	appearance: none;
}

#ms-main .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--ms-primary);
	outline-offset: 2px;
}

/* Pagination. */
#ms-main .woocommerce-pagination {
	margin-top: 28px;
}

#ms-main .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

#ms-main .woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
}

#ms-main .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ms-tap);
	min-height: var(--ms-tap);
	padding: 0 12px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	background: var(--ms-card);
	color: var(--ms-text);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}

#ms-main .woocommerce-pagination a.page-numbers:hover {
	border-color: var(--ms-primary);
	color: var(--ms-primary);
}

#ms-main .woocommerce-pagination .page-numbers.current {
	border-color: var(--ms-primary);
	background: var(--ms-primary);
	color: #fff;
}

/* "Nothing found" on an empty archive or search. */
#ms-main .woocommerce-info {
	border-top: 0;
}

/* -------------------------------------------------------------------------
   16e. Single product
   ---------------------------------------------------------------------- */

#ms-main div.product {
	margin: 0;
}

#ms-main div.product .woocommerce-product-gallery {
	float: none;
	width: auto;
	margin: 0;
}

#ms-main div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--ms-r-lg);
	overflow: hidden;
	background: var(--ms-bg-soft);
}

#ms-main div.product .woocommerce-product-gallery__image img {
	border-radius: var(--ms-r-lg);
	mix-blend-mode: multiply;
}

#ms-main div.product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
}

#ms-main div.product .flex-control-thumbs li {
	float: none;
	width: 64px;
	margin: 0;
}

#ms-main div.product .flex-control-thumbs img {
	border: 2px solid transparent;
	border-radius: var(--ms-r-sm);
}

#ms-main div.product .flex-control-thumbs img.flex-active,
#ms-main div.product .flex-control-thumbs img:hover {
	border-color: var(--ms-primary);
	opacity: 1;
}

/* Sale flash over the gallery. */
#ms-main div.product span.onsale {
	top: 12px;
	left: 12px;
	right: auto;
	min-width: 0;
	min-height: 0;
	padding: 5px 12px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-red);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.6;
}

#ms-main div.product .summary {
	float: none;
	width: auto;
	margin: 0;
}

#ms-main div.product .product_title {
	margin: 14px 0 10px;
	font-size: 1.4rem;
	line-height: 1.35;
}

#ms-main div.product p.price,
#ms-main div.product span.price {
	margin: 0 0 14px;
	color: var(--ms-primary-dark);
	font-size: 1.5rem;
	font-weight: 700;
}

#ms-main div.product p.price del {
	color: var(--ms-muted);
	font-size: .8em;
	font-weight: 400;
}

#ms-main div.product p.price ins {
	text-decoration: none;
}

#ms-main div.product .woocommerce-product-details__short-description {
	margin-bottom: 18px;
	color: var(--ms-text);
}

#ms-main div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Add to cart. */
#ms-main div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

#ms-main div.product form.cart .quantity {
	float: none;
	margin: 0;
}

#ms-main div.product form.cart .quantity input.qty {
	width: 84px;
	min-height: var(--ms-tap);
	padding: 8px 10px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	background: var(--ms-card);
	font: inherit;
	text-align: center;
}

#ms-main div.product form.cart button.button,
#ms-main div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: var(--ms-tap);
	padding: 12px 26px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-primary);
	font-size: 1rem;
	font-weight: 700;
}

#ms-main div.product form.cart button.button:hover {
	background: var(--ms-primary-dark);
}

#ms-main div.product form.cart button.button:disabled,
#ms-main div.product form.cart .single_add_to_cart_button.disabled {
	background: var(--ms-bg-soft);
	color: var(--ms-muted);
}

/* The wishlist heart beside add to cart. */
#ms-main div.product .ms-wish--single {
	position: static;
	width: var(--ms-tap);
	height: var(--ms-tap);
	flex: 0 0 auto;
}

#ms-main div.product .product_meta {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--ms-border);
	color: var(--ms-muted);
	font-size: .88rem;
}

#ms-main div.product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

#ms-main div.product .product_meta a {
	color: var(--ms-primary-dark);
}

/* The medicine-type icon repeats the one on the product card, beside the
   category line rather than replacing it. */
#ms-main div.product .product_meta > span.ms-postedin {
	display: flex;
	align-items: center;
	gap: 7px;
}

/* "What's in this combo" on the combo's own page. A quiet panel, so it reads as
   a breakdown of the price above it rather than as a second thing to buy. */
.ms-combo {
	margin: 0 0 20px;
	padding: 16px;
	background: var(--ms-bg-soft);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
}

.ms-combo__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 1.05rem;
	line-height: 1.35;
}

.ms-combo__art {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
}

.ms-combo__list {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.ms-combo__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--ms-border);
}

.ms-combo__item:first-child {
	border-top: 0;
}

.ms-combo__link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ms-text);
	font-weight: 600;
	text-decoration: none;
}

.ms-combo__link:hover .ms-combo__name {
	color: var(--ms-primary);
	text-decoration: underline;
}

.ms-combo__link:focus-visible {
	outline: 3px solid var(--ms-primary);
	outline-offset: 2px;
	border-radius: var(--ms-r-sm);
}

.ms-combo__thumb {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 2px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-sm);
}

.ms-combo__img,
.ms-combo__thumb .ms-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* A long product name is allowed to wrap rather than push the quantity and the
   price off the row. */
.ms-combo__name {
	min-width: 0;
	font-size: .92rem;
	overflow-wrap: anywhere;
}

.ms-combo__qty {
	flex: none;
	color: var(--ms-muted);
	font-size: .88rem;
}

.ms-combo__line {
	flex: none;
	min-width: 64px;
	color: var(--ms-text);
	font-size: .88rem;
	font-weight: 600;
	text-align: right;
}

.ms-combo__totals {
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--ms-border);
}

.ms-combo__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ms-combo__row dt {
	color: var(--ms-muted);
	font-size: .9rem;
}

.ms-combo__row dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}

.ms-combo__row--save dt,
.ms-combo__row--save dd {
	color: #166534;
}

.ms-combo__ends {
	margin: 12px 0 0;
	padding: 8px 10px;
	background: #ffefe8;
	border-radius: var(--ms-r-sm);
	color: #9a3412;
	font-size: .88rem;
	font-weight: 600;
}

.ms-combo__ends--over {
	background: var(--ms-border);
	color: #475569;
}

/* Shown in place of the add to cart button once the offer is over. */
.ms-combo__note {
	margin: 0 0 14px;
	padding: 10px 12px;
	background: var(--ms-border);
	border-radius: var(--ms-r-sm);
	color: #475569;
	font-size: .9rem;
}

/* Tabs. */
#ms-main div.product .woocommerce-tabs {
	clear: both;
	margin-top: 34px;
}

#ms-main div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
	border-bottom: 1px solid var(--ms-border);
}

#ms-main div.product .woocommerce-tabs ul.tabs::before,
#ms-main div.product .woocommerce-tabs ul.tabs li::before,
#ms-main div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

#ms-main div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

#ms-main div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 16px;
	border-bottom: 2px solid transparent;
	color: var(--ms-muted);
	font-weight: 600;
	text-decoration: none;
}

#ms-main div.product .woocommerce-tabs ul.tabs li.active a,
#ms-main div.product .woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var(--ms-primary);
	color: var(--ms-primary-dark);
}

#ms-main div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
}

#ms-main div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* Related and upsell products. */
#ms-main section.related,
#ms-main section.upsells {
	clear: both;
	margin-top: 38px;
}

#ms-main section.related > h2,
#ms-main section.upsells > h2 {
	margin: 0 0 18px;
	font-size: 1.2rem;
}

/* -------------------------------------------------------------------------
   16f. Prescription notice and confirmation
   ---------------------------------------------------------------------- */

/*
 * "Prescription required" is a warning, not a success, so this box wears the
 * amber the palette reserves for Rx — the same amber as the Rx badge on the
 * product card and the confirmation on the checkout. On the brand green it
 * would have read as "all good", which is the opposite of what it says.
 */
.ms-rxnotice {
	display: flex;
	gap: 12px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--ms-amber);
	border-radius: var(--ms-r);
	background: var(--ms-amber-soft);
}

.ms-rxnotice__icon {
	flex: 0 0 auto;
	color: #92400e;
}

.ms-rxnotice__title {
	display: block;
	margin-bottom: 4px;
	color: #92400e;
}

.ms-rxnotice__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
}

.ms-rxnotice__link {
	display: inline-block;
	margin-top: 8px;
	font-size: .9rem;
	font-weight: 600;
}

/* Checkout confirmation, shown only when the cart holds an Rx product. */
body.woocommerce-checkout #ms-main .ms-rxconfirm {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--ms-amber);
	border-radius: var(--ms-r);
	background: var(--ms-amber-soft);
	font-size: .92rem;
}

body.woocommerce-checkout #ms-main .ms-rxconfirm label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	line-height: 1.5;
	cursor: pointer;
}

body.woocommerce-checkout #ms-main .ms-rxconfirm input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--ms-primary);
}

body.woocommerce-checkout #ms-main .ms-rxconfirm .required {
	color: var(--ms-red);
}

/* -------------------------------------------------------------------------
   16g. Cart
   ---------------------------------------------------------------------- */

body.woocommerce-cart #ms-main table.shop_table {
	margin: 0 0 20px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--ms-card);
}

body.woocommerce-cart #ms-main table.shop_table th {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ms-border);
	background: var(--ms-bg-soft);
	color: var(--ms-muted);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

body.woocommerce-cart #ms-main table.shop_table td {
	padding: 14px;
	border-top: 1px solid var(--ms-border);
	vertical-align: middle;
}

body.woocommerce-cart #ms-main table.shop_table td.product-thumbnail img {
	width: 56px;
	height: 56px;
	border-radius: var(--ms-r-sm);
	object-fit: contain;
	background: var(--ms-bg-soft);
}

body.woocommerce-cart #ms-main table.shop_table td.product-name a {
	color: var(--ms-text);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-cart #ms-main table.shop_table td.product-name a:hover {
	color: var(--ms-primary-dark);
}

body.woocommerce-cart #ms-main a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-bg-soft);
	color: var(--ms-muted) !important;
	font-size: 1.3rem;
	line-height: 1;
	text-decoration: none;
}

body.woocommerce-cart #ms-main a.remove:hover {
	background: #fef2f2;
	color: var(--ms-red) !important;
}

body.woocommerce-cart #ms-main .quantity input.qty {
	width: 72px;
	min-height: var(--ms-tap);
	padding: 6px 8px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-sm);
	text-align: center;
}

/* Coupon row. */
body.woocommerce-cart #ms-main .actions {
	padding: 14px !important;
}

body.woocommerce-cart #ms-main .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	float: none;
}

body.woocommerce-cart #ms-main .coupon input.input-text {
	min-height: var(--ms-tap);
	padding: 8px 14px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	font: inherit;
}

body.woocommerce-cart #ms-main .actions > .button {
	float: none;
}

/* Totals block. */
body.woocommerce-cart #ms-main .cart-collaterals {
	display: flex;
	justify-content: flex-end;
}

body.woocommerce-cart #ms-main .cart_totals {
	float: none;
	width: 100%;
}

body.woocommerce-cart #ms-main .cart_totals > h2 {
	margin: 0 0 12px;
	font-size: 1.15rem;
}

body.woocommerce-cart #ms-main .cart_totals table.shop_table {
	margin-bottom: 16px;
}

body.woocommerce-cart #ms-main .cart_totals .order-total .amount {
	color: var(--ms-primary-dark);
	font-size: 1.15rem;
}

body.woocommerce-cart #ms-main .wc-proceed-to-checkout {
	padding: 0;
}

body.woocommerce-cart #ms-main .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	border-radius: var(--ms-r-pill);
	font-size: 1rem;
	font-weight: 700;
}

body.woocommerce-cart #ms-main .shipping-calculator-button {
	font-size: .9rem;
}

/* -------------------------------------------------------------------------
   16h. Checkout
   ---------------------------------------------------------------------- */

body.woocommerce-checkout #ms-main form.checkout {
	margin: 0;
}

body.woocommerce-checkout #ms-main form.checkout .col2-set {
	float: none;
	width: auto;
}

body.woocommerce-checkout #ms-main form.checkout .col2-set .col-1,
body.woocommerce-checkout #ms-main form.checkout .col2-set .col-2 {
	float: none;
	width: auto;
}

body.woocommerce-checkout #ms-main h3 {
	margin: 0 0 14px;
	font-size: 1.1rem;
}

body.woocommerce-checkout #ms-main .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout #ms-main .woocommerce-additional-fields__field-wrapper {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.woocommerce-checkout #ms-main .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout #ms-main .form-row-wide,
body.woocommerce-checkout #ms-main .form-row#billing_address_1_field,
body.woocommerce-checkout #ms-main .form-row#billing_address_2_field,
body.woocommerce-checkout #ms-main .form-row#billing_email_field,
body.woocommerce-checkout #ms-main .form-row#order_comments_field {
	grid-column: 1 / -1;
}

body.woocommerce-checkout #ms-main .form-row label {
	display: block;
	margin-bottom: 5px;
	font-size: .9rem;
	font-weight: 600;
}

body.woocommerce-checkout #ms-main .form-row .required {
	color: var(--ms-red);
	text-decoration: none;
}

body.woocommerce-checkout #ms-main .form-row input.input-text,
body.woocommerce-checkout #ms-main .form-row textarea,
body.woocommerce-checkout #ms-main .form-row select,
body.woocommerce-checkout #ms-main .select2-selection--single {
	min-height: var(--ms-tap);
	padding: 10px 14px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-sm);
	background: var(--ms-card);
	color: var(--ms-text);
	font: inherit;
	font-size: .95rem;
}

body.woocommerce-checkout #ms-main .form-row textarea {
	min-height: 96px;
}

body.woocommerce-checkout #ms-main .form-row input.input-text:focus,
body.woocommerce-checkout #ms-main .form-row textarea:focus,
body.woocommerce-checkout #ms-main .form-row select:focus {
	border-color: var(--ms-primary);
	outline: 2px solid var(--ms-primary-tint);
	outline-offset: 0;
}

body.woocommerce-checkout #ms-main .woocommerce-account-fields {
	margin-top: 14px;
}

/* One delivery address.
   The order ships to the address above, so the "Ship to a different address?"
   toggle is not shown. Its fieldset stays in the markup — WooCommerce copies
   the billing values over those field definitions to fill the order's shipping
   address — and hiding the whole block also keeps a second, differently
   trimmed address form from appearing behind the checkbox. */
body.woocommerce-checkout #ms-main .woocommerce-shipping-fields {
	display: none;
}

/* Order review. */
body.woocommerce-checkout #ms-main #order_review_heading {
	margin-top: 26px;
}

body.woocommerce-checkout #ms-main #order_review {
	padding: 18px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	background: var(--ms-bg-soft);
}

body.woocommerce-checkout #ms-main #order_review table.shop_table {
	margin: 0 0 14px;
	border: 0;
	background: transparent;
}

body.woocommerce-checkout #ms-main #order_review table.shop_table th,
body.woocommerce-checkout #ms-main #order_review table.shop_table td {
	padding: 9px 0;
	border-top: 1px solid var(--ms-border);
	background: transparent;
}

body.woocommerce-checkout #ms-main #order_review table.shop_table thead th {
	border-top: 0;
	color: var(--ms-muted);
	font-size: .82rem;
	text-transform: uppercase;
}

body.woocommerce-checkout #ms-main #order_review .order-total .amount {
	color: var(--ms-primary-dark);
	font-size: 1.15rem;
}

body.woocommerce-checkout #ms-main #payment {
	border-radius: var(--ms-r);
	background: transparent;
}

body.woocommerce-checkout #ms-main #payment ul.payment_methods {
	padding: 0 0 12px;
	border-bottom: 1px solid var(--ms-border);
	list-style: none;
}

body.woocommerce-checkout #ms-main #payment ul.payment_methods li {
	margin-bottom: 10px;
}

body.woocommerce-checkout #ms-main #payment ul.payment_methods label {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-weight: 600;
	cursor: pointer;
}

body.woocommerce-checkout #ms-main #payment div.form-row {
	padding: 0;
}

body.woocommerce-checkout #ms-main #payment #place_order {
	width: 100%;
	min-height: 52px;
	border-radius: var(--ms-r-pill);
	font-size: 1rem;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   16i. My Account and order received
   ---------------------------------------------------------------------- */

body.woocommerce-account #ms-main .woocommerce {
	display: block;
}

body.woocommerce-account #ms-main .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	margin-bottom: 22px;
}

body.woocommerce-account #ms-main .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account #ms-main .woocommerce-MyAccount-navigation li {
	margin: 0 0 6px;
}

body.woocommerce-account #ms-main .woocommerce-MyAccount-navigation a {
	display: block;
	min-height: var(--ms-tap);
	padding: 12px 16px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-sm);
	background: var(--ms-card);
	color: var(--ms-text);
	text-decoration: none;
}

body.woocommerce-account #ms-main .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account #ms-main .woocommerce-MyAccount-navigation a:hover {
	border-color: var(--ms-primary);
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
}

body.woocommerce-account #ms-main .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

body.woocommerce-account #ms-main form.login,
body.woocommerce-account #ms-main form.register,
body.woocommerce-account #ms-main form.lost_reset_password,
body.woocommerce-account #ms-main .woocommerce-ResetPassword {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	background: var(--ms-card);
}

body.woocommerce-account #ms-main form.login input.input-text,
body.woocommerce-account #ms-main form.register input.input-text,
body.woocommerce-account #ms-main form.lost_reset_password input.input-text {
	width: 100%;
	min-height: var(--ms-tap);
	padding: 10px 14px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-sm);
	font: inherit;
}

body.woocommerce-account #ms-main form.login label,
body.woocommerce-account #ms-main form.register label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}

/* Orders and addresses tables follow the cart table's shape. */
body.woocommerce-account #ms-main table.shop_table,
body.woocommerce-order #ms-main table.shop_table {
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--ms-card);
}

body.woocommerce-account #ms-main table.shop_table th,
body.woocommerce-account #ms-main table.shop_table td,
body.woocommerce-order #ms-main table.shop_table th,
body.woocommerce-order #ms-main table.shop_table td {
	padding: 12px 14px;
	border-top: 1px solid var(--ms-border);
}

body.woocommerce-account #ms-main table.shop_table thead th,
body.woocommerce-order #ms-main table.shop_table thead th {
	border-top: 0;
	background: var(--ms-bg-soft);
	color: var(--ms-muted);
	font-size: .82rem;
	text-transform: uppercase;
}

/* Order received. */
body.woocommerce-order #ms-main .woocommerce-thankyou-order-received {
	margin-bottom: 20px;
	padding: 16px 18px;
	border-radius: var(--ms-r);
	background: var(--ms-green-soft);
	color: var(--ms-text);
	font-weight: 600;
}

body.woocommerce-order #ms-main ul.woocommerce-order-overview {
	display: grid;
	gap: 12px;
	margin: 0 0 26px;
	padding: 0;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	background: var(--ms-card);
	list-style: none;
}

body.woocommerce-order #ms-main ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-top: 1px solid var(--ms-border);
	color: var(--ms-muted);
	font-size: .85rem;
	text-transform: none;
}

body.woocommerce-order #ms-main ul.woocommerce-order-overview li:first-child {
	border-top: 0;
}

body.woocommerce-order #ms-main ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 2px;
	color: var(--ms-text);
	font-size: 1rem;
}

@media (min-width: 640px) {
	body.woocommerce-order #ms-main ul.woocommerce-order-overview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.woocommerce-order #ms-main ul.woocommerce-order-overview li {
		border-top: 0;
		border-left: 1px solid var(--ms-border);
	}

	body.woocommerce-order #ms-main ul.woocommerce-order-overview li:nth-child(odd) {
		border-left: 0;
	}
}

@media (min-width: 900px) {
	body.woocommerce-account #ms-main .woocommerce {
		display: grid;
		gap: 30px;
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}

	body.woocommerce-account #ms-main .woocommerce-MyAccount-navigation {
		margin-bottom: 0;
	}

	/* Two columns: gallery and summary, then full-width tabs and related. */
	#ms-main div.product {
		display: grid;
		gap: 34px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	#ms-main div.product .woocommerce-tabs,
	#ms-main div.product section.related,
	#ms-main div.product section.upsells,
	#ms-main div.product .woocommerce-product-gallery ~ .woocommerce-tabs,
	#ms-main div.product > .clear {
		grid-column: 1 / -1;
	}

	#ms-main div.product .woocommerce-tabs {
		margin-top: 8px;
	}

	#ms-main div.product .product_title {
		margin-top: 0;
	}

	/* Cart totals sit beside the table. */
	body.woocommerce-cart #ms-main .cart-collaterals {
		display: block;
	}

	body.woocommerce-cart #ms-main .cart_totals {
		float: right;
		width: 46%;
	}

	/* Checkout: details on the left, the order on the right. */
	body.woocommerce-checkout #ms-main form.checkout {
		display: grid;
		gap: 22px 34px;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start;
	}

	body.woocommerce-checkout #ms-main #customer_details {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	body.woocommerce-checkout #ms-main #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	body.woocommerce-checkout #ms-main #order_review {
		grid-column: 2;
		grid-row: 2 / span 2;
	}
}


/* =========================================================================
   16b. Page blocks written into page content

   The About and Contact pages carry their own markup, the way any WordPress
   page does. These rules give that markup the same look as the rest of the
   theme. Class names are the ones already used in the page content, so an
   existing page does not have to be rewritten.
   ====================================================================== */

/* --- About: "How it works" steps ------------------------------------- */

.ms-steps {
	display: grid;
	gap: 12px;
	margin: 0 0 8px;
	grid-template-columns: 1fr;
}

.ms-step {
	padding: 16px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	box-shadow: var(--ms-shadow-sm);
}

.ms-step b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 8px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-primary-soft);
	color: var(--ms-primary-dark);
	font-size: .9rem;
}

.ms-step h3 {
	margin: 0 0 4px;
	font-size: 1rem;
}

.ms-step p {
	margin: 0;
	color: var(--ms-muted);
	font-size: .92rem;
}

/* --- About: delivery charges ----------------------------------------- */

.ms-fee {
	margin: 0 0 8px;
	padding: 4px 16px;
	background: var(--ms-primary-soft);
	border-radius: var(--ms-r);
}

.ms-fee > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ms-primary-tint);
}

.ms-fee > div:last-of-type {
	border-bottom: 0;
}

.ms-fee b {
	color: var(--ms-primary-dark);
}

.ms-fee small {
	display: block;
	padding-bottom: 12px;
	color: var(--ms-muted);
}

/* --- About: FAQ accordion -------------------------------------------- */

.ms-faq {
	margin: 0 0 8px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	overflow: hidden;
}

.ms-faq details {
	border-bottom: 1px solid var(--ms-border);
	background: var(--ms-card);
}

.ms-faq details:last-child {
	border-bottom: 0;
}

.ms-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--ms-tap);
	padding: 14px 16px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

/* The native triangle is replaced by a chevron that turns when the answer
   opens, so the state is not carried by colour alone. */
.ms-faq summary::-webkit-details-marker {
	display: none;
}

.ms-faq summary::after {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ms-muted);
	border-bottom: 2px solid var(--ms-muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
	content: "";
}

.ms-faq details[open] summary::after {
	transform: rotate(-135deg);
}

.ms-faq summary:hover {
	background: var(--ms-bg-soft);
}

.ms-faq details > p {
	margin: 0;
	padding: 0 16px 16px;
	color: var(--ms-muted);
}

/* --- Contact ---------------------------------------------------------- */

.ms-contact__lead {
	margin: 0 0 20px;
	color: var(--ms-muted);
}

.ms-contact {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

.ms-contact__card {
	padding: 18px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r);
	box-shadow: var(--ms-shadow-sm);
}

.ms-contact__card h2 {
	margin: 0 0 12px;
	font-size: 1.05rem;
}

.ms-contact__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-contact__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ms-border);
}

.ms-contact__list li:last-child {
	border-bottom: 0;
}

.ms-contact__list .ms-i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ms-primary);
}

.ms-contact__label {
	display: block;
	color: var(--ms-muted);
	font-size: .82rem;
}

.ms-contact__value {
	color: var(--ms-text);
}

/* An email address has no space in it, so without these two lines its width
   becomes the card's minimum width and pushes the page sideways on a phone. */
.ms-contact__list li > .ms-contact__label,
.ms-contact__list li > .ms-contact__value {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ms-contact__value a {
	color: var(--ms-secondary);
}

.ms-contact__value a:hover {
	color: var(--ms-secondary-dark);
}

.ms-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.ms-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.ms-contact__social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ms-tap);
	padding: 8px 14px;
	background: var(--ms-bg-soft);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-pill);
	color: var(--ms-text);
	font-size: .9rem;
}

.ms-contact__social a:hover {
	border-color: var(--ms-primary);
	color: var(--ms-primary-dark);
}

/* =========================================================================
   16c. Upload Prescription

   The page the customer lands on to send a prescription: the heading mark,
   the form, and the panel that replaces it once the file is in.
   ====================================================================== */

.ms-rxhead {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.ms-rxhead__mark {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.ms-rxhead .ms-page__desc {
	margin: 6px 0 0;
}

.ms-rxwrap {
	max-width: 640px;
}

.ms-rxform {
	padding: 20px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-lg);
	box-shadow: var(--ms-shadow-sm);
}

/* Off-screen, not `display: none`: a script has to be able to fill it in for
   the trap to work. */
.ms-rxform__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ms-rxform__errors {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #fef2f2;
	border: 1px solid var(--ms-red);
	border-radius: var(--ms-r);
}

.ms-rxform__errors-title {
	display: block;
	margin-bottom: 6px;
	color: #991b1b;
}

.ms-rxform__errors ul {
	margin: 0;
	padding-left: 20px;
	color: #991b1b;
}

.ms-rxform__group {
	margin: 0;
	padding: 0;
	border: 0;
}

.ms-rxform__legend {
	padding: 0;
	margin-bottom: 4px;
	font-weight: 700;
}

.ms-rxform__row {
	margin-bottom: 16px;
}

.ms-rxform__label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .95rem;
}

.ms-rxform__req {
	color: var(--ms-red);
}

.ms-rxform__input {
	width: 100%;
	min-height: var(--ms-tap);
	padding: 10px 14px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-r-sm);
	background: var(--ms-card);
	color: var(--ms-text);
	font: inherit;
	font-size: .95rem;
}

.ms-rxform__input--area {
	min-height: 96px;
	resize: vertical;
}

.ms-rxform__input:focus {
	border-color: var(--ms-primary);
	outline: 2px solid var(--ms-primary-tint);
	outline-offset: 0;
}

/* The file control cannot be restyled into the same box as the text inputs
   without JavaScript, so it keeps the browser's own button and only the
   surrounding box is themed. */
.ms-rxform__input--file {
	padding: 8px 10px;
	background: var(--ms-bg-soft);
}

.ms-rxform__input--file::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--ms-r-sm);
	background: var(--ms-primary);
	color: #fff;
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
}

.ms-rxform__hint {
	margin: 6px 0 0;
	color: var(--ms-muted);
	font-size: .85rem;
}

.ms-rxform__row--check {
	margin-top: 4px;
}

.ms-rxform__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .92rem;
}

.ms-rxform__check input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--ms-primary);
}

.ms-rxform__submit {
	margin: 18px 0 0;
}

.ms-rxform__button {
	width: 100%;
}

.ms-rxform__privacy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--ms-muted);
	font-size: .85rem;
}

.ms-rxform__privacy .ms-i {
	flex: 0 0 auto;
	margin-top: 1px;
}

/* --- Sent ------------------------------------------------------------- */

.ms-rxdone {
	padding: 32px 20px;
	text-align: center;
	background: var(--ms-primary-soft);
	border: 1px solid var(--ms-primary-tint);
	border-radius: var(--ms-r-lg);
}

.ms-rxdone__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 14px;
	border-radius: var(--ms-r-pill);
	background: var(--ms-card);
	color: var(--ms-primary);
}

.ms-rxdone__title {
	margin: 0 0 8px;
	font-size: clamp(1.15rem, 4vw, 1.4rem);
}

.ms-rxdone__text {
	margin: 0;
	color: var(--ms-muted);
}

.ms-rxdone__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 20px 0 0;
}


/* =========================================================================
   17. Responsive
   ====================================================================== */

@media (min-width: 640px) {
	:root {
		--ms-gutter: 20px;
	}

	.ms-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce ul.products {
		gap: 18px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ms-footer__bottom-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.ms-footer__legal {
		flex: 1 1 100%;
		order: 3;
	}

	/* The About steps and the Contact cards have room for more than one
	   column from here up. */
	.ms-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-contact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-rxhead__mark {
		width: 64px;
		height: 64px;
	}
}

@media (min-width: 900px) {
	:root {
		--ms-gutter: 24px;
	}

	/* Four steps read as one row here. They wrap to two columns before this,
	   so the row never gets so narrow that a step becomes a thin strip. */
	.ms-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ms-rxform {
		padding: 24px;
	}

	.ms-rxform__button {
		width: auto;
		min-width: 220px;
	}

	.ms-only-desktop {
		display: inline-flex;
	}

	.ms-burger,
	.ms-drawer,
	.ms-overlay,
	.ms-tabbar {
		display: none !important;
	}

	.ms-lang--header {
		display: inline-flex;
	}

	.ms-header__bar {
		min-height: 72px;
		gap: 20px;
	}

	.ms-brand {
		flex: none;
		text-align: left;
	}

	/* There is room for the logo to grow once the desktop bar is in place. */
	.ms-brand .ms-logo--header,
	.ms-brand .custom-logo {
		height: 46px;
	}

	.ms-nav {
		display: block;
		flex: 1 1 auto;
	}

	.ms-header__actions {
		gap: 10px;
	}

	/*
	 * The labelled prescription button is ~215px wide. Between the desktop
	 * breakpoint and 1200px there is not enough room for it alongside the
	 * brand, the six nav items and the other actions, so it shows its icon
	 * alone and the label comes back at 1200px.
	 */
	.ms-btn--rx span {
		display: none;
	}

	.ms-btn--rx {
		padding: 0;
		width: var(--ms-tap);
	}

	.ms-searchbar {
		padding-bottom: 18px;
	}

	/*
	 * The ratio is deliberately not set here. Whether a slide is 3:1 or 4:3
	 * is decided by ms-hero--wide at 760px, and a second copy of the rule at
	 * this breakpoint would fight it.
	 */
	.ms-hero__slide {
		border-radius: 28px;
	}

	.ms-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 32px;
	}

	.ms-posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.woocommerce ul.products {
		gap: 20px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* The tab bar and the chat button move out of the way. */
	.ms-js .ms-main {
		padding-bottom: 0;
	}

	.ms-js .ms-footer {
		padding-bottom: 0;
	}

	.ms-chat {
		bottom: 24px;
	}
}

/*
 * 900–1023px is the tightest the desktop header ever gets: at 900px the logo,
 * the six nav items (487px) and the actions (252px) are a tight fit inside an
 * 852px content box. Tightening the nav for this band only keeps the bar on
 * one line; the full spacing returns at 1024px, so nothing wider is affected.
 */
@media (min-width: 900px) and (max-width: 1023px) {
	.ms-header__bar {
		gap: 12px;
	}

	.ms-menu {
		gap: 0;
	}

	.ms-menu > li > a {
		padding: 0 8px;
		font-size: .86rem;
	}
}

@media (min-width: 1200px) {
	/* Room for the prescription button's label again. */
	.ms-btn--rx span {
		display: inline;
	}

	.ms-btn--rx {
		padding: 10px 20px;
		width: auto;
	}

	.ms-hero__body {
		padding-inline: 5%;
	}
}

/* =========================================================================
   18. Bengali-specific adjustments
   Bangla labels run longer than their English equivalents.
   ====================================================================== */

body.ms-lang-bn .ms-menu > li > a {
	font-size: .9rem;
	padding-inline: 10px;
}

body.ms-lang-bn .ms-btn {
	font-size: .9rem;
}

body.ms-lang-bn .ms-tab__label {
	font-size: .8rem;
}

body.ms-lang-bn .ms-footer__head {
	letter-spacing: 0;
	text-transform: none;
	font-size: .9rem;
}

/*
 * The Bangla category names are long — হোমিওপ্যাথিক ঔষধ is the worst of them —
 * and give the chip a second line to wrap onto. Bangla needs the extra leading,
 * but not so much that two lines outgrow the chip.
 */
body.ms-lang-bn .ms-catcard__name {
	line-height: 1.45;
}

body.ms-lang-bn .ms-cathero__title {
	line-height: 1.45;
}

/* =========================================================================
   19. Reduced motion
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.ms-chat__opt {
		animation: none;
	}

	.ms-count.is-pulse {
		animation: none;
	}

	/* The chip lift is decoration; without motion it would just be a jump. */
	.ms-catcard:hover,
	.ms-catcard:active {
		transform: none;
	}

	.ms-catcard {
		transition: none;
	}
}