/* One Man One Bag – product landing. Desktop sizes follow the 1440px Figma frame, mobile follows the 402px frame. */

.omob {
	--brown: #4D1821;
	--brown-dark: #3f141b;
	--badge-bg: #FFC640;
	--badge-fg: #3A1017;
	--brown-soft: #6d462a;
	--cream: #fdfbf7;
	--sand: #f7f2eb;
	--sand-line: #b69b85;
	--num-bg: #f1e8df;
	--num-fg: #8a5560;
	--thumb: #f2f3f2;
	--thumb-on: #d9bda7;
	--ink: #1d1d1d;
	--text: #474747;
	--muted: #a0a0a0;
	--feature: #948672;
	--rule: #efeae2;
	--track: #f0f0f0;
	--star: #ffc640;
	--bar: #6d3340;
	--white: #ffffff;

	/* Fluid sizes: value at 1440 is the max. */
	--gutter: max(20px, min(5cqi, 72px));
	--inline: max(var(--gutter), calc((100cqi - 1296px) / 2));
	--fs-title: clamp(30px, 4.45cqi, 64px);
	--fs-price: clamp(26px, 2.9cqi, 42px);
	--fs-lead: clamp(15px, 1.53cqi, 22px);
	--fs-tab: clamp(16px, 1.67cqi, 24px);
	--fs-body: clamp(14px, 1.25cqi, 18px);
	--fs-h3: clamp(15px, 1.39cqi, 20px);
	--fs-btn: clamp(14px, 1.39cqi, 20px);
	--fs-nav: clamp(14px, 1.25cqi, 18px);

	container-type: inline-size;
	container-name: omob;
	background: var(--cream);
	color: var(--ink);
	font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.omob-body { margin: 0; background: #fdfbf7; }
/* Resets use :where() so component classes always win. */
:where(.omob) *, :where(.omob) *::before, :where(.omob) *::after { box-sizing: border-box; }
:where(.omob) img { max-width: 100%; height: auto; display: block; }
:where(.omob) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.omob) :where(ul, ol) { list-style: none; }
:where(.omob) a { color: inherit; }
:where(.omob) button { font: inherit; color: inherit; }
:where(.omob) svg { width: 1em; height: 1em; flex: none; }
.omob :focus-visible { outline: 2px solid var(--star); outline-offset: 3px; border-radius: 4px; }
.omob-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Top bar + header ---------- */
.omob-topbar {
	background: var(--brown-soft);
	color: var(--white);
	display: flex; justify-content: center; align-items: center; gap: 12px;
	font-size: clamp(11px, 0.97cqi, 14px);
	padding: 8px var(--gutter);
	text-align: center;
}
.omob-topbar__sep { width: 1px; height: 1.3em; background: currentColor; opacity: .8; }

.omob-header {
	background: var(--brown);
	color: var(--white);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	padding: clamp(10px, 1.1cqi, 16px) max(20px, min(2.8cqi, 40px));
	position: relative;
}
.omob-header__burger { display: none; background: none; border: 0; padding: 4px; cursor: pointer; font-size: 22px; line-height: 0; }
.omob-header__logo img { width: clamp(98px, 12.2cqi, 176px); }
.omob-nav { justify-self: center; transform: translateX(-4%); }
.omob-nav__list { display: flex; gap: clamp(24px, 3.3cqi, 48px); }
.omob-nav__list a { text-decoration: none; text-transform: uppercase; font-size: var(--fs-nav); letter-spacing: .01em; padding: 6px 0; border-bottom: 1px solid transparent; }
.omob-nav__list a:hover { border-bottom-color: currentColor; }
.omob-header__icons { display: flex; align-items: center; gap: clamp(14px, 2cqi, 28px); }
.omob-header__cart { font-size: clamp(18px, 2cqi, 28px); line-height: 0; }
.omob-header__user {
	display: grid; place-items: center;
	width: clamp(20px, 3.5cqi, 50px); height: clamp(20px, 3.5cqi, 50px);
	border-radius: 50%; background: var(--white); color: var(--brown);
	font-size: clamp(12px, 1.9cqi, 27px);
}

/* ---------- Hero / top grid ---------- */
.omob-top {
	position: relative;
	background: var(--brown);
	display: grid;
	grid-template-columns: [full-start] var(--inline) [c-start] minmax(0, 1fr) [mid] minmax(0, 1fr) [c-end] var(--inline) [full-end];
	grid-template-rows: repeat(6, auto);
	column-gap: 0;
	padding-top: 20px;
}
.omob-sheet {
	grid-column: full-start / full-end;
	grid-row: 3 / -1;
	background: var(--cream);
	border-radius: clamp(40px, 7cqi, 100px) clamp(40px, 7cqi, 100px) 0 0;
	margin-top: clamp(0px, 1cqi, 14px);
}
.omob-thumbs {
	grid-column: c-start / mid; grid-row: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 177px));
	gap: clamp(16px, 2.2cqi, 32px) clamp(16px, 2.64cqi, 38px);
	align-self: start;
	z-index: 1;
}
.omob-thumb {
	aspect-ratio: 177 / 148;
	background: var(--thumb);
	border: 1px solid transparent;
	border-radius: clamp(8px, .9cqi, 13px);
	padding: 8%;
	cursor: pointer;
	display: grid; place-items: center;
	overflow: hidden;
	min-height: 0;
	transition: background-color .2s, border-color .2s;
}
.omob-thumb img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.omob-thumb:hover { border-color: var(--thumb-on); }
.omob-thumb.is-active { background: var(--thumb-on); border-color: #b98f72; }

.omob-hero {
	grid-column: mid / c-end; grid-row: 1 / 3;
	display: flex; justify-content: flex-end; align-items: flex-start;
	z-index: 1;
	margin-top: -4px;
	pointer-events: none;
}
.omob-hero__img {
	width: min(100%, 610px);
	aspect-ratio: 992 / 924;
	object-fit: contain;
	margin-right: -2.5cqi;
	filter: drop-shadow(0 14px 18px rgba(20, 6, 0, .28));
	transition: opacity .25s ease;
}
.omob-hero__img.is-swapping { opacity: 0; }

.omob-intro { grid-column: c-start / mid; grid-row: 2; z-index: 1; padding: clamp(20px, 2.2cqi, 32px) 0 clamp(20px, 2.1cqi, 30px); color: var(--white); }
.omob-badge {
	display: inline-block;
	background: var(--brown-soft);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 999px;
	padding: .25em 1em;
	font-size: clamp(9px, 1.04cqi, 15px);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.omob-title { font-size: var(--fs-title); font-weight: 500; line-height: 1.2; margin-top: clamp(8px, 1.2cqi, 18px); letter-spacing: -.005em; }
.omob-rating { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; margin-top: clamp(8px, 1cqi, 14px); font-size: clamp(14px, 1.67cqi, 24px); }

.omob-stars { display: inline-flex; gap: .12em; color: var(--star); font-size: clamp(14px, 1.95cqi, 28px); line-height: 0; }
.omob-star { position: relative; width: 1em; height: 1em; }
.omob-star svg { width: 1em; height: 1em; }
.omob-star__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; }

.omob-price { grid-column: c-start / c-end; grid-row: 3; z-index: 1; padding-top: clamp(12px, 1.4cqi, 20px); }
.omob-price__row { display: flex; align-items: baseline; gap: .45em; }
.omob-price__now { font-size: var(--fs-price); font-weight: 500; color: var(--brown); line-height: 1.2; }
.omob-price__mrp { font-size: calc(var(--fs-price) * .64); color: var(--muted); font-style: italic; }
.omob-price__tax { color: var(--muted); font-size: clamp(12px, 1.4cqi, 20px); font-weight: 300; margin-top: 4px; }

.omob-desc { grid-column: c-start / c-end; grid-row: 4; z-index: 1; padding: clamp(16px, 2cqi, 30px) 0 clamp(20px, 2.8cqi, 40px); }
.omob-desc p { font-size: var(--fs-lead); line-height: 2; color: #3c3c3c; max-width: 64em; }
.omob-desc em { color: var(--brown); font-weight: 500; }

.omob-features {
	grid-column: c-start / mid; grid-row: 5; z-index: 1;
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-block: 1px solid var(--rule);
	padding: clamp(12px, 1.6cqi, 22px) 2%;
	margin-bottom: clamp(40px, 5.6cqi, 80px);
	margin-right: 1.6cqi;
	align-self: start;
}
.omob-features li {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	text-align: center;
	color: var(--feature);
	font-size: clamp(10px, 1.25cqi, 18px);
	font-style: italic;
	line-height: 1.3;
	border-left: 1px solid var(--rule);
	padding: 4px 10%;
}
.omob-features li:last-child { border-right: 1px solid var(--rule); }
.omob-features svg { font-size: clamp(18px, 2.3cqi, 33px); }
.omob-features span { max-width: 6.2em; }

.omob-cta { display: flex; gap: clamp(12px, 2.4cqi, 35px); }
/* The Buy now button stays fixed on screen while you scroll, on every
   size, then settles into place just before the footer. Only one CTA is
   ever visible: the inline one (beside the feature strip) is hidden and
   this sticky one, at the end of the page's main content, is used instead. */
.omob-cta--inline { display: none; }
.omob-cta--sticky {
	display: flex;
	position: sticky;
	bottom: 0;
	z-index: 15;
	background: var(--cream);
	border-top: 1px solid var(--rule);
	box-shadow: 0 -6px 18px rgba(40, 10, 20, .07);
	padding: 14px var(--inline) calc(14px + env(safe-area-inset-bottom, 0px));
	justify-content: center;
	gap: clamp(12px, 2.4cqi, 35px);
}
.omob-cta--sticky .omob-btn { min-width: clamp(200px, 26cqi, 375px); }
.omob-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: clamp(44px, 5cqi, 72px);
	padding: 0 1.4em;
	font-size: var(--fs-btn);
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: clamp(4px, .6cqi, 8px);
	border: 1px solid var(--brown);
	cursor: pointer;
	transition: background-color .2s, color .2s;
	white-space: nowrap;
}
.omob-btn--solid { background: var(--brown); color: var(--white); min-width: clamp(140px, 21.8cqi, 314px); }
.omob-btn--solid:hover { background: var(--brown-dark); }
.omob-btn--line { background: transparent; color: var(--brown); min-width: clamp(140px, 18cqi, 260px); }
.omob-btn--line:hover { background: var(--sand); }

/* ---------- Tabs ---------- */
.omob-info { padding: 0 var(--inline); }
.omob-tabs { display: flex; gap: clamp(28px, 4.9cqi, 70px); position: relative; }
.omob-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--track); border-radius: 4px; }
.omob-tab {
	background: none; border: 0; cursor: pointer;
	padding: 0 0 clamp(8px, 1cqi, 14px);
	font-size: var(--fs-tab);
	text-transform: uppercase;
	color: var(--muted);
	position: relative;
	z-index: 1;
}
.omob-tab::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 4px; border-radius: 4px; background: transparent; transition: background-color .2s; }
.omob-tab[aria-selected="true"] { color: var(--brown); font-weight: 500; }
.omob-tab[aria-selected="true"]::after { background: var(--brown); }
.omob-tab__short { display: none; }

