/* ============================================================================
   REDESIGN TOKENS & COMPONENTS
   ----------------------------------------------------------------------------
   Design language ported from external/proto1/index.html ("HotelsPrepaid –
   The Ultimate Hotel Gift Experience" mockup). Loaded on every page (see
   resources/views/theme/head.blade.php) alongside the existing legacy
   stylesheets, so every class here is prefixed `rd-` to guarantee it can
   never collide with a Bootstrap class or an existing custom.css/new_style.css
   class. Nothing in this file is applied to any page until a Blade view
   actually uses an `rd-*` class in its markup — until then this file is
   inert (see the redesign plan, Phase 0).

   These classes are meant for FRESHLY-AUTHORED markup, not as override
   patches bolted onto the old Bootstrap-grid DOM - that approach (v1 of this
   redesign) fought the legacy stylesheet's ~180 `!important` declarations and
   produced visible bugs (a missing font-family, a layout that wrapped) that
   took multiple rounds to find. Every rule below is a plain, non-`!important`
   declaration because it only ever needs to apply to markup that carries
   nothing but these `rd-*` classes - there's nothing competing to out-rank.

   Deliberately NOT included here: a global `*` box-model reset or a global
   `body` font/color override. Bootstrap's own reboot (pulled in via
   frontend/css/custom.css's `@import url("bootstrap.min.css")`) already sets
   `box-sizing: border-box` on every element site-wide, so redesigned
   components can rely on that. Every rule below sets its own font-family
   explicitly rather than depending on an inherited body font, so this file
   never touches anything outside markup that explicitly opts in via an
   `rd-*` class.
   ========================================================================= */

:root {
  --gold:        #C8860A;
  --gold-light:  #E8A828;
  --gold-btn:    #D4940C;
  --gold-hover:  #B07808;
  /* The gold for bands that carry a lot of white text. Such a band is optically
     lightened by its own content - measured against an early prototype of the
     same #C8860A carrying ~7% white pixels, which read as visibly richer than
     the top bar's ~45%. This compensates for that wash-out. It is not a second
     brand gold: use it for those bands (the top bar, and the mobile drawer,
     which is the same band folded vertically and is if anything more text-dense)
     and not as a general accent. Same value as --gold-hover, kept separate
     because they change for unrelated reasons. */
  --gold-deep:   #B07808;
  --navy:        #1E3A5F;
  --dark:        #1A1A1A;
  --text:        #2D2D2D;
  --text-muted:  #6B6B6B;
  --bg:          #FFFFFF;
  --bg-warm:     #FAF8F4;
  --border:      #E8E0D4;
}

/* ─── UTILITY ─────────────────────────────────────────────────────────── */
.rd-serif { font-family: 'Cormorant Garamond', serif; }

