/* Cigar Grail desktop header. Generated by a snippet, do not hand edit.
   Metrics taken from apple.com at a 1440 viewport:
     bar 44px, nav 12px w400 ls-.12, bar rgba(245,245,247,.8) + blur(20)
     flyout lead column 24px w600 lh28, other columns 12px w600 lh16
     content held in a centred container, never full bleed              */

.cghd,.cghd *{box-sizing:border-box}

.cghd{
  --cghd-bar:59px;
  --cghd-wrap:1432px;
  --cghd-indent:120px;   /* how far the panel content sits in from the bar */
  --cghd-bg:rgba(245,245,247,.8);
  --cghd-panel-bg:#f5f5f7;
  --cghd-ink:#1d1d1f;
  --cghd-nav:rgba(0,0,0,.8);
  --cghd-dim:#6e6e73;
  --cghd-line:rgba(0,0,0,.08);
  --cghd-ease:cubic-bezier(.32,.72,0,1);
  --cghd-ease-soft:cubic-bezier(.25,.1,.25,1);
  position:relative;z-index:60;
  font:500 16px/1.33 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--cghd-ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.cghd.is-pinned .cghd-shell{position:fixed;top:0;left:0;right:0}
/* the admin bar is fixed at z-index 99999 and would otherwise cover this */
body.admin-bar .cghd.is-pinned .cghd-shell{top:32px}
@media screen and (max-width:782px){body.admin-bar .cghd.is-pinned .cghd-shell{top:46px}}
.cghd-spacer{display:none}
.cghd.is-pinned .cghd-spacer{display:block;height:var(--cghd-bar)}

/* the surface is full bleed, the content inside it never is */
.cghd-shell{
  position:relative;z-index:2;
  background:var(--cghd-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--cghd-line);
  transition:background .2s linear,border-color .2s linear;
}
.cghd.is-open .cghd-shell{
  background:var(--cghd-panel-bg);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;
}

.cghd-bar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:16px;height:var(--cghd-bar);
  max-width:var(--cghd-wrap);margin:0 auto;padding:0 16px;
}

/* logo */
.cghd-logo{line-height:0;display:inline-flex;align-items:center}
.cghd-logo img{display:block;width:148px;height:auto}

/* nav. These are real links: clicking goes to the category, hovering opens
   the panel. Apple does exactly this, their triggers are anchors with hrefs. */
