/* ============================================================================
   gtr-nav.css — navigation & mega menu redesign
   PRD: "Gertrudes Flower Shop — Navigation & Mega Menu Redesign"

   Pairs with catalog/view/javascript/plaza/gtr-nav/gtr-nav.js, which adds the
   hook classes used below (.gtr-panel, .gtr-panel--mega, .gtr-drill, …) from
   the Ultimate Mega Menu module's own markup. Nothing here invents a link:
   labels and URLs stay admin-owned (PRD §32/§33).

   Loaded LAST on both headers, after stylesheet.css / header2.css / theme.css
   / gtr-header.css / header-mobile.css, so it wins at equal specificity. The
   deeper selectors below are not decoration — header2.css styles the module at
   up to four class levels (e.g. ".horizontal-menu .ul-second-items
   .li-second-items .a-second-link"), so an override must match or exceed it.
   No !important is needed: the module's inline #pt-menu-<id> block only sets
   colour, font and padding on rows this file re-parents or restyles at higher
   specificity.

   Sections
     1  Tokens
     2  Desktop · primary row and caret toggle
     3  Desktop · panel shell and transition
     4  Desktop · compact dropdown
     5  Desktop · mega menu
     6  Desktop · panel contents (links, groups, View All)
     7  Desktop · current-page state
     8  Drill-down · shell and panels
     9  Drill-down · rows, back, View All
    10  Drill-down · transitions
    11  Accessibility and reduced motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Self-contained: --gtr-* exists only inside .gtr-header and --gt-* only on
   .mobile-layout, but the drill-down renders in both, so this file carries its
   own copy of the palette. Same values, same measured contrast ratios:
   brand 3.7:1 (large/iconography only) · brand-strong 5.1:1 · ink 13.9:1 ·
   muted 5.5:1, all against white.
   Lengths are px on purpose — html is font-size:62.5%, so rem reads as tenths
   here and mixing the two units in one file invites off-by-ten mistakes. */
/* Scoped to the two roots that contain every element this file styles. Naming
   a narrower scope (e.g. only .gtr-panel) would silently break rules on the
   module's own anchors: a var() that resolves to nothing invalidates the whole
   declaration — the exact failure documented in docs/frontend-css-architecture
   §3.1 for this theme's --main-color tokens. */
.gtr-nav,
.gtr-drill,
.gtr-panel {
	--gtn-brand: #e85224;
	--gtn-brand-strong: #c73e12;
	--gtn-brand-soft: #fdeee6;
	--gtn-ink: #2f2a26;
	--gtn-muted: #6f6862;
	--gtn-line: #efe8e2;
	--gtn-surface-alt: #faf5f0;
	--gtn-speed: 180ms;
}


/* 2. Desktop · primary row and caret toggle -------------------------------- */
/* The row becomes a flex line so the caret can sit outside the anchor. A
   <button> may not be nested inside an <a>, and the caret has to be a real
   control: PRD §31 forbids hover-only access to navigation. */
.gtr-nav .ul-top-items .li-top-item {
	display: flex;
	align-items: center;
}

/* plaza/theme.css styles bare `button` (dark fill) and `button:hover` (tan on
   white, ~2.8:1). Every state is therefore declared explicitly here. */
.gtr-nav .gtr-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 28px;
	margin-left: -8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--gtn-muted);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* PRD §3: the indicator must not dominate the label — a 6px hairline chevron
   drawn from two borders, not an icon-font glyph at label size. */
.gtr-nav .gtr-nav__toggle::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--gtn-speed) ease, margin-top var(--gtn-speed) ease;
}

.gtr-nav .gtr-nav__toggle:hover,
.gtr-nav .gtr-nav__toggle:focus,
.gtr-nav .gtr-nav__toggle:active {
	background: transparent;
	color: var(--gtn-brand-strong);
}

.gtr-nav .li-top-item:hover .gtr-nav__toggle,
.gtr-nav .li-top-item.is-open .gtr-nav__toggle {
	color: var(--gtn-brand-strong);
}

.gtr-nav .li-top-item.is-open .gtr-nav__toggle::before {
	margin-top: 3px;
	transform: rotate(-135deg);
}

/* Small laptops drop the caret glyph for width (gtr-header.css §5); keep the
   button itself out of the layout there so the labels stay on one line. */
@media (min-width: 992px) and (max-width: 1120px) {
	.gtr-nav .gtr-nav__toggle {
		width: 14px;
		margin-left: -6px;
	}
}