.rd-btn-gold {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 24px;
  background: var(--gold-btn); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  border: none; border-radius: 4px; cursor: pointer;
  transition: background .2s;
  text-decoration: none;
}
.rd-btn-gold:hover { background: var(--gold-hover); color: #fff; }

.rd-btn-outline-dark {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  background: transparent; color: var(--dark);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  border: 1.5px solid var(--dark); border-radius: 4px; cursor: pointer;
  transition: background .2s, color .2s;
  text-decoration: none;
}
.rd-btn-outline-dark:hover { background: var(--dark); color: #fff; }

.rd-btn-center {
  display: block; margin: 0 auto;
  padding: 12px 44px;
  background: var(--gold-btn); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  border: none; border-radius: 4px; cursor: pointer;
  transition: background .2s;
  text-decoration: none;
}
.rd-btn-center:hover { background: var(--gold-hover); color: #fff; }

/* Expanding variant: the chevron distinguishes "this opens more of the page"
   from "this navigates away". display:flex overrides .rd-btn-center's block so
   the label and chevron sit on one baseline; margin:0 auto still centres it. */
.rd-btn-expand { display: flex; align-items: center; justify-content: center; gap: 9px; }
/* The category grid sets the distance to its own button with margin-bottom:40px.
   The bestseller grid has no bottom margin - it is also used on
   product_cat_travel_details, where one is not wanted - so its button was
   sitting flush against the cards. Attaching the gap to the pairing rather than
   to either grid matches the two buttons without touching the other pages. */
.rd-bestseller-grid + .rd-btn-expand { margin-top: 40px; }
.rd-btn-expand-chevron { width: 15px; height: 15px; flex-shrink: 0; transition: transform .25s; }
.rd-btn-expand.is-expanded .rd-btn-expand-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .rd-btn-expand-chevron { transition: none; } }

.rd-btn-hero-gold {
  padding: 15px 36px;
  background: var(--gold-btn); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
  border: none; border-radius: 4px; cursor: pointer;
  transition: background .2s;
  text-decoration: none; display: inline-block;
}
.rd-btn-hero-gold:hover { background: var(--gold-hover); color: #fff; }

.rd-btn-add {
  padding: 12px 28px; background: var(--gold-btn); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  border: none; border-radius: 4px; cursor: pointer; transition: background .2s;
}
.rd-btn-add:hover { background: var(--gold-hover); color: #fff; }

.rd-btn-detail {
  padding: 11px 26px; background: transparent; color: var(--dark);
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  border: 1.5px solid #bbb; border-radius: 4px; cursor: pointer;
  transition: background .2s, color .2s;
  text-decoration: none; display: inline-block;
}
.rd-btn-detail:hover { background: var(--dark); color: #fff; border-color: var(--dark); }

.rd-btn-cart-full {
  width: 100%; padding: 15px; text-align: center;
  background: var(--gold-btn); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
  border: none; border-radius: 6px; cursor: pointer;
  transition: background .2s; margin-bottom: 18px;
  display: block;
}
.rd-btn-cart-full:hover { background: var(--gold-hover); color: #fff; }

.rd-badge {
  display: inline-block;
  padding: 3px 11px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}
.rd-badge-gold {
  background: rgba(200,134,10,.1); color: var(--gold);
  border: 1px solid rgba(200,134,10,.28);
}
.rd-badge-red { background: #c0392b; color: #fff; }

/* ─── TOP BAR ──────────────────────────────────────────────────────────── */
/* 5px, down from 9px: 34px tall instead of 42px. Sized against the prototype,
   where the gold strip is roughly half the nav row's height - this was ~62% of
   it. The 24px content box is set by the items' line-height, so padding is the
   only lever here that doesn't also reflow the text. */
.rd-top-bar { background: var(--gold-deep); color: #fff; padding: 5px 0; }
/* space-between, and 40px padding to match .rd-section-wrap/.rd-footer-inner.
   An earlier attempt at space-between was reverted for leaving "a lot of bare
   gold" between the groups - but that was while .rd-header-inner was 1400px
   and this bar 1200px, so the two bars' edges never lined up and the gap read
   as arbitrary drift. Both share the 1200px/40px column now, so the info items
   land on the same rail as the logo below them and the account cluster on the
   same rail as "Use gift card" - and measured, the two groups fill 1062px of
   the 1120px box, so only ~58px of gold is left between them, about what the
   centered version's own 48px gap column already showed. There is no
   bare-gold problem left to solve at these content lengths. */
.rd-top-bar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  display: flex; justify-content: space-between; align-items: center;
  /* Same split as .rd-top-bar-left below: the 24px column gap separates the
     info cluster from the account cluster, but the row gap only ever applies
     when the bar wraps, where 16px was too much (#83). */
  flex-wrap: wrap; gap: 5px 24px;
}
/* Two gaps, not one (#83). 16px is the right distance between these items side
   by side, but it was also acting as the row gap once they wrap, which happens
   on every screen from 481px to 767px - the four trust items need two lines
   there. That put 16px of air between the two lines and took the bar from 34px
   to 74px, pushing the logo and nav down with it. 5px keeps the wrapped lines
   reading as one block; the horizontal spacing is untouched. */
.rd-top-bar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 16px; }
/* 13px to match the account cluster on the right (.rd-account-btn /
   .rd-selected-lang / .rd-cur-trigger are all 13px). At 12.5px these two
   groups centered to slightly different text baselines - a 1px step across one
   horizontal row of text - because align-items:center centers differently
   sized text by box, not by baseline. */
.rd-top-bar-item {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
}
.rd-top-bar-item svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ─── TOP BAR RIGHT: account / cart / currency / language ────────────────
   Moved up here from the header row below on request. This group used to
   sit on a white background (dark text/borders, see .rd-account-signin,
   .rd-cur-trigger, .rd-lang-dropdown base rules) - on the gold top bar
   it needs the opposite: light, minimal, text-style like the info items to
   its left rather than boxed form controls that would look like a foreign
   object dropped on a solid color bar. Every rule below is a contextual
   .rd-top-bar-right override of an existing class, not a new component. */
/* margin-left:auto keeps this flush right even if the bar wraps to two rows -
   space-between alone would left-align a lone item on the second line. */
.rd-top-bar-right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; margin-left: auto; }
/* Both halves of the gold bar drop from 13px to 11.5px - it is a utility strip,
   and at 13px it competed with the nav below it. Scoped to the two top-bar
   containers rather than set on .rd-account-signin / .rd-cur-trigger /
   .rd-selected-lang themselves, because header.blade.php reuses those same
   classes in the mobile drawer, where the size should stay as it is. */
.rd-top-bar-left .rd-top-bar-item,
.rd-top-bar-right .rd-account-signin,
.rd-top-bar-right .rd-account-btn,
.rd-top-bar-right .user-name,
.rd-top-bar-right .rd-cur-trigger,
.rd-top-bar-right .rd-selected-lang { font-size: 11.5px; }
/* Icons follow the text down, or they start to look oversized beside it. */
.rd-top-bar-left .rd-top-bar-item svg { width: 13px; height: 13px; }
/* ProductController::cartCount() injects the cart as raw HTML, so it carries
   none of the classes above and its trigger inherited the browser's default
   16px - conspicuous next to 11.5px neighbours. Only the trigger is sized here:
   the mini-cart panel it opens sits on white and keeps its own larger text. */
.rd-top-bar-right .rd-cart-slot > .dropdown > button { font-size: 11.5px; }
.rd-top-bar-right .rd-account-signin,
.rd-top-bar-right .rd-account-btn,
.rd-top-bar-right .user-name { color: #fff; }
/* custom.css:8034/8050 set a blanket `.fas { color: #FF715B }` / `.fa { color:
   #FF715B }` (its "Product Icons" block). Because that paints the <i> element
   itself, it beats the inherited color from whatever container the glyph sits
   in - which left a coral person icon on the gold top bar beside white text
   (#47), and coral glyphs in the white account dropdown and mobile drawer.
   The inline SVGs next to them were always right because they use
   stroke="currentColor". `inherit` hands the same decision back to the
   container, so each icon simply takes its parent's color - including on
   hover, where .rd-account-dropdown-item:hover switches to gold.
   Scoped to #header (which wraps the whole component, drawer included) so no
   other page's icons change; the same fix is scoped to dashboard.css for the
   account sidebar. */
#header .fa,
#header .fas { color: inherit; }
.rd-top-bar-right .rd-account-signin:hover { color: rgba(255,255,255,.8); }
.rd-top-bar-right .rd-account-btn:hover { color: rgba(255,255,255,.8); }
/* {{first}} {{last}} is unbounded - a long name is the one thing that can
   actually overflow this row (the column width is fixed at every viewport
   where this bar is visible, so width alone never crowds it). */
.rd-top-bar-right .user-name {
  display: inline-block; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
/* #cartCount's AJAX-injected icon already hardcodes style="color:#fff" -
   written for exactly this spot (the gold bar) originally, so it needs no
   color override here now that it's back where it started. It is also empty
   until that call returns, but still eats a gap - so without :empty the whole
   cluster visibly shifts sideways once the cart loads. */
.rd-top-bar-right .rd-cart-slot:empty { display: none; }
/* Same block-parent/baseline problem as .rd-user-menu above: the injected
   trigger is an inline-flex button inside a plain .dropdown div, so it sat on
   that div's inherited 24px text baseline and rode ~1px below the row's centre.
   Centering the .dropdown wrapper brings the cart glyph onto the same optical
   line as the other icons. */
.rd-top-bar-right .rd-cart-slot > .dropdown { display: flex; align-items: center; }
/* The count numeral itself still sits ~1px above the shared 13px baseline,
   because the injected markup sets font-size:14px on it inline and the glyph
   font drives its line box. Deliberately left alone: forcing it to 13px was
   measured and made it worse (27.5 instead of 28), since shrinking the text
   raises its baseline inside the centered box. The icon it sits next to is
   exactly aligned, which is the part that actually reads. */
/* The currency trigger is bare white text + chevron on the bar, same as
   .rd-selected-lang beside it - the two are the same kind of small utility
   picker. Its panel opens onto white, so it resets to the normal text colour. */
.rd-top-bar-right .rd-cur-trigger { color: #fff; }
.rd-top-bar-right .rd-cur-trigger:hover { color: rgba(255,255,255,.8); }
.rd-top-bar-right .rd-cur-panel { color: var(--text); }
.rd-top-bar-right .rd-selected-lang { color: #fff; }
.rd-top-bar-right .rd-lang-menu { color: var(--text); }
/* The injected mini-cart panel is left-aligned under a trigger that now sits
   right on the column's right rail, so it would clip off-screen. */
.rd-top-bar-right .dropdown-menu { left: auto; right: 0; }

/* ─── HEADER ───────────────────────────────────────────────────────────── */
.rd-site-header {
  /* frontend/css/custom.css's `header#header { position:relative; z-index:2; }`
     is ID-anchored (this element kept id="header") and silently overrode these
     two back from the sticky-header values below - invisible in any screenshot
     taken at scroll position 0, only shows up as "doesn't stick on scroll". */
  background: #fff; border-bottom: 1px solid var(--border);
  position: sticky !important; top: 0; z-index: 200 !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  overflow: visible;
}
.rd-header-inner {
  /* Same 1200px column AND the same 40px padding as .rd-top-bar-inner/
     .rd-section-wrap/.rd-footer-inner, so the logo and nav genuinely line up
     with the rest of the page's left edge (this said "same column" while the
     padding was 24px against the sections' 40px, which left the logo hanging
     16px outside the content rail below it) - this
     was 1400px while Sign In/cart/currency/language still lived in this row
     (proto1's own header-actions was only ever two buttons; fitting five
     widgets plus a six-link nav needed the extra width). Now that those four
     moved up to .rd-top-bar-right, this row is just logo + nav + one CTA
     button again, matching what proto1's own header actually had to fit. */
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  min-height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.rd-logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; cursor: pointer; flex-shrink: 0;
}
.rd-logo-mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rd-logo-mark svg { width: 18px; height: 18px; }
.rd-logo-name { line-height: 1; }
.rd-logo-name-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600;
  color: var(--dark); display: block;
}
.rd-logo-name-main em { font-style: normal; color: var(--gold); }
.rd-logo-name-sub {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-muted); display: block; margin-top: 2px;
}
/* 48px is the height the old mark-plus-two-lines lockup occupied, so swapping
   the image in leaves the 68px header row exactly as it was. max-width keeps it
   from forcing a horizontal scroll on a narrow phone; the shrink below does the
   real work there. */
.rd-logo-img { height: 48px; width: auto; max-width: 100%; display: block; }

/* #menu-main doubles as the desktop nav AND the mobile off-canvas drawer's link
   list (see .rd-nav-collapse below) - same element, two responsive presentations,
   matching how this markup already worked before the redesign. Only lay it out as
   a horizontal row at desktop; at mobile widths leave display/position alone
   entirely (responsive.css already makes .navbar-collapse.collapse a `left`-
   positioned off-canvas drawer with `display: block !important` - fighting that
   would be exactly the kind of legacy-CSS battle this rebuild is meant to avoid). */
.rd-main-nav {
  list-style: none; margin: 0; padding: 0;
}
.rd-main-nav .level.mobile { display: none; }
.rd-main-nav > .level > a, .rd-main-nav .rd-mobile-link {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 400; color: var(--text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
}
/* background and border-radius are here to undo sdk.css's
   `.navbar-nav > li:hover > a { background-color:#FF715B; border-radius:2px }`,
   which put the pre-rebrand coral pill behind every nav link on hover (#62).
   This rule only ever set colours, so that background applied unopposed - gold
   text on a coral tab. Specificity (0,3,1) beats sdk's (0,2,2), so no
   !important is needed. The redesign marks hover with the gold underline the
   base rule already declares, not with a filled block. */
.rd-main-nav > .level > a:hover,
.rd-main-nav > .level > a.rd-active {
  color: var(--gold); border-bottom-color: var(--gold);
  background: transparent; border-radius: 0;
}

/* 1350px, not the 991px the rest of the page's responsive rules use (see the
   @media (max-width: 1349px) block below, split out from the old single
   @media (max-width: 991px) block for exactly this reason): logo + all six
   nav links + the full five-widget utilities cluster (Sign In, cart,
   currency, language, Use gift card) measured, empirically, as needing
   roughly 1400-1450px to lay out on one line without colliding - proto1's
   own header never had to fit more than two buttons in that space. Below
   1350px the already-solid mobile hamburger + off-canvas drawer pattern
   (below) takes over instead of cramming a "desktop" nav that doesn't
   actually fit; above it, everything here keeps it to one row. */
@media (min-width: 1350px) {
  /* Single-row header layout: logo left, nav centered, utilities right -
     none of this works with the base rule's `flex-wrap: wrap` (needed at
     mobile, where hamburger/logo/compact-icons are the only row and always
     fit) because `#menu` also carries Bootstrap's real `.navbar-collapse`
     class (bootstrap.min.css, loaded via custom.css's @import), which sets
     `flex-basis: 100%; flex-grow: 1`. That forces the nav to always claim a
     full row by itself the moment wrapping is allowed - logo on row 1 (only
     item that fit), nav alone on row 2 (100% basis), actions pushed to row
     3. `nowrap` here plus resetting #menu's flex-basis/grow below is what
     actually keeps this to one row. */
  .rd-header-inner { flex-wrap: nowrap; }
  .overlay { display: none; }

  /* flex-direction: row is explicit, not the flexbox default, because Bootstrap's
     own .navbar-nav{flex-direction:column} (bootstrap.min.css) is an equal-
     specificity single-class rule that still wins for any property this rule
     doesn't itself declare - omitting it silently kept the nav stacked vertically. */
  /* flex-wrap: nowrap overrides Bootstrap's `.nav{flex-wrap:wrap}` (bootstrap.min.css,
     `#menu-main` carries the real `.nav` class) - same "declared property beats an
     equal-specificity single-class rule that doesn't declare it" gap that
     flex-direction below already had to close. Without it the six links wrapped
     to a second line the instant the (now-fixed) single-row #menu column was
     narrower than their combined width. gap tightened from proto1's original
     28px, then further twice on request for a more compact look (8px, then 4px). */
  .rd-main-nav { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; }
  /* custom.css:1878 `.navbar-nav>li{margin:0 15px}` is what actually set this
     nav's spacing - 15+8+15 per gap, i.e. 48px between link text once each
     link's own 6px/7px padding (custom.css:1890) is counted. Zeroing it leaves
     the gap above as the single source of truth: 7 + 8 + 7 = 22px text-to-text.
     Its companions `:first-child{margin-left:0}`/`:last-child{margin-right:0}`
     were also silently broken here - they match the hidden `.level.mobile`
     items (the account banner renders only when logged in, the CTA only when
     hasGiftBox()), so the visible nav's outer margins - and therefore where the
     "centered" group actually sat - changed with login state. Scoped inside
     this min-width block so the mobile drawer's own spacing is untouched. */
  .rd-main-nav > .level { margin: 0; }
  /* #menu (the actual .collapse element) is `display:none` by default per
     Bootstrap's own `.collapse:not(.show){display:none}` (bootstrap.min.css) -
     header.css used to force it open at desktop via `#menu-main{display:flex}`
     on the inner list, but that only works if the outer .collapse wrapper is
     itself visible, which nothing does anymore now that header.css is gone.
     `#menu.rd-nav-collapse` (an ID) safely outranks `.collapse:not(.show)` (two
     classes) and `.navbar-collapse` (one class) without needing !important.
     flex: 1 1 auto (overriding .navbar-collapse's flex-basis:100%;flex-grow:1
     above) makes #menu the flexible middle column that fills the space
     between logo and actions, so .rd-main-nav's justify-content:center above
     centers the links within it - not within the whole header. */
  #menu.rd-nav-collapse { display: block; position: static; flex: 1 1 auto; min-width: 0; }
}

.rd-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Tighter than the shared .rd-btn-outline-dark base (used elsewhere on the page
   at its full size, e.g. the hero) - this cluster has five widgets competing
   for room next to a six-link centered nav, proto1's own header-actions never
   had to fit more than two buttons.

   Recoloured onto the gold palette (#48). The base class paints border and text
   in var(--dark), which is the treatment for a tertiary or cancel action - wrong
   for the one CTA that appears on every page, and it shared no colour with the
   brand.

   Solid gold at rest, not just on hover (on request). It used to be a gold
   outline that only filled on hover, to avoid competing with each page's own
   primary action, but that made it too easy to miss - and with the hero's own
   "Use Gift Card" button gone, this is now the way in for someone holding a
   card. Hover darkens to --gold-hover, same as every other solid gold button.
   The 1.5px border is kept (in the fill colour) so the button stays exactly
   the size it was and the header row doesn't shift.

   Scoped here rather than on .rd-btn-outline-dark itself, which cart.blade.php
   also uses and where the neutral outline is still correct. */
.rd-header-actions .rd-btn-outline-dark {
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  background: var(--gold-btn); border-color: var(--gold-btn); color: #fff;
  transition: background .2s, color .2s, border-color .2s;
}
.rd-header-actions .rd-btn-outline-dark:hover {
  background: var(--gold-hover); border-color: var(--gold-hover); color: #fff;
}
.rd-header-actions-compact { display: none; }

.rd-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0;
  color: var(--dark); font-size: 20px;
}

/* ─── ACCOUNT / CART / CURRENCY / LANGUAGE (header-actions widgets) ───────── */
.rd-account-signin {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.rd-account-signin:hover { color: var(--gold); }
/* display:flex, not the default block: the trigger inside is an inline-flex
   button, so on a block parent it sat on that parent's 16px/24px inherited text
   baseline instead of being centered - which put the account name ~2.5px lower
   than every other item in the top bar. The wrapper still needs position:
   relative for .rd-account-dropdown to anchor to it. */
.rd-user-menu { position: relative; display: flex; align-items: center; }
.rd-account-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--text);
}
.rd-account-btn:hover { color: var(--gold); }
/* frontend/css/header.css's `.user-dropdown { display:none; position:absolute; ... }`
   revealed via `.user-menu:hover .user-dropdown { display:block; }` is what actually
   made this panel a dropdown (hidden until hover, positioned under the trigger).
   header.css isn't loaded by this redesign (see the note at the top of
   theme/header.blade.php), so without restating that here the panel had no hide/show
   or positioning at all - it just rendered inline, always visible, whenever a
   customer was logged in. Same reveal mechanism as .rd-lang-dropdown above. */
.user-dropdown.rd-account-dropdown {
  display: none; position: absolute; top: 100%; right: 0; z-index: 210;
  min-width: 190px; padding: 8px 0;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.rd-user-menu:hover .user-dropdown.rd-account-dropdown { display: block; }
.rd-account-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.rd-account-dropdown-item:hover { background: var(--bg-warm); color: var(--gold); }
/* The FontAwesome glyphs in this menu are all different widths - measured
   10.3px for fa-bookmark up to 13.5px for fa-gift - and with the row laid out
   as flex + gap, each label started wherever its own icon happened to end. The
   text column came out ragged across the five rows (#61). A fixed slot wide
   enough for the widest glyph, with the glyph centred in it, puts every label
   on the same left edge. Same fix as the account sidebar in dashboard.css. */
.rd-account-dropdown-item i {
  width: 16px; flex-shrink: 0; text-align: center;
}

.rd-cart-slot { display: inline-flex; align-items: center; }
/* ProductController::cartCount() injects a self-contained .dropdown as a raw
   PHP string with its trigger icon color hardcoded inline
   (`style="color:#fff"`). #cartCount briefly lived on the white header row
   (needing a color: var(--text) !important override here to stay visible)
   before moving to .rd-top-bar-right, its original intended home on the gold
   bar - the controller's own white inline color is correct there again, so
   that override is gone; only the button's own display/layout still needs
   fixing up. */
#cartCount > .dropdown > button { display: inline-flex !important; align-items: center; }

/* Two legacy rules in frontend/css/custom.css collide with any <select>
   inside the header:
   1) a bare `select { background: ... !important; width:100%; height:36px; }`
      (element selector, low specificity, but !important on background beats
      any non-important background here regardless of specificity);
   2) `header#header select { color:#fff; width:71px; height:50px; }` - an
      ID-anchored selector (this header kept `id="header"`), which outranks
      a plain class selector even without !important. It forced white text
      onto a select on a white background (it was written for the old
      header, where selects sat on a dark bar).
   The fix is `!important` on each property those two rules touch, plus
   appearance:none and a custom chevron instead of a bare native control -
   the pattern .rd-pd-value-select, .rd-value-select and others in this file
   still follow. It was first written for the header's currency <select>,
   which has since been replaced by the .rd-cur picker below (no <select>,
   so neither legacy rule reaches it). */

/* ─── CURRENCY PICKER (theme/currency_picker.blade.php) ──────────────────
   One component in two places: .rd-cur--bar in the gold top bar (desktop),
   .rd-cur--drawer in the mobile drawer. The trigger mirrors the language
   picker next to it in each spot; the panel is a searchable list, because
   there are ~100 currencies and a plain list of codes that long is hard to
   use. Behaviour is in header.blade.php, keyed off [data-rd-cur]. */
.rd-cur { position: relative; font-family: 'Inter', sans-serif; }
/* Our own display rules below would otherwise beat the hidden attribute the
   script toggles on the panel, options, group labels and empty state. */
.rd-cur [hidden] { display: none !important; }

/* custom.css gives every <button> 11px 15px padding, 16px text and
   overflow:hidden - all restated here. */
.rd-cur-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--text); cursor: pointer; overflow: visible;
}
.rd-cur-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.rd-cur-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform .2s; }
.rd-cur-trigger[aria-expanded="true"] .rd-cur-chevron { transform: rotate(180deg); }

.rd-cur-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 280px; padding: 8px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  cursor: default;
}

.rd-cur-search-wrap { position: relative; }
.rd-cur-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-muted); pointer-events: none;
}
/* custom.css's bare `input` rule sets 16px text, 42px min-height and a grey
   border; restated so the box matches the rest of the panel. */
.rd-cur-search {
  width: 100%; min-height: 0; height: auto; margin: 0;
  padding: 9px 10px 9px 33px;
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--bg-warm);
  border: 1.5px solid var(--border); border-radius: 6px;
  outline: none; -webkit-appearance: none; appearance: none;
}
.rd-cur-search::placeholder { color: var(--text-muted) !important; }
.rd-cur-search:focus { border-color: var(--gold); background: #fff; }

/* position:relative so the script's offsetTop maths is relative to the list. */
.rd-cur-list {
  position: relative; margin-top: 6px;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
}
.rd-cur-group-label {
  padding: 10px 10px 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.rd-cur-group-label:first-child { padding-top: 4px; }
.rd-cur-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin: 0;
  border: 0; border-radius: 5px; background: none;
  font: inherit; font-size: 13px; line-height: 1.35; color: var(--text);
  text-align: left; cursor: pointer; overflow: visible;
}
.rd-cur-option:hover, .rd-cur-option:focus-visible { background: var(--bg-warm); outline: none; }
.rd-cur-opt-code { flex-shrink: 0; min-width: 34px; font-weight: 600; }
.rd-cur-opt-name {
  flex: 1; min-width: 0; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-cur-check { width: 15px; height: 15px; flex-shrink: 0; margin-left: auto; color: var(--gold); visibility: hidden; }
.rd-cur-option[aria-selected="true"] .rd-cur-opt-code { color: var(--gold); }
.rd-cur-option[aria-selected="true"] .rd-cur-check { visibility: visible; }
.rd-cur-empty { padding: 14px 10px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* Drawer: a full-width boxed trigger that opens the list inline beneath it,
   the same shape as the mobile language picker (.rd-mobile-lang) right below
   it, so the two settings read as a pair. */
.rd-cur--drawer { margin: 14px 22px 6px; }
.rd-cur--drawer .rd-cur-trigger {
  display: flex; width: 100%; gap: 9px;
  padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-weight: 400; text-align: left;
}
.rd-cur--drawer .rd-cur-code { font-weight: 600; }
.rd-cur--drawer .rd-cur-name {
  flex: 1; min-width: 0; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-cur--drawer .rd-cur-chevron { margin-left: auto; width: 13px; height: 13px; }
.rd-cur--drawer .rd-cur-panel {
  position: static; width: auto; margin-top: 6px;
  border-width: 1.5px; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(26,26,26,.1);
}
.rd-cur--drawer .rd-cur-list { max-height: 260px; }
/* 16px in the drawer only: iOS Safari zooms the page when a focused input's
   text is under 16px. */
.rd-cur--drawer .rd-cur-search { font-size: 16px; }
.rd-cur--drawer .rd-cur-option { padding: 10px; }

.lang-dropdown.rd-lang-dropdown { position: relative; cursor: pointer; }
/* .lang-menu sits 8px below the trigger (margin-top below) for visual
   breathing room, but that gap is a dead zone for :hover: moving the mouse
   straight down from the trigger into the menu crosses a strip that's over
   neither element, :hover drops off .rd-lang-dropdown right there, the menu
   display:none's itself before the pointer arrives, and - once hidden - the
   pointer entering where the menu used to be triggers nothing, since a
   display:none element isn't hit-tested. This invisible bridge fills exactly
   that strip so the pointer is always over the dropdown (trigger, bridge, or
   menu) on the way down. */
.lang-dropdown.rd-lang-dropdown::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
}
.rd-selected-lang {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text);
}
.rd-selected-lang img { width: 18px; height: auto; border-radius: 2px; }
.lang-menu.rd-lang-menu {
  position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 50;
  min-width: 130px; padding: 6px 0;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: none;
}
.lang-dropdown.rd-lang-dropdown.active .lang-menu.rd-lang-menu,
.lang-dropdown.rd-lang-dropdown:hover .lang-menu.rd-lang-menu { display: block; }
.rd-lang-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text);
}
.rd-lang-option:hover { background: var(--bg-warm); }
.rd-lang-option img { width: 18px; height: auto; border-radius: 2px; }

/* ─── HERO ─────────────────────────────────────────────────────────────── */
.rd-hero { position: relative; height: 600px; overflow: hidden; }
.rd-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.rd-hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15,26,46,.78) 0%, rgba(15,26,46,.45) 50%, rgba(15,26,46,.08) 100%);
}
/* 40px, not 60px, so the headline starts on the same rail as the logo above it
   and the section headings below it rather than 20px inside both. */
.rd-hero-body {
  position: absolute; inset: 0;
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 90px;
}
/* align-items:baseline, not center. Centring lined up the two spans' boxes,
   which is not what the eye reads - it reads the baselines. Measured with a
   zero-height inline-block probe (the only reliable way to find a baseline from
   script), centring left the stars sitting 4.9px below the text. On a shared
   baseline that gap is 0 and the pair reads as one object. */
.rd-tp-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }
.rd-tp-badge {
  background: #00B67A; color: #fff;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 3px; letter-spacing: .3px;
}
/* The stars and label were left over from a Trustpilot lockup (hence the green
   above), but the wording became our own "Trusted by 30,000+ travelers" - so
   they wear the house gold now, on white text, at a size that reads against the
   hero photo.

   line-height:1 on both is what fixes the alignment. The row is already
   align-items:center, but that centres each span's line box, and at 25px vs
   14px those two boxes carry very different amounts of leading - so the glyphs
   inside them did not line up even though the boxes did. Collapsing both line
   boxes onto the glyphs makes centring mean what it looks like it means.
   Sizes are chosen so the two read as the same height rather than by taste.
   Canvas text metrics: at 20px the ★ ink stands 14px tall, and Inter's cap
   height at 17px is 13px - near enough parity that the row reads as one object,
   with the stars keeping a shade more weight as the anchor.

   They cannot match exactly at the original 25px stars: 18px of star ink needs
   roughly 23px of label to match, which measures 467px against the ~344px the
   hero column gives a phone. So the stars come down to meet the text rather
   than the text going up to meet them. */
