/* ============================================================
   Ireti-Iyè — shop theme
   ------------------------------------------------------------
   Carries the landing page's design system into OpenCart.
   Tokens are copied verbatim from web/src/styles/tokens.css so the
   two surfaces cannot drift; if a value changes there, change it here.

   Loaded after bootstrap.css and stylesheet.css via the
   catalog/view/common/header/after event, so it wins on equal
   specificity without !important. Where Bootstrap uses a more
   specific selector we match it rather than shouting over it.

   OpenCart 4.1 has no separate theme directories — there is one
   template folder. So this file does the visual work, and the two
   templates that need real markup surgery (header, footer) are
   overridden through the `theme` table, which is the sanctioned
   mechanism and survives upgrades.
   ============================================================ */

/* ---------- fonts: self hosted, never a CDN ---------------------
   Google Fonts would leak every visitor's IP to a third party on
   every page load. Same reasoning as the landing page. */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/playfair-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/playfair-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/playfair-700.woff2') format('woff2');
}

/* ---------- tokens --------------------------------------------- */

:root {
  --ii-oxblood:      #75140D;
  --ii-oxblood-mid:  #5E100A;
  --ii-oxblood-deep: #3F0A06;
  --ii-red:          #C0261B;
  --ii-red-hot:      #D8342A;

  --ii-gold:         #C8A15A;
  --ii-gold-light:   #E3C88F;
  --ii-gold-deep:    #7A5A22;

  --ii-cream:        #F7F0E4;
  --ii-cream-deep:   #EFE4D2;
  --ii-kraft:        #8B6A3F;
  --ii-leaf:         #3F8F3A;

  --ii-ink:          #241512;
  --ii-ink-soft:     #6B564F;
  --ii-ink-faint:    #9B8880;

  /* White page, red brand, gold accent only.
     The cream ground read as dated, so it survives ONLY inside the red
     panels (as text) and never as a page background. Separation between
     sections is done with hairlines and shadow, not tinted bands. */
  --surface:         #FFFFFF;
  --surface-raised:  #FFFFFF;
  --hairline:        rgba(36, 21, 18, .10);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Near-square. Big radii and pill buttons are what dated this — the
     current idiom is 2-6px and crisp. --r-pill is kept as a token name
     so nothing breaks, but it is no longer a pill. */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-pill: 3px;

  /* Tighter, shorter-throw shadows. The old ones were soft 40-70px
     blooms, which reads as 2010s "material" rather than current. */
  --e-1: 0 1px 2px rgba(36, 21, 18, .06);
  --e-2: 0 1px 3px rgba(36, 21, 18, .08), 0 8px 20px -12px rgba(36, 21, 18, .30);
  --e-3: 0 2px 6px rgba(36, 21, 18, .10), 0 16px 34px -18px rgba(36, 21, 18, .34);

  --e-out:   cubic-bezier(.22, .68, .28, 1);
  --e-bob:   cubic-bezier(.34, .6, .4, 1);

  --d-fast: .22s;
  --d-mid:  .42s;

  /* Bootstrap's own variables, repointed. Cheaper and more reliable
     than chasing every component that consumes them. */
  --bs-primary: var(--ii-oxblood);
  --bs-link-color: var(--ii-oxblood);
  --bs-link-hover-color: var(--ii-red);
  --bs-body-font-family: var(--sans);
  --bs-body-color: var(--ii-ink);
  --bs-border-radius: var(--r-sm);
}

/* ---------- base ----------------------------------------------- */

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ii-ink);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.14;
  color: var(--ii-ink);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }

a { color: var(--ii-oxblood); text-decoration: none; transition: color var(--d-fast) var(--e-out); }
a:hover, a:focus { color: var(--ii-red); }

/* Never remove the focus ring — keyboard users navigate by it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ii-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

main { padding-bottom: 4rem; }

/* ---------- top utility bar ------------------------------------ */

nav#top {
  background: var(--ii-oxblood-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  /* stock adds margin-bottom: 20px and padding-bottom: 5px, which left a
     white gap between this bar and the header */
  padding: .3rem 0;
  margin-bottom: 0;
  min-height: 0;
}