/* Touch pointers get a 44px target without a 44px box: eight labels plus six
   44px carets do not fit an iPad's 1024px bar, so the hit area is grown with a
   pseudo-element that takes no space in the flex line. (WCAG 2.5.5, Apple HIG
   44pt, Material 48dp — all satisfied by the invisible box, not the glyph.) */
@media (hover: none) {
	.gtr-nav .gtr-nav__toggle {
		position: relative;
	}
	.gtr-nav .gtr-nav__toggle::after {
		content: "";
		position: absolute;
		top: -10px;
		right: -12px;
		bottom: -10px;
		left: -12px;
	}
}


/* 3. Desktop · panel shell and transition ---------------------------------- */
/* header2.css puts the module's own shadow/positioning on .sub-menu-container
   and .flyout-third-items; this replaces both. */
.gtr-nav .gtr-panel {
	display: none;
	position: absolute;
	top: calc(100% + 1px);
	z-index: 120;
	overflow: visible;
	background: #fff;
	border: 1px solid var(--gtn-line);
	border-top: 2px solid var(--gtn-brand-strong);
	box-shadow: 0 18px 36px rgba(47, 42, 38, 0.12);
	text-align: left;
	float: none;
}

.gtr-nav .li-top-item.is-open > .gtr-panel {
	display: block;
	animation: gtr-panel-in 180ms ease both;
}


/* PRD §12: a short fade with slight vertical movement, nothing that delays
   the customer's next click. */
@keyframes gtr-panel-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* The module's own frame is now the outer .gtr-panel's job. */
.gtr-nav .gtr-panel .ul-second-items,
.gtr-nav .gtr-panel .ul-third-items {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	list-style: none;
}

.gtr-nav .gtr-panel .li-second-items,
.gtr-nav .gtr-panel .li-third-items {
	margin: 0;
	list-style: none;
}


/* 4. Desktop · compact dropdown -------------------------------------------- */
/* PRD §5: 260–320px, comfortable spacing, no imagery. Overrides
   ".horizontal-menu .flyout-menu-container{width:20rem}". */
.gtr-nav .gtr-panel--compact {
	left: 0;
	width: 292px;
	border-radius: 0 0 10px 10px;
}

.gtr-nav .gtr-panel--compact .gtr-panel__inner {
	padding: 14px 0 6px;
}

.gtr-nav .gtr-panel--compact .gtr-panel__head {
	padding: 0 18px 12px;
	border-bottom: 1px solid var(--gtn-line);
}

.gtr-nav .gtr-panel--compact .ul-second-items {
	padding: 10px 0 4px;
}


/* 5. Desktop · mega menu ---------------------------------------------------- */
/* PRD §13: a mega panel is not a wide dropdown hanging off one label — it is a
   band under the primary row whose contents line up with the page container.
   Both the row and the module root go position:static so the panel's
   containing block becomes .gtr-main (gtr-header.css §4, position:relative). */
.gtr-nav .horizontal-menu {
	position: static;
}

.gtr-nav .ul-top-items .li-top-item.gtr-nav__item--mega {
	position: static;
}

.gtr-nav .gtr-panel--mega {
	left: 0;
	right: 0;
	width: auto;
	border-right: 0;
	border-left: 0;
	border-radius: 0;
	/* A panel can never grow past the space under the header: an admin who adds
	   a seventh row of categories gets a scrolling panel, not one that runs off
	   the bottom of the screen (PRD §13, §39). overscroll-behavior keeps that
	   scroll from chaining into the page behind it. The element's own shadow is
	   drawn outside the border box, so overflow does not clip it. */
	max-height: calc(100vh - 132px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The inner wrapper carries Bootstrap's .container class (added by the script),
   so it inherits the site's real container geometry at every breakpoint —
   including stylesheet.css:1137/1144, which overrides .container to 100% below
   1440px and 1440px above it. Hardcoding 1170/970 here would silently
   mis-align the moment those values change. Only the vertical rhythm is ours. */
.gtr-nav .gtr-panel--mega .gtr-panel__inner {
	padding-top: 22px;
	padding-bottom: 26px;
}

/* Flat list, too tall for one column (Bouquets-shaped). Columns balance
   themselves, so the panel keeps working as categories are added (PRD §39).
   The width cap stops three columns from sprawling across a 1440px container:
   links stay in a readable measure, and the space it leaves on the right is
   where the single optional editorial image of PRD §14 would go. */
.gtr-nav .gtr-panel--mega .ul-second-items {
	column-count: 3;
	column-gap: 40px;
	max-width: 880px;
}

.gtr-nav .gtr-panel--mega .li-second-items {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

/* Grouped: the module's third level becomes visible section content instead of
   a second hover layer (PRD §6/§7/§25). */
/* Tracks are capped rather than 1fr so two groups do not stretch to half a
   1440px container each; extra groups wrap onto a second row instead. */
.gtr-nav .gtr-panel--grouped .ul-second-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 230px));
	justify-content: start;
	gap: 4px 48px;
	column-count: auto;
	max-width: none;
}