.rd-tp-stars {
  color: var(--gold-light); font-size: 20px; letter-spacing: 1px; line-height: 1;
}
/* Type and colour taken from .rd-hero-sub - Inter at 16.5px, regular weight,
   rgba(255,255,255,.84) - so this line and the subtitle below the headline read
   as the same voice. What is deliberately NOT taken is that rule's box: it also
   carries line-height:1.65 and margin-bottom:38px, and a <span> inside this flex
   row is a flex item, so both applied - the taller line box and the 38px margin
   together shoved the row up the page. line-height stays at 1 here so the
   baseline still lines up with the stars. */
.rd-tp-label {
  color: rgba(255,255,255,.84); font-family: 'Inter', sans-serif; font-size: 16.5px; font-weight: 400; line-height: 1;
}
/* Last resort below the breakpoint sizes: the row is nowrap by default, so
   without this a narrow enough screen pushes it sideways instead of breaking. */
.rd-tp-row { flex-wrap: wrap; }
.rd-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 62px; font-weight: 600; line-height: 1.08;
  color: #fff; max-width: 620px; margin-bottom: 18px;
}
.rd-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 16.5px; line-height: 1.65;
  color: rgba(255,255,255,.84); max-width: 440px; margin-bottom: 38px;
}
.rd-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── TRUST BAR ────────────────────────────────────────────────────────── */
.rd-trust-bar { background: var(--bg-warm); border-bottom: 1px solid var(--border); padding: 18px 0; }
.rd-trust-bar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 40px;
}
.rd-trust-item { display: flex; align-items: center; gap: 9px; }
.rd-trust-icon { font-size: 20px; }
.rd-trust-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--text); }

/* ─── SECTIONS ─────────────────────────────────────────────────────────── */
.rd-section-wrap { max-width: 1200px; margin: 0 auto; padding: 80px 40px; }

/* Homepage sections below the hero alternate white / warm by position, so the
   pattern survives sections being reordered, added or dropped. Each section is
   full-bleed (so the tint spans the viewport) and owns its vertical padding;
   the inner .rd-section-wrap / .rd-band-inner only centre and pad sideways.
   Every boundary is now a colour change, so each section pays its full padding
   on both sides - the old "tight" and "after a band" trims existed only to stop
   two white sections doubling up their gap, which can no longer happen. */
.rd-home-sec { padding: 80px 0; }
.rd-home-sections > section:nth-child(even) { background: var(--bg-warm); }
.rd-home-sec > .rd-section-wrap { padding-top: 0; padding-bottom: 0; }
/* Requested specifically: less space between the hero image and the first
   heading below it - only the first section, whichever one that currently is. */
.rd-hero + .rd-home-sections > section:first-child { padding-top: 36px; }
.rd-section-head { margin-bottom: 48px; }
.rd-section-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 10px; display: block;
}
.rd-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px; font-weight: 600; color: var(--dark);
  line-height: 1.1; margin-bottom: 14px;
}
.rd-section-title em { font-style: normal; color: var(--gold); }
.rd-section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px; color: var(--text-muted); line-height: 1.75; max-width: 640px;
}

/* ─── CATEGORY GRID ────────────────────────────────────────────────────── */
.rd-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; }
.rd-cat-card {
  position: relative; height: 250px; border-radius: 8px; overflow: hidden;
  cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.1);
  transition: transform .3s, box-shadow .3s;
  text-decoration: none; display: block;
}
.rd-cat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.rd-cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.rd-cat-card:hover img { transform: scale(1.07); }
.rd-cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, transparent 55%); }
.rd-cat-label {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff;
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: .3px;
}

/* All Categories page: heading + the existing category filter <select>
   (unchanged GET-param filtering) on one row, not proto1's own concern (it
   has no all-categories page) but built from the same tokens/.rd-value-select. */
.rd-cat-page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }
.rd-cat-page-head .rd-section-title { margin-bottom: 0; }
.rd-cat-filter-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rd-cat-filter-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--dark); white-space: nowrap; }

/* The "Gift Card" item below the category grid: still a wide banner rather than
   a fifth same-size tile, but no longer a dark navy card (#91).
   It was built to stand out per the original brief, and it did - too much. It
   was the only dark block in the whole page body, between a white category grid
   above and a --bg-warm How It Works band below, so it read as something pasted
   in from another site rather than the next section down. It now uses the light
   panel treatment the rest of the page already uses (--bg-warm on --border, the
   same pair as .rd-trust-bar and .rd-band-warm) and takes its type from
   .rd-section-kicker / -title / -sub. The gold visual tile stays: that is what
   keeps it reading as a feature rather than a paragraph. */
.rd-gift-banner {
  display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 32px;
  background: var(--bg-warm); border: 1px solid var(--border);
  /* margin-top was 18px, to sit it close under the category grid it used to
     follow. It is a standalone section now, so its wrapper owns the spacing. */
  border-radius: 10px; padding: 36px 40px; margin-top: 0;
  text-decoration: none; box-shadow: 0 2px 10px rgba(26,26,26,.04);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.rd-gift-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(26,26,26,.09); border-color: var(--gold);
}
.rd-gift-banner-visual {
  display: flex; align-items: center; justify-content: center;
  height: 150px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), #8B6914);
}
.rd-gift-banner-visual svg { width: 56px; height: 56px; }
.rd-gift-banner-body { color: var(--text); }
.rd-gift-banner-kicker {
  /* 3px, matching .rd-section-kicker exactly - this is the same device as the
     "Gifting Ideas" and "Handpicked" kickers above and below it. */
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 10px; display: block;
}
.rd-gift-banner-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; color: var(--dark); line-height: 1.15; margin-bottom: 12px; }
.rd-gift-banner-text { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.75; color: var(--text-muted); max-width: 620px; margin-bottom: 18px; }
/* White-on-navy worked on the dark card; on the light panel it would vanish.
   This is the same gold button the rest of the site uses for its primary
   action, so the banner's call to action now matches every other one. */
.rd-gift-banner-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--gold-btn); padding: 10px 20px; border-radius: 4px;
  transition: background .2s;
}
.rd-gift-banner:hover .rd-gift-banner-cta { background: var(--gold-hover); }

/* ─── FULL-WIDTH COLOR BANDS ───────────────────────────────────────────── */
/* Wider, scaling section shell referenced against a competitor site in the
   brief ("Hotelgift"): full-bleed alternating background, content max-width
   wider than the rest of the (still 1200px) design system so large screens
   don't feel boxed in. */
.rd-band { padding: 76px 0; }
.rd-band-warm { background: var(--bg-warm); }
.rd-band-dark { background: var(--dark); color: rgba(255,255,255,.75); }
.rd-band-inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* ─── STEPS (icon version - kept for reuse elsewhere) ─────────────────── */
.rd-steps-bg { background: var(--bg-warm); padding: 80px 0; }
.rd-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.rd-step-card { text-align: center; }
.rd-step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.rd-step-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 10px; }
.rd-step-text { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted); line-height: 1.75; }

/* ─── STEPS (large photo-card version - "Hotelgift"-style treatment the
   brief asks for, for the homepage's 3 steps) ──────────────────────────── */
.rd-photo-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rd-photo-step {
  position: relative; height: 420px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 28px;
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}
/* The card's photo. Sits under .rd-photo-step-overlay, which is what carries
   the caption's contrast - so a light photo here still reads. */
.rd-photo-step-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Shaped around the caption, which measures 6.7%-36.1% up from the card's
   bottom edge: solid behind that, then clear by 52% so the upper half of the
   photo is untouched. The previous ramp ran all the way to 100%, still dimming
   the middle of every image by ~16% and the top by 4% where no text sits -
   which is most of why these cards read as murky. Slightly stronger at the base
   (.82 vs .78) to buy back the contrast lost by fading out sooner. */
.rd-photo-step-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.60) 22%,
    rgba(0,0,0,.30) 38%,
    transparent 52%);
}
.rd-photo-step-body { position: relative; color: #fff; }
.rd-photo-step-num {
  font-family: 'Cormorant Garamond', serif; font-size: 44px; font-weight: 600;
  color: var(--gold-light); line-height: 1; margin-bottom: 10px; display: block;
}
.rd-photo-step-title { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.rd-photo-step-text { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.85); }

/* ─── BESTSELLERS (larger product cards) ───────────────────────────────── */
.rd-bestseller-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rd-bestseller-card {
  border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.08); transition: transform .25s, box-shadow .25s;
  text-decoration: none; display: block; color: inherit;
}
.rd-bestseller-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.14); color: inherit; }
.rd-bestseller-img-wrap { position: relative; height: 260px; background: var(--bg-warm); }
.rd-bestseller-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-bestseller-price-tag {
  position: absolute; top: 14px; right: 14px;
  background: var(--gold-btn); color: #fff;
  font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600;
  padding: 5px 14px; border-radius: 4px;
}
.rd-bestseller-body { padding: 20px 22px 24px; }
.rd-bestseller-name { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
/* Two gaps and a wrap (#102). This row held three items until #92 added the
   meal plan, and at three it fitted a one-column card. At four it did not, and
   because the row was nowrap with shrinkable items nothing overflowed to show
   it: each item compressed instead and its label broke across two lines, so a
   340px card showed a ragged 48px block of half-wrapped phrases where one
   24px line belongs.

   flex-wrap lets a whole item drop to the next line rather than every item
   being squeezed. The 6px row gap only applies once that happens; the 16px
   column gap between items side by side is unchanged. Same split as the top
   bar in #83, and for the same reason. */
.rd-bestseller-feats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
/* nowrap + no shrink keeps each item whole: a label either sits on this line
   or moves to the next one, and never breaks in the middle. */
.rd-bestseller-feat { display: flex; align-items: center; gap: 5px; font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.rd-bestseller-feat svg { color: var(--gold); flex-shrink: 0; }

/* ─── PAGE HERO (reused on all interior pages) ────────────────────────── */
.rd-page-hero { position: relative; height: 280px; overflow: hidden; }
.rd-page-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.rd-page-hero-overlay { position: absolute; inset: 0; background: rgba(15,26,46,.52); }
.rd-page-hero-body {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px;
}
.rd-page-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 50px; font-weight: 600; color: #fff; line-height: 1.1;
}
.rd-page-hero-title em { font-style: normal; color: var(--gold-light); }
.rd-breadcrumb { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,.65); }
.rd-breadcrumb a { color: rgba(255,255,255,.65); cursor: pointer; text-decoration: none; transition: color .2s; }
.rd-breadcrumb a:hover { color: var(--gold-light); }

/* ─── PRODUCT LIST FILTER BAR ──────────────────────────────────────────── */
/* Phase 9 (/travel). Phase 3's product list only ever had one control
   (.rd-cat-filter-form's category select); this page filters on sort order,
   a price range, participants, nights and category at once, so it needs a
   real bar rather than a lone dropdown. Controls keep their existing name=
   attributes so the GET form still hits ProductController@travelproduct
   unchanged. */
/* Fixed 4-column grid rather than auto-fit: the price field is taller than the
   rest (it carries the slider under its two inputs), so with auto-placement the
   other fields bottom-aligned against it and their labels stepped up and down
   raggedly. Four equal columns, the four selects on row 1 and price + submit on
   row 2, keeps every label on a line with its neighbours. */
/* One row on a wide screen (#103): the four selects, price, then the button.
   It was two rows only because the price cell carried the slider and so stood
   taller than everything else; the slider now has its own full-width row below
   and the six controls line up.

   The price column is 1.5fr because it holds two inputs side by side, and the
   button column is auto so it takes its own width rather than a full share. */
.rd-filter-bar {
  display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr auto;
  /* 24px between the boxes, up from 18px (#108). Not more: the bar's inner
     width is a fixed 890px at any width that keeps this one-row layout, and
     "Number of Nights" is the longest label at 117px, so anything past a 27px
     gap squeezes that column under its own label and wraps it to two lines -
     which knocks the labels out of line again. 24px leaves a little slack. */
  gap: 10px 24px; align-items: end;
  background: var(--bg-warm); border: 1px solid var(--border); border-radius: 10px;
  padding: 24px; margin-bottom: 44px;
}
/* Under the price inputs, not across the whole bar (#108).

   #103 gave it a full-width row to get it out of the price cell, which was the
   right move for the alignment but the wrong place for the control: a slider
   spanning the whole bar reads as filtering everything above it, when it only
   ever drives the two number inputs in column 5. Putting it in that column
   keeps the six controls on one line and puts the slider where what it
   controls is. Each fold below re-places it over whatever the price field
   spans there. */
.rd-filter-slider-row { grid-column: 5; }
.rd-filter-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* One height for every control in the bar (#103). They were three different
   heights - select 36px, price input 48px, button 44px - so each cell was a
   different height and, bottom-aligned, their labels and controls sat on three
   different lines. Height alone is not enough: the vertical padding has to go
   with it, or the input's 24px line-height plus 11px padding overflows a 44px
   box. Horizontal padding is untouched. */
.rd-filter-bar .rd-value-select,
.rd-filter-bar .rd-filter-input,
.rd-filter-bar .rd-btn-gold {
  box-sizing: border-box; height: 44px;
  padding-top: 0; padding-bottom: 0;
}
/* nowrap so a label can never take a second line (#108). "Number of Nights" is
   the longest at ~120px and lands within a pixel of its own column, where the
   trailing letter-spacing after the final character is enough to tip it over -
   and one wrapped label lifts that whole cell, which is what knocks the row of
   labels out of line. Chasing the gap down until it fits would leave the bar
   one translated string away from the same problem. Any overflow is a pixel or
   two into a 24px gutter and is not visible. */
.rd-filter-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}
/* Its own column in the one-row layout; widened again when the bar folds. */
.rd-filter-price { grid-column: auto; }
.rd-filter-price-row { display: flex; gap: 12px; }
.rd-filter-price-row > div { flex: 1; min-width: 0; }
.rd-filter-input {
  width: 100%; padding: 11px 12px;
  border: 1.5px solid var(--border); border-radius: 6px; background: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
}
.rd-filter-input:focus { outline: none; border-color: var(--gold); }
/* Unused since the From/To captions became aria-labels (#103). Kept because
   the class is generic enough that a later filter field may want it. */
.rd-filter-sub { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-muted); }
/* Sits on its own row now, so it no longer needs to clear the inputs above it. */
.rd-filter-slider { margin: 2px 9px 0; }
/* noUiSlider ships its own chrome; retint it to the palette. Specificity is
   deliberately .rd-filter-slider.noUi-horizontal (0,2,0 on the handle rule
   below) because travel.css also styles .noUi-horizontal .noUi-handle and
   loads after this file. */
.rd-filter-slider.noUi-target {
  height: 5px; border: none; box-shadow: none;
  background: var(--border); border-radius: 3px;
}
.rd-filter-slider .noUi-connect { background: var(--gold); }
.rd-filter-slider.noUi-horizontal .noUi-handle {
  width: 18px; height: 18px; right: -9px; top: -7px;
  border: 2px solid var(--gold); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: pointer;
}
.rd-filter-slider .noUi-handle::before,
.rd-filter-slider .noUi-handle::after { display: none; }
.rd-filter-actions { display: flex; align-items: flex-end; }
.rd-filter-actions .rd-btn-gold { width: 100%; justify-content: center; padding: 12px 20px; }
/* Below this the six controls stop fitting one line, so fall back to what the
   bar did before #103: four selects across the top, price and the button on a
   second row. Three columns was tried first and is worse - it splits the
   selects 3/1 and pushes the button onto a third row. */