/* White, smaller, medium weight, slightly open tracking.
   OpenCart styles these with
     #top .list-inline-item > a, #top .list-inline-item .dropdown > a, ...
   at specificity (1,2,1) — setting --bs-gray-600 (#6c757d) at 1.1em with
   a 40px line-height. A plain `nav#top a` (1,0,2) loses to that, which is
   why the first attempt did nothing. Adding ul.list-inline takes this to
   (1,2,2) and wins without !important.

   Worth noting the stock colour was grey #6c757d on the dark red bar,
   which fails WCAG AA badly. White fixes the contrast as well as the look. */
#top ul.list-inline .list-inline-item > a,
#top ul.list-inline .list-inline-item .dropdown > a,
#top ul.list-inline .list-inline-item .dropdown > span {
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1.7;
  padding: 0;
  vertical-align: middle;
  opacity: .9;
  transition: opacity var(--d-fast) var(--e-out);
}

#top ul.list-inline .list-inline-item > a:hover,
#top ul.list-inline .list-inline-item .dropdown > a:hover,
#top ul.list-inline .list-inline-item .dropdown > span:hover {
  color: #FFFFFF;
  opacity: 1;
}

nav#top .list-inline-item { margin-bottom: 0; }

/* The icons were the same size as the labels, which made the bar look
   crowded. Shrink and calm them so the words lead. */
nav#top i {
  font-size: .72rem;
  opacity: .75;
  margin-right: .1rem;
}

nav#top .dropdown-menu {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  font-size: .8rem;
}

/* ---------- header --------------------------------------------- */

header {
  background: var(--ii-oxblood);
  padding: 1.15rem 0 1rem;
  border-bottom: 1px solid rgba(200, 161, 90, .22);
}

header .row { align-items: center; }

/* ---------- wordmark, with the DEX EMPIRE bob -------------------
   Same 3.6s rhythm and cubic-bezier(.34,.6,.4,1) easing as the
   landing page nav, so the two surfaces feel like one brand. */

#logo { margin: 0; }

.ii-wordmark {
  display: inline-flex;
  align-items: flex-start;
  gap: .06em;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ii-cream);
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  filter: drop-shadow(0 8px 18px rgba(30, 4, 2, .45));
  animation: ii-bob 3.6s var(--e-bob) infinite;
}

.ii-wordmark__leaf {
  width: .40em;
  height: .40em;
  margin-top: .03em;
  flex: none;
  color: var(--ii-gold);
}

/* A real tap target, not just the glyph bounds. */
.ii-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ii-brand:hover .ii-wordmark { color: #FFFFFF; }

@keyframes ii-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ---------- search --------------------------------------------- */

header .input-group { margin-bottom: 0 !important; }

header input[name='search'] {
  border: 1px solid rgba(200, 161, 90, .35);
  border-right: 0;
  background: rgba(255, 255, 255, .96);
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  padding-inline: 1.15rem;
  font-size: .95rem;
  height: 48px;
  color: var(--ii-ink);
}

header input[name='search']::placeholder { color: var(--ii-ink-faint); }

header input[name='search']:focus {
  box-shadow: none;
  border-color: var(--ii-gold);
  background: #FFFFFF;
}

header .input-group .btn {
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--ii-gold);
  border: 1px solid var(--ii-gold);
  color: var(--ii-oxblood-deep);
  height: 48px;
  padding-inline: 1.3rem;
}

header .input-group .btn:hover {
  background: var(--ii-gold-light);
  border-color: var(--ii-gold-light);
}

/* ---------- cart button ---------------------------------------- */

#cart .btn {
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: var(--ii-oxblood-deep);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .92rem;
  height: 48px;
  letter-spacing: .01em;
  transition: transform var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}

#cart .btn:hover {
  background: #FFFFFF;
  transform: translateY(-1px);
}

#cart .dropdown-menu {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  min-width: 320px;
}

/* ---------- category menu -------------------------------------- */

nav#menu.navbar {
  background: var(--ii-oxblood-mid) !important;
  border-radius: 0 0 var(--r-md) var(--r-md);
  margin-bottom: 2rem;
  padding: 0 .5rem;
  box-shadow: var(--e-1);
}

nav#menu .nav-item > a,
nav#menu .dropdown-item {
  color: var(--ii-cream);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 1rem 1.15rem;
  position: relative;
  background: transparent;
}

nav#menu .nav-item > a:hover,
nav#menu .nav-item > a:focus {
  color: var(--ii-gold-light);
  background: transparent;
}

/* Underline grows from the centre rather than snapping in. */
nav#menu .nav-item > a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: .6rem;
  height: 2px;
  background: var(--ii-gold);
  transition: left var(--d-mid) var(--e-out), right var(--d-mid) var(--e-out);
}

