/* ============================================================================
   Huron design system — Year-End Corporate Gifting
   ----------------------------------------------------------------------------
   Replaces the Metronic theme on the V2 pages. Nothing here depends on
   plugins.bundle.css or style.bundle.css, and no kt_* class is used.

   Every colour below is sampled from Huron-ApparelandProduct-guidelines.pdf
   rather than eyeballed, so the palette is the brand's and not an approximation.
   ========================================================================= */

:root{
  /* ---- Brand palette (from the Apparel and Product guidelines) ---- */
  --hrn-black:      #1F1318;   /* near-black base */
  --hrn-aubergine:  #3A1D2C;   /* logo colour on light backgrounds */
  --hrn-aubergine-deep: #550F39; /* the guideline header band */
  --hrn-plum:       #67214C;   /* primary accent - PMS 7645 */
  --hrn-teal:       #7ABBB0;
  --hrn-mint:       #BFDCD2;   /* 331C, the Day of Service mint */
  --hrn-crimson:    #C83654;
  --hrn-grey:       #636463;
  --hrn-warm-grey:  #CEC9C2;
  --hrn-ecru:       #DFDAD2;
  --hrn-white:      #FFFFFF;

  /* ---- Semantic roles. Components reference these, never the raw names,
          so a palette change is one edit here. ---- */
  --hrn-bg:         var(--hrn-white);
  --hrn-bg-alt:     var(--hrn-ecru);
  --hrn-ink:        var(--hrn-aubergine);
  --hrn-ink-soft:   var(--hrn-grey);
  --hrn-accent:     var(--hrn-plum);
  --hrn-line:       rgba(58,29,44,.14);

  --hrn-header-h:   77px;   /* .hrn-header min-height 76 + its 1px border */
  --hrn-max:        1200px;
  --hrn-radius:     14px;
  --hrn-ease:       cubic-bezier(.22,.61,.36,1);

  /* The guidelines set the wordmark in a wide, flat-sided grotesque. Archivo is
     the closest widely-available match; the stack degrades to system UI rather
     than to a serif, which would read as a different brand entirely. */
  --hrn-font:  "Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --hrn-track: .01em;
}

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

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

body.hrn{
  margin:0;
  font-family:var(--hrn-font);
  font-size:16px;
  line-height:1.6;
  color:var(--hrn-ink);
  background:var(--hrn-bg);
  -webkit-font-smoothing:antialiased;
}

/* ---- The one rule that hides anything, scoped to html.js so a JS failure or a
        crawler never sees a blank page. .hrn-in is added by GSAP as each reveal
        starts, and unconditionally by the fail-safe in huron-anim.js. ---- */
.js [data-anim]:not(.hrn-in){ visibility:hidden; }
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{ visibility:visible !important; }
}

/* ---- Type ------------------------------------------------------------- */
.hrn h1,.hrn h2,.hrn h3,.hrn h4{
  margin:0 0 .6em; font-weight:700; line-height:1.1; letter-spacing:-.015em;
}
.hrn h1{ font-size:clamp(2.4rem,5.2vw,4.2rem); }
.hrn h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); }
.hrn h3{ font-size:clamp(1.2rem,2vw,1.5rem); }
.hrn p{ margin:0 0 1.1em; }
/* :not(.hrn-btn) is load-bearing, not tidying.

   `.hrn a` is (0,1,1) and `.hrn-btn--primary` is (0,1,0), so without this the
   generic link colour beat the button's own and every <a class="hrn-btn--primary">
   rendered plum text on a plum fill - a solid pill with nothing readable in it.
   It went unnoticed at first because the ghost buttons are plum-on-white (which
   looks right by accident) and the login CTA is a <button>, not a link. */
.hrn a:not(.hrn-btn){ color:var(--hrn-accent); }

.hrn-eyebrow{
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--hrn-accent); font-weight:600; margin:0 0 14px;
}
.hrn-lead{ font-size:1.12rem; color:var(--hrn-ink-soft); max-width:60ch; }
.hrn-muted{ color:var(--hrn-ink-soft); }

/* ---- Layout ----------------------------------------------------------- */
.hrn-wrap{ max-width:var(--hrn-max); margin:0 auto; padding:0 24px; }
.hrn-section{ padding:clamp(48px,7vw,96px) 0; }
.hrn-section--alt{ background:var(--hrn-bg-alt); }
.hrn-section--ink{ background:var(--hrn-aubergine); color:var(--hrn-white); }
.hrn-section--ink .hrn-eyebrow{ color:var(--hrn-mint); }
/* .86, not .72. On the aubergine ground .72 measured 2.54:1 - readable-looking
   but under the 4.5:1 floor for body text, and this is the copy explaining the
   gift to every employee. */