.cghd-nav{justify-self:center}
.cghd-nav ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.cghd-nav li{margin:0}
.cghd-top,
.cghd-top:link,.cghd-top:visited,
.cghd-top:hover,.cghd-top:focus,.cghd-top:active{
  display:inline-flex;align-items:center;height:var(--cghd-bar);
  background:none!important;background-color:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;text-shadow:none!important;
  border-radius:0!important;min-height:0!important;
  cursor:pointer;text-decoration:none!important;text-transform:none!important;
  font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.006em;line-height:1;
  color:var(--cghd-nav)!important;
  padding:0 14px;white-space:nowrap;
  transition:color .15s linear;
}
.cghd-top:hover,.cghd-top[aria-expanded="true"]{color:#000!important}

/* ---- icon cluster -------------------------------------------------------
   Four controls from three sources: two of mine, FiboSearch's and
   CheckoutWC's. They arrive at different sizes with their own CSS vars, so
   everything is forced into one 40px box with one 16px glyph. */
.cghd-tools{justify-self:end;display:flex;align-items:center;gap:0;
  --cfw-side-cart-icon-width:16px;--cfw-side-cart-icon-height:16px;
  --cfw-side-cart-icon-color:#1d1d1f;}
.cghd-tools > *:not(style):not(script):not(link){
  display:inline-flex;align-items:center;flex:0 0 auto;margin:0;
}
.cghd-tools style,.cghd-tools script,.cghd-tools link{display:none!important}
.cghd-tool,
.cghd-tools .dgwt-wcas-search-icon,
.cghd-tools .cfw-side-cart-quantity-wrap{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:50%;
  color:var(--cghd-ink);text-decoration:none;cursor:pointer;
}
/* No hover pill on the icons. It also used the background shorthand, which
   reset background-image and made the search glyph vanish on hover. */
.cghd-tools svg{width:21px!important;height:21px!important;display:block;
  max-width:21px;max-height:21px;}
.cghd-tools .dgwt-wcas-search-wrapp{max-width:300px;width:auto;margin:0;padding:0;border:0}
.cghd-tools .dgwt-wcas-search-wrapp,
.cghd-tools .dgwt-wcas-search-wrapp:has(.dgwt-wcas-search-icon){
  width:44px!important;max-width:44px!important;min-width:44px!important;
  height:44px!important;flex:0 0 44px!important;position:relative;
}
/* FiboSearch ships a loose svg and a dropdown arrow beside its icon anchor */
.cghd-tools .dgwt-wcas-search-wrapp > svg,
.cghd-tools .dgwt-wcas-search-icon-arrow{display:none!important}
.cghd-tools .dgwt-wcas-search-icon{
  position:absolute;inset:0;width:44px!important;height:44px!important;
}
.cghd-tools .dgwt-wcas-search-wrapp .dgwt-wcas-search-form{display:none}
.cghd-tools .cfw-side-cart-quantity.cfw-hidden{display:none}

/* No hover state on the icons at all. The heart and account are inline SVGs
   drawn with currentColor, so the theme's link hover colour was tinting them
   while the search and bag (fixed background images) stayed black. Every
   state is pinned so all four are identical, hovered or not. */
html body .cghd-tools a,
html body .cghd-tools a:link,
html body .cghd-tools a:visited,
html body .cghd-tools a:hover,
html body .cghd-tools a:focus,
html body .cghd-tools a:active,
html body .cghd-tool:hover,
html body .cghd-tools .dgwt-wcas-search-icon:hover,
html body .cghd-tools .cfw-side-cart-quantity-wrap:hover{
  color:var(--cghd-ink)!important;
  background-color:transparent!important;
  box-shadow:none!important;border:0!important;
  text-decoration:none!important;
  transition:none!important;
}

/* FiboSearch and CheckoutWC each ship their own glyph at their own weight,
   so four icons from three hands never matched. Theirs are hidden and
   redrawn here from the same 24 grid at the same 1.4 stroke as mine. */
.cghd-tools .dgwt-wcas-search-icon svg,
.cghd-tools .dgwt-wcas-search-icon:before,
.cghd-tools .cfw-side-cart-quantity-wrap svg,
.cghd-tools .cfw-side-cart-quantity-wrap:before{display:none!important;content:none!important}

.cghd-tools .dgwt-wcas-search-icon{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.6' y1='16.6' x2='21' y2='21'/%3E%3C/svg%3E") center/22px 22px no-repeat;
}
.cghd-tools .cfw-side-cart-quantity-wrap{
  position:relative;width:44px;min-width:44px;max-width:44px;padding:0;gap:0;
}
/* the count rides the bag as a badge instead of widening the box and
   throwing the spacing of the whole cluster out */
.cghd-tools .cfw-side-cart-quantity{
  position:absolute;top:8px;right:7px;
  min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cghd-ink);color:#fff;
  font-size:10px;font-weight:600;line-height:1;margin:0;
}
.cghd-tools .cfw-side-cart-quantity-wrap:after{
  content:"";order:-1;width:22px;height:22px;flex:0 0 22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 7h13.2l1.2 12.3a1.9 1.9 0 0 1-1.9 2.1H6.1a1.9 1.9 0 0 1-1.9-2.1L5.4 7z'/%3E%3Cpath d='M8.6 9.6V6.5a3.4 3.4 0 0 1 6.8 0v3.1'/%3E%3C/svg%3E") center/22px 22px no-repeat;
}

/* ---- dropdown surface ---------------------------------------------------
   One panel for the whole nav, morphing height between sections. */
.cghd-panel{
  position:absolute;left:0;right:0;top:100%;
  overflow:hidden;height:0;
  background:var(--cghd-panel-bg);
  transition:height .4s var(--cghd-ease);
  will-change:height;
}
.cghd.is-open .cghd-panel{height:var(--cghd-h,0)}

/* Content sits in the same centred container as the bar. With only two or
   three columns the space that opens up on the right reads as deliberate,
   which is the whole trick behind Apple's sparser panels. */
.cghd-sheet{position:relative;max-width:var(--cghd-wrap);margin:0 auto;padding:0 16px}
.cghd-group{
  position:absolute;top:0;left:calc(22px + var(--cghd-indent));right:calc(22px + var(--cghd-indent));
  padding:45px 0 69px;
  opacity:0;pointer-events:none;
  transition:opacity .16s linear;
}
.cghd-group.is-current{position:relative;left:auto;right:auto;opacity:1;pointer-events:auto;
  padding-left:var(--cghd-indent);padding-right:var(--cghd-indent)}

.cghd-cols{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0 40px}

/* Every column identical. These had drifted to different flex bases through
   repeated edits, which is why the first one came out narrower than the rest. */
.cghd-col{flex:1 1 0;min-width:0;max-width:250px}

/* a second group stacked under the first in the same column */
.cghd-head.is-stacked{margin-top:35px}

.cghd-head{
  margin:0 0 15px;font-size:16px;font-weight:400;color:var(--cghd-dim);
  letter-spacing:-.01em;line-height:1.33;
}
.cghd-col ul{list-style:none;margin:0;padding:0}
.cghd-col li{margin:0}

.cghd-link{
  display:block;padding:0;margin:0 0 10px;text-decoration:none;color:var(--cghd-ink);
  font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.33;
  transition:color .15s linear;
}
.cghd-link:hover{color:#000}

/* The theme recolours links to brand gold and paints its own focus styling.
   Base and hover were covered, so :visited, :focus and :active fell through
   and a clicked item came out gold inside a black box. Every state is pinned
   here, for the panel links and for the nav items in the bar. */
html body .cghd a.cghd-link,
html body .cghd a.cghd-link:link,
html body .cghd a.cghd-link:visited,
html body .cghd a.cghd-link:focus,
html body .cghd a.cghd-link:active,
html body .cghd a.cghd-all,
html body .cghd a.cghd-all:link,
html body .cghd a.cghd-all:visited,
html body .cghd a.cghd-all:focus,
html body .cghd a.cghd-all:active{
  color:var(--cghd-ink)!important;
  background:none!important;border:0!important;
  box-shadow:none!important;text-shadow:none!important;
  text-decoration:none!important;
}
html body .cghd a.cghd-link:hover,
html body .cghd a.cghd-all:hover{color:#000!important}

/* and the same for the bar, so a visited category never turns gold either */
html body .cghd a.cghd-top:visited{color:var(--cghd-nav)!important}

/* a mouse click must never leave a ring behind, on any of them */
html body .cghd a:focus:not(:focus-visible),
html body .cghd button:focus:not(:focus-visible){
  outline:0!important;box-shadow:none!important;border:0!important;
}

/* Apple leads column one with Shop All Accessories at the same size as every
   item under it, not a small grey link marooned at the foot of the panel. */
.cghd-all{
  display:block;margin:0 0 30px;padding:0;text-decoration:none;
  color:var(--cghd-ink);font-size:18px;font-weight:600;
  letter-spacing:-.01em;line-height:1.33;
  transition:color .15s linear;
}
.cghd-all:hover{color:#000}

/* rows cascade in, same feel as the mobile sheet */
.cghd-group .cghd-row{opacity:0;transform:translate3d(0,-6px,0)}
.cghd-group.is-current .cghd-row{
  opacity:1;transform:none;
  transition:opacity .34s var(--cghd-ease-soft) calc(var(--i,0)*18ms + 50ms),
             transform .42s var(--cghd-ease) calc(var(--i,0)*18ms + 50ms);
}

/* the page below is blurred, never darkened, and never over the promo bars */
/* Anchored to the foot of the panel rather than a number worked out in JS,
   so it cannot drift out of step with the panel height or with the scroll. */
.cghd-scrim{
  position:absolute;left:0;right:0;
  top:calc(100% + var(--cghd-h,0px));
  height:100vh;z-index:1;
  background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  opacity:0;pointer-events:none;
  /* Fades in with the panel, its top edge glued to the panel's bottom on
     the same curve, so the softening sweeps down as one motion with the
     menu instead of arriving after it. */
  transition:opacity .35s var(--cghd-ease-soft),top .4s var(--cghd-ease);
}
.cghd.is-open .cghd-scrim{opacity:1}   /* stays pointer-events:none so leaving the header registers */

/* Keyboard users get a ring. A mouse click must never leave a box behind. */
.cghd :focus-visible{outline:2px solid var(--cghd-ink);outline-offset:2px;border-radius:4px}
.cghd :focus:not(:focus-visible){outline:0!important;box-shadow:none!important}
.cghd-top:focus:not(:focus-visible),
.cghd-top:active{outline:0!important;box-shadow:none!important;border:0!important}

/* desktop only. Kadence still owns tablet and mobile. */
@media (max-width:1024px){ .cghd{display:none} }

@media (prefers-reduced-motion:reduce){
  .cghd-panel,.cghd-group,.cghd-scrim,.cghd-group.is-current .cghd-row{
    transition-duration:.001s!important;transition-delay:0s!important;
  }
}