@media (max-width: 1199px) {
  .rd-filter-bar { grid-template-columns: repeat(4, 1fr); }
  .rd-filter-price { grid-column: span 3; }
  /* Price occupies columns 1-3 of the second row here, so the slider tracks it. */
  .rd-filter-slider-row { grid-column: 1 / 4; }
}
@media (max-width: 991px) {
  .rd-filter-bar { grid-template-columns: repeat(2, 1fr); }
  .rd-filter-price { grid-column: span 2; }
  .rd-filter-slider-row { grid-column: 1 / 3; }
}
@media (max-width: 575px) {
  .rd-filter-bar { grid-template-columns: 1fr; }
  .rd-filter-price { grid-column: span 1; }
  .rd-filter-slider-row { grid-column: 1; }
}

/* ─── PRODUCT LIST / PRODUCT CARD ──────────────────────────────────────── */
/* 1200px to match .rd-section-wrap, which is what the homepage uses. This page
   was 1020px, so on a wide monitor it sat in a noticeably narrower column than
   the landing page it is reached from, and the three-across grid had less room
   than the Bestsellers row it was modelled on. The other listing pages are
   still on their own widths; they are a later pass. */
.rd-product-list-wrap { max-width: 1200px; margin: 0 auto; padding: 60px 40px; }
.rd-product-list-intro { margin-bottom: 48px; }
.rd-product-list-intro h2 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; color: var(--dark); margin-bottom: 12px; }
.rd-product-list-intro p { font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--text-muted); line-height: 1.8; }

.rd-product-card {
  display: grid; grid-template-columns: 320px 1fr;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  margin-bottom: 28px; box-shadow: 0 3px 14px rgba(0,0,0,.06);
  transition: box-shadow .2s;
}
.rd-product-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.11); }

/* ─── LISTING GRID: three products per row (#104) ──────────────────────────
   The listing gave every product a full-width row with a 320px photo beside
   its details, so four products filled a screen and comparing them meant
   scrolling. Three across, like the homepage Bestsellers.

   The card itself is unchanged markup - it just stops being a two-column
   horizontal card and becomes a vertical one, photo above details, which is
   what .rd-product-card's own grid-template-columns did before. Everything
   inside is re-proportioned for a ~295px column rather than a ~940px row;
   at that width the row-format type sizes (32px price, 26px name, 32px
   padding) are far too large.

   The open-value gift card is deliberately not in here: it keeps its
   full-width feature row above the grid, because it carries a value picker
   and an Add to Cart rather than a pair of links. */
.rd-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
/* Explicit rows, not two auto ones. The card is stretched to the row's height,
   and auto rows share the leftover space between them - so the photo grew by a
   different amount in every card and the names started at three different
   heights across a row. Pinning the photo row at 190px sends all the slack to
   the details instead. */
.rd-product-grid .rd-product-card {
  grid-template-columns: 1fr; grid-template-rows: 190px 1fr;
  margin-bottom: 0; height: 100%;
}
/* Fixed, so photos of different aspect ratios cannot set three different card
   heights in a row. */
.rd-product-grid .rd-product-img-col { min-height: 0; height: 190px; padding: 0; }
.rd-product-grid .rd-product-info-col { padding: 18px 20px 20px; display: flex; flex-direction: column; }
/* Holds only the review badge now that the price is on the photo. The row is
   not rendered at all when a product has no reviews (see travel.blade.php), so
   this margin only ever applies where there is something to space. */
.rd-product-grid .rd-product-price-row { margin: 0 0 8px; gap: 8px; }
.rd-product-grid .rd-product-name { font-size: 19px; line-height: 1.25; margin-bottom: 10px; }
/* Column-stacked and tighter: side by side these wrapped mid-phrase in a
   295px card, the same failure the bestseller feats row had in #102. */
.rd-product-grid .rd-product-feats { flex-direction: column; gap: 7px; margin-bottom: 16px; }
.rd-product-grid .rd-product-feat { font-size: 12.5px; white-space: nowrap; }
/* margin-top:auto pins the buttons to the bottom edge, so the three cards in
   a row line their actions up however much detail each one carries.

   flex-basis 0 makes the two share the row evenly instead of each claiming its
   natural width. They need the trimmed padding to do it: at the row format's
   28px sides "View Details" alone is 141px, so a pair came to 290px in a 253px
   card and wrapped, leaving one card with stacked buttons beside another with
   a single one and the primary action at two different heights. At 10px sides
   each is about 105px in a 122px slot. */
.rd-product-grid .rd-product-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-product-grid .rd-product-actions > a {
  flex: 1 1 0; min-width: 0;
  padding-left: 10px; padding-right: 10px;
  text-align: center; white-space: nowrap; font-size: 13px;
}
/* The open-value gift card is the only product card with a dropdown inside it,
   and .rd-product-card's overflow:hidden was slicing the value list off at the
   card's bottom edge (#36). That overflow:hidden exists to clip the product
   photo to the card's rounded corners, so it can't simply be dropped - this
   modifier lets the one card overflow and moves the corner clipping onto the
   image column instead. 9px, not 10px: the card's 1px border sits outside the
   image, so the inner radius is one pixel tighter. */
.rd-product-card.rd-product-card-overflow { overflow: visible; }
.rd-product-card.rd-product-card-overflow .rd-product-img-col {
  border-radius: 9px 0 0 9px; overflow: hidden;
}
.rd-product-img-col { background: var(--bg-warm); display: flex; align-items: center; justify-content: center; padding: 32px; min-height: 280px; }

/* Real product photo variant of .rd-product-img-col: proto1's own product
   cards used a mock gift-card visual (.rd-mock-card below) for all three of
   its example products, including the two regular travel packages - but
   real catalogue products have real photos (ProductController), so this is
   a straightforward photo fill instead, with the partner's own logo (kept
   from the pre-redesign markup, which stacked it above the image) as a
   small badge over the corner rather than a separate banner strip. */
.rd-product-img-col.rd-product-photo-col { padding: 0; position: relative; }
.rd-product-photo-link { display: block; width: 100%; height: 100%; }
.rd-product-photo-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Price badge on the photo, top right - deliberately the same geometry and
   type as .rd-bestseller-price-tag on the homepage, so the two listings read
   as one family. Its parent .rd-product-photo-col is already position:relative. */
.rd-product-price-tag {
  position: absolute; top: 14px; right: 14px;
  background: var(--gold-btn); color: #fff;
  font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600;
  padding: 5px 14px; border-radius: 4px;
  white-space: nowrap;
}
.rd-product-partner-logo {
  position: absolute; top: 14px; left: 14px;
  background: #fff; border-radius: 6px; padding: 5px 9px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.rd-product-partner-logo img { height: 22px; width: auto; display: block; }

.rd-mock-card { background: #fff; border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.18); overflow: hidden; width: 210px; }
.rd-mock-card-header { background: var(--navy); padding: 13px 15px; display: flex; align-items: center; gap: 9px; }
.rd-mock-logo-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rd-mock-logo-dot svg { width: 13px; height: 13px; }
.rd-mock-brand { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #fff; line-height: 1.2; }
.rd-mock-brand em { font-style: normal; color: var(--gold-light); }
.rd-mock-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.rd-mock-card-name { padding: 9px 14px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text); text-align: center; border-top: 1px solid var(--border); }
.rd-mock-card-footer { padding: 7px 14px; font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-muted); display: flex; justify-content: space-between; border-top: 1px solid #f2ede7; }

.rd-product-info-col { padding: 32px 36px; }
.rd-product-price-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.rd-product-price { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; color: var(--dark); }
.rd-product-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--dark); margin-bottom: 10px; }
.rd-product-name a { color: inherit; text-decoration: none; }
.rd-product-name a:hover { color: var(--gold); }
.rd-product-review-btn { border: none; }
.rd-product-desc { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted); line-height: 1.75; margin-bottom: 18px; }
.rd-product-feats { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
.rd-product-feat { display: flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text); }
.rd-product-feat svg { color: var(--gold); flex-shrink: 0; }
.rd-select-wrap { margin-bottom: 22px; }
.rd-select-label { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--dark); margin-bottom: 7px; display: block; }
/* frontend/css/custom.css's bare `select { background: url(select-icon1.png)
   ...!important; height:36px; width:100%; ... }` (an element selector, but
   !important on background beats any non-important background regardless
   of specificity) would otherwise force the old select arrow icon onto this
   control - same fix pattern as the legacy header-select note above .rd-cur, and
   the same reason this needed catching before Phase 3 shipped it live: a
   plain `.rd-value-select { background:#fff }` with no !important loses that
   property to the legacy rule even though every other property here already
   wins on specificity alone. appearance:none plus a custom chevron instead
   of a bare native control, same pattern as .rd-pd-value-select below. */
.rd-value-select {
  padding: 10px 14px; border: 1.5px solid var(--border);
  border-radius: 4px; font-size: 14px; font-family: 'Inter', sans-serif;
  color: var(--text); width: 190px; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  transition: border-color .2s;
}
.rd-value-select:focus { outline: none; border-color: var(--gold); }
.rd-product-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── HOW IT WORKS ─────────────────────────────────────────────────────── */
.rd-hiw-body { max-width: 860px; margin: 0 auto; padding: 70px 40px; }
.rd-hiw-heading { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 600; text-align: left; color: var(--dark); margin-bottom: 18px; }
.rd-hiw-intro { font-family: 'Inter', sans-serif; text-align: left; color: var(--text-muted); font-size: 15px; line-height: 1.8; margin-bottom: 52px; }
.rd-tab-row {
  display: flex; justify-content: center; margin-bottom: 52px;
  border: 1.5px solid var(--border); border-radius: 6px; overflow: hidden;
  width: fit-content; margin-left: auto; margin-right: auto; flex-wrap: wrap;
}
.rd-tab-btn {
  padding: 14px 34px; background: #fff; color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
  border: none; cursor: pointer; border-right: 1.5px solid var(--border);
  transition: background .2s, color .2s;
}
.rd-tab-btn:last-child { border-right: none; }
/* Gold, not navy: every other selected/active state in this design is gold
   (.rd-main-nav a.rd-active's underline, .rd-pd-thumb.rd-active's border), and
   on the one page these tabs appear the .rd-hiw-step-num circles directly below
   them are var(--gold) too - a navy pill above a column of gold circles read as
   two competing accent colours in one block. */
.rd-tab-btn.rd-active { background: var(--gold); color: #fff; }
.rd-tab-btn:not(.rd-active):hover { background: var(--bg-warm); }
.rd-tab-pane { display: none; }
.rd-tab-pane.rd-active { display: block; }
.rd-hiw-step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border); }
.rd-hiw-step:last-child { border-bottom: none; }
.rd-hiw-step-num {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rd-hiw-step-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.rd-hiw-step-text { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted); line-height: 1.75; }

/* ─── PRODUCT DETAIL ───────────────────────────────────────────────────── */
.rd-pd-wrap { max-width: 1100px; margin: 0 auto; padding: 50px 40px; }
.rd-pd-breadcrumb { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-muted); margin-bottom: 38px; }
.rd-pd-breadcrumb a { color: var(--text-muted); text-decoration: none; cursor: pointer; transition: color .2s; }
.rd-pd-breadcrumb a:hover { color: var(--gold); }
.rd-pd-breadcrumb span { color: var(--gold); }
.rd-pd-grid { display: grid; grid-template-columns: 1fr 380px; gap: 64px; }
.rd-pd-gallery { display: grid; grid-template-columns: 80px 1fr; gap: 14px; }
.rd-pd-thumbs { display: flex; flex-direction: column; gap: 10px; }
.rd-pd-thumb { width: 80px; height: 78px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2.5px solid transparent; transition: border-color .2s; }
.rd-pd-thumb.rd-active { border-color: var(--gold); }
.rd-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-pd-main { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--bg-warm); }
.rd-pd-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-pd-tags { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
/* Some of these are plain <div>s (Easy booking, Planet friendly - proto1's
   own two), some are <a> links to a related inspiration article (kept from
   the pre-redesign markup) - text-decoration/cursor cover both uniformly. */
.rd-pd-tag { display: flex; align-items: center; gap: 7px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--gold); text-decoration: none; cursor: default; transition: color .2s; }
a.rd-pd-tag { cursor: pointer; }
a.rd-pd-tag:hover { color: var(--gold-hover); }
.rd-pd-tag svg { width: 15px; height: 15px; }
.rd-pd-overview { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.rd-pd-overview-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: var(--dark); margin-bottom: 20px; }
.rd-pd-overview-text { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted); line-height: 1.85; margin-bottom: 14px; }
.rd-pd-overview-text strong { color: var(--text); }
/* Sidebar rating summary (real product reviews, proto1's own panel has none
   since its example is a gift card with no review count) - stars + the same
   review-modal trigger the product-card list (Phase 3) and homepage
   bestsellers already use. */
.rd-pd-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: 'Inter', sans-serif; }
.rd-pd-rating .star { color: var(--gold); font-size: 16px; }
.rd-pd-rating-label { font-size: 13px; color: var(--text-muted); cursor: pointer; }
.rd-pd-rating-label:hover { color: var(--gold); }
.rd-pd-type-badge {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 20px;
  border: 1.5px solid var(--gold); color: var(--gold);
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.rd-pd-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; color: var(--dark); line-height: 1.2; margin-bottom: 22px; }
.rd-pd-features { margin-bottom: 22px; }
.rd-pd-feature { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f0ece4; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); }
.rd-pd-feature svg { color: var(--gold); flex-shrink: 0; margin-top: 1px; }
/* Quantity stepper for the add-to-cart form (kept from the pre-redesign
   markup - the -/+ buttons and readonly input's own JS is unchanged). */
.rd-pd-qty-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin-bottom: 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rd-pd-qty-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--dark); }
.rd-pd-qty-box { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 6px; overflow: hidden; }
.rd-pd-qty-btn { background: var(--bg-warm); border: none; width: 34px; height: 34px; cursor: pointer; color: var(--gold); font-size: 14px; transition: background .2s, color .2s; }
.rd-pd-qty-btn:hover { background: var(--gold); color: #fff; }
.rd-pd-qty-input { width: 44px; height: 34px; text-align: center; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); font-family: 'Inter', sans-serif; font-weight: 600; color: var(--dark); }
/* Voucher-info / demo-link cards below the overview text - not part of
   proto1's own product-detail page (it has no such row), built from the
   same tokens as everything else here. */
.rd-pd-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.rd-pd-info-card { background: var(--bg-warm); border: 1px solid var(--border); border-radius: 10px; padding: 26px; }
.rd-pd-info-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.rd-pd-info-icon svg { width: 20px; height: 20px; }
.rd-pd-info-title { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.rd-pd-info-text { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }
.rd-pd-info-card .rd-btn-detail { font-size: 13px; padding: 9px 20px; }
.rd-pd-validity { background: var(--bg-warm); border: 1px solid var(--border); border-left: 3.5px solid var(--gold); border-radius: 6px; padding: 14px 18px; margin-bottom: 22px; }
.rd-pd-validity-label { font-family: 'Inter', sans-serif; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.rd-pd-validity-date { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: var(--dark); }
.rd-pd-select-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--dark); display: block; margin-bottom: 8px; }
/* Same bare `select { background:...!important }` fix as .rd-value-select
   above (see its comment) - not live yet (Phase 4), fixed proactively while
   already here rather than rediscovering the identical bug next phase. */
.rd-pd-value-select {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: 'Inter', sans-serif; color: var(--text);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  cursor: pointer; margin-bottom: 18px; transition: border-color .2s;
}
.rd-pd-value-select:focus { outline: none; border-color: var(--gold); }

/* Open-value gift card value picker (#50). This is a hand-rolled combobox, not
   a <select> - the customer can pick a preset amount or type their own, which
   no native control does. Its markup and class names are driven by the inline
   script on that page (custom-combobox / combobox-btn / combobox-menu /
   add-section / options-container / option / error-message are all queried or
   created by it), so the names are kept exactly and only the styling moves onto
   the redesign palette. Scoped under .rd-gc-value so these generic names can't
   leak into any other page. */