nav#menu .nav-item > a:hover::after {
  left: 1.15rem;
  right: 1.15rem;
}

nav#menu #category {
  color: var(--ii-cream);
  font-size: .82rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 1rem .5rem;
}

nav#menu .navbar-toggler {
  color: var(--ii-cream);
  border-color: rgba(247, 240, 228, .3);
}

/* ---------- buttons -------------------------------------------- */

.btn {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--r-pill);
  padding: .7rem 1.5rem;
  transition: transform var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}

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

.btn-primary,
.btn-primary:focus {
  background: var(--ii-oxblood);
  border-color: var(--ii-oxblood);
  color: var(--ii-cream);
}

.btn-primary:hover {
  background: var(--ii-red);
  border-color: var(--ii-red);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--e-2);
}

.btn-secondary,
.btn-dark {
  background: var(--ii-ink);
  border-color: var(--ii-ink);
  color: var(--ii-cream);
}

.btn-secondary:hover,
.btn-dark:hover {
  background: var(--ii-oxblood);
  border-color: var(--ii-oxblood);
  transform: translateY(-2px);
}

.btn-light {
  background: #FFFFFF;
  border-color: var(--hairline);
  color: var(--ii-oxblood);
}

.btn-light:hover {
  background: var(--ii-gold-light);
  border-color: var(--ii-gold-light);
  color: var(--ii-oxblood-deep);
}

.btn-warning {
  background: var(--ii-gold);
  border-color: var(--ii-gold);
  color: var(--ii-oxblood-deep);
}

.btn-warning:hover {
  background: var(--ii-gold-light);
  border-color: var(--ii-gold-light);
  color: var(--ii-oxblood-deep);
}

/* ---------- breadcrumb ----------------------------------------- */

.breadcrumb {
  background: transparent;
  padding: 1.4rem 0 .4rem;
  font-size: .82rem;
  letter-spacing: .04em;
  margin-bottom: .6rem;
}

.breadcrumb a { color: var(--ii-ink-soft); }
.breadcrumb a:hover { color: var(--ii-oxblood); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ii-ink-faint); }

/* ---------- product cards -------------------------------------- */

.product-thumb {
  background: var(--surface-raised);
  border: 1px solid rgba(139, 106, 63, .14);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--d-mid) var(--e-out),
              box-shadow var(--d-mid) var(--e-out),
              border-color var(--d-mid) var(--e-out);
}

.product-thumb:hover {
  transform: translateY(-6px);
  box-shadow: var(--e-3);
  border-color: rgba(200, 161, 90, .5);
}

.product-thumb .image {
  overflow: hidden;
  background: #FFFFFF;
}

.product-thumb .image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--d-mid) var(--e-out);
}

.product-thumb:hover .image img { transform: scale(1.045); }

.product-thumb .content,
.product-thumb .caption {
  padding: 1.25rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.product-thumb h4,
.product-thumb .description h4 {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  margin-bottom: .5rem;
  line-height: 1.25;
}

.product-thumb h4 a { color: var(--ii-ink); }
.product-thumb h4 a:hover { color: var(--ii-oxblood); }

.product-thumb .description {
  color: var(--ii-ink-soft);
  font-size: .92rem;
  margin-bottom: .9rem;
}

.product-thumb .price {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ii-oxblood);
  margin-top: auto;
  /* Tabular figures stop prices jittering as digits change. */
  font-variant-numeric: tabular-nums;
}

.product-thumb .price-old {
  color: var(--ii-ink-faint);
  text-decoration: line-through;
  font-size: .95rem;
  margin-right: .4rem;
}

.product-thumb .price-new { color: var(--ii-red); }

.product-thumb .price-tax {
  display: block;
  font-family: var(--sans);
  font-size: .74rem;
  color: var(--ii-ink-faint);
  font-weight: 400;
  letter-spacing: .03em;
}

/* ---------- product page --------------------------------------- */

#product-info .thumbnails,
#product .thumbnails { list-style: none; padding: 0; }

#product-info h1 { margin-bottom: .75rem; }

#product-info .list-unstyled li,
#product .list-unstyled li { color: var(--ii-ink-soft); font-size: .93rem; }

#product-info .price,
#product .price {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ii-oxblood);
  font-variant-numeric: tabular-nums;
}