.hrn-section--ink .hrn-lead,.hrn-section--ink .hrn-muted{ color:rgba(255,255,255,.86); }

/* ---- The brand block pattern ------------------------------------------
   huron-pattern.svg is inlined so its individual blocks can be animated and
   tinted; as an <img> neither is possible. currentColor on the <svg> means the
   tint comes from this wrapper. ---- */
.hrn-pattern{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  color:var(--hrn-aubergine-deep);
}
.hrn-pattern svg{ width:100%; height:100%; display:block; }
.hrn-pattern--soft{ opacity:.10; }
.hrn-pattern--mint{ color:var(--hrn-mint); }

/* ---- Hero ------------------------------------------------------------- */
.hrn-hero{
  position:relative; overflow:hidden;
  background:var(--hrn-aubergine); color:var(--hrn-white);
  padding:clamp(72px,11vw,150px) 0;
}
.hrn-hero__inner{ position:relative; z-index:2; }
.hrn-hero h1{ color:var(--hrn-white); }
.hrn-hero .hrn-eyebrow{ color:var(--hrn-mint); }
.hrn-hero .hrn-lead{ color:rgba(255,255,255,.86); }

/* ---- Compact hero, for the pages you arrive at to DO something -------------
   The full hero is 150px of padding top and bottom. On the gift list that put
   the first product image at y=789 in a 797px viewport - 4% of it visible, so
   every employee had to scroll before seeing a single gift.

   This trims the padding and the heading so the grid starts inside the fold.
   Measured at 1568x797: hero 569px -> 349px, and the first image goes from 4%
   visible to fully visible; on a 700px viewport it still clears 60%.

   Deliberately a modifier rather than a change to .hrn-hero: the dashboard and
   the order confirmation are arrival pages where the tall hero is the point. */
.hrn-hero--compact{ padding:clamp(32px,4vw,64px) 0; }
.hrn-hero--compact h1{ font-size:clamp(1.9rem,3.6vw,3.2rem); margin-bottom:.35em; }
.hrn-hero--compact .hrn-eyebrow{ margin-bottom:10px; }
.hrn-hero--compact .hrn-lead{ margin-bottom:0; }

/* The grid's own top padding is part of the same distance, so it is trimmed on
   these pages too. */
.hrn-section--tight{ padding-top:clamp(28px,3.5vw,48px); }

/* ---- Animated accents -------------------------------------------------
   .hrn-rule is the bar that data-anim="underline" sweeps out. It is a real
   element with a width, not a border, so the animation is a transform and stays
   on the compositor. */
.hrn-rule{
  display:block; height:5px; width:120px; border-radius:999px;
  background:var(--hrn-accent); margin:0 0 22px;
}
.hrn-rule--mint{ background:var(--hrn-mint); }
.hrn-rule--wide{ width:190px; }

/* A wipe animates clip-path, and a clipped element must not be clipped again by
   an ancestor mid-animation or the edge tears. */
[data-anim="wipe"]{ will-change:clip-path; }

/* The signature mark on the OTP and confirmation pages. Sized in ch so it
   scales with the type around it rather than needing its own breakpoints. */
.hrn-mark{ display:block; width:clamp(96px,12vw,150px); height:auto; margin:0 0 28px; }
.hrn-mark--center{ margin-left:auto; margin-right:auto; }