.rd-gc-value { margin-bottom: 18px; }
.rd-gc-value .custom-combobox { position: relative; width: 100%; box-sizing: border-box; }
.rd-gc-value .combobox-btn {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 12px 16px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; user-select: none; box-sizing: border-box; transition: border-color .2s;
}
.rd-gc-value .combobox-btn:hover { border-color: var(--gold); }
.rd-gc-value .combobox-btn .arrow { color: var(--gold); font-size: 11px; }
.rd-gc-value .combobox-menu {
  display: none; position: absolute; top: 105%; left: 0; width: 100%; z-index: 1000;
  padding: 10px; background: #fff;
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
  box-sizing: border-box;
}
.rd-gc-value .combobox-menu.show { display: block; }
.rd-gc-value .add-section { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; box-sizing: border-box; }
.rd-gc-value .add-section input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
  outline: none; box-sizing: border-box; transition: border-color .2s;
}
.rd-gc-value .add-section input:focus { border-color: var(--gold); }
.rd-gc-value .add-section button {
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-warm); border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 18px; font-weight: 700; color: var(--text);
  cursor: pointer; box-sizing: border-box; transition: background .2s, border-color .2s, color .2s;
}
.rd-gc-value .add-section button:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
/* Hidden until the script sets display:block alongside a message. */
.rd-gc-value .error-message {
  display: none; width: 100%; margin: 2px 0 8px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; color: #B3261E;
}
.rd-gc-value .options-container { max-height: 180px; overflow-y: auto; padding-right: 2px; }
.rd-gc-value .option {
  padding: 10px 12px; border-radius: 4px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background .2s, color .2s;
}
.rd-gc-value .option:hover { background: var(--bg-warm); color: var(--gold); }
.rd-gc-value .options-container::-webkit-scrollbar { width: 6px; }
.rd-gc-value .options-container::-webkit-scrollbar-track { background: var(--bg-warm); border-radius: 10px; }
.rd-gc-value .options-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.rd-gc-value .options-container::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Customer reviews modal (#54). The review rows are built as an HTML string by
   the fetch('/product-reviews/...') handler that every product page carries, so
   the class names below are fixed by that script and cannot be renamed here -
   only restyled. frontend/productbox.css styles them pre-redesign (coral
   #FF715B avatar and "Verified Purchase", Amazon-orange #FF9900 stars, system
   font stack); these rules are scoped to #reviewModal, which every one of the
   eight views using the modal shares, so a single block covers them all and
   beats productbox.css on specificity without touching it.

   Note the badge below deliberately does NOT use the #00B67A green from
   .rd-tp-badge above: that is Trustpilot's brand colour, and wearing it on our
   own "Verified Purchase" label would imply a verification by them that this
   is not. Gold on warm is the house palette saying the same thing. */
#reviewModal .review-box {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
#reviewModal .review-box:last-child { border-bottom: 0; }
#reviewModal .review-user { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#reviewModal .review-user-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 600;
  flex-shrink: 0;
}
#reviewModal .review-user-name {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--dark);
}
#reviewModal .review-rating-row { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
#reviewModal .review-stars { color: var(--gold); font-size: 17px; letter-spacing: 1px; line-height: 1; margin-right: 10px; }
#reviewModal .review-date {
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-muted); margin-bottom: 8px;
}
#reviewModal .verified-purchase {
  display: inline-block; margin-bottom: 10px;
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg-warm); color: var(--gold);
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
#reviewModal .review-comment {
  font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.65; color: var(--text);
}
/* The shell: Bootstrap's own modal chrome, brought onto the redesign's
   surfaces. .modal-title already inherits the display serif from the layout. */
#reviewModal .modal-content { border: 1px solid var(--border); border-radius: 8px; }
#reviewModal .modal-header { padding: 22px 24px 8px; }
#reviewModal .modal-body { padding: 0 24px 22px; }

/* gap 7px -> 9px, keeping pace with the larger logos (#88): at the old
   spacing the bigger marks read as one continuous white strip. */
.rd-payment-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.rd-pay-icon { background: #f4f4f4; border: 1px solid #e0e0e0; border-radius: 4px; padding: 4px 10px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: #333; }

/* "Why choose Hotels Prepaid" benefit grid, product-detail page only - not a
   proto1 component, built from the same tokens as everything else. */
.rd-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rd-why-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.rd-why-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rd-why-icon svg { width: 20px; height: 20px; }
.rd-why-text { font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--dark); line-height: 1.4; }

/* ─── CART ─────────────────────────────────────────────────────────────── */
/* Not a proto1 page (it has no cart mockup) - built from the same tokens as
   everything else, replacing cart.blade.php's own inline <style> block
   (different one-off colors: #183e64, #ff715b, #1a1a1a) with the shared
   --navy/--gold/--dark design tokens. */
.rd-cart-wrap { max-width: 1160px; margin: 0 auto; padding: 50px 40px 70px; }
.rd-cart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.rd-cart-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 12px; margin: 0; }
.rd-cart-count-badge { background: var(--gold); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; }
.rd-cart-content { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.rd-cart-items { display: flex; flex-direction: column; gap: 16px; }
.rd-cart-item { display: flex; gap: 20px; padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: 10px; transition: box-shadow .2s; }
.rd-cart-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.rd-cart-item-img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.rd-cart-item-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rd-cart-item-title { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: var(--dark); margin: 0; line-height: 1.35; }
.rd-cart-item-meta { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 13.5px; }
.rd-cart-item-meta svg { width: 15px; height: 15px; flex-shrink: 0; }
.rd-cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: auto; }
.rd-cart-qty-label { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-right: 8px; }
.rd-cart-qty-input { width: 56px; padding: 7px 8px; border: 1.5px solid var(--border); border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 13px; text-align: center; }
.rd-cart-item-price { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--dark); text-align: right; white-space: nowrap; }
.rd-cart-item-price-each { font-size: 12.5px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.rd-cart-remove-btn { background: none; border: none; color: #c0392b; cursor: pointer; padding: 4px; align-self: flex-start; transition: opacity .2s; }
.rd-cart-remove-btn:hover { opacity: .65; }
.rd-cart-remove-btn svg { width: 18px; height: 18px; }
.rd-cart-summary { position: sticky; top: 90px; background: var(--bg-warm); border: 1px solid var(--border); border-radius: 10px; padding: 26px; }
.rd-cart-summary-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: var(--dark); margin: 0 0 18px; }
.rd-cart-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--text); }
.rd-cart-summary-row:last-of-type { border-bottom: none; }
.rd-cart-summary-total { margin-top: 6px; padding-top: 16px; border-top: 2px solid var(--border); }
.rd-cart-summary-total .rd-cart-summary-label { font-size: 16px; font-weight: 700; color: var(--dark); }
.rd-cart-summary-total .rd-cart-summary-value { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--dark); }
.rd-cart-checkout-btn {
  width: 100%; display: block; text-align: center; margin-top: 22px;
  padding: 15px; background: var(--gold-btn); color: #fff; border: none; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: background .2s;
}
.rd-cart-checkout-btn:hover { background: var(--gold-hover); color: #fff; }
.rd-cart-features { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.rd-cart-feature { display: flex; align-items: center; gap: 11px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); }
.rd-cart-feature svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }
/* The label is a <p>, so it arrives carrying Bootstrap's margin-bottom: 1rem.
   align-items:center centres the margin box, not the text, so that 16px of
   dead space below the text pushed the words up by exactly half of it - the
   icons measured 8px below the text centre on every item (#55). */
.rd-cart-feature p { margin: 0; }
.rd-cart-empty { text-align: center; padding: 70px 20px; }
.rd-cart-empty svg { width: 56px; height: 56px; color: var(--border); margin-bottom: 18px; }
.rd-cart-empty h3 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--dark); margin-bottom: 26px; }

/* ─── SIGN IN / REGISTER CHOICE (pages/process.blade.php) ─────────────── */
.rd-welcome-wrap { max-width: 780px; margin: 0 auto; padding: 70px 40px 90px; text-align: center; }
.rd-welcome-title { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 600; color: var(--dark); margin-bottom: 10px; }
.rd-welcome-sub { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text-muted); margin-bottom: 44px; }
/* stretch, not center (#113): the two cards hold different amounts of text,
   and centring them vertically left one sitting proud of the other. Stretched
   they match height, and the column layout below pins both buttons to the
   same baseline. */
.rd-welcome-cards { display: flex; align-items: stretch; justify-content: center; gap: 28px; flex-wrap: wrap; }
.rd-welcome-card { flex: 1; min-width: 240px; max-width: 300px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 34px 28px; box-shadow: 0 4px 18px rgba(0,0,0,.06); display: flex; flex-direction: column; }
/* Pins the call to action to the bottom of whichever card is taller, so the
   two buttons sit on one line however long the copy above them runs. */
.rd-welcome-card .rd-btn-gold { margin-top: auto; }
.rd-welcome-card-icon { font-size: 34px; margin-bottom: 14px; }
.rd-welcome-card-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: var(--dark); margin-bottom: 10px; }
.rd-welcome-card-text { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 22px; }
.rd-welcome-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 36px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none; }
.rd-welcome-back:hover { color: var(--gold-hover); }

/* ─── AUTH FORMS (login/register) ─────────────────────────────────────── */
.rd-auth-wrap { max-width: 460px; margin: 0 auto; padding: 60px 24px 90px; }
.rd-auth-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 40px 36px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.rd-auth-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; color: var(--dark); margin-bottom: 6px; text-align: center; }
.rd-auth-sub { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted); text-align: center; margin-bottom: 30px; }
.rd-auth-field { position: relative; margin-bottom: 18px; }
.rd-auth-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.rd-auth-field-icon svg { width: 16px; height: 16px; }
/* .rd-auth-field .rd-auth-input (two classes), not just .rd-auth-input - these
   inputs sit inside `<form class="main-form full">` (kept for whatever else
   site-wide relies on that convention - the cart/product-detail forms use it
   too), and frontend/css/custom.css's `.main-form input { padding: 0 15px;
   ... }` is a compound class+element selector, (0,1,1) specificity, which
   otherwise outranks a bare single-class `.rd-auth-input` (0,1,0) - no
   !important on either side, so this is a specificity fight, not one - the
   left padding this needs to clear .rd-auth-field-icon was silently lost to
   it, letting the icon sit on top of the placeholder text. */
.rd-auth-field .rd-auth-input {
  width: 100%; padding: 13px 14px 13px 40px; border: 1.5px solid var(--border); border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--text); background: #fff;
  transition: border-color .2s;
}
.rd-auth-field .rd-auth-input:focus { outline: none; border-color: var(--gold); }
.rd-auth-toggle-pw { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted); background: none; border: none; padding: 0; display: flex; }
.rd-auth-toggle-pw svg { width: 17px; height: 17px; }
.rd-auth-error { font-family: 'Inter', sans-serif; font-size: 12.5px; color: #c0392b; margin: -10px 0 14px; }
.rd-auth-row { display: flex; justify-content: flex-end; margin-bottom: 22px; }
.rd-auth-link { font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--gold); text-decoration: none; }
.rd-auth-link:hover { color: var(--gold-hover); }
.rd-auth-or { text-align: center; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); margin: 22px 0; }
.rd-auth-alt { text-align: center; font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-muted); }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
.rd-faq-wrap { max-width: 820px; margin: 0 auto; padding: 60px 24px 90px; }
.rd-faq-intro { display: flex; gap: 32px; align-items: center; margin-bottom: 46px; flex-wrap: wrap; }
.rd-faq-intro img { width: 170px; flex-shrink: 0; display: block; }
.rd-faq-intro p { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text-muted); line-height: 1.8; flex: 1; min-width: 240px; }
.rd-faq-item { border-bottom: 1px solid var(--border); }
.rd-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 19px 2px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--dark);
}
.rd-faq-q:hover { color: var(--gold); }
.rd-faq-q svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--gold); transition: transform .25s; }
.rd-faq-item.rd-active .rd-faq-q svg { transform: rotate(180deg); }
.rd-faq-a { display: none; padding: 0 2px 22px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted); line-height: 1.8; }
.rd-faq-a p { margin: 0 0 12px; }
.rd-faq-a p:last-child { margin-bottom: 0; }
.rd-faq-item.rd-active .rd-faq-a { display: block; }

/* ─── CONTACT US ───────────────────────────────────────────────────────── */
.rd-contact-wrap { max-width: 1160px; margin: 0 auto; padding: 60px 40px 90px; }
.rd-contact-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
.rd-contact-form-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 36px; }
.rd-contact-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: var(--dark); text-align: center; margin-bottom: 28px; }
.rd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rd-form-group { margin-bottom: 16px; }
.rd-form-group.rd-full { grid-column: 1 / -1; }
.rd-input, .rd-textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); background: #fff;
  transition: border-color .2s;
}
.rd-input:focus, .rd-textarea:focus { outline: none; border-color: var(--gold); }
.rd-textarea { resize: vertical; min-height: 110px; }
/* Same bare `select { background:...!important }` fix as .rd-value-select
   (see its comment above) - this <select> has no .main-form ancestor (this
   form never carried that class) so it isn't a specificity fight like
   .rd-auth-input's was; it's the same importance fight the old header currency select's
   already was. */
/* height and line-height are here to undo custom.css:777's bare
   `select { height: 36px; line-height: 18px }`. That rule is an element
   selector, so .rd-select outranks it on every property it declares - but it
   never declared these two, and the legacy values applied unopposed. The
   result was a country dropdown 13.6px shorter than the text fields beside it,
   with the same padding and border, which is what made the row look wrong
   (#56). auto lets the padding set the height, exactly as .rd-input does.
   line-height must be `inherit`, not `normal`: bootstrap.min.css:250-259
   gives button/input/select/textarea `line-height: inherit`, so .rd-input
   picks up custom.css:93's `body { line-height: 24px }`. `normal` would leave
   the select on its font's own 1.2 (16.8px) and still sit 7.2px short. */
.rd-select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 6px;
  height: auto; line-height: inherit;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  transition: border-color .2s;
}
.rd-select:focus { outline: none; border-color: var(--gold); }
.rd-field-error { display: block; font-family: 'Inter', sans-serif; font-size: 12px; color: #c0392b; margin-top: 5px; }
.rd-form-note { font-family: 'Inter', sans-serif; font-size: 12px; color: #c0392b; margin: 2px 0 18px; }
.rd-contact-info-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.rd-contact-info-img { height: 220px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.rd-contact-info-body { background: var(--bg-warm); padding: 28px; }
.rd-contact-info-name { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.rd-contact-info-body p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); line-height: 1.75; margin: 0 0 4px; }
.rd-contact-info-body a { color: var(--gold); text-decoration: none; }
.rd-contact-info-body a:hover { color: var(--gold-hover); }

/* ─── TERMS & CONDITIONS ───────────────────────────────────────────────── */
/* Legal text - every actual sentence in tnc.blade.php is untouched from the
   pre-redesign file; only wrapper class names changed, so .rd-tnc-section p
   styles the paragraphs regardless of whether they individually kept their
   old .tnc_content class or had none at all (both are still plain <p> tags
   inside .rd-tnc-section, so the element-level descendant selector reaches
   both without needing to rename each one). */
/* ─── CHECKOUT (/travelbooking) ──────────────────────────────────────────
   The last pre-redesign page in the purchase flow: browse and cart were
   rebuilt, then checkout still opened in the old theme. Classes only - the
   page's pricing logic, field names and scripts are untouched, because it
   feeds the live Swedbank path.

   Layout mirrors the cart: form on the left, sticky order summary on the
   right, collapsing to one column on narrow screens. */
.rd-co-wrap {
  max-width: 1200px; margin: 0 auto; padding: 54px 40px 90px;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start;
}
/* Explicit placement so the summary can stay after the form in the DOM (which
   is the order the original page used) while rendering on the right. */
.rd-co-form    { grid-column: 1; grid-row: 1; min-width: 0; }
.rd-co-summary { grid-column: 2; grid-row: 1; }
.rd-co-items   { margin-bottom: 4px; }
@media (max-width: 991px) {
  .rd-co-wrap { grid-template-columns: 1fr; padding: 40px 24px 70px; }
  .rd-co-form    { grid-column: 1; grid-row: 1; }
  .rd-co-summary { grid-column: 1; grid-row: 2; position: static !important; }
}

.rd-co-panel {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 28px 26px; margin-bottom: 22px;
}
.rd-co-panel-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600;
  color: var(--dark); margin: 0 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Form fields. .rd-co-field wraps a label + control pair. */
.rd-co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.rd-co-field { margin-bottom: 18px; }
.rd-co-field-full { grid-column: 1 / -1; }
.rd-co-label {
  display: block; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--dark); margin-bottom: 7px;
}
.rd-co-label .required, .rd-co-req { color: #c0392b; }
/* height/line-height for the same reason as .rd-select: custom.css:777's bare
   `select` rule sets height:36px and only loses on properties we declare. */
.rd-co-input, .rd-co-select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 6px;
  height: auto; line-height: inherit;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); background: #fff;
  transition: border-color .2s;
}
.rd-co-select {
  cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
}
.rd-co-input:focus, .rd-co-select:focus { outline: none; border-color: var(--gold); }
.rd-co-error, .errorValidationMessage {
  display: block; font-family: 'Inter', sans-serif; font-size: 12px; color: #c0392b; margin-top: 5px;
}