.nav-tabs {
  border-bottom: 1px solid rgba(139, 106, 63, .22);
  margin-top: 2.5rem;
}

.nav-tabs .nav-link {
  color: var(--ii-ink-soft);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .85rem 1.2rem;
}

.nav-tabs .nav-link.active {
  color: var(--ii-oxblood);
  background: transparent;
  border-bottom-color: var(--ii-gold);
}

.tab-content { padding: 1.75rem 0; }

/* ---------- forms ---------------------------------------------- */

.form-control,
.form-select {
  border: 1px solid rgba(139, 106, 63, .28);
  border-radius: var(--r-sm);
  padding: .68rem .9rem;
  font-size: .96rem;
  color: var(--ii-ink);
  background-color: var(--surface-raised);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ii-gold);
  box-shadow: 0 0 0 3px rgba(200, 161, 90, .22);
}

.form-label,
.col-form-label { font-weight: 500; color: var(--ii-ink); font-size: .93rem; }

legend {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ii-ink);
  margin-bottom: 1rem;
}

.required .col-form-label::before,
.required .form-label::before { color: var(--ii-red); }

/* ---------- cards, panels, alerts ------------------------------ */

.card {
  border: 1px solid rgba(139, 106, 63, .16);
  border-radius: var(--r-md);
  background: var(--surface-raised);
}

.card-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--hairline);
  font-weight: 600;
  color: var(--ii-ink);
}

.alert { border: 0; border-radius: var(--r-sm); font-size: .94rem; }
.alert-success { background: rgba(63, 143, 58, .12); color: #245C21; }
.alert-danger  { background: rgba(192, 38, 27, .10); color: #8C1A12; }
.alert-info    { background: rgba(200, 161, 90, .16); color: var(--ii-gold-deep); }

.table > :not(caption) > * > * { padding: .85rem .75rem; }
.table thead th {
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ii-ink-soft);
  border-bottom: 1px solid rgba(139, 106, 63, .24);
}

/* ---------- carousel ------------------------------------------- */

.carousel { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-2); }
.carousel img { width: 100%; height: auto; }

.carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: var(--r-sm);
  border: 0;
  background: rgba(247, 240, 228, .55);
}

.carousel-indicators .active { background: var(--ii-gold); }

/* ---------- footer --------------------------------------------- */

footer {
  background: var(--ii-oxblood-deep);
  color: var(--ii-cream);
  padding: 4rem 0 0;
  margin-top: 5rem;
}

footer h5 {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ii-gold);
  margin-bottom: 1.1rem;
}

footer a { color: rgba(247, 240, 228, .84); font-size: .93rem; }
footer a:hover { color: var(--ii-gold-light); }
footer ul li { margin-bottom: .45rem; }

.ii-footer__brand .ii-wordmark {
  font-size: 1.6rem;
  animation: none;
  filter: none;
}

.ii-footer__tagline {
  color: rgba(247, 240, 228, .72);
  font-size: .93rem;
  margin-top: .75rem;
  max-width: 30ch;
}

.ii-footer__contact { list-style: none; padding: 0; margin: 0; }

.ii-footer__contact li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  color: rgba(247, 240, 228, .84);
  font-size: .93rem;
  margin-bottom: .6rem;
}

.ii-footer__contact i { color: var(--ii-gold); margin-top: .28em; flex: none; }

.ii-social { display: flex; gap: .6rem; margin-top: 1.1rem; }

.ii-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--ii-cream);
  transition: background var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}

.ii-social a:hover {
  background: var(--ii-gold);
  color: var(--ii-oxblood-deep);
  transform: translateY(-2px);
}

.ii-footer__base {
  margin-top: 3rem;
  border-top: 1px solid rgba(200, 161, 90, .2);
  padding: 1.5rem 0 1.75rem;
  text-align: center;
}

/* 5.90:1 on the oxblood ground. #8B6A3F only reached 3.47 and failed AA. */
.ii-footer__base p {
  margin: 0;
  font-size: .82rem;
  color: rgba(247, 240, 228, .74);
}

.ii-credit { margin-top: .5rem !important; }
.ii-credit a { color: rgba(247, 240, 228, .74); text-decoration: underline; }
.ii-credit a:hover { color: var(--ii-gold-light); }

/* ---------- responsive ----------------------------------------- */

@media (max-width: 991.98px) {
  header { padding: 1rem 0; }
  #cart { margin-top: .75rem; }
  nav#menu.navbar { border-radius: 0; }
  nav#menu .nav-item > a::after { display: none; }
}

