/* Defensive baseline: Hello Elementor / Elementor / WooCommerce all ship
   their own default link colors. Set ours explicitly rather than relying
   on inheritance, so a later-installed plugin can't silently repaint the
   chrome. Deliberately NOT applied to headings/spans generally - that
   over-broad version blackened the announcement bar's white-on-black text. */
body, a { color: var(--c-fg); }
/* Hello Elementor ships its own a:hover color (a dark navy). Our links
   never change hue on hover - they only fade via opacity. */
a:hover, a:focus, a:active { color: var(--c-fg); }

/* Hello Elementor's kit defaults body to side padding - a competing
   spacing system. Ours handles every inset explicitly via --page-margin,
   so this has to be neutralized or full-width sections can never truly
   reach the viewport edge. */
body { padding: 0 !important; }

/* Elementor wraps Theme Builder output in its own containers; zero them so
   only .hdr__inner / .ft__inner's own deliberate padding is ever visible. */
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con,
.elementor-location-header .elementor-widget-shortcode,
.elementor-location-footer .elementor-widget-shortcode {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* On Shopify, .page always sat inside a .shopify-section grid that added
   its own --page-margin inset on top of .page's own, so visible spacing
   was always the doubled value. Nothing here provides that outer wrapper.
   Scoped to div: WordPress core adds a literal "page" class to <body> on
   every Page post type, unrelated to this utility class. */
:not(body):not(main):not(article).page {
  padding-inline: calc(var(--page-margin) * 2) !important;
}
/* WordPress core / Elementor / WooCommerce all ship default <button>
   background+color (traced to a computed value, not a literal one - no
   hardcoded hex found in any loaded stylesheet, so !important is the
   reliable fix rather than chasing cascade order further). */
.hdr__burger, .nd__close, .cd__close, .cd__step, .cd__remove {
  background: none !important;
  color: inherit !important;
  border: 0 !important;
}
.cd__empty-link {
  background: none !important;
  color: inherit !important;
  border: 1px solid var(--c-fg) !important;
}
.cd__qty .cd__step { border: 0 !important; }
.cd__qty {
  border: 1px solid var(--c-line) !important;
}
.cd__checkout {
  background: var(--c-btn) !important;
  color: var(--c-bg) !important;
  border: 1px solid var(--c-btn) !important;
}
.cd__checkout:hover {
  background: var(--c-fg) !important;
  border-color: var(--c-fg) !important;
}

/* ---------- Announcement bar ---------- */
.ann {
  background: var(--c-inv-bg);
  color: var(--c-inv-fg);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  height: 2.5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.ann__track { display: flex; width: max-content; animation: ann-scroll 45s linear infinite; }
.ann__group { display: flex; align-items: center; }
.ann__item, .ann__dot { margin-right: 2.25rem; }
.ann__dot { opacity: 0.45; }
@keyframes ann-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ann__track { animation: none; }
  .ann__group:last-child { display: none; }
}

/* ---------- Header ---------- */
.hdr { background: var(--c-bg); border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: 50; }
.hdr__inner {
  padding-inline: calc(var(--page-margin) * 2 + env(safe-area-inset-left)) calc(var(--page-margin) * 2 + env(safe-area-inset-right));
  height: 4.25rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.hdr__logo { grid-column: 1; justify-self: start; text-decoration: none; display: flex; align-items: center; gap: 0.6rem; }
/* An uploaded logo is sized by height so any aspect ratio fits the row.
   Two classes so it outranks Elementor's `.elementor img { height: auto }`. */
.hdr__logo .hdr__logo-img { display: block; height: 2.25rem; width: auto; max-width: none; }
.hdr__wordmark { font-weight: 800; font-size: 1.05rem; letter-spacing: 0; text-transform: uppercase; }
.hdr__nav { grid-column: 2; display: flex; gap: 1rem; justify-self: center; }
.hdr__link {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.005em; text-transform: uppercase;
  text-decoration: none; padding-block: 0.4rem; transition: opacity 0.2s ease;
}
.hdr__link:hover, .hdr__cart:hover, .hdr__acct:hover { opacity: 0.55; }
.hdr__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.hdr__cart { position: relative; display: block; padding: 0.55rem; margin: -0.55rem; text-decoration: none; transition: opacity 0.2s ease; }
.hdr__cart svg { width: 1.25rem; height: 1.25rem; display: block; }
.hdr__count {
  position: absolute; top: 0.25rem; right: 0.25rem;
  min-width: 0.875rem; height: 0.875rem; padding: 0 0.18rem;
  border-radius: 999px; background: var(--c-fg); color: var(--c-bg);
  box-shadow: 0 0 0 1.5px var(--c-bg);
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0; line-height: 1;
  display: grid; place-items: center;
}
.hdr__count[hidden] { display: none; }
.hdr__acct { display: block; padding: 0.55rem; margin: -0.55rem; text-decoration: none; transition: opacity 0.2s ease; }
.hdr__acct svg { width: 1.25rem; height: 1.25rem; display: block; }
.hdr__burger { display: none; background: none; border: 0; padding: 0.55rem; margin: -0.55rem; color: inherit; cursor: pointer; }
.hdr__burger svg { width: 1.25rem; height: 1.25rem; display: block; }
.hdr__burger:hover { opacity: 0.55; }

@media (max-width: 749px) {
  .hdr__inner { grid-template-columns: 1fr auto 1fr; height: 3.5rem; }
  .hdr__nav { display: none; }
  .hdr__end { display: contents; }
  .hdr__acct { display: none; }
  .hdr__burger { display: grid; place-items: center; grid-column: 1; grid-row: 1; justify-self: start; }
  .hdr__logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .hdr__logo .hdr__logo-img { height: 2rem; }
  .hdr__wordmark--paired { display: none; }
  .hdr__cart { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ---------- Nav drawer ---------- */
.nd { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.nd[open] { visibility: visible; pointer-events: auto; }
.nd__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); opacity: 0; transition: opacity 0.3s ease; }
.nd[open] .nd__scrim { opacity: 1; }
.nd__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(20rem, 82vw);
  padding-right: env(safe-area-inset-right);
  background: var(--c-bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -1px 0 0 var(--c-line);
}
.nd[open] .nd__panel { transform: translateX(0); }
.nd__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem calc(var(--page-margin) * 2);
  border-bottom: 1px solid var(--c-line); flex: none;
}
.nd__title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.005em; text-transform: uppercase; }
.nd__close { background: none; border: 0; padding: 0.6rem; margin: -0.6rem; cursor: pointer; color: inherit; display: grid; place-items: center; transition: opacity 0.2s ease; }
.nd__close:hover { opacity: 0.55; }
.nd__close svg { width: 1rem; height: 1rem; display: block; }
.nd__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--page-margin) * 2); display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; }
.nd__links { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; text-align: left; }
.nd__links a { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.005em; text-transform: uppercase; text-decoration: none; transition: opacity 0.2s ease; }
.nd__links a:hover { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .nd__panel, .nd__scrim { transition: none; } }