/* Radio / checkbox rows: gender, shipping, payment type, promo opt-in. */
.rd-co-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-co-choice {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
  cursor: pointer; transition: border-color .2s, background .2s; background: #fff;
}
.rd-co-choice:hover { border-color: var(--gold-light); }
.rd-co-choice input { accent-color: var(--gold-btn); margin: 0; cursor: pointer; }
.rd-co-choice img { height: 22px; width: auto; display: block; }
.rd-co-choice-wide { flex: 1 1 100%; }

/* The form's individual fields keep their original markup - .input-box wrappers,
   .form-control inputs, name attributes, ids and inline validation spans - and
   are restyled in place by these scoped rules instead. On a form that feeds the
   live Swedbank path, re-authoring twenty field blocks by hand risks a typo in
   a `name` that would only surface at payment time; scoping the styling gets
   the same appearance without touching the contract. */
.rd-co-form .input-box { margin-bottom: 18px; }
.rd-co-form .input-box > label,
.rd-co-form .sub-heading + .input-box > label {
  display: inline-block; font-family: 'Inter', sans-serif; font-size: 12.5px;
  font-weight: 600; color: var(--dark); margin-bottom: 7px;
}
/* The required marker is a sibling <span class="error">*</span> after the
   label. Legacy CSS lets it fall to its own line; keep it on the label's. */
.rd-co-form .input-box > label + .error,
.rd-co-form .input-box > label + span[style*="FF0000"] {
  display: inline; margin-left: 3px; font-size: 12.5px; line-height: 1;
}
.rd-co-form .form-control,
.rd-co-form select.select,
.rd-co-form input[type="text"],
.rd-co-form input[type="email"],
.rd-co-form input[type="tel"] {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 6px;
  height: auto; line-height: inherit; box-shadow: none;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); background: #fff;
  transition: border-color .2s;
}
/* Selects need !important on height/padding/line-height for the same reason
   .rd-value-select does (see the legacy header-select note above .rd-cur):
   frontend/css/custom.css's bare `select { height:36px; line-height:18px; padding:0 25px 0 10px; ... }` rule
   is reached through a different cascade path here and was flattening these to
   42px with no vertical padding, leaving them shorter than the text inputs
   beside them - the same defect as #56. */
.rd-co-form select.select, .rd-co-form select.form-control {
  cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  height: auto !important;
  line-height: inherit !important;
  padding: 12px 38px 12px 14px !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
}
/* Same treatment for the text inputs, whose border colour was still resolving
   to the legacy #e1e1e1 rather than the redesign's --border. */
.rd-co-form .form-control,
.rd-co-form input[type="text"],
.rd-co-form input[type="email"],
.rd-co-form input[type="tel"] {
  border: 1.5px solid var(--border) !important;
}
.rd-co-form .form-control:focus,
.rd-co-form select.select:focus { border-color: var(--gold) !important; }
.rd-co-form .form-control:focus,
.rd-co-form select.select:focus { outline: none; border-color: var(--gold); box-shadow: none; }
.rd-co-form .sub-heading {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600;
  color: var(--dark); text-transform: none; letter-spacing: 0;
  margin: 34px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
/* intl-tel-input wraps the phone field in .iti; let it fill the column. It is
   initialised with separateDialCode, so the flag AND the "+47" sit inside the
   field and the text needs to clear both - 52px was enough for the flag alone
   and left the dial code overlapping the number. */
.rd-co-form .iti { width: 100%; display: block; }
.rd-co-form .iti--separate-dial-code input,
.rd-co-form .iti input.phoneNumber,
.rd-co-form .iti input { padding-left: 92px !important; }
/* The flag/dial-code button is absolutely positioned over the field; match the
   field's rounded corner and keep it clear of the 1.5px border. */
.rd-co-form .iti--separate-dial-code .iti__selected-flag {
  border-radius: 6px 0 0 6px; background: transparent; padding-left: 12px;
}
/* Radio rows (gender, shipping, payment) sit in Bootstrap form-check markup.
   The bundled Bootstrap is v4, whose .form-check-input is position:absolute
   with a negative left margin - it expects a .form-check wrapper with left
   padding to sit inside. This form drops the radios straight into flex rows
   instead, so they were taken out of flow and rendered 42px tall on top of the
   payment logos. Forcing them back into the flow is what makes these rows line
   up; !important because several also carry inline width/height and negative
   margins in the markup. */
.rd-co-form .form-check-input,
.rd-co-form input[type="radio"],
.rd-co-form input[type="checkbox"] {
  position: static !important;
  width: 17px !important; height: 17px !important;
  /* padding must be zeroed too: the legacy input rules add vertical padding,
     which is added to the 17px content box and was rendering these 42px tall
     even once the height was set. box-sizing keeps it honest either way. */
  padding: 0 !important; box-sizing: border-box !important;
  min-height: 0 !important; line-height: normal !important;
  margin: 0 9px 0 0 !important;
  flex: 0 0 auto; align-self: center;
  accent-color: var(--gold-btn); cursor: pointer;
}
/* Payment options: give each choice a real row so the radio, logo and label
   sit on one line instead of colliding. */
.rd-co-form .col-md-6.d-flex.align-items-center {
  padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 8px;
  margin-bottom: 10px; background: #fff; transition: border-color .2s;
}
.rd-co-form .col-md-6.d-flex.align-items-center:hover { border-color: var(--gold-light); }

.rd-co-form .form-check { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; padding-left: 0; }
/* The Mrs./Mr. radios sit in a plain .form-group whose label is display:block,
   so the label dropped onto its own line under the radio. Keep the pair on one
   line; !important because the legacy label rule is a block. */
.rd-co-form .form-check-label { display: inline-block !important; vertical-align: middle; }
.rd-co-form .form-check-label {
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); margin: 0; cursor: pointer;
}

/* Order summary. */
.rd-co-summary { position: sticky; top: 24px; }
.rd-co-summary-inner {
  background: var(--bg-warm); border: 1px solid var(--border); border-radius: 10px; padding: 24px 22px;
}
.rd-co-summary-title {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dark); margin: 0 0 16px;
}
.rd-co-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rd-co-item:last-of-type { border-bottom: 0; }
.rd-co-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.rd-co-item-body { min-width: 0; flex: 1; }
.rd-co-item-name {
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--dark);
  margin: 0 0 3px; line-height: 1.4;
}
.rd-co-item-meta { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--text-muted); }
.rd-co-item-price {
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--dark);
  white-space: nowrap; align-self: center;
}
.rd-co-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted);
  padding: 8px 0;
}
.rd-co-row span:last-child { color: var(--text); white-space: nowrap; }
.rd-co-total {
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 15px; font-weight: 700; color: var(--dark);
}
.rd-co-total span:last-child {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: var(--dark);
}
.rd-co-coupon { display: flex; gap: 8px; margin: 14px 0 4px; }
.rd-co-coupon .rd-co-input { flex: 1; padding: 10px 12px; }
.rd-co-note { font-family: 'Inter', sans-serif; font-size: 12.5px; margin-top: 8px; }

/* ─── CONTENT PAGES (About, Partner with us) ────────────────────────────
   A small shared family for the prose-led marketing pages, following the same
   per-page convention as .rd-pd-*, .rd-cart-*, .rd-hiw-* rather than inventing
   a global utility set. Two pages use it today; it is written to suit any
   future text page with an intro, a few highlights and a closing call to
   action. Everything is built from the existing tokens, so these pages sit in
   the same type scale and palette as the rest of the redesign. */
.rd-prose-wrap { max-width: 860px; margin: 0 auto; padding: 64px 24px 90px; }
.rd-prose-kicker {
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.rd-prose-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 38px; font-weight: 600;
  line-height: 1.15; color: var(--dark); margin: 0 0 20px; text-wrap: balance;
}
.rd-prose-title em { font-style: normal; color: var(--gold); }
.rd-prose-lead {
  font-family: 'Inter', sans-serif; font-size: 16.5px; line-height: 1.75;
  color: var(--text); margin: 0 0 22px;
}
.rd-prose-body p {
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.8;
  color: var(--text-muted); margin: 0 0 16px;
}
.rd-prose-body p strong { color: var(--text); font-weight: 600; }
.rd-prose-body a { color: var(--gold); text-decoration: none; }
.rd-prose-body a:hover { color: var(--gold-hover); text-decoration: underline; }

.rd-prose-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin: 34px 0 10px;
}
.rd-prose-card {
  background: var(--bg-warm); border: 1px solid var(--border);
  border-radius: 10px; padding: 24px 22px;
}
.rd-prose-card-title {
  font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 700;
  color: var(--dark); margin: 0 0 8px;
}
.rd-prose-card-text {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.75;
  color: var(--text-muted); margin: 0;
}

/* A short list of values or principles, where each entry is a label with no
   supporting sentence - shown as a row of gold-ruled items rather than cards,
   which would look unfinished holding only a heading. */
.rd-prose-values {
  margin: 36px 0 10px; padding: 26px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.rd-prose-value-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 40px;
}
.rd-prose-value-list li {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px;
  font-weight: 600; color: var(--dark); position: relative; padding-left: 16px;
}
.rd-prose-value-list li::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}

/* Image beside text; collapses to one column on narrow screens. */
.rd-prose-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px; align-items: center; margin: 40px 0;
}
.rd-prose-split img {
  width: 100%; height: 100%; max-height: 320px; object-fit: cover;
  border-radius: 10px; display: block;
}
@media (max-width: 720px) {
  .rd-prose-split { grid-template-columns: 1fr; gap: 22px; }
  .rd-prose-title { font-size: 30px; }
}

.rd-prose-cta {
  margin-top: 40px; padding: 30px 26px; text-align: center;
  background: var(--bg-warm); border: 1px solid var(--border); border-radius: 10px;
}
.rd-prose-cta p {
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text);
  margin: 0 0 16px;
}

.rd-tnc-wrap { max-width: 860px; margin: 0 auto; padding: 60px 24px 90px; }
.rd-tnc-section { margin-bottom: 32px; }
.rd-tnc-heading { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: var(--dark); margin-bottom: 12px; }
.rd-tnc-section p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted); line-height: 1.8; margin-bottom: 12px; }
.rd-tnc-section p:last-child { margin-bottom: 0; }
.rd-tnc-privacy-link { background: none; border: none; padding: 0; color: var(--gold); text-decoration: underline; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 14px; }
.rd-tnc-privacy-link:hover { color: var(--gold-hover); }

/* Privacy-policy modal (triggered from the "Privacy Policy" section above) -
   its own content (every <h5>/<p>/<ol> inside) is untouched too. */
.rd-modal-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.55); padding: 60px 20px; overflow: auto; }
.rd-modal-box { background: #fff; max-width: 700px; margin: 0 auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.rd-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid var(--border); }
.rd-modal-header h4 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--dark); margin: 0; }
.rd-modal-close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0; }
.rd-modal-close:hover { color: #c0392b; }
.rd-modal-body { padding: 26px; max-height: 70vh; overflow-y: auto; }
.rd-modal-body h5 { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--dark); margin: 20px 0 8px; }
.rd-modal-body h5:first-child { margin-top: 0; }
.rd-modal-body p, .rd-modal-body li { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-muted); line-height: 1.75; }
.rd-modal-body p { margin-bottom: 12px; }
.rd-modal-body ol { padding-left: 20px; margin-bottom: 12px; }
.rd-modal-body a { color: var(--gold); }

/* ─── REGISTER (pages/register_new.blade.php) ─────────────────────────── */
/* Deliberate exception to this redesign's usual "rename every class"
   pattern: register_new.blade.php's own <script> block manipulates these
   EXACT class names via jQuery (.form-step/.active, .step-circle/.completed,
   .company-fields/.show, etc - see showStep()/toggleCompanyFields() in the
   view). A grep of every legacy stylesheet confirmed none of these class
   names collide with anything else site-wide, so instead of renaming (and
   risking a silent JS break on a security/fraud-sensitive form) this styles
   the page's EXISTING classes in place, porting frontend/css/register.css's
   layout rules onto the redesign's tokens: #183e64 -> var(--navy) for
   structural/active states, #10B981 green -> var(--gold)/var(--gold-btn)
   for "completed"/primary-action states (matching the button language used
   everywhere else in the redesign), Cormorant Garamond for headings, Inter
   for body/labels/inputs. */
.registration-container { max-width: 640px; margin: 60px auto 90px; padding: 50px 44px; background: var(--bg); border-radius: 10px; box-shadow: 0 10px 40px rgba(30,58,95,.10); border: 1px solid var(--border); }

.progress-indicator { display: flex; align-items: center; justify-content: center; margin-bottom: 44px; }
.step-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.step-circle { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-warm); border: 2px solid var(--border); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: var(--text-muted); position: relative; transition: all .25s ease; }
.step-item.active .step-circle { background: var(--navy); border-color: var(--navy); color: #fff; }
.step-item.completed .step-circle { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
.step-item.completed .step-circle .step-number { visibility: hidden; }
.step-item.completed .step-circle::before { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.step-label { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.step-item.active .step-label, .step-item.completed .step-label { color: var(--dark); }
.step-line { width: 90px; height: 2px; background: var(--border); margin: 0 6px 22px; }
.step-line.completed { background: var(--gold-btn); }

.form-step { display: none; }
.form-step.active { display: block; animation: rdFadeInUp .4s ease; }
@keyframes rdFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.step-header { text-align: center; margin-bottom: 32px; }
.step-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 700; color: var(--dark); margin: 0 0 6px; }
.step-subtitle { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-muted); margin: 0; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--dark); margin-bottom: 7px; }
.form-control { width: 100%; padding: 12px 14px; font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--text); background: var(--bg); border: 2px solid var(--border); border-radius: 6px; transition: border-color .2s ease, box-shadow .2s ease; }
.form-control:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,.10); }
.form-control.error { border-color: #EF4444; }
.text-danger { display: block; font-family: 'Inter', sans-serif; font-size: 12.5px; color: #EF4444; margin-top: 6px; }

.account-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.account-type-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.account-type-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 10px; text-align: center; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); background: var(--bg-warm); border: 2px solid var(--border); border-radius: 8px; cursor: pointer; transition: all .2s ease; }
.account-type-option input:checked + .account-type-label { background: rgba(30,58,95,.06); border-color: var(--navy); color: var(--navy); }

.title-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.title-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.title-label { display: flex; align-items: center; justify-content: center; padding: 11px 6px; text-align: center; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--bg-warm); border: 2px solid var(--border); border-radius: 6px; cursor: pointer; transition: all .2s ease; }
.title-option input:checked + .title-label { background: rgba(30,58,95,.06); border-color: var(--navy); color: var(--navy); }

.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.button-group { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.button-group.button-group-split { flex-direction: row; gap: 10px; flex-wrap: nowrap; }
.button-group.button-group-split .btn { flex: 1; }
.btn.btn-color { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 13px 20px; font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; background: var(--gold-btn); border: none; border-radius: 6px; cursor: pointer; transition: background .2s ease; }
.btn.btn-color:hover { background: var(--gold-hover); }
.btn.btn-color.btn-secondary { background: transparent; color: var(--navy); border: 2px solid var(--border); }
.btn.btn-color.btn-secondary:hover { background: var(--bg-warm); border-color: var(--navy); }

.password-field { position: relative; }
.password-field .toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted); background: none; border: none; padding: 0; display: flex; }

.form-footer { text-align: center; margin-top: 22px; font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-muted); }
.form-footer a { color: var(--gold); text-decoration: underline; }