@media (max-width: 767.98px) {
  header .col-md-5 { margin-top: .85rem; }
  .ii-wordmark { font-size: 1.55rem; }
  footer { padding-top: 3rem; }
  footer .col-sm-3 { margin-bottom: 2rem; }
}

/* ============================================================
   PART TWO — the parts that make it feel designed rather than
   merely coloured in. Hero, motion, depth, editorial detail.
   ============================================================ */

/* ---------- undo OpenCart's absolute-footer hack ----------------
   stylesheet.css ships a crude sticky footer:

     #container { position: absolute; min-height: 100%; margin-bottom: 300px }
     footer     { position: absolute; bottom: -1px; width: 100% }

   Both are out of normal flow, so the footer is pinned to the bottom
   of #container and paints OVER whatever the page ends with. It went
   unnoticed while the home page ended with a product grid; the moment
   a section was added below it, the footer swallowed it whole.

   Replaced with a real flexbox sticky footer, which keeps the
   original intent (footer at the bottom of short pages) without
   taking anything out of flow. */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
}

#container {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
  margin-bottom: 0;
}

main { flex: 1 0 auto; }

footer {
  position: static;
  bottom: auto;
  border: 0;
  margin-top: auto;
}

/* ---------- full-bleed ------------------------------------------
   There is deliberately no .ii-bleed breakout class here.

   The hero, marquee and assurances sit as siblings of #common-home
   inside <main>, not inside .container — so they are already full
   width and need no help. An earlier 100vw breakout DID produce a
   horizontal scrollbar, because 100vw counts the vertical scrollbar
   but the element's containing block does not. If a future section
   ever needs to escape a .container, use negative padding on that
   container, never 100vw. */

/* ---------- hero ------------------------------------------------
   Composed entirely in CSS — there is no hero photograph yet, and a
   stretched product snapshot would look worse than none. When the
   designer delivers a banner it drops into --ii-hero-image and the
   scrim already sitting on top will keep the text legible.

   BRAND.md: the logo is refined, the packaging is a loud sunburst.
   So the rays are here, but at low opacity as an accent — the
   typography leads. */

/* Boxed, not edge to edge: the banner is a panel sitting on the white
   page with air around it, which is what "boxed theme" means here. */
.ii-hero-wrap {
  max-width: 1280px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.ii-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ii-oxblood-deep);
  color: var(--ii-cream);
  /* No padding here — the slides carry it. Padding on both the panel
     and the slide stacks up and leaves the text floating in a pool of
     red with dead space beneath it. */
  padding: 0;
  isolation: isolate;
  box-shadow: var(--e-2);
}

/* The generic .carousel rule further up gives every carousel its own
   radius and shadow. Inside the hero that paints a second box within
   the panel, so it is cancelled here. */
.ii-hero .carousel {
  border-radius: 0;
  box-shadow: none;
  /* OpenCart's stylesheet.css puts margin-bottom: 50px AND a 4px border
     on .carousel, which left a band of bare red under the slide and
     inset the track by 4px on every edge. */
  margin-bottom: 0;
  border: 0;
}

/* sunburst rays, echoing the packaging */
.ii-hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto 50%;
  /* translate and rotate are independent properties, so the parallax
     offset set by theme.js and the rays animation cannot clobber
     each other the way a combined transform would. */
  translate: -50% var(--ii-parallax, 0px);
  width: min(1500px, 150vw);
  aspect-ratio: 1;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(216, 52, 42, .30) 0deg 7deg,
      transparent 7deg 14deg
    );
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 62%);
  z-index: -2;
  animation: ii-rays 90s linear infinite;
  will-change: transform;
}

/* warm depth over the rays so nothing reads as flat vector */
.ii-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(192, 38, 27, .40), transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(63, 10, 6, .85) 100%);
  z-index: -1;
}

@keyframes ii-rays {
  to { rotate: 360deg; }
}