.omob-panel { padding-top: clamp(20px, 3.4cqi, 50px); }
.omob-panel[hidden] { display: none; }
.omob-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(var(--rows, 4), auto);
	grid-auto-flow: column;
	column-gap: clamp(24px, 4.2cqi, 60px);
	row-gap: clamp(16px, 2cqi, 28px);
}
.omob-spec { display: grid; grid-template-columns: clamp(34px, 3.4cqi, 49px) 1fr; column-gap: clamp(12px, 1.3cqi, 19px); align-items: start; align-content: start; max-width: 640px; }
.omob-spec__num {
	grid-row: 1 / 3; margin-top: .9em;
	width: clamp(34px, 3.4cqi, 49px); aspect-ratio: 1; border-radius: 50%;
	background: var(--num-bg); color: var(--num-fg);
	display: grid; place-items: center;
	font-size: clamp(15px, 1.8cqi, 26px);
}
.omob-spec__title { font-size: var(--fs-h3); font-weight: 500; color: var(--brown); line-height: 1.5; }
.omob-spec__text { color: var(--text); line-height: 1.65; }

/* Details panel */
.omob-logistics {
	background: var(--sand);
	border: 1px solid var(--sand-line);
	border-radius: clamp(12px, 1.4cqi, 20px);
	padding: clamp(20px, 2.6cqi, 38px) clamp(20px, 2.6cqi, 38px) clamp(24px, 3.4cqi, 50px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(24px, 3.5cqi, 50px);
}
.omob-logistics__title {
	grid-column: 1 / -1;
	font-size: clamp(16px, 1.7cqi, 24px); font-weight: 600; color: var(--brown); text-transform: uppercase;
	border-left: 2px solid var(--brown); padding-left: 14px; line-height: 1.2;
	margin-bottom: clamp(20px, 2.8cqi, 40px);
}
.omob-logistics__main { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6cqi, 24px) 16px; align-content: start; padding-left: 16px; max-width: 580px; }
.omob-field.is-wide { grid-column: 1 / -1; }
.omob-field dt { text-transform: uppercase; color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }
.omob-field dd { color: var(--text); font-size: var(--fs-body); line-height: 1.6; }
.omob-logistics__side { padding-top: clamp(0px, 1.4cqi, 20px); }
.omob-logistics__card { background: var(--white); border-radius: clamp(8px, .9cqi, 12px); padding: clamp(16px, 1.9cqi, 28px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6cqi, 24px) 16px; }
.omob-field.is-mrp dd { color: var(--brown); font-weight: 600; }
.omob-return { display: flex; align-items: center; gap: .9em; margin-top: clamp(16px, 1.8cqi, 26px); padding-left: 2px; color: #555; text-transform: uppercase; font-size: var(--fs-body); }
.omob-return svg { color: #7c7c7c; font-size: 1.05em; }
.omob-return span:nth-of-type(1) { margin-right: .6em; }

/* ---------- Reviews ---------- */
.omob-reviews {
	padding: clamp(40px, 5.8cqi, 84px) var(--inline) clamp(48px, 5cqi, 72px);
	display: grid;
	grid-template-columns: minmax(0, 593fr) minmax(0, 671fr);
	grid-template-rows: auto 1fr;
	column-gap: clamp(20px, 1.8cqi, 36px);
	align-items: start;
}
.omob-reviews__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(16px, 2.4cqi, 36px); }
.omob-reviews__head h2 { font-size: clamp(16px, 1.67cqi, 24px); font-weight: 500; color: var(--brown); text-transform: uppercase; }
.omob-reviews__head .omob-link-btn { display: none; }
.omob-link-btn { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .6em; font-size: 12px; padding: 4px 0; }
.omob-link-btn svg { font-size: 15px; }

.omob-summary {
	background: var(--sand);
	border-radius: clamp(10px, 1.1cqi, 16px);
	padding: clamp(20px, 2cqi, 30px) clamp(20px, 2.4cqi, 34px) clamp(24px, 2.4cqi, 34px);
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(20px, 2.8cqi, 40px);
	row-gap: clamp(28px, 4.6cqi, 66px);
	align-items: start;
}
.omob-summary__score { text-align: center; padding-top: 6px; }
.omob-summary__num { font-size: clamp(24px, 2.4cqi, 34px); font-weight: 500; line-height: 1.3; }
.omob-summary__score .omob-stars { margin: 6px 0 8px; }
.omob-summary__count { color: var(--brown); font-size: clamp(12px, 1.4cqi, 20px); }
.omob-bars { display: grid; gap: clamp(3px, .45cqi, 6px); padding-top: 6px; }
.omob-bars li { display: grid; grid-template-columns: 1.4em 1fr; align-items: center; font-size: clamp(10px, 1.04cqi, 15px); line-height: 1.4; max-width: 235px; }
.omob-bars__track { height: clamp(5px, .5cqi, 7px); background: var(--white); border-radius: 9px; overflow: hidden; }
.omob-bars__fill { display: block; height: 100%; background: var(--bar); border-radius: 9px; }
.omob-summary__write { grid-column: 1 / -1; justify-self: center; width: min(100%, 400px); border-radius: clamp(6px, .7cqi, 10px); }
.omob-summary__write svg { font-size: 1.3em; margin-left: .6em; }

.omob-review-list { display: grid; gap: clamp(10px, 1cqi, 14px); }
.omob-review { background: var(--white); border-radius: clamp(8px, 1cqi, 14px); padding: clamp(14px, 1.4cqi, 20px) clamp(18px, 2.2cqi, 32px) clamp(16px, 1.6cqi, 24px); }
.omob-review.is-collapsed { display: none; }
.omob-review__head { display: flex; align-items: center; gap: clamp(10px, 1.8cqi, 26px); }
.omob-review__name { font-size: clamp(13px, 1.46cqi, 21px); font-weight: 500; }
.omob-review__head .omob-stars { font-size: clamp(13px, 1.53cqi, 22px); }
.omob-review__date { margin-left: auto; color: #555; font-size: clamp(10px, .9cqi, 13px); }
.omob-review__title { color: var(--brown); font-style: italic; font-weight: 500; margin-top: clamp(4px, .8cqi, 12px); font-size: clamp(12px, 1.46cqi, 21px); }
.omob-review__text { color: #3c3c3c; margin-top: clamp(6px, .8cqi, 12px); font-size: clamp(13px, 1.46cqi, 21px); line-height: 1.55; }
.omob-more { background: none; border: 0; cursor: pointer; justify-self: center; display: inline-flex; align-items: center; gap: .6em; font-size: clamp(15px, 1.67cqi, 24px); color: #3a2a20; padding: 8px 4px; }
.omob-more svg { font-size: .9em; }
.omob-more[hidden] { display: none; }
.omob-empty { background: var(--white); border-radius: 12px; padding: 24px; color: var(--text); }

/* ---------- Footer ---------- */
.omob-footer {
	background: var(--brown);
	color: var(--white);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	padding: clamp(28px, 3.1cqi, 44px) max(20px, min(2.8cqi, 40px)) clamp(28px, 3cqi, 44px);
}
.omob-footer__logo { width: clamp(110px, 12.2cqi, 176px); }
.omob-footer__badge { width: clamp(80px, 9.2cqi, 132px); margin-top: clamp(16px, 2cqi, 30px); }
.omob-footer__company { margin-top: clamp(16px, 2.2cqi, 32px); font-size: clamp(13px, 1.1cqi, 16px); }
.omob-footer__cols { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 24px; justify-self: start; width: 100%; max-width: 640px; margin-left: 2cqi; }
.omob-footer__col h2 { font-size: clamp(14px, 1.39cqi, 20px); font-weight: 600; text-transform: uppercase; margin-bottom: 12px; }
.omob-footer__col li + li { margin-top: 8px; }
.omob-footer__list { display: block; }
.omob-footer__col a { text-decoration: none; font-size: clamp(12px, 1.1cqi, 16px); opacity: .95; }
.omob-footer__col a:hover { text-decoration: underline; }
.omob-footer__social { display: flex; gap: 12px; }
.omob-footer__social li + li { margin-top: 0; }
.omob-footer__social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: 18px; }
.omob-footer__social a:hover { background: rgba(255,255,255,.12); }

.omob-page-content { max-width: 1296px; margin: 40px auto; padding: 0 20px; }

/* ---------- Review modal ---------- */
.omob-modal { border: 0; border-radius: 16px; padding: 0; width: min(92vw, 480px); max-height: 92vh; background: var(--cream); color: var(--ink); font-family: "Poppins", system-ui, sans-serif; box-shadow: 0 24px 60px rgba(40, 14, 0, .35); }
.omob-modal::backdrop { background: rgba(40, 16, 0, .55); }
.omob-form { display: grid; gap: 14px; padding: 22px 24px 24px; }
.omob-modal__head { display: flex; justify-content: space-between; align-items: center; }
.omob-modal__head h2 { font-size: 20px; font-weight: 500; color: var(--brown); }
.omob-modal__close { background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 0; padding: 6px; border-radius: 50%; }
.omob-modal__close:hover { background: var(--sand); }
.omob-rate { border: 0; padding: 0; margin: 0; }
.omob-rate legend { font-size: 13px; color: var(--text); margin-bottom: 4px; padding: 0; }
.omob-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.omob-rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.omob-rate__stars label { cursor: pointer; font-size: 30px; line-height: 0; color: #d9cfc4; }
.omob-rate__stars svg { fill: currentColor; }
.omob-rate__stars label:hover, .omob-rate__stars label:hover ~ label, .omob-rate__stars input:checked ~ label { color: var(--star); }
.omob-rate__stars input:focus-visible + label { outline: 2px solid var(--brown); outline-offset: 2px; border-radius: 4px; }
.omob-input { display: grid; gap: 4px; font-size: 13px; color: var(--text); }
.omob-input input, .omob-input textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid #d8cfc6; border-radius: 8px; padding: 10px 12px; width: 100%; }
.omob-input input:focus, .omob-input textarea:focus { outline: 2px solid var(--brown); outline-offset: 0; border-color: var(--brown); }
.omob-hp { position: absolute; left: -9999px; }
.omob-form__msg { font-size: 14px; min-height: 1.2em; }
.omob-form__msg.is-error { color: #a4231b; }
.omob-form__msg.is-ok { color: #2f6b2f; }
.omob-form__submit { width: 100%; }
.omob-form.is-done .omob-input, .omob-form.is-done .omob-rate, .omob-form.is-done .omob-form__submit { display: none; }

/* ---------- Tablet ---------- */
@container omob (max-width: 1000px) {
	.omob-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.omob-features { grid-column: c-start / c-end; margin-right: 0; margin-bottom: 20px; }
	.omob-cta--inline { grid-column: c-start / c-end; grid-row: 6; justify-content: flex-start; padding-top: 0; margin-bottom: 48px; }
	.omob-cta--inline .omob-btn { flex: 1; }
}

/* ---------- Mobile (402px frame) ---------- */
@container omob (max-width: 760px) {
	.omob { --inline: 20px; }
	.omob-topbar { font-size: 11px; padding: 4px 12px; gap: 10px; }
	.omob-header { grid-template-columns: 1fr auto 1fr; padding: 10px 20px; gap: 12px; }
	.omob-header__burger { display: block; justify-self: start; }
	.omob-header__logo { justify-self: center; }
	.omob-header__icons { justify-self: end; gap: 14px; }
	.omob-header__cart { font-size: 18px; }
	.omob-header__user { width: 20px; height: 20px; font-size: 13px; }
	.omob-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--brown); z-index: 20;
		border-top: 1px solid rgba(255,255,255,.18);
		transform: none;
		padding: 8px 20px 16px;
	}
	.omob-nav.is-open { display: block; }
	.omob-nav__list { flex-direction: column; gap: 0; }
	.omob-nav__list a { display: block; padding: 12px 0; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.12); }

	.omob-top {
		grid-template-columns: [full-start] 20px [c-start] 66px [thumb-end] minmax(0, 104px) [mid] minmax(0, 1fr) [c-end] 20px [full-end];
		padding-top: 18px;
	}
	.omob-thumbs { grid-column: c-start / thumb-end; grid-row: 1; grid-template-columns: 1fr; gap: 5px; }
	.omob-thumb { aspect-ratio: 66 / 46; border-radius: 3px; padding: 3px; }
	.omob-hero { grid-column: thumb-end / full-end; grid-row: 1; margin: -10px 0 0 6px; justify-content: center; }
	.omob-hero__img { width: 100%; margin-right: 0; filter: drop-shadow(0 10px 16px rgba(20, 6, 0, .35)); }

	.omob-sheet { grid-row: 2 / -1; border-radius: 40px 40px 0 0; margin-top: 14px; }
	.omob-intro { grid-column: mid / c-end; grid-row: 2; color: var(--brown); text-align: center; padding: 0 0 6px; margin-top: 8px; }
	.omob-badge { font-size: 9px; padding: 1px 9px; border-color: var(--brown-soft); position: relative; top: 0; }
	.omob-title { font-size: 20px; font-weight: 600; margin-top: 6px; }
	.omob-rating { font-size: 14px; color: var(--ink); margin-top: 4px; gap: 10px; }
	.omob-rating .omob-stars { font-size: 14px; }

	.omob-price { grid-column: c-start / mid; grid-row: 2; padding-top: 28px; text-align: center; }
	.omob-price__row { justify-content: center; }
	.omob-price__now { font-size: 20px; }
	.omob-price__mrp { font-size: 13px; }
	.omob-price__tax { font-size: 12px; margin-top: 0; }

	.omob-desc { grid-row: 3; padding: 12px 0 18px; }
	.omob-desc p { font-size: 13px; line-height: 1.8; }
	.omob-features { grid-row: 4; padding: 10px 0; margin: 0 0 30px; }
	.omob-features li { font-size: 10px; padding: 2px 6%; gap: 4px; }
	.omob-features li:first-child { border-left: 0; }
	.omob-features li:last-child { border-right: 0; }
	.omob-features svg { font-size: 19px; }

	.omob-cta--inline { display: none; }
	.omob-cta--sticky {
		display: flex;
		position: sticky; bottom: 0; z-index: 15;
		background: var(--cream);
		border-top: 1px solid var(--rule);
		box-shadow: 0 -4px 12px rgba(0,0,0,.04);
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
		gap: 18px;
	}
	.omob-cta--sticky .omob-btn { flex: 1; min-width: 0; min-height: 45px; font-size: 14px; padding: 0 10px; border-radius: 4px; }

	.omob-tabs { justify-content: space-between; gap: 12px; }
	.omob-tabs::after { height: 5px; }
	.omob-tab { font-size: 16px; padding-bottom: 8px; }
	.omob-tab::after { left: 0; right: 0; height: 5px; }
	.omob-tab__long { display: none; }
	.omob-tab__short { display: inline; }

	.omob-panel { padding-top: 22px; }
	.omob-panel--specs { background: var(--sand); border-radius: 12px; padding: 12px 16px; margin-top: 22px; }
	.omob-specs { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; row-gap: 10px; }
	.omob-spec { background: var(--white); border-radius: 8px; padding: 10px 16px 14px 20px; grid-template-columns: 20px 1fr; column-gap: 10px; max-width: none; }
	.omob-spec__num { grid-row: 1; width: 20px; margin-top: 3px; font-size: 11px; background: transparent; border: 1px solid #9b8574; color: var(--ink); }
	.omob-spec__title { text-transform: uppercase; color: var(--ink); font-size: 15px; }
	.omob-spec__text { grid-column: 1 / -1; font-size: 13px; line-height: 1.55; margin-top: 6px; color: #3c3c3c; }

	.omob-logistics { grid-template-columns: 1fr; border: 0; border-radius: 10px; padding: 16px 20px 16px; }
	.omob-logistics__title { font-size: 20px; font-weight: 500; margin-bottom: 14px; }
	.omob-logistics__main { padding-left: 10px; gap: 12px 12px; }
	.omob-field dt { font-size: 13px; }
	.omob-field dd { font-size: 11px; }
	.omob-logistics__side { padding-top: 22px; }
	.omob-logistics__card { padding: 12px 16px; gap: 12px; }
	.omob-logistics__card .omob-field.is-name dd { color: var(--brown); }
	.omob-return { font-size: 11px; color: var(--muted); margin-top: 16px; gap: 10px; }

	.omob-reviews { grid-template-columns: 1fr; padding: 28px 20px 24px; row-gap: 16px; }
	.omob-reviews__head { margin-bottom: 0; }
	.omob-reviews__head .omob-link-btn { display: inline-flex; }
	.omob-summary { grid-template-columns: 1fr 1fr; padding: 14px 20px; border-radius: 10px; column-gap: 20px; }
	.omob-summary__write { display: none; }
	.omob-summary__num { font-size: 20px; }
	.omob-summary__score .omob-stars { font-size: 17px; margin: 2px 0 4px; }
	.omob-summary__count { font-size: 12px; }
	.omob-bars li { font-size: 9px; }
	.omob-review { padding: 14px 20px 16px; }
	.omob-review__name { font-size: 13px; font-weight: 600; }
	.omob-review__head { gap: 16px; }
	.omob-review__head .omob-stars { font-size: 14px; }
	.omob-review__date { font-size: 10px; }
	.omob-review__title { font-size: 12px; margin-top: 8px; }
	.omob-review__text { font-size: 13px; margin-top: 8px; }
	.omob-more { font-size: 15px; }

	.omob-footer { grid-template-columns: 1fr; padding: 28px 20px; }
	.omob-footer__cols { grid-template-columns: 1fr 1fr; margin-left: 0; }
	.omob-footer__col:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.omob *, .omob *::before, .omob *::after { transition: none !important; }
}

/* ---------------------------------------------------------------
   1.1 – brand colour, bigger sale badge, tidier mobile
   --------------------------------------------------------------- */

/* Sale badge: bigger, and in a colour that stands out on the hero. */
.omob-badge {
	background: var(--badge-bg) !important;
	color: var(--badge-fg) !important;
	border: 0 !important;
	font-size: clamp(12px, 1.25cqi, 18px) !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	padding: .45em 1.15em !important;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* No white seam where the header meets the hero. */
.omob-header { box-shadow: 0 2px 0 0 var(--brown); }
.omob-topbar + .omob-header { margin-top: -1px; }
.omob-top { margin-top: -1px; }

/* Nothing may drag the page sideways. */
/* clip, not hidden: overflow-x hidden on the body turns it into a scroll
   container, which stops position:sticky from working inside it. */
html { overflow-x: hidden !important; max-width: 100% !important; }
body.omob-body { overflow-x: clip !important; max-width: 100% !important; }
.omob { overflow-x: clip; max-width: 100%; }
.omob-top, .omob-info, .omob-reviews, .omob-footer { min-width: 0; max-width: 100%; }
.omob-specs, .omob-spec, .omob-review, .omob-summary { min-width: 0; }
.omob-spec__text, .omob-review__text, .omob-field dd { overflow-wrap: anywhere; }

@container omob (max-width: 760px) {
	/* Tabs centred, each taking half the row. */
	.omob-tabs { justify-content: stretch; gap: 0; }
	.omob-tab { flex: 1 1 0; text-align: center; }
	.omob-tab::after { left: 0; right: 0; }

	/* The menu drawer spans the whole width of the header. */
	.omob-nav { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
	.omob-nav.is-open { display: block; box-shadow: 0 12px 24px rgba(0, 0, 0, .2); }
}

/* Buy now on its own: it keeps the pair's footprint rather than shrinking. */
.omob-cta--single .omob-btn--solid { min-width: clamp(180px, 26cqi, 375px); }
@container omob (max-width: 760px) {
	.omob-cta--single.omob-cta--sticky .omob-btn--solid { width: 100%; min-width: 0; }
}

/* ---------------------------------------------------------------
   1.3 – gallery on the right, main image on the left, floating CTA
   --------------------------------------------------------------- */

/* Desktop: main image left, thumbnails and title right. */
.omob-thumbs { grid-column: mid / c-end; }
.omob-intro { grid-column: mid / c-end; }
.omob-hero { grid-column: c-start / mid; grid-row: 1 / 3; justify-content: flex-start; }
.omob-hero__img { margin-right: 0; margin-left: -2.5cqi; }
.omob-features { grid-column: c-start / mid; }
.omob-cta--inline { grid-column: mid / c-end; justify-content: flex-start; }

@container omob (max-width: 1000px) {
	.omob-features, .omob-cta--inline { grid-column: c-start / c-end; }
}

/* Phones: big image left, thumbnails down the right. */
@container omob (max-width: 760px) {
	.omob-top {
		grid-template-columns:
			[full-start] 20px [c-start] minmax(0, 1fr) [half] 104px [thumb] 66px [c-end] 20px [full-end];
	}
	.omob-hero { grid-column: c-start / thumb; grid-row: 1; margin: -10px 6px 0 0; justify-content: center; }
	.omob-hero__img { margin-left: 0; }
	.omob-thumbs { grid-column: thumb / c-end; grid-row: 1; grid-template-columns: 1fr; gap: 5px; }
	.omob-price { grid-column: c-start / half; }
	.omob-intro { grid-column: half / c-end; }
	/* Swiping the image moves the gallery, so let the page scroll vertically only. */
	.omob-hero { touch-action: pan-y; }
}

/* ---------------------------------------------------------------
   1.3.1 – the image must receive touches
   --------------------------------------------------------------- */
.omob-hero { pointer-events: auto; }
.omob-hero__img { -webkit-user-drag: none; user-select: none; }