.gtr-nav .gtr-panel--grouped .li-second-items {
	margin-bottom: 18px;
}

.gtr-nav .gtr-panel--mega .flyout-third-items,
.gtr-nav .gtr-panel--mega .sub_item3-content {
	position: static;
	display: block;
	min-width: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}


/* 6. Desktop · panel contents ---------------------------------------------- */
/* PRD §25 asks for three distinct levels. The first of them is NOT inside the
   panel: it is the navbar label, which stays lit and underlined while its
   panel is open (§7 below). So the panel itself carries only two — the group
   label and the category link — and the redundant in-panel title is gone.
   The head is now a single row holding "View All <category>". */
.gtr-panel__head {
	display: flex;
	align-items: baseline;
	margin: 0;
}

.gtr-nav .gtr-panel--mega .gtr-panel__head {
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--gtn-line);
}
/* header2.css:241 sets "display:block" on every anchor inside a top-level row
   at (0,4,0); the selector below has to match that depth for the flex gap to
   survive. */
.gtr-nav .ul-top-items .li-top-item .gtr-panel__viewall {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	color: var(--gtn-brand-strong);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.gtr-nav .ul-top-items .li-top-item .gtr-panel__viewall:hover,
.gtr-nav .ul-top-items .li-top-item .gtr-panel__viewall:focus {
	color: var(--gtn-brand-strong);
	text-decoration: underline;
}

.gtr-panel__arrow {
	font-style: normal;
	transition: transform var(--gtn-speed) ease;
}

.gtr-panel__arrow::before {
	content: "\2192";
}

.gtr-panel__viewall:hover .gtr-panel__arrow {
	transform: translateX(3px);
}

/* Category link. PRD §28: colour change plus a light warm wash and a left
   marker — feedback without movement. Depth must beat header2.css:283 and the
   generated plaza/theme.css, which draws a 1px rule under every second-level
   link — exactly the per-row border PRD §27 asks us not to use. theme.css is
   rewritten whenever theme settings are saved, so it is overridden, not edited. */
.gtr-nav .gtr-panel .ul-second-items .li-second-items .a-second-link,
.gtr-nav .gtr-panel .ul-third-items .li-third-items .a-third-link,
.gtr-nav .gtr-panel .a-mega-third-link {
	display: block;
	padding: 9px 16px;
	border: 0;
	border-left: 2px solid transparent;
	color: var(--gtn-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	white-space: normal;
	transition: background var(--gtn-speed) ease, color var(--gtn-speed) ease,
		border-color var(--gtn-speed) ease;
}

.gtr-nav .gtr-panel .ul-second-items .li-second-items .a-second-link:hover,
.gtr-nav .gtr-panel .ul-second-items .li-second-items .a-second-link:focus,
.gtr-nav .gtr-panel .ul-third-items .li-third-items .a-third-link:hover,
.gtr-nav .gtr-panel .ul-third-items .li-third-items .a-third-link:focus,
.gtr-nav .gtr-panel .a-mega-third-link:hover,
.gtr-nav .gtr-panel .a-mega-third-link:focus {
	background: var(--gtn-brand-soft);
	border-left-color: var(--gtn-brand-strong);
	color: var(--gtn-brand-strong);
	text-decoration: none;
}

/* Inside a mega the rows are already inset by the container padding, so the
   marker hangs in the gutter rather than pushing the text column around. */
/* Optical alignment: -10 margin + 2px marker + 8px padding puts the glyphs on
   the container's own content edge, the same line as the panel title and the
   page's first product tile. The extra 2px the marker would otherwise add is
   what makes a link list look subtly "off" against everything above it. */
.gtr-nav .gtr-panel--mega .ul-second-items .li-second-items .a-second-link,
.gtr-nav .gtr-panel--mega .ul-third-items .li-third-items .a-third-link,
.gtr-nav .gtr-panel--mega .a-mega-third-link {
	padding: 7px 10px 7px 8px;
	margin-left: -10px;
	border-radius: 6px;
}

/* Level 2 in a grouped panel is a section label, not a destination row — but
   it stays a link, because the group heading is itself a category. Only rows
   that actually carry children are demoted (.gtr-panel__group, set by the
   script); a childless sibling in the same panel stays an ordinary link. */
.gtr-nav .gtr-panel--grouped .ul-second-items .li-second-items.gtr-panel__group .a-second-link,
.gtr-nav .gtr-panel--grouped .sub-item2-content.gtr-panel__group .a-mega-second-link {
	display: block;
	padding: 0 0 12px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--gtn-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.gtr-nav .gtr-panel--grouped .ul-second-items .li-second-items.gtr-panel__group .a-second-link:hover,
.gtr-nav .gtr-panel--grouped .ul-second-items .li-second-items.gtr-panel__group .a-second-link:focus,
.gtr-nav .gtr-panel--grouped .sub-item2-content.gtr-panel__group .a-mega-second-link:hover,
.gtr-nav .gtr-panel--grouped .sub-item2-content.gtr-panel__group .a-mega-second-link:focus {
	background: transparent;
	color: var(--gtn-brand-strong);
}

/* The module's mega markup wraps columns in a Bootstrap row; keep it, but drop
   the hairline separators it draws between columns (PRD §27). */
.gtr-nav .gtr-panel--mega .sub-item2-category-content:before {
	display: none;
}

.gtr-nav .gtr-panel--mega .sub-item2-content h4 {
	margin: 0;
}


/* 7. Desktop · current-page state ------------------------------------------ */
/* PRD §29: the active primary category stays legible while a customer is deep
   in a subcategory. The underline is header2.css's own :after bar, revealed. */
/* The open label IS the panel's title, now that the panel carries none of its
   own. So it has to look like one while the panel is up: lit, and underlined
   with a solid 2px rule — the same device Nike uses to mark which menu is
   open. `.is-open` is added by the script; `--current` is the page you are on.
   Both reuse header2.css's own `span:after` bar rather than drawing a second
   one, so there is one underline in the codebase, not two. */
.gtr-nav .ul-top-items .li-top-item.gtr-nav__item--current > a > span:after,
.gtr-nav .ul-top-items .li-top-item.is-open > a > span:after {
	opacity: 1;
}

/* !important here answers the module's inline `#pt-menu-<id> … .a-top-link`
   colour, which carries ID specificity — the same sanctioned case gtr-header.css
   §5 already handles for :hover and .active. Without it the open label silently
   stays ink, which is exactly the state the panel is relying on to name itself. */
.gtr-nav .ul-top-items .li-top-item.gtr-nav__item--current > a,
.gtr-nav .ul-top-items .li-top-item.is-open > a {
	color: var(--gtn-brand-strong) !important;
}

.gtr-nav .gtr-panel a.is-current {
	color: var(--gtn-brand-strong);
	font-weight: 600;
}


/* 8. Drill-down · shell and panels ------------------------------------------ */
/* PRD §15–§19. One component serves both drawers: the phone drawer
   (#gt-drawer > .gt-drawer__nav) and the tablet burger panel, which is the
   module's own position:fixed .ul-top-items. Hosting the drill inside that
   <ul> keeps each drawer's scrim, close control and open/close JS untouched.
   The original accordion rows stay in the DOM and are only hidden once JS has
   set .gtr-drill-ready, so a script failure degrades to the old menu. */
.pt-menu.gtr-drill-ready > .ul-top-items > .li-top-item,
.pt-menu.gtr-drill-ready > .ul-top-items > .menu-mobile-title {
	display: none;
}

.gtr-drill-host {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* PRD §17: while a child level is open, nothing but that hierarchy shows. The
   account and contact blocks are siblings of the menu inside the drawer body,
   so the script marks the drawer rather than the menu. Back brings them back. */
.gt-drawer.gtr-drilled .gt-drawer__section {
	display: none;
}

/* Deliberately no overflow here. `overflow-x: hidden` would make the viewport
   itself a scroll container (per spec the other axis computes from visible to
   auto), and a sticky Back bar inside a container that never scrolls can never
   stick. The horizontal clip belongs on the element that already scrolls — see
   the two rules below — which is also the element the bar sticks to. */
.gtr-drill .gtr-drill__viewport {
	position: relative;
}

/* The two scroll hosts the drill can land in, named separately because they
   are different elements: the phone drawer's body, and — on tablets — the
   module's own fixed panel, which *is* the <ul> (header2.css:336). Clipping
   here contains the sliding panel; overscroll-behavior stops a flick at the
   end of a category list from scrolling the page behind the drawer.
   The phone's <ul> is deliberately left alone: it does not scroll, and giving
   it an overflow would steal the sticky context from the drawer body. */
.gt-drawer .gt-drawer__body,
.gtr-burger .pt-menu.gtr-drill-ready > .ul-top-items {
	overflow-x: hidden;
	overscroll-behavior: contain;
}

.gtr-drill .gtr-drill__panel[hidden] {
	display: none;
}

/* The one title left in the navigation — and it is not redundant here. On
   desktop the navbar label stays on screen above the open panel and does the
   naming; on a drill-down child screen the label is gone, so without this the
   customer has no answer to "which list am I in". Sentence case at a real
   heading size, the way a mobile screen title reads on any phone OS. */
.gtr-drill .gtr-drill__title {
	margin: 14px 0 0;
	color: var(--gtn-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}


/* 9. Drill-down · rows, back, View All -------------------------------------- */
.gtr-drill .gtr-drill__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gtr-drill .gtr-drill__item {
	margin: 0;
	list-style: none;
}

/* PRD §20: the whole row is the target, never a lone chevron. 52px clears the
   44px minimum with room for two-line category names. */
.gtr-drill .gtr-drill__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	/* The negative margins pull the hover wash and the divider out to the
	   drawer gutter while the label stays on the same left edge as the account
	   rows below (header-mobile.css §7 uses the same 0.8rem trick).
	   The width is stated explicitly and includes both margins, because the two
	   row elements resolve `auto` differently: an <a> is block-level and fills
	   its containing block, but a <button> is shrink-to-fit, so parent rows
	   would collapse to the width of their own label. */
	width: calc(100% + 16px);
	padding: 9px 8px;
	margin: 0 -8px;
	border: 0;
	border-bottom: 1px solid var(--gtn-line);
	border-radius: 0;
	background: transparent;
	color: var(--gtn-ink);
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}

.gtr-drill .gtr-drill__row:hover,
.gtr-drill .gtr-drill__row:focus,
.gtr-drill .gtr-drill__row:active {
	background: var(--gtn-brand-soft);
	color: var(--gtn-brand-strong);
	text-decoration: none;
}

.gtr-drill .gtr-drill__label {
	flex: 1 1 auto;
	min-width: 0;
}

.gtr-drill .gtr-drill__row.is-current {
	color: var(--gtn-brand-strong);
	font-weight: 600;
}

/* Chevrons are drawn from borders rather than the module's Ionicons glyphs,
   which header2.css pins to a ~10px 1px hairline — invisible on white. */
.gtr-drill .gtr-drill__chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	color: var(--gtn-muted);
}

.gtr-drill .gtr-drill__row:hover .gtr-drill__chevron,
.gtr-drill .gtr-drill__row:focus .gtr-drill__chevron {
	color: var(--gtn-brand-strong);
}

.gtr-drill .gtr-drill__chevron--back {
	transform: rotate(135deg);
	color: inherit;
}

.gtr-drill .gtr-drill__chevron--go {
	color: inherit;
}

/* PRD §18: Back is a first-class control, not the browser button — and it is
   pinned, because a 12-item level is taller than a phone viewport and an
   escape route that scrolls away is one the customer has to hunt for. The bar
   is the sticky box (a full-width band that hides rows passing underneath);
   the button inside it keeps its pill shape. */
.gtr-drill .gtr-drill__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0 -16px;
	padding: 2px 16px 4px;
	background: #fff;
	/* The rule is permanent, not stuck-only: it reads as the divider under
	   "‹ Back" in the PRD §17 sketch when the list is at the top, and as the
	   edge of a pinned bar once rows start passing beneath it. Detecting
	   "stuck" would need a scroll listener for no extra clarity. */
	border-bottom: 1px solid var(--gtn-line);
}

.gtr-drill .gtr-drill__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 10px;
	margin: 0 -10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gtn-brand-strong);
	font-size: 14px;
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
}