.checkbox-group { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold-btn); cursor: pointer; flex-shrink: 0; }
.checkbox-group label { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text); line-height: 1.7; margin: 0; }
.checkbox-group a, .checkbox-group span[role="button"], .checkbox-group .rd-inline-link { color: var(--gold); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }

.company-fields { display: none; }
.company-fields.show { display: block; }

.dob-section.hidden { display: none; }
.dob-info { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }

.radio-group { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.radio-option { display: flex; align-items: center; gap: 8px; }
.radio-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--gold-btn); cursor: pointer; margin: 0; }
.radio-option label { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); cursor: pointer; margin: 0; }

/* This page's own two modals (#myModal privacy policy, #termCondmyModal
   terms & conditions) - separate markup/classes from tnc.blade.php's
   .rd-modal-*, the JS here toggles element.style.display directly so it's
   agnostic to the class name as long as .modal starts hidden. */
.modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(26,26,26,.55); }
.modal .container { max-width: 640px; margin: 5vh auto; background: var(--bg); border-radius: 10px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--dark); margin: 0; }
.modal .close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 4px; }
.modal .close:hover { color: var(--dark); }
.modal h5 { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--dark); margin: 20px 26px 8px; }
.modal p, .modal ol li { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-muted); line-height: 1.75; }
.modal p { margin: 0 26px 12px; }
.modal ol { padding-left: 20px; margin: 0 26px 12px; }
.modal > .container { padding-bottom: 8px; overflow-y: auto; }

.recaptcha-container { display: flex; justify-content: center; margin: 20px 0; }

/* Newsletter consent checkbox (#94).

   custom.css:838 leads its text-field rule with a bare `input` selector, so
   `width:100%; min-height:42px` plus text padding lands on every input on the
   site - checkboxes included. Bootstrap 4.6 is what this theme runs (see #79),
   and unlike 5 it gives .form-check-input no width or height of its own, so
   nothing pushed back: the box stretched to the full row, 400x42, and the
   label sat beside a huge empty square.

   That is what the old inline `style="width:12px;height:12px"` was for. Inline
   styles are invisible to anyone reading the stylesheet and 12px is smaller
   than the 16px text it sits against, so the box read as slightly sunk. Sized
   here instead, at 16px to match the label's type.

   The row owns its own layout here rather than borrowing utility classes. The
   markup had `gap-2` and `text-start` on it, which are Bootstrap 5 utilities -
   this theme runs 4.6, so both were silently doing nothing and the box sat
   4px from its label by accident. Written as plain CSS, they work whichever
   Bootstrap is loaded.

   The selector outranks the bare `input` rule whatever the load order, and
   touches nothing outside this row - the global rule is left alone
   deliberately, since every text field on the site depends on it. */
.rd-consent-row { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
/* position:static is doing real work. Bootstrap 4.6 styles .form-check-input as
   `position:absolute; margin-left:-1.25rem`, expecting the padded .form-check
   wrapper we just removed. Left alone, the box drops out of the flex flow and
   the label slides underneath it. Bootstrap 5 dropped that rule, which is why
   this markup pattern looks fine in every 5.x example and not here. */
.rd-consent-row input[type="checkbox"] {
  position: static;
  width: 16px; height: 16px;
  min-width: 16px; min-height: 16px;
  padding: 0; margin: 1px 0 0 0;
  flex: 0 0 auto;
}
.rd-consent-row label { margin: 0; flex: 1 1 auto; min-width: 0; }

/* The required-marker asterisk sat alone on its own line. Not a wrapping
   problem - the text is ~260px in a 344px row, so there was room. It is
   .text-danger above (line ~1840), which this file sets to `display:block`
   with a 6px top margin. That is right for the validation messages it was
   written for, which want their own line; it is wrong for an inline marker
   inside a label, which it also matches.

   Narrowed back to inline here rather than touching the shared rule, since
   every form on the site leans on the block behaviour. The &nbsp; before it in
   the markup keeps it welded to "e-mail." if the row ever does get narrow
   enough to wrap. */
.rd-consent-row label .text-danger { display: inline; width: auto; margin: 0; }

.iti { width: 100%; }
#phone { width: 100% !important; }

@media (max-width: 575.98px) {
  .registration-container { padding: 34px 20px; margin: 30px auto 60px; border-radius: 0; }
  .progress-indicator { padding: 0 2px; }
  .step-item { min-width: 0; flex: 1 1 0; }
  .step-circle { width: 32px; height: 32px; font-size: 12px; }
  .step-label { font-size: 9px; letter-spacing: 0; word-break: break-word; padding: 0 2px; }
  .step-line { width: 16px; min-width: 16px; margin: 0 2px 20px; }
  .name-fields, .account-type-selector { grid-template-columns: 1fr; }
  .title-selector { grid-template-columns: repeat(2, 1fr); }
  .button-group.button-group-split { flex-direction: column; }
  .btn.btn-color { font-size: 13px; padding: 13px 10px; white-space: normal; }
  .modal .container { margin: 0; max-height: 100vh; border-radius: 0; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .registration-container { padding: 40px 28px; }
  .step-line { width: 56px; }
  .title-selector { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .registration-container { max-width: 600px; }
  .step-line { width: 70px; }
}

/* ─── FOOTER ───────────────────────────────────────────────────────────── */
/* var(--dark), not the #111 this used to hardcode (#107). #111 appears nowhere
   else in the theme; the mobile drawer was moved onto the same token for the
   same reason. The two are close enough that the change is not the point - the
   point is that the footer's ground is now the theme's dark rather than a value
   of its own. */
.rd-site-footer { background: var(--dark); color: rgba(255,255,255,.62); padding: 64px 0 28px; font-family: 'Inter', sans-serif; }
.rd-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
/* repeat(4,1fr), not proto1's 2fr 1fr 1fr 1fr - that ratio assumed a wide first
   brand/logo column, which the real footer doesn't have (its 4 columns are all
   real content: Support, About Us, Company Info, Payment methods). */
/* Unequal tracks, because the four columns hold very different things: 4 links,
   3 links, 5 address lines, and 7 payment logos plus a phone number (#107).
   Four equal 250px columns left the payment column wrapping its logos onto a
   second row while the two link columns sat half empty.

   1.6fr gives that column ~340px. The logos need 314px (7 x 38px plus 6 x 8px
   gaps), so they fit one row with a little slack - 1.5fr also fits at 326px but
   leaves only 12px, which a longer translated label would eat. */
.rd-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.6fr; gap: 40px; margin-bottom: 44px; }
.rd-footer-address p { margin: 0 0 4px 0; font-size: 13px; line-height: 1.6; }
.rd-footer-payment-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* 32px, up from 22px (#88). The padding is part of the box, so at 22px the
   actual mark was only 14px tall - Visa and Mastercard were recognisable by
   colour alone and "G Pay", "EPS" and Apple Pay were not legible at all.
   These are trust marks: if they cannot be read they are doing nothing. 22px
   of mark (32 less the 5px padding either side) matches the body text's
   optical weight without turning a supporting row into a feature.
   Shared by the product pages (.rd-payment-row) and the footer
   (.rd-footer-payment-logos); both wrap, so the extra width costs a second
   row at narrow widths rather than overflowing. */
.rd-payment-logo { height: 32px; width: auto; background: #fff; border-radius: 4px; padding: 5px 8px; }
.rd-footer-phone { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.60); }
.rd-footer-copy { font-size: 12px; }
.rd-footer-copy a { color: var(--gold-light); }
/* Unused since the rebuild - the footer never carried a text lockup. Kept
   because .rd-footer-logo-mark is the only place the navy roundel is described
   in CSS, if one is ever wanted without the wordmark. */
.rd-footer-logo-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rd-footer-logo-name em { font-style: normal; color: var(--gold-light); }
.rd-footer-logo-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.rd-footer-logo-mark svg { width: 16px; height: 16px; }
.rd-footer-tagline { font-size: 13px; line-height: 1.7; margin-bottom: 20px; }
.rd-footer-powered { font-size: 11.5px; color: rgba(255,255,255,.35); }
/* Gold, not white (#107). 11px/700/uppercase/2px tracking is already the
   site's label device - .rd-section-kicker uses exactly this for HANDPICKED,
   GIFTING IDEAS and IDEAS & STORIES further up the page - so the footer now
   labels its columns the same way the page labels its sections rather than
   with a treatment of its own. ~8.3:1 on var(--dark). */
.rd-footer-col-title { color: var(--gold-light); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; display: block; }
.rd-footer-links { list-style: none; margin: 0; padding: 0; }
.rd-footer-links li { margin-bottom: 10px; }
/* .72 rather than .55 (#107): ~9.5:1 on var(--dark) against ~6.0:1 before,
   which at 13px is a real difference. Still clearly secondary to the gold
   labels above them. */
.rd-footer-links a { color: rgba(255,255,255,.72); font-size: 13px; text-decoration: none; cursor: pointer; transition: color .2s; }
.rd-footer-links a:hover { color: var(--gold-light); }
.rd-footer-bottom {
  /* .12: at .09 the rule above the copyright line was invisible (#107). */
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; flex-wrap: wrap; gap: 10px;
}

/* ─── INSPIRATION & CITY ARTICLE ───────────────────────────────────────── */
.rd-insp-intro { max-width: 1100px; margin: 0 auto; padding: 44px 40px 12px; }
.rd-insp-intro p { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text-muted); line-height: 1.75; max-width: 640px; }
.rd-insp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; padding: 24px 40px 60px; }
.rd-insp-card { position: relative; height: 240px; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.1); transition: transform .3s, box-shadow .3s; background: #ccc; display: block; text-decoration: none; }
.rd-insp-card:hover { transform: translateY(-5px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.rd-insp-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.rd-insp-card:hover img { transform: scale(1.06); }
.rd-insp-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%); }
.rd-insp-name { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: white; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; }

/* The homepage teaser row (#86). Same .rd-insp-card as the Inspiration page, but
   its own grid: .rd-insp-grid above carries that page's max-width and 40px page
   padding, which would sit inside .rd-section-wrap's padding and double it.
   Four across to match the controller's limit(4), so the row is always full. */
.rd-insp-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* width:fit-content because this one is an <a>, not a <button>. .rd-btn-center
   is display:block, which a button shrinks to its content under but an anchor
   stretches to the full row - so the same class that centres the Show More
   buttons produced a full-width gold bar here. Fixed on this pairing rather
   than on .rd-btn-center itself, which every other page's buttons rely on. */
.rd-insp-home-grid + .rd-btn-center { margin-top: 40px; width: fit-content; }

.rd-city-art { max-width: 820px; margin: 0 auto; padding: 36px 32px 80px; }
.rd-city-back {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: none;
  color: var(--gold-btn); font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; margin-bottom: 24px; padding: 0; transition: color .2s;
  text-decoration: none;
}
.rd-city-back:hover { color: var(--gold-hover); }
.rd-city-h1 { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 600; color: var(--dark); margin-bottom: 6px; }
.rd-city-byline { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.rd-city-hero-img { width: 100%; height: 420px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 24px; }
.rd-city-pullq { background: var(--bg-warm); border-left: 3px solid var(--gold-btn); border-radius: 0 6px 6px 0; padding: 18px 22px; margin-bottom: 30px; font-family: 'Inter', sans-serif; font-size: 15px; font-style: italic; line-height: 1.75; color: var(--text-muted); }
.rd-city-h2 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--dark); margin-bottom: 12px; }
.rd-city-body-p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.85; color: var(--text-muted); margin-bottom: 15px; }
.rd-city-body-p a { color: var(--gold-btn); }
.rd-city-cta-box { background: var(--bg-warm); border: 1px solid var(--border); border-radius: 10px; padding: 22px 26px; margin: 34px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd-city-cta-box p { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--dark); margin: 0; }
.rd-city-more-h { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--dark); margin-bottom: 14px; margin-top: 40px; }
.rd-city-more-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.rd-city-more-card { position: relative; height: 130px; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform .25s; background: #ccc; display: block; text-decoration: none; }
.rd-city-more-card:hover { transform: translateY(-3px); }
.rd-city-more-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-city-more-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 50%); }
.rd-city-more-nm { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: white; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; }

/* Editor.js block types proto1's own (static) city article never needed to
   render, since real inspiration articles are fully dynamic content built
   from an Editor.js block list (paragraph/header/list/quote/image/video/
   delimiter - see editorjsinspirationdetails.blade.php's block switch). */