.ii-hero__inner {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(3.25rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 3.5rem) clamp(4.25rem, 8vw, 6rem);
  text-align: center;

  /* Slides carry different amounts of copy, so without a floor the whole
     panel snaps taller and shorter as it rotates and shoves the page
     around. The min-height goes here rather than on .carousel-item,
     because Bootstrap toggles that element's display and a display of
     flex there would reveal every slide at once. */
  min-height: clamp(380px, 38vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- per-slide staggered entry --------------------------
   Each line arrives on its own, and re-runs every time Bootstrap
   moves .active to a new slide — so the motion belongs to the
   banner rather than firing once on page load. */

@keyframes ii-slide-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Bootstrap adds .active to the incoming slide only at transitionend —
   AFTER carousel-fade has already faded it to full opacity. So the text
   sat there fully visible and THEN played its entrance, which is
   backwards. Holding every non-active slide's text at zero means the
   incoming copy is invisible through the crossfade and only appears as
   its own animation runs. */
.ii-hero .carousel-item:not(.active) .ii-hero__eyebrow,
.ii-hero .carousel-item:not(.active) .ii-hero__title,
.ii-hero .carousel-item:not(.active) .ii-hero__lede,
.ii-hero .carousel-item:not(.active) .ii-hero__actions {
  opacity: 0;
}

.ii-hero .carousel-item.active .ii-hero__eyebrow,
.ii-hero .carousel-item.active .ii-hero__title,
.ii-hero .carousel-item.active .ii-hero__lede,
.ii-hero .carousel-item.active .ii-hero__actions {
  animation: ii-slide-in .62s var(--e-out) both;
}

.ii-hero .carousel-item.active .ii-hero__eyebrow { animation-delay: .05s; }
.ii-hero .carousel-item.active .ii-hero__title   { animation-delay: .18s; }
.ii-hero .carousel-item.active .ii-hero__lede    { animation-delay: .32s; }
.ii-hero .carousel-item.active .ii-hero__actions { animation-delay: .46s; }

/* Short crossfade. All three slides share the same red ground, so this
   is really only covering the gap before the text animates in — a long
   fade would just be dead time on an unchanging background. */
.ii-hero.carousel-fade .carousel-item,
.ii-hero .carousel-fade .carousel-item { transition: opacity .3s var(--e-out); }

.ii-hero .carousel-indicators {
  margin-bottom: 0;
  bottom: clamp(1rem, 2.5vw, 1.6rem);
}

.ii-hero .carousel-indicators [data-bs-target] {
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: rgba(247, 240, 228, .35);
  border: 0;
  opacity: 1;
  transition: background var(--d-mid) var(--e-out), width var(--d-mid) var(--e-out);
}

.ii-hero .carousel-indicators .active {
  background: var(--ii-gold);
  width: 46px;
}

.ii-hero .carousel-control-prev,
.ii-hero .carousel-control-next {
  width: clamp(44px, 6%, 66px);
  opacity: .55;
  transition: opacity var(--d-fast) var(--e-out);
}

.ii-hero .carousel-control-prev:hover,
.ii-hero .carousel-control-next:hover { opacity: 1; }

.ii-hero .carousel-control-prev span,
.ii-hero .carousel-control-next span { color: var(--ii-gold-light); font-size: 1.4rem; }

.ii-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  /* 5.11:1 on the worst-case light patch of the sunburst.
     --ii-gold-light only reaches 4.25 and fails AA here. */
  color: var(--ii-gold-on-photo);
  margin-bottom: 1.5rem;
}

.ii-hero__eyebrow::before,
.ii-hero__eyebrow::after {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.ii-hero h1,
.ii-hero .ii-hero__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ii-cream);
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

.ii-hero__title em {
  font-style: italic;
  color: var(--ii-gold-light);
}

.ii-hero__lede {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem);
  line-height: 1.6;
  /* 6.19:1 — plain rgba(247,240,228,.7) drops to 4.55 and is too
     close to the floor once the rays brighten behind it. */
  color: rgba(247, 240, 228, .88);
  max-width: 54ch;
  margin: 0 auto 2.4rem;
  text-wrap: pretty;
}

.ii-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}

.ii-hero .btn { padding: .95rem 2.1rem; font-size: .95rem; }

.ii-hero .btn-gold {
  background: var(--ii-gold);
  border: 1px solid var(--ii-gold);
  color: var(--ii-oxblood-deep);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
}

.ii-hero .btn-gold:hover {
  background: var(--ii-gold-light);
  border-color: var(--ii-gold-light);
  transform: translateY(-2px);
}

.ii-hero .btn-ghost {
  background: transparent;
  border: 1px solid rgba(247, 240, 228, .45);
  color: var(--ii-cream);
}

.ii-hero .btn-ghost:hover {
  background: rgba(247, 240, 228, .1);
  border-color: var(--ii-cream);
  transform: translateY(-2px);
}