.gtr-drill .gtr-drill__back:hover,
.gtr-drill .gtr-drill__back:focus,
.gtr-drill .gtr-drill__back:active {
	background: var(--gtn-brand-soft);
	color: var(--gtn-brand-strong);
}

/* PRD §11: the customer who knows "I want a bouquet" but not which variety
   needs a way out of the taxonomy. */
.gtr-drill .gtr-drill__viewall {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 14px;
	margin: 10px 0 14px;
	border-radius: 8px;
	background: var(--gtn-brand-soft);
	color: var(--gtn-brand-strong);
	font-size: 14px;
	font-weight: 600;
}

.gtr-drill .gtr-drill__viewall:hover,
.gtr-drill .gtr-drill__viewall:focus {
	background: #fbe0d3;
	color: var(--gtn-brand-strong);
	text-decoration: none;
}


/* 10. Drill-down · transitions --------------------------------------------- */
/* PRD §19: child enters from the right, and on Back leaves toward the right
   while the parent returns from the left. The outgoing panel is lifted out of
   flow by the script for the crossing, so the viewport keeps the incoming
   panel's height and the drawer never jumps. */
.gtr-drill .gtr-drill__panel {
	transition: transform 220ms ease, opacity 220ms ease;
}

/* Promoted only for the ~220ms the slide lasts. A permanent will-change would
   keep two full category lists on their own compositor layers for the whole
   session, which is exactly the memory cost the property warns about. */