.rd-city-list { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.85; color: var(--text-muted); margin: 0 0 15px 22px; }
.rd-city-list li { margin-bottom: 6px; }
.rd-city-body-img-wrap { margin: 24px 0; text-align: center; }
.rd-city-body-img { width: 100%; border-radius: 10px; display: block; }
.rd-city-body-img-caption { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--text-muted); margin-top: 8px; font-style: italic; }
.rd-city-body-video { width: 100%; border-radius: 10px; display: block; margin: 24px 0; background: #000; }
.rd-city-hr { border: none; border-top: 1px solid var(--border); margin: 34px 0; }

/* ─── RESPONSIVE ───────────────────────────────────────────────────────── */
/* Header/nav only - paired with the @media (min-width: 1350px) block above.
   Kept separate from the @media (max-width: 991px) block below (which is
   every OTHER responsive rule on the page, untouched by this fix) because
   the header's own fit threshold is measured at ~1350px, not 991px. */
@media (max-width: 1349px) {
  .rd-hamburger { display: flex; }
  .rd-header-actions { display: none; }
  .rd-header-actions-compact { display: flex; }
  /* .rd-top-bar-right (Sign In/cart/currency/language) is desktop-only for
     the same reason .rd-header-actions always was: below this width the
     off-canvas drawer's own .level.mobile duplicates of these four, plus
     .rd-header-actions-compact's icon pair, already cover them. Without this,
     the top bar gained a third wrapped line here and duplicated the drawer's
     own Sign In/currency/language controls. */
  .rd-top-bar-right { display: none; }

  /* Raising the hamburger threshold from 991px to 1349px (above) opened a gap:
     responsive.css's own off-canvas drawer positioning for #menu
     (`.navbar-collapse{position:fixed;left:-260px;...}`, the slide-in panel
     itself) is hardcoded to `@media (max-width: 991px)` in that file - not
     something this redesign should edit - so between 992px and 1349px #menu
     would fall back to Bootstrap's bare `.collapse:not(.show){display:none}`
     with no positioning at all: hamburger visible, but clicking it (which
     toggles a `.menu-open` class - custom.js, not Bootstrap's own `.show` -
     matched by custom.css's unscoped `.navbar-collapse.menu-open{left:0}`)
     would do nothing visible, since `left` has no effect without `position`.
     This restates that same, already-proven-working positioning here (via
     the #menu id, so no !important cascade fight with responsive.css's copy
     below 991px - they just both apply, redundantly and harmlessly, in that
     range) so the drawer keeps working through the gap too. */
  #menu.rd-nav-collapse {
    display: inline-block !important; position: fixed !important; top: 0 !important;
    left: -260px; bottom: 0; width: 250px; height: 100% !important; margin: 0 !important;
    background: var(--gold-deep); border-bottom: 0; z-index: 4;
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
    transition: left .4s ease 0s;
    overflow-x: hidden; overflow-y: auto;
  }
  /* custom.js's hamburger click handler toggles a `.menu-open` class (not
     Bootstrap's own `.show`), and custom.css's unscoped `.navbar-collapse
     .menu-open{left:0}` (2 classes) is what's supposed to slide the drawer
     into view - but #menu.rd-nav-collapse just above is ID+class (always
     outranks 2 plain classes, independent of source order), so without
     restating the open state at equal-or-higher specificity here, the drawer
     could never actually open in this 992-1349px gap: closed forever. */
  #menu.rd-nav-collapse.menu-open { left: 0; }
  /* Same gap, for the drawer's own close (X) button: it's hidden above 991px by
     Bootstrap's own `.d-lg-none` utility class (markup, theme/header.blade.php),
     which is tied to Bootstrap's own 992px breakpoint, not this file's 1350px
     one - patch just the 992-1349px gap the two breakpoints disagree on. */
  @media (min-width: 992px) {
    .sidebar-close-btn { display: block !important; }
  }

  /* The drawer's own text styling (drawer background/positioning is handled
     just above). It is the white header row's nav, stacked - so the links keep
     var(--text) and only gain the block padding a touch target needs. */
  .rd-main-nav .level.mobile { display: list-item; }
  .rd-main-nav > .level > a, .rd-main-nav .rd-mobile-link {
    color: var(--text); display: block; padding: 12px 20px; border-bottom: 0;
  }
  .rd-main-nav > .level > a:hover, .rd-main-nav > .level > a.rd-active { color: var(--gold); }
  .rd-mobile-account-banner {
    display: flex; align-items: center; gap: 10px; padding: 14px 20px;
    color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    border-bottom: 1px solid var(--border);
  }
  .rd-mobile-lang { padding: 10px 20px; color: var(--text); }
  .rd-mobile-lang #mobileSelectedLangText { color: var(--text); }
  .rd-mobile-cta { justify-content: center; }   /* margin: see the scoped rule below */

  /* ─── Mobile drawer, brought onto the new design (#73) ─────────────────
     Two things were wrong. The drawer was 250px of legacy navbar-collapse on
     a #183e64 blue that appears nowhere else in the palette; and the language
     picker listed every language permanently, because header.blade.php's
     script toggles a `.show-menu` class on #mobileLangMenu that no rule ever
     defined - so the menu was never hidden and the trigger did nothing.

     The panel was --navy, then briefly --gold-deep to match the top bar. It now
     takes the white header row instead - the nav row with the logo and links,
     not the gold utility strip above it. Same var(--bg) ground, same
     var(--text) links at the same weight, same var(--gold) marker for the
     current page, same solid-gold "Use gift card". The drawer is that row
     stacked, so nothing in it needs a palette of its own.

     Everything below is presentation only. The ids and classes the scripts
     use (#menu, .menu-open, #mobileLangTrigger, #mobileLangMenu,
     .mobile-lang-option, #mobileSelectedFlag, #mobileSelectedLangText,
     the [data-rd-cur] currency picker) are untouched. */
  :root { --rd-drawer-w: min(86vw, 320px); }

  /* The drawer is the white header row's nav, stacked: same #fff ground, same
     var(--text) links, same gold marker for the current page. The panel edge
     uses var(--border), the same hairline .rd-site-header carries along its
     bottom, so the drawer looks like that row continuing down the screen. */
  #menu.rd-nav-collapse {
    width: var(--rd-drawer-w);
    left: calc(-1 * var(--rd-drawer-w) - 12px);
    background: var(--bg);
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 28px rgba(26,26,26,.12);
    /* Room to scroll the last row (Sign out, or the pickers when signed out)
       clear of the Tawk.to chat bubble, which is fixed over the bottom-left
       corner - exactly where the drawer ends. Measured at phone width: 60px
       tall, 20px off the bottom, so it covers the bottom 80px; 96px clears it
       with a little air. Plus the iOS home-bar inset, which the bubble also
       sits above. If the widget's position ever changes in the Tawk.to
       dashboard, this number needs to follow it. */
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  #menu.rd-nav-collapse.menu-open { left: 0; }

  /* responsive.css:1432 (@media max-width 575px) puts `margin: 40px 0 0` and a
     `1px solid #FF715B` top border on .nav.navbar-nav - pre-rebrand coral, and
     the only thing on the drawer still wearing the old palette. It drew a
     salmon line across the panel and pushed the whole list down by 40px. */
  #menu.rd-nav-collapse .rd-main-nav { margin: 0; border-top: 0; }

  /* No rule under every row. A line between each item made the list read as a
     ledger, and the header row this panel mirrors has no dividers at all - the
     separation there is spacing. Only the two group boundaries keep a rule. */
  .rd-main-nav > .level > a, .rd-main-nav .rd-mobile-link {
    padding: 14px 22px; font-family: 'Inter', sans-serif; font-size: 15px;
    font-weight: 400; border-bottom: 0;
  }
  .rd-main-nav > .level > a:hover, .rd-main-nav .rd-mobile-link:hover {
    background: var(--bg-warm); color: var(--gold);
  }
  /* The header marks the current page with a gold underline beneath the word.
     Stacked, every link is a full-width block, so an underline would just be
     the row dividers back again - the same mark reads vertically as a gold
     edge down the active row. Gold text is common to both.

     No weight change here (#82). The header marks its current page with colour
     alone - .rd-main-nav > .level > a.rd-active sets only the gold text and the
     gold underline, never a heavier weight - so bolding it in the drawer was an
     inconsistency, and it was the last thing in the list still reading as bold.
     Gold text, the warm row and the gold edge are three marks already. */
  .rd-main-nav > .level > a.rd-active {
    color: var(--gold);
    background: var(--bg-warm);
    box-shadow: inset 3px 0 0 var(--gold);
  }
  .rd-mobile-account-banner {
    /* 500 rather than the 600 it inherits (#82): it is a name label, and at 600
       it was the heaviest thing in a panel that is otherwise all 400. */
    padding: 18px 22px; font-size: 14px; font-weight: 500; color: var(--text);
    background: var(--bg-warm);
    border-bottom: 1px solid var(--border);
  }
  .rd-mobile-account-banner .fa { color: var(--gold); }
  /* Signed out, the same banner slot holds a "Sign in" link, so the drawer
     opens the same way in both states. The link fills the whole bar (the li's
     own padding moves onto it) so the entire strip is the tap target. Written
     at .level.rd-mobile-signin > a to outrank `.rd-main-nav > .level > a`,
     which would otherwise hand it the nav links' padding and 15px text. */
  .rd-mobile-account-banner.rd-mobile-signin { padding: 0; }
  .rd-main-nav > .level.rd-mobile-signin > a {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 18px 22px; font-size: 14px; font-weight: 500; color: var(--text);
    text-decoration: none;
  }
  .rd-main-nav > .level.rd-mobile-signin > a:hover { background: var(--bg-warm); color: var(--gold); }
  .rd-mobile-signin-chevron { margin-left: auto; font-size: 11px; }

  /* Language picker: a real dropdown now. */
  .rd-mobile-lang { position: relative; padding: 6px 22px 10px; }
  .rd-mobile-lang .mobile-selected-lang {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text);
    font-family: 'Inter', sans-serif; font-size: 13px;
  }
  .rd-mobile-lang .mobile-selected-lang .fa { margin-left: auto; font-size: 11px; transition: transform .2s; }
  .rd-mobile-lang .mobile-lang-menu {
    display: none;                      /* the missing half of the toggle */
    margin-top: 6px; border: 1.5px solid var(--border); border-radius: 6px;
    overflow: hidden; background: var(--bg); box-shadow: 0 6px 18px rgba(26,26,26,.1);
  }
  .rd-mobile-lang .mobile-lang-menu.show-menu { display: block; }
  .rd-mobile-lang:has(.mobile-lang-menu.show-menu) .mobile-selected-lang .fa { transform: rotate(180deg); }
  .rd-mobile-lang .mobile-lang-option {
    display: flex; align-items: center; gap: 9px; padding: 11px 12px;
    color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; cursor: pointer;
  }
  .rd-mobile-lang .mobile-lang-option + .mobile-lang-option { border-top: 1px solid var(--border); }
  .rd-mobile-lang .mobile-lang-option:hover { background: var(--bg-warm); color: var(--gold); }
  .rd-mobile-lang img { width: 18px; height: auto; border-radius: 2px; display: block; }

  .rd-mobile-cta { justify-content: center; font-size: 14px; }  /* margin/padding: scoped rule below */

  /* The drawer's close (X) button had no rules at all in any loaded sheet:
     .sidebar-close-btn and .sidebar-close are styled only in frontend/css/
     header.css, which this redesign deliberately stopped linking. All it kept
     was responsive.css's bare `.navbar-toggle { padding: 0; background: none }`
     plus a 25px glyph, so it sat hard against the drawer's top-left corner with
     no padding and no tap target. Restated here, on the drawer's own terms. */
  /* `display` needs !important to clear Bootstrap's own .d-block utility, which
     the markup carries alongside .d-lg-none. */
  .sidebar-close-btn {
    display: flex !important; justify-content: flex-end;
    padding: 12px 14px 4px;
  }
  #menu.rd-nav-collapse .sidebar-close {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0 !important;
    background-color: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important; color: var(--text-muted) !important; cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
  }
  #menu.rd-nav-collapse .sidebar-close:hover {
    background-color: var(--bg-warm) !important; color: var(--gold) !important; border-color: var(--gold) !important;
  }
  #menu.rd-nav-collapse .sidebar-close i { font-size: 15px; }

  /* Secondary CTA on the dark drawer. .rd-btn-outline-dark cannot be reused
     here - it draws itself in var(--dark), which is invisible on the navy.
     These are all selected as `.rd-main-nav > .level > a.<class>` rather than on
     the class alone: the drawer's own nav-link rule a few lines up is
     `.rd-main-nav > .level > a` (0,2,1), so a bare single class loses to it and
     the button silently keeps the nav link's border-bottom, padding and weight.

     `margin` is on this scoped rule for the same reason, and it is the one that
     bit hardest: custom.css's `.navbar-nav > li > a` (0,1,2) sets `margin: 0`,
     and responsive.css repeats it under max-width 991px. A bare `.rd-mobile-cta`
     (0,1,0) loses to both no matter where it sits in the file, so the inset the
     button appeared to have was never applied - it sat flush against the
     drawer's left edge with ~160px of dead space beside it.

     `display: flex` rather than inline-flex so the button fills the drawer
     instead of shrink-wrapping its label; the ghost variant below repeats it
     because it matches at equal specificity and would otherwise win on order. */
  .rd-main-nav > .level > a.rd-mobile-cta {
    display: flex; border-bottom: 0; padding: 13px 18px; margin: 16px 22px 0;
  }
  /* Both drawer CTAs ("I was given a Gift box" and "Use gift card") are this
     solid gold, matching the desktop header, where "Use gift card" is solid
     gold at rest too. It used to be a gold outline here that only filled on
     hover, which on a touch screen meant it never looked like the main action. */
  .rd-main-nav > .level > a.rd-mobile-cta.rd-btn-gold {
    background: var(--gold-btn); color: #fff; border: 1.5px solid var(--gold-btn);
    border-radius: 4px; font-weight: 600;
  }
  .rd-main-nav > .level > a.rd-mobile-cta.rd-btn-gold:hover {
    background: var(--gold-hover); border-color: var(--gold-hover); color: #fff;
  }
  /* Two stacked gold buttons (gift-box holders only) sit closer together so
     they read as a pair. */
  .level:has(.rd-btn-gold) + .level .rd-mobile-cta { margin-top: 10px; }
  /* Breathing room between the last gold button and the first nav link (Home,
     whose active-row tint otherwise butts straight against the button). Put on
     the nav row rather than as a bottom margin on the button, so the gap
     between two stacked buttons above stays as it is. */
  .level:has(> .rd-mobile-cta) + .level:not(:has(> .rd-mobile-cta)) { margin-top: 12px; }

  /* Group headings (MY ACCOUNT, PREFERENCES) - the same small uppercase label
     the currency picker uses for its own groups (.rd-cur-group-label), so the
     drawer has one labelling style. The rule on top is the group separator;
     the navigation group above needs no label, it is what a menu is. */
  .rd-mobile-group-label {
    margin-top: 10px; padding: 16px 22px 4px;
    border-top: 1px solid var(--border);
    font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  }
  /* The currency picker's own 14px top margin assumed nothing above it; under
     a label it only needs a little. */
  .rd-mobile-group-label + .level .rd-cur--drawer { margin-top: 8px; }
  .rd-mobile-signout-row { margin-top: 10px; border-top: 1px solid var(--border); }
  .rd-main-nav > .level > a.rd-mobile-signout { color: var(--text-muted); border-bottom: 0; }
  .rd-main-nav > .level > a.rd-mobile-signout:hover { color: var(--gold); background: var(--bg-warm); }

  .rd-header-actions .rd-btn-outline-dark, .rd-header-actions .rd-btn-gold { font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 991px) {
  .rd-hero-title { font-size: 38px; }
  .rd-hero-body { padding: 0 28px 60px; }
  .rd-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .rd-gift-banner { grid-template-columns: 1fr; }
  .rd-gift-banner-visual { height: 110px; }
  .rd-photo-steps-grid { grid-template-columns: 1fr; }
  .rd-bestseller-grid { grid-template-columns: repeat(2, 1fr); }
  .rd-band-inner { padding: 0 24px; }
  .rd-steps-grid { grid-template-columns: 1fr; gap: 36px; }
  .rd-product-card { grid-template-columns: 1fr; }
  /* Two across on a tablet, one on a phone (767.98px block below) - same
     steps the bestseller grid takes. The cards are already vertical by this
     point (#104). */
  .rd-product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  /* Card stacks here, so the image is on top rather than on the left - the
     rounded corners it has to follow move with it. */
  .rd-product-card.rd-product-card-overflow .rd-product-img-col { border-radius: 9px 9px 0 0; }
  .rd-pd-grid { grid-template-columns: 1fr; }
  .rd-pd-gallery { grid-template-columns: 1fr; }
  .rd-pd-thumbs { flex-direction: row; }
  .rd-pd-info-cards { grid-template-columns: 1fr; }
  .rd-why-grid { grid-template-columns: 1fr; }
  .rd-cart-content { grid-template-columns: 1fr; }
  .rd-cart-summary { position: static; }
  .rd-cart-item { flex-direction: column; }
  .rd-cart-item-img { width: 100%; height: 180px; }
  .rd-cart-item-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rd-cart-item-price { text-align: left; }
  .rd-contact-grid { grid-template-columns: 1fr; }
  .rd-contact-grid > *:first-child { order: 2; }
  .rd-form-row { grid-template-columns: 1fr; }
  .rd-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .rd-trust-bar-inner { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .rd-tab-btn { padding: 10px 14px; font-size: 12px; }
  .rd-section-wrap { padding: 52px 24px; }
  .rd-home-sec { padding: 52px 0; }
  .rd-section-title { font-size: 36px; }
  .rd-insp-grid { grid-template-columns: repeat(2, 1fr); padding: 20px 24px 48px; gap: 12px; }
  .rd-insp-home-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rd-city-h1 { font-size: 36px; }
  .rd-city-hero-img { height: 260px; }
  .rd-city-more-row { grid-template-columns: repeat(2, 1fr); }
  .rd-city-art { padding: 28px 20px 60px; }
}
/* Package grids - homepage Bestsellers and the Explore Gift Boxes listing
   (/travel) - go one per row on phones in either orientation, not just below
   480px as before: at ~620px two cards were squeezed side by side. Tablets
   (768px+) keep two per row from the 991px block above. Capped at 520px and
   centred so a single card doesn't stretch across a wide phone in landscape;
   both cards' photos are object-fit: cover, so they crop, never distort.
   767.98 rather than 767 so the boundary holds at fractional display scaling
   (at 125%, a "767px" viewport measures a fraction over 767). */
@media (max-width: 767.98px) {
  .rd-bestseller-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .rd-product-grid { grid-template-columns: 1fr; gap: 18px; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .rd-top-bar-inner { display: none; }
  .rd-header-actions { display: none; }
  /* At 20px/17px the row measures ~349px, but .rd-hero-body leaves only 319px
     on a 375px phone and 304px on a 360px one. Scaled down it needs ~296px and
     stays on one line, keeping the matched-height look; .rd-tp-row's flex-wrap
     covers anything narrower still. */
  .rd-tp-stars { font-size: 17px; }
  .rd-tp-label { font-size: 14px; }
  .rd-hero-title { font-size: 28px; }
  .rd-hero { height: auto; min-height: 380px; }
  .rd-hero-ctas { flex-direction: column; gap: 10px; }
  .rd-btn-hero-gold { width: 100%; text-align: center; }
  .rd-insp-grid { gap: 10px; padding: 14px 16px 40px; }
  .rd-insp-home-grid { gap: 10px; }
  .rd-insp-card { height: 180px; }
  .rd-city-h1 { font-size: 28px; }
  .rd-city-hero-img { height: 200px; }
  .rd-city-cta-box { flex-direction: column; align-items: flex-start; }
  .rd-footer-grid { grid-template-columns: 1fr; }
  .rd-photo-step { height: 340px; }
}