/* ---------- marquee --------------------------------------------
   Same device as the landing page, so the two surfaces rhyme.
   Duplicated track for a seamless loop; aria-hidden on the copy so
   a screen reader does not read the line twice. */

/* White, not gold. Gold survives only as the diamond separators. */
.ii-marquee {
  background: #FFFFFF;
  color: var(--ii-oxblood);
  padding: 1.1rem 0;
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.ii-marquee__track {
  display: flex;
  width: max-content;
  animation: ii-marquee 44s linear infinite;
}

.ii-marquee:hover .ii-marquee__track { animation-play-state: paused; }

.ii-marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.ii-marquee span {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding-inline: 1.6rem;
  white-space: nowrap;
}

.ii-marquee span::after {
  content: '\25C6';
  font-size: .5rem;
  vertical-align: middle;
  margin-left: 1.6rem;
  color: var(--ii-gold);
  opacity: 1;
}

@keyframes ii-marquee {
  to { transform: translateX(-50%); }
}

/* ---------- assurances -----------------------------------------
   Qualitative, never counted. "4 product lines" advertises how small
   the range is and becomes a chore the day a fifth arrives. */

.ii-assurances {
  background: #FFFFFF;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--hairline);
}

.ii-assurances__grid {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.2vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.ii-assurance { text-align: center; }

.ii-assurance__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface-raised);
  border: 1px solid rgba(200, 161, 90, .45);
  color: var(--ii-gold-deep);
  font-size: 1.25rem;
  box-shadow: var(--e-1);
  transition: transform var(--d-mid) var(--e-out),
              background var(--d-mid) var(--e-out);
}

.ii-assurance:hover .ii-assurance__icon {
  transform: translateY(-4px) rotate(-6deg);
  background: var(--ii-gold);
  color: var(--ii-oxblood-deep);
}

.ii-assurance h3 {
  font-family: var(--serif);
  font-size: 1.14rem;
  margin-bottom: .45rem;
}

.ii-assurance p {
  color: var(--ii-ink-soft);
  font-size: .93rem;
  margin: 0;
  max-width: 32ch;
  margin-inline: auto;
}

/* ---------- section headings -----------------------------------
   The stock module renders a bare <h3>. This gives it the landing
   page's eyebrow-and-rule treatment without touching the template. */

#content > h3,
.ii-section-head {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.02em;
  text-align: center;
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem;
  position: relative;
  padding-top: 2.2rem;
}

#content > h3::before,
.ii-section-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 56px;
  height: 2px;
  background: var(--ii-gold);
}

/* ---------- product cards, elevated ----------------------------- */

/* On a white page the card can no longer rely on a tinted ground to
   define its edge, so the hairline and shadow do that work instead. */
.product-thumb {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(36, 21, 18, .04), 0 12px 28px -22px rgba(36, 21, 18, .5);
}

/* ---------- promo banners --------------------------------------
   The secondary banners. Boxed like everything else, and placed
   below the product grid so the page has somewhere to go. */

.ii-promos {
  max-width: 1280px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ii-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--ii-oxblood);
  color: var(--ii-cream);
  box-shadow: var(--e-1);
  transition: transform var(--d-mid) var(--e-out),
              box-shadow var(--d-mid) var(--e-out);
}

.ii-promo:hover {
  transform: translateY(-6px);
  box-shadow: var(--e-3);
  color: var(--ii-cream);
}

/* the same sunburst language as the banner, quieter */
.ii-promo::before {
  content: '';
  position: absolute;
  inset: -60% -40% auto -40%;
  aspect-ratio: 1;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(216, 52, 42, .28) 0deg 8deg,
    transparent 8deg 16deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 65%);
          mask-image: radial-gradient(circle at 50% 50%, #000, transparent 65%);
  z-index: -2;
  transition: rotate 1.2s var(--e-out);
}

.ii-promo:hover::before { rotate: 12deg; }

.ii-promo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(63, 10, 6, .1) 0%, rgba(63, 10, 6, .82) 100%);
  z-index: -1;
}

.ii-promo--gold { background: var(--ii-gold-deep); }
.ii-promo--ink  { background: var(--ii-ink); }

.ii-promo__eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ii-gold-on-photo);
  margin-bottom: .5rem;
}

.ii-promo h3 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  color: var(--ii-cream);
  margin-bottom: .4rem;
}