.gtr-drill.is-animating .gtr-drill__panel {
	will-change: transform, opacity;
}

.gtr-drill .gtr-drill__panel.is-entering-right { transform: translateX(100%); opacity: 0; }
.gtr-drill .gtr-drill__panel.is-entering-left  { transform: translateX(-100%); opacity: 0; }
.gtr-drill .gtr-drill__panel.is-leaving-left   { transform: translateX(-100%); opacity: 0; }
.gtr-drill .gtr-drill__panel.is-leaving-right  { transform: translateX(100%); opacity: 0; }

.gtr-drill .gtr-drill__panel.is-leaving {
	pointer-events: none;
}

/* PRD §21: the tablet burger opens the module's fixed panel, which had no
   scroll lock of its own. The phone drawer already locks via .gt-drawer-open. */
body.gtr-navlock {
	overflow: hidden;
}


/* 11. Accessibility and reduced motion ------------------------------------- */
/* PRD §31/§39 require a visible focus state, and stylesheet.css:7 sets
   `*:focus{outline:none !important}` for the whole storefront. An important
   declaration is the only thing that can answer another important declaration,
   so these five selectors carry one — deliberately narrowed to the navigation
   controls this change owns.
   NOTE: the same global reset also silences gtr-header.css's focus rules for
   the utility bar, search, cart and account controls. Repairing that means
   removing or scoping the site-wide reset, which changes focus appearance on
   every page, so it is left for its own reviewed change. */