/* ---- Buttons ---------------------------------------------------------- */
.hrn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:14px 30px; border-radius:999px; border:1.5px solid transparent;
  font:inherit; font-size:.9rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:background .3s var(--hrn-ease),
    color .3s var(--hrn-ease), border-color .3s var(--hrn-ease);
}
.hrn-btn--primary{ background:var(--hrn-accent); color:#fff; }
.hrn-btn--primary:hover{ background:var(--hrn-aubergine); color:#fff; }
.hrn-btn--ghost{ border-color:currentColor; color:var(--hrn-accent); background:none; }
.hrn-btn--ghost:hover{ background:var(--hrn-accent); color:#fff; border-color:var(--hrn-accent); }
.hrn-btn--on-ink{ border-color:var(--hrn-mint); color:var(--hrn-mint); background:none; }
.hrn-btn--on-ink:hover{ background:var(--hrn-mint); color:var(--hrn-aubergine); }
.hrn-btn[disabled],.hrn-btn.is-disabled{ opacity:.45; pointer-events:none; }

/* ScrollSmoother sets #smooth-wrapper to position:fixed, inset 0. The header
   sits OUTSIDE the wrapper (it has to - position:fixed inside a transformed
   element resolves against the transform), which means the content's first
   pixels are underneath it: the gift-list hero had its eyebrow starting at y=0,
   behind a 77px header, so the top line of text was simply not there.

   Padding the content down by the header height puts it where it belongs. The
   padding band itself is invisible - the opaque header covers exactly it. */
#smooth-content{ padding-top:var(--hrn-header-h); }

/* ---- Header ----------------------------------------------------------- */
.hrn-header{
  position:sticky; top:0; z-index:60;
  background:var(--hrn-white); border-bottom:1px solid var(--hrn-line);
}
.hrn-header__bar{
  display:flex; align-items:center; gap:28px;
  min-height:76px; max-width:var(--hrn-max); margin:0 auto; padding:0 24px;
}
.hrn-header__logo img{ height:26px; width:auto; display:block; }
.hrn-nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.hrn-nav a{
  color:var(--hrn-ink); text-decoration:none; font-size:.86rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; position:relative; padding:6px 0;
}
.hrn-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--hrn-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--hrn-ease);
}
.hrn-nav a:hover::after,.hrn-nav a.is-active::after{ transform:scaleX(1); }
.hrn-badge{
  display:inline-block; min-width:20px; padding:1px 7px; border-radius:999px;
  background:var(--hrn-crimson); color:#fff; font-size:11px; font-weight:700;
  line-height:18px; text-align:center; margin-left:6px;
}

/* ---- Cards / product grid --------------------------------------------- */
.hrn-grid{ display:grid; gap:28px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.hrn-card{
  background:var(--hrn-white); border:1px solid var(--hrn-line);
  border-radius:var(--hrn-radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--hrn-ease), box-shadow .35s var(--hrn-ease);
}
.hrn-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(31,19,24,.13); }
.hrn-card__media{
  aspect-ratio:4/3; background:var(--hrn-ecru);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hrn-card__media img{ width:100%; height:100%; object-fit:contain; padding:18px;
  transition:transform .5s var(--hrn-ease); }
.hrn-card:hover .hrn-card__media img{ transform:scale(1.05); }
.hrn-card__body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.hrn-card__title{ font-size:1.05rem; font-weight:700; margin:0 0 6px; }
.hrn-card__title a{ color:var(--hrn-ink); text-decoration:none; }
.hrn-card__title a:hover{ color:var(--hrn-accent); }
.hrn-card__meta{ font-size:.85rem; color:var(--hrn-ink-soft); margin:0 0 16px; }
.hrn-card__foot{ margin-top:auto; }

/* ---- Forms ------------------------------------------------------------ */
.hrn-field{ margin:0 0 18px; }
.hrn-label{
  display:block; font-size:.76rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--hrn-ink-soft); margin:0 0 8px;
}
.hrn-input{
  width:100%; padding:14px 16px; font:inherit; color:var(--hrn-ink);
  background:var(--hrn-white); border:1.5px solid var(--hrn-line);
  border-radius:10px; transition:border-color .25s var(--hrn-ease);
}
.hrn-input:focus{ outline:none; border-color:var(--hrn-accent); }
.hrn-input::placeholder{ color:#a9a2a6; }

.hrn-alert{ padding:13px 16px; border-radius:10px; font-size:.92rem; margin:0 0 18px; }
.hrn-alert--error{ background:rgba(200,54,84,.10); color:var(--hrn-crimson);
  border:1px solid rgba(200,54,84,.28); }
.hrn-alert--ok{ background:rgba(122,187,176,.16); color:#1f6b60;
  border:1px solid rgba(122,187,176,.45); }

/* ---- Split login ------------------------------------------------------ */
.hrn-split{ display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; }
.hrn-split__art{
  position:relative; overflow:hidden;
  background:var(--hrn-aubergine); color:var(--hrn-white);
  display:flex; align-items:center; padding:clamp(40px,5vw,72px);
}
/* The art panel is a dark ground, so it needs the same colour overrides the
   --ink sections get. Without them .hrn-eyebrow stayed plum-on-aubergine, which
   measured 1.36:1 - effectively invisible. */
.hrn-split__art .hrn-eyebrow{ color:var(--hrn-mint); }
.hrn-split__art .hrn-lead,.hrn-split__art .hrn-muted{ color:rgba(255,255,255,.86); }
.hrn-split__art h1,.hrn-split__art h2{ color:var(--hrn-white); }

.hrn-split__form{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.hrn-split__form-inner{ width:100%; max-width:400px; }
@media (max-width:900px){
  .hrn-split{ grid-template-columns:1fr; min-height:0; }
  .hrn-split__art{ min-height:44vh; }
}

/* ---- Utilities -------------------------------------------------------- */
.hrn-stack-sm > * + *{ margin-top:10px; }
.hrn-flex{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hrn-right{ margin-left:auto; }
.hrn-center{ text-align:center; }
.hrn-price{ font-size:1.1rem; font-weight:700; color:var(--hrn-accent); }

/* ---- Footer ----------------------------------------------------------- */
.hrn-footer{
  background:var(--hrn-black); color:rgba(255,255,255,.62);
  padding:34px 0; font-size:.85rem; margin-top:auto;
}
.hrn-footer a{ color:var(--hrn-mint); }

/* ---- Table (orders) --------------------------------------------------- */
.hrn-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.hrn-table th{
  text-align:left; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--hrn-ink-soft); font-weight:700;
  padding:12px 14px; border-bottom:1.5px solid var(--hrn-line); white-space:nowrap;
}
.hrn-table td{ padding:14px; border-bottom:1px solid var(--hrn-line); vertical-align:middle; }
.hrn-table tr:last-child td{ border-bottom:0; }

.hrn-chip{
  display:inline-block; padding:3px 12px; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.hrn-chip--ok{ background:rgba(122,187,176,.22); color:#1f6b60; }
.hrn-chip--wait{ background:rgba(103,33,76,.12); color:var(--hrn-plum); }

/* ============================================================================
   RESPONSIVE
   ----------------------------------------------------------------------------
   Written mobile-outward from the real constraints of this journey: a header
   with four links, a card grid, and two two-column layouts (product detail and
   cart) that have to become one column without their content reflowing badly.
   ========================================================================= */

/* The two-column page layouts. These were inline <style> blocks in the JSPs
   matching on style attributes, which broke the moment an inline style was
   edited. Real classes instead. */
.hrn-two-col{ display:grid; gap:clamp(24px,4vw,56px); align-items:start; }
.hrn-two-col--media{ grid-template-columns:1.05fr .95fr; }
.hrn-two-col--cart{  grid-template-columns:1.15fr .85fr; }
.hrn-two-col--even{  grid-template-columns:1fr 1fr; }

@media (max-width:900px){
  .hrn-two-col--media,
  .hrn-two-col--cart,
  .hrn-two-col--even{ grid-template-columns:1fr; }
}

/* ---- Tablet and below ---------------------------------------------------- */
@media (max-width:820px){
  .hrn-wrap{ padding:0 20px; }
  .hrn-header__bar{ padding:0 20px; gap:16px; }
  .hrn-nav{ gap:16px; }
  .hrn-nav a{ font-size:.78rem; letter-spacing:.05em; }
}

/* ---- Phone --------------------------------------------------------------- */
@media (max-width:600px){
  .hrn-wrap{ padding:0 16px; }

  /* The header stops trying to be one row. The logo keeps the top line and the
     four links wrap under it, centred - which is legible at 360px where a single
     row of four uppercase links is not. */
  .hrn-header__bar{
    flex-direction:column; align-items:stretch; gap:0;
    min-height:0; padding:12px 16px 10px;
  }
  .hrn-header__logo{ align-self:center; }
  .hrn-header__logo img{ height:22px; }
  .hrn-nav{
    margin-left:0; justify-content:center; flex-wrap:wrap;
    gap:14px 18px; padding-top:10px;
  }
  .hrn-nav a{ font-size:.74rem; padding:2px 0; }

  /* The header is taller once the nav wraps, so the ScrollSmoother offset has
     to grow with it or the hero hides underneath again. */
  :root{ --hrn-header-h:112px; }

  .hrn-section{ padding:40px 0; }
  .hrn-hero{ padding:44px 0; }
  .hrn-hero--compact{ padding:28px 0; }

  /* One card per row, and a shorter media box so the title and button are on
     screen with it rather than a scroll away. */
  .hrn-grid{ grid-template-columns:1fr; gap:18px; }
  .hrn-card__media{ aspect-ratio:16/10; }
  .hrn-card__body{ padding:16px 18px 20px; }

  .hrn-btn{ padding:13px 24px; font-size:.82rem; }

  /* A full-height split screen with two panes does not work on a phone; the art
     becomes a banner and the form sits under it. */
  .hrn-split__art{ min-height:0; padding:34px 20px 30px; }
  .hrn-split__form{ padding:28px 16px 40px; }
  .hrn-mark{ width:clamp(72px,22vw,110px); margin-bottom:20px; }

  /* The cart table has four columns and cannot stay a table at this width.
     Each row becomes a block; the header row is dropped because the labels
     stop lining up with anything once the cells stack. */
  .hrn-table thead{ display:none; }
  .hrn-table, .hrn-table tbody, .hrn-table tr, .hrn-table td{ display:block; width:100%; }
  .hrn-table tr{
    position:relative; padding:14px 0; border-bottom:1px solid var(--hrn-line);
  }
  .hrn-table td{ border:0; padding:2px 0; }
  .hrn-table td:first-child{
    position:absolute; top:14px; left:0; width:64px; padding:0;
  }
  .hrn-table tr > td:not(:first-child){ padding-left:78px; }
}

@media (max-width:380px){
  .hrn-nav{ gap:10px 14px; }
  .hrn-nav a{ font-size:.7rem; }
}