.ii-promo p {
  font-size: .92rem;
  color: rgba(247, 240, 228, .86);
  margin: 0 0 .9rem;
  max-width: 34ch;
}

.ii-promo__cta {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ii-gold-light);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.ii-promo:hover .ii-promo__cta { color: #FFFFFF; }

.ii-promo__cta i { transition: translate var(--d-fast) var(--e-out); }
.ii-promo:hover .ii-promo__cta i { translate: 4px 0; }

/* Card-wide click target comes from Bootstrap's .stretched-link on the
   anchor — .ii-promo is position:relative, which is all it needs. No
   second overlay here, or the two stack and the hover state flickers. */

/* ---------- wide trade band ------------------------------------ */

.ii-band-wrap {
  max-width: 1280px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.ii-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--ii-oxblood-deep);
  color: var(--ii-cream);
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: var(--e-2);
}

.ii-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 140% at 12% 50%, rgba(192, 38, 27, .5), transparent 60%);
  z-index: -1;
}

.ii-band h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--ii-cream);
  margin: 0 0 .4rem;
}

.ii-band p {
  margin: 0;
  color: rgba(247, 240, 228, .86);
  max-width: 52ch;
}

.product-thumb .image { position: relative; }

/* warm wash that lifts on hover — stops the photos looking like
   snapshots dropped onto white */
.product-thumb .image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(63, 10, 6, .28));
  opacity: 0;
  transition: opacity var(--d-mid) var(--e-out);
  pointer-events: none;
}

.product-thumb:hover .image::after { opacity: 1; }

.product-thumb:hover {
  transform: translateY(-8px);
  box-shadow: var(--e-3);
  border-color: rgba(200, 161, 90, .55);
}

.product-thumb .price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}

/* The stock button row is a bare group of icons. Make it read as a
   deliberate footer to the card. */
.product-thumb .btn-group,
.product-thumb .button-group {
  border-top: 1px solid var(--hairline);
  background: #FFFFFF;
  padding: .5rem;
  gap: .4rem;
  display: flex;
}

.product-thumb .btn-group .btn,
.product-thumb .button-group .btn {
  border-radius: var(--r-pill);
  padding: .55rem .9rem;
  font-size: .85rem;
}

/* ---------- sticky category bar --------------------------------
   Keeps navigation reachable without stealing the full header
   height on every scroll. */

nav#menu.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(94, 16, 10, .92) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  transition: box-shadow var(--d-mid) var(--e-out);
}

nav#menu.navbar.is-stuck { box-shadow: 0 14px 34px -20px rgba(36, 21, 18, .75); }

/* ---------- scroll reveal ---------------------------------------
   Elements start hidden ONLY when JS is running, so a failed script
   can never leave the shop blank. theme.js adds .ii-js to <html>. */

.ii-js .ii-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--e-out), transform .7s var(--e-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.ii-js .ii-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- misc polish ----------------------------------------- */

/* Numerals in prices and totals should not jitter as digits change. */
.price, .price-new, .price-old, td.text-end, .table td { font-variant-numeric: tabular-nums; }

#content { padding-bottom: 1rem; }

.ii-hero + .ii-marquee { margin-top: 0; }

/* Cart button gets a nudge when its contents change (theme.js). */
@keyframes ii-cart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

#cart .btn.is-bumped { animation: ii-cart-pop .45s var(--e-out); }

@media (max-width: 767.98px) {
  /* No padding on .ii-hero — it is the panel now, and the slides carry
     their own padding. A padding-top here left 56px of bare red above
     the first line of every slide. */
  .ii-hero__actions .btn { width: 100%; }

  .ii-hero__eyebrow {
    letter-spacing: .2em;
    font-size: .68rem;
    /* The flanking rules assume a single line. Once the label wraps
       they end up stranded mid-block, so drop them rather than let
       them float beside the second line. */
    display: block;
    max-width: 26ch;
    margin-inline: auto;
  }

  .ii-hero__eyebrow::before,
  .ii-hero__eyebrow::after { display: none; }
}

/* ---------- motion preference ----------------------------------
   Respecting this is not optional; vestibular disorders are real
   and the rotating rays and marquee are the obvious offenders. */

@media (prefers-reduced-motion: reduce) {
  .ii-wordmark,
  .ii-hero::before,
  .ii-marquee__track { animation: none !important; }

  .ii-js .ii-reveal { opacity: 1; transform: none; }

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