.gtr-nav .gtr-nav__toggle:focus-visible,
.gtr-panel a:focus-visible,
.gtr-drill .gtr-drill__row:focus-visible,
.gtr-drill .gtr-drill__back:focus-visible,
.gtr-drill .gtr-drill__viewall:focus-visible {
	outline: 2px solid var(--gtn-brand-strong) !important;
	outline-offset: 2px;
}

/* The primary labels are the module's own anchors, so they need the same
   treatment at a depth that clears header2.css. */
.gtr-nav .ul-top-items .li-top-item .a-top-link:focus-visible {
	outline: 2px solid var(--gtn-brand-strong) !important;
	outline-offset: 2px;
}

/* The drawer's own controls are part of this navigation: the close button and
   the burger are named in PRD §20's touch-target list and §31's keyboard list.
   gtr-header.css and header-mobile.css already declare focus rings for them —
   the global reset above is what silences those, so this block simply re-arms
   the rules those files intended. Colours are literals: these elements sit
   outside the token scopes declared in §1. */
.gtr-header a:focus-visible,
.gtr-header button:focus-visible,
.gt-drawer a:focus-visible,
.gt-drawer button:focus-visible,
.gt-header .gt-iconbtn:focus-visible,
.gt-topbar a:focus-visible,
.gt-topbar button:focus-visible {
	outline: 2px solid #c73e12 !important;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gtr-nav .li-top-item.is-open > .gtr-panel {
		animation: none;
	}
	.gtr-nav .gtr-nav__toggle::before,
	.gtr-panel__arrow,
	.gtr-drill .gtr-drill__panel,
	.gtr-nav .gtr-panel a {
		transition: none;
	}
}