/* ---------- Footer ---------- */
.ft { margin-top: auto; overflow: hidden; }
.ft__inner {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  gap: 2.5rem clamp(3rem, 8vw, 7rem);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.ft__word { font-size: 1.25rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.ft__blurb { margin: 0.75rem 0 0; max-width: 34ch; font-size: 0.875rem; color: var(--c-fg-70); }
.ft__col { display: flex; flex-direction: column; gap: 0.7rem; }
.ft__head { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; }
.ft__col a { font-size: 0.875rem; letter-spacing: 0.005em; color: var(--c-fg-70); text-decoration: none; width: fit-content; transition: opacity 0.2s ease; }
.ft__col a:hover { opacity: 0.55; }
.ft__ext { display: inline-flex; align-items: center; gap: 0.3rem; }
.ft__arrow { width: 0.7em; height: 0.7em; flex: none; transition: transform 0.2s ease; }
.ft__ext:hover .ft__arrow { transform: translate(1px, -1px); }
.ft__mark {
  display: flex; justify-content: center;
  /* --mark-len is the character count, set inline by dropkit_footer_markup().
     144vw/len gives the original 12vw at 12 characters and shrinks a longer
     client name to fit on one line rather than clipping it. */
  font-size: min(calc(144vw / var(--mark-len, 12)), 13rem);
  height: 0.8em; overflow: hidden; user-select: none; pointer-events: none;
}
.ft__mark span { font-size: inherit; font-weight: 700; letter-spacing: -0.045em; padding-right: 0.045em; line-height: 1; color: var(--c-line); white-space: nowrap; }
@media (max-width: 749px) {
  .ft__inner { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
  .ft__mark { font-size: calc(144vw / var(--mark-len, 12)); }
  .ft__brand { grid-column: 1 / -1; }
  .ft__blurb { max-width: none; }
}

/* ---------- Latest Drops section (ported from featured-drop.liquid) ---------- */
/* Top spacing only - a bottom pad here would stack with the next
   section's top pad and double every gap down the page. */
.drop-grid { padding-block: var(--gap-section) 0; }
.dg__title {
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 2rem;
  text-wrap: balance;
}
@media (max-width: 749px) {
  .dg__title { font-size: 1.75rem; margin-bottom: 1.75rem; }
}

/* Shop page: WooCommerce's archive wrapper needs the same page inset and
   section rhythm the homepage grid gets. */
.woocommerce-page .cards { margin-block: 0; }

/* Elementor ships `.elementor img { height: auto }` (specificity 0,1,1),
   which outranks our single-class .card__img rule and let the image
   overflow its tile instead of filling it. Extra ancestor wins the tie. */
.card__media .card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sticky header. A sticky child can only travel as far as its parent, and
   Elementor's header wrapper is only header-height - so the wrapper itself
   has to be the sticky element (same reason the Shopify build stuck
   .shopify-section rather than .hdr).
   The announcement bar shares that wrapper, so offset the sticky top by
   its height: the bar scrolls away and the header row lands flush at 0,
   matching Shopify, where the bar is a separate non-sticky section. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
.elementor-location-header:has(.ann) { top: -2.5rem; }

/* WordPress's admin bar is fixed over the top of the viewport for logged-in
   users, covering the top 32px (46px on small screens) of any full-screen
   fixed overlay - which hid the cart drawer's "Cart" title and close button. */
.admin-bar .cd,
.admin-bar .nd { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .cd,
  .admin-bar .nd { top: 46px; }
}

/* Hello Elementor / WooCommerce style bare <button> elements more
   specifically than our single-class rules, flattening the checkout
   button's padding, radius and type. Extra ancestor restores it. */
.cd .cd__checkout {
  padding: 1.05rem 2rem;
  border-radius: var(--radius-ui);
  corner-shape: squircle;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Drawer heads: Hello Elementor sets a tighter heading line-height and its
   own button padding/font-size, shrinking the head and the close target. */
.cd .cd__title,
.nd .nd__title { line-height: 1.55; }
.cd .cd__close,
.nd .nd__close {
  padding: 0.6rem;
  margin: -0.6rem;
  font-size: 13.3333px;
  line-height: normal;
}

/* Checkout button spans the drawer footer, as on Shopify. */
.cd .cd__checkout { width: 100%; }

/* Elementor/Hello Elementor strip the radius off bare <img>; the cart
   line-item thumbnails need it back. */
.cd .cd__img {
  border-radius: var(--radius-ui);
  corner-shape: squircle;
}

/* The admin bar sits fixed over the top of the viewport for logged-in
   users, so the sticky header landed underneath it and lost its top 32px.
   Shift the sticky offset down by the bar's height. */
.admin-bar .elementor-location-header:has(.ann) { top: calc(-2.5rem + 32px); }
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .elementor-location-header:has(.ann) { top: calc(-2.5rem + 46px); }
  .admin-bar .elementor-location-header { top: 46px; }
}