/* ---------------------------------------------------------------------------
   Global control reset.
   A native <button> carries a light background, border, padding and rounded
   corners from the browser. Where a control sits on the dark ETC surface that
   renders as a white rectangle. This neutralises those defaults.

   No !important is used, so every intentionally styled control keeps its own
   appearance: the amber CTAs, form submits, carousel arrows, tabs, cards, the
   age gate and quick-view controls all carry inline styles, and inline styles
   win over this rule.
   --------------------------------------------------------------------------- */
button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  text-align:inherit;
  box-shadow:none;
}
button:not(:disabled){cursor:pointer}
button:disabled{cursor:not-allowed}

/* Navigational text calls to action. Appearance is stated in full so no
   browser default can reintroduce a box in any state. */
.text-cta{
  display:inline-flex;
  align-items:center;
  gap:0.45em;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  color:#D08A2C;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.1em;
  line-height:1.4;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}
.text-cta:hover,
.text-cta:focus-visible,
.text-cta:active,
.text-cta:visited{background:transparent;box-shadow:none;border:0}
.text-cta:hover,
.text-cta:focus-visible{color:#EDE9DF}
.text-cta:focus{outline:none}
.text-cta:focus-visible{outline:2px solid #D08A2C;outline-offset:3px}


  html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0B0A; color: #EDE9DF; font-family: Archivo, system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: hidden; }
  a { color: #D08A2C; text-decoration: none; }
  a:hover { color: #EDE9DF; }
  ::selection { background: #D08A2C; color: #0A0B0A; }
  :focus-visible { outline: 2px solid #D08A2C; outline-offset: 3px; }
  img { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  @keyframes etcRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes etcWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  [data-arrow] { display: inline-block; transition: transform 0.22s cubic-bezier(0.23,1,0.32,1); }
  a:hover [data-arrow], button:hover [data-arrow], a:focus-visible [data-arrow], button:focus-visible [data-arrow] { transform: translateX(5px); }
  @keyframes etcHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  /* v30: hero products never depend on an opacity animation to be visible.
     The entrance animates transform on a dedicated inner wrapper so it cannot
     overwrite the permanent perspective transform on [data-hp-wrap]. */
  [data-heroprod],[data-hp],[data-hp-wrap],[data-hp-anim]{visibility:visible!important;opacity:1!important}
  /* v31: ONE shared displayed height for all three hero products, using the
     Real Woods package as the reference. --hp-h is bound per route so it can
     never exceed the vertical space the hero actually has; that is what stops
     the Products-page composition being cut off by the sticky header.
     Widths derive from the height, so proportions are never distorted. */
  [data-hp-wrap]{height:var(--hp-h)}
  [data-hp-anim]{height:100%}
  [data-hp="1"],[data-hp="2"],[data-hp="3"]{
    display:block;width:auto!important;height:100%!important;
    max-width:none;max-height:none;object-fit:contain}
  [data-hp]{animation:etcHeroFloat 6.5s ease-in-out infinite}
  [data-hp="1"]{animation-delay:0.9s}
  [data-hp="2"]{animation-delay:1.4s}
  [data-hp="3"]{animation-delay:1.9s}
  @keyframes heroProductEnter{from{transform:translateY(28px) scale(0.96)}to{transform:translateY(0) scale(1)}}
  [data-hp-anim]{animation:heroProductEnter 800ms cubic-bezier(0.22,1,0.36,1) both}
  [data-hp-wrap="1"] [data-hp-anim]{animation-delay:100ms}
  [data-hp-wrap="2"] [data-hp-anim]{animation-delay:190ms}
  [data-hp-wrap="3"] [data-hp-anim]{animation-delay:280ms}
  /* v31: "Bands as they appear." is an intentional detail crop, so each cigar
     is framed on its own band. --band-y is the band's measured vertical centre
     as a percentage of that PNG's height; --band-zoom sets how much of the box
     the band fills. transform is !important so the global [data-motion-shot]
     hover scale cannot override the focal position. No artwork is generated,
     redrawn or replaced — this only chooses which part of the supplied PNG is
     shown. */
  [data-bandshot]{
    position:absolute;left:50%;top:50%;
    width:auto;max-width:none;max-height:none;object-fit:contain;
    height:var(--band-zoom,270%);
    transform:translate(-50%,var(--band-y,-30%))!important;
    transition:none!important}
  [data-bandshot][data-band="jnolasco"]        {--band-zoom:180%;--band-y:-35.3%}
  [data-bandshot][data-band="noli"]            {--band-zoom:187%;--band-y:-30.8%}
  [data-bandshot][data-band="galguera"]        {--band-zoom:277%;--band-y:-29.0%}
  [data-bandshot][data-band="el-inventor"]     {--band-zoom:273%;--band-y:-31.2%}
  [data-bandshot][data-band="le-comte-zatarra"]{--band-zoom:291%;--band-y:-27.4%}
  @media (max-width:1200px){[data-heroprod]{display:none!important}}
  @media (prefers-reduced-motion:reduce){[data-hp],[data-hp-anim]{animation:none!important}}
  [data-wpanel] > *{animation:etcWfCopy 0.42s cubic-bezier(0.22,1,0.36,1) both}
  [data-wpanel] > *:nth-child(1){animation-delay:0.02s}
  [data-wpanel] > *:nth-child(2){animation-delay:0.07s}
  [data-wpanel] > *:nth-child(3){animation-delay:0.12s}
  @media (prefers-reduced-motion:reduce){
    [data-wpanel] > *,[data-wmedia] img{animation:none!important}
  }
  @media (pointer:coarse){button,input,select,textarea{min-height:44px}}
  /* Mosaics: fewer columns on narrow screens; tiles keep interlocking. */
  @media (max-width:900px){[data-lead] > div{grid-template-columns:minmax(0,1fr)!important}}
  @media (max-width:980px){[data-qtop]{grid-template-columns:minmax(0,1fr)!important}}
  @media (max-width:820px){
    [data-pdetail]{grid-template-columns:minmax(0,1fr)!important}
    [data-pmedia]{max-width:100%!important}
    [data-pmedia] img{height:clamp(240px,52vw,300px)!important}
  }
  @media (max-width:860px){
    /* Copy first, then the primary image at full width. */
    [data-leaf]{grid-template-columns:minmax(0,1fr)!important}
    [data-leafart]{min-height:clamp(260px,55vw,320px)!important}
  }
  [data-qrow]{transition:opacity 220ms ease}
  [data-qrow] h3{transition:color 220ms ease}
  @media (hover:hover){
    [data-qrow]:hover h3{color:#D08A2C}
    [data-qrow]:focus-within h3{color:#D08A2C}
  }
  [data-qrow]:focus-visible{outline:2px solid #D08A2C;outline-offset:3px}
  @media (max-width:1000px){[data-cigargal]{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
  @media (max-width:620px){[data-cigargal]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
  /* Tablet: two-column mosaic, every tile still visible. */
  @media (max-width:1000px){
    [data-storygrid]{grid-template-columns:repeat(2,minmax(0,1fr))!important;
      grid-auto-rows:clamp(150px,21vw,200px)!important}
    [data-storygrid] > figure{grid-column:auto!important;grid-row:auto!important}
    [data-storygrid] > figure:first-child{grid-column:1 / 3!important;grid-row:span 2!important}
  }
  @media (max-width:820px){
    [data-storyintro]{grid-template-columns:minmax(0,1fr)!important}
    [data-storyintro] figure{height:clamp(240px,52vw,340px)!important}
  }
  /* Narrow mobile: single column, no tile reduced to a strip. */
  @media (max-width:620px){
    [data-storygrid]{grid-template-columns:minmax(0,1fr)!important;
      grid-auto-rows:clamp(190px,50vw,240px)!important}
    [data-storygrid] > figure,
    [data-storygrid] > figure:first-child,
    [data-storygrid] > figure:last-child{grid-column:1 / 2!important}
  }
  @media (max-width:900px){
    [data-mosaic]:not([data-storymosaic]){grid-template-columns:repeat(2,minmax(0,1fr))!important}
    [data-mosaic]:not([data-storymosaic]) > figure{grid-column:span 1!important;grid-row:span 2!important}
  }
  @media (max-width:560px){
    [data-mosaic]:not([data-storymosaic]){grid-template-columns:minmax(0,1fr)!important;
      grid-auto-rows:clamp(120px,42vw,190px)!important}
  }
  /* Wholesale: stack below the workflow breakpoint; stage controls become a
     horizontally scrollable row so all seven stay reachable without hover. */
  @media (max-width:900px){
    [data-wflow]{grid-template-columns:minmax(0,1fr)!important}
    [data-wflow-nav]{grid-auto-flow:column!important;grid-auto-columns:minmax(150px,1fr)!important;
      overflow-x:auto!important;overscroll-behavior-x:contain!important}
    [data-wterms]{grid-template-columns:minmax(0,1fr)!important}
  }
  /* Contact: 12-col main area collapses; form goes 6 -> 4 -> 2 -> 1 columns. */
  @media (max-width:1180px){
    [data-cform],[data-wform]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  }
  @media (max-width:1024px){
    [data-cmain],[data-winq],[data-wintro]{grid-template-columns:minmax(0,1fr)!important}
    [data-cform],[data-wform]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    [data-cform] > div,[data-wform] > div{grid-column:span 1!important}
    [data-cform] > div[data-cwide]{grid-column:1 / -1!important}
  }
  @media (max-width:820px){
    [data-croutes]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  }
  @media (max-width:560px){
    [data-croutes]{grid-template-columns:minmax(0,1fr)!important}
    [data-cform],[data-wform]{grid-template-columns:minmax(0,1fr)!important}
    [data-cform] > div,[data-wform] > div{grid-column:1 / -1!important}
    [data-logo-full]{height:38px!important}
  }
  /* 320px: nothing may overflow at the narrowest supported width. */
  @media (max-width:360px){
    [data-wflow-nav]{grid-auto-columns:minmax(132px,1fr)!important}
  }
/* Reduced motion: no entrances, no crossfades, content simply present. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;
    transition-duration:0.001ms!important;scroll-behavior:auto!important}
}
@media (max-width:1180px){[data-principles]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:560px){[data-principles]{grid-template-columns:1fr!important}}
@keyframes etcPop{from{opacity:0;transform:translateY(10px) scale(0.985)}to{opacity:1;transform:none}}
@keyframes etcQvIn{from{opacity:0}to{opacity:1}}
/* v30: the quick view opens at the top of the viewport on every width.
   It is never converted into a bottom sheet. */
/* !important is required: the base values live in the element's style
   attribute, which a stylesheet rule cannot otherwise override. */
@media (max-width:700px){
  [data-qv-overlay]{padding:8px!important}
  [data-qv]{width:100%!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important}
}
@keyframes etcWfImg{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
@keyframes etcWfCopy{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes etcCross{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@keyframes etcMega{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes etcFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes etcDrawer { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes etcSheet { from { transform: translateY(100%); } to { transform: none; } }


  @media (prefers-reduced-motion: reduce) {
    [data-arrow] { transition: none !important; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

/* The runtime replaces <x-dc> with the rendered application. Until it does, and
   permanently when JavaScript is unavailable, the raw template stays hidden and
   the pre-rendered content in #etc-static is what the visitor reads. */
x-dc{display:none}
#etc-static{display:block}

/* Header logo. A native button paints a default background, which showed as a
   white rectangle behind the transparent logo. The wrapper is a link home and
   is explicitly stripped of every property that could paint a box. The height
   is inherited from the existing [data-logo-full] rules, so the responsive
   sizing and the header-compression scale transition are untouched. */
.site-logo{
  display:flex;align-items:center;flex:0 0 auto;
  padding:0;margin:0;border:0;background:transparent;background-image:none;
  box-shadow:none;-webkit-appearance:none;appearance:none;color:inherit;
  text-decoration:none;line-height:0;
}
.site-logo:hover,.site-logo:active,.site-logo:focus{background:transparent;box-shadow:none}
.site-logo img{display:block;width:auto;max-width:none;object-fit:contain;background:transparent}
/* Visible only when reached by keyboard, so no permanent box appears. */
.site-logo:focus{outline:none}
.site-logo:focus-visible{outline:2px solid #D08A2C;outline-offset:4px}

/* Header compression. In the prototype these five values were bound to state
   and written inline; with the runtime gone they are declarative CSS keyed on
   the attribute site.js sets past 90px of scroll. The values are exactly the
   approved ones (74/58, 50/40, 0.82/0.94, 14/20px, 0.1/0.2). !important is
   required because the base values live in the elements' style attributes. */
[data-etc-header]{
  transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease;
}
[data-etc-header] > div:first-child{transition:min-height .35s cubic-bezier(0.22,1,0.36,1)}
.site-logo img{transition:height .35s cubic-bezier(0.22,1,0.36,1)}

html[data-hdr-compact] [data-etc-header]{
  background:rgba(10,11,10,0.94)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border-bottom-color:rgba(237,233,223,0.2)!important;
}
html[data-hdr-compact] [data-etc-header] > div:first-child{min-height:58px!important}
html[data-hdr-compact] .site-logo img{height:40px!important}

@media (prefers-reduced-motion:reduce){
  [data-etc-header],[data-etc-header] > div:first-child,.site-logo img{transition:none!important}
}


/* ---------------------------------------------------------------------------
   Header breakpoint. Above 1100px the full desktop row is shown; at 1100px and
   below it is hidden and the mobile controls take over. Both sides are driven
   by classes here rather than by inline styles, so the switch actually happens.
   --------------------------------------------------------------------------- */
.desktop-nav{display:flex;align-items:center;flex:1 1 auto;justify-content:flex-end;
  flex-wrap:nowrap;gap:0;min-width:0}
.desktop-nav > a{flex:0 0 auto}
.mobile-controls{display:none;margin-left:auto;gap:8px;align-items:center}

/* Tighten spacing as the row narrows so it can never wrap or clip. */
@media (max-width:1600px){.desktop-nav > a{padding-left:7px;padding-right:7px;font-size:12px}}
@media (max-width:1400px){
  .desktop-nav > a{padding-left:6px;padding-right:6px;font-size:11.5px}
  .desktop-nav .header-cta{padding:9px 12px;margin-left:8px;font-size:10px}
}
@media (max-width:1240px){
  .desktop-nav > a{padding-left:5px;padding-right:5px;font-size:11px}
  .desktop-nav .header-cta{padding:8px 10px;margin-left:6px;font-size:9.5px}
}

@media (max-width:1100px){
  .desktop-nav{display:none}
  .mobile-controls{display:flex}
}

.header-cta{text-decoration:none;display:inline-flex;align-items:center}
.header-cta:hover,.header-cta:focus-visible{background:rgb(219,152,60)}
.header-cta:focus{outline:none}
.header-cta:focus-visible{outline:2px solid #EDE9DF;outline-offset:2px}

.mobile-catalog-cta{display:inline-flex;align-items:center;text-decoration:none}
.mobile-catalog-cta:focus{outline:none}
.mobile-catalog-cta:focus-visible{outline:2px solid #D08A2C;outline-offset:2px}

html,body{overflow-x:hidden}

/* ---------------------------------------------------------------------------
   Product quick view.
   The overlay shipped with no positioning at all, so removing [hidden] simply
   let the panel fall into normal document flow after the footer. It is a fixed
   viewport layer: above the site, below the age gate (which is z-index 300).
   The panel keeps its own approved width and height; the overlay only places
   it and supplies the backdrop.
   --------------------------------------------------------------------------- */
[data-qv-overlay]{
  position:fixed;
  inset:0;
  z-index:200;
  display:block;
  background:rgba(7,8,7,0.66);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  overflow-anchor:none;
  padding:24px;
  box-sizing:border-box;
}
/* The hidden attribute must win over the display above. */
[data-qv-overlay][hidden]{display:none}

[data-qv-overlay] [data-qv-host]{display:block}
[data-qv-overlay] [data-qv]{margin:0 auto}
[data-qv-overlay] [data-qv]:focus{outline:none}
[data-qv-overlay] [data-qv]:focus-visible{outline:2px solid #D08A2C;outline-offset:2px}

@media (max-width:700px){
  [data-qv-overlay]{padding:8px}
  [data-qv-overlay] [data-qv]{
    width:100%;
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
  }
}

/* The background cannot scroll while a layer is open. */
html[data-nav-locked]{overflow:hidden;padding-right:var(--sbw,0px)}