/* Crystal Leaves -- design rules for NATIVE Elementor widgets.
 *
 * The page bodies are built from native Elementor widgets (heading, text-editor,
 * image, button, icon-box, icon-list, accordion, form, nav-menu) rather than
 * raw markup, so the Tailwind utility classes in site.css can no longer be
 * hung on individual elements -- Elementor generates its own inner markup.
 * This sheet carries the design at the component level instead, keyed off the
 * CSS classes assigned to each widget in the editor.
 *
 * Hand-authored. Unlike elementor-compat.css this file is NOT generated, so
 * edit it directly and rebuild the theme.
 */

/* ------------------------------------------------------------------ icons */

/* Every icon in wp-content/uploads/cl-icons is line art: `fill="none"` plus
 * `stroke="currentColor"`. Elementor's icon widget paints SVGs with
 * `fill: var(--e-icon-color)` and a CSS declaration beats the SVG's own
 * presentation attribute, so without this the crystal mark renders as a solid
 * gold blob. Restore the stroke treatment and let the widget's colour control
 * drive `currentColor`.
 */
.elementor-icon svg[viewBox="0 0 32 32"] path,
.elementor-icon svg[viewBox="0 0 24 24"] path,
.elementor-icon svg[viewBox="0 0 32 32"] circle,
.elementor-icon svg[viewBox="0 0 24 24"] circle,
.elementor-icon-list-icon svg path,
.elementor-icon-list-icon svg circle,
.elementor-button-icon svg path,
.elementor-button-icon svg circle {
  fill: none;
  stroke: currentColor;
}

/* Elementor sets `fill` on the wrapper for SVG icons but not always `color`,
 * which is what `stroke: currentColor` above resolves against.
 */
.elementor-icon,
.elementor-icon-list-icon,
.elementor-button-icon {
  color: inherit;
}

/* --------------------------------------------- home page category tiles */

/* The static build overlays the title, blurb and arrow on top of a photo that
 * fills the whole tile (283x378 at the 5-up desktop size, aspect 3/4). Elementor
 * has no per-container absolute positioning on free-form children, so the tile
 * is a relative container, the Image widget is stretched to fill it, and the
 * copy container is pinned to the bottom with the same gradient scrim.
 */
.cl-cat-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

@media (min-width: 1025px) {
  .cl-cat-tile {
    aspect-ratio: 3 / 4;
  }
}

.cl-cat-tile > .cl-cat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.cl-cat-tile .cl-cat-img .elementor-widget-container,
.cl-cat-tile .cl-cat-img figure,
.cl-cat-tile .cl-cat-img a {
  height: 100%;
}

.cl-cat-tile .cl-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  border-radius: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cl-cat-tile:hover .cl-cat-img img {
  opacity: 0.6;
  transform: scale(1.03);
}

.cl-cat-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(20, 41, 28, 0.95),
    rgba(20, 41, 28, 0.35) 55%,
    rgba(20, 41, 28, 0)
  );
}

/* The arrow is a 32px circle that fills gold on hover, as on the static build. */
.cl-cat-overlay .cl-cat-arrow .elementor-icon {
  width: 32px;
  height: 32px;
  border-width: 1px;
  border-color: rgba(250, 247, 241, 0.25);
  background-color: rgba(250, 247, 241, 0.1);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cl-cat-tile:hover .cl-cat-overlay .cl-cat-arrow .elementor-icon {
  background-color: #c08a3e;
  border-color: #c08a3e;
  color: #14291c;
}

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

/* The utility-bar badge is an icon-list whose label main.js rewrites on load.
 * Keep it from wrapping the icon onto its own line at narrow widths.
 */
.js-open-badge .elementor-icon-list-item {
  align-items: center;
}

/* Elementor's sticky header gets `position: fixed` from its own JS; the ported
 * stylesheet expects the cream background to stay opaque over scrolled content.
 */
.elementor-sticky--effects {
  background-color: #faf7f1;
  box-shadow: 0 1px 2px rgba(35, 41, 32, 0.06), 0 8px 24px -12px rgba(35, 41, 32, 0.14);
}

/* --------------------------------------------------------------- nav menu */

/* The static header underlined nothing and relied on colour alone for hover,
 * so switch off the Pro widget's default pointer artefacts.
 */
.elementor-nav-menu--main .elementor-item:focus {
  background-color: transparent;
}

/* Footer "Store" column reuses crystal-leaves-main so the client maintains ONE
 * menu for header and footer. Elementor's Nav Menu widget always renders the
 * whole tree, so suppress the Shop item's submenu and its toggle arrow here --
 * those ten category links are already listed in full in the Shop column next
 * to it, so no link is lost from the page.
 */
.elementor-location-footer .cl-footer-toplevel .elementor-nav-menu .sub-menu,
.elementor-location-footer .cl-footer-toplevel .elementor-nav-menu--dropdown,
.cl-footer-toplevel .elementor-nav-menu .sub-menu,
.cl-footer-toplevel .elementor-nav-menu--dropdown,
.cl-footer-toplevel .sub-arrow {
  display: none !important;
}

/* ------------------------------------------------------------- age gate */

/* The gate's copy is an Elementor template rendered inside the PHP overlay.
 * Strip the section padding Elementor would otherwise add inside the card.
 */
#age-gate .elementor,
#age-gate .e-con,
#age-gate .e-con-inner {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}

#age-gate .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* main.js reveals this by removing `hidden`; Elementor's own widget display
 * rules would otherwise keep it visible.
 */
#age-gate .elementor-widget.hidden {
  display: none;
}

.elementor-nav-menu--dropdown {
  box-shadow: 0 2px 4px rgba(35, 41, 32, 0.08), 0 16px 40px -12px rgba(35, 41, 32, 0.22);
  border: 1px solid rgba(35, 41, 32, 0.05);
  overflow: hidden;
}

/* ---------------------------------------------- Shop mega-panel dropdown */

/* The static Shop dropdown was a 540px white card laid out as two columns, each
 * cell showing the category name over a one-line blurb. The blurb comes from the
 * menu item's Description field (see the walker filter in functions.php); the
 * two-column shape is rebuilt here. Desktop only -- the mobile drawer stays a
 * single-column list, as it was on the static build.
 *
 * Scoped to .elementor-location-header: the footer's Store column is the
 * SAME widget class, and unscoped these rules re-displayed the submenu that
 * .cl-footer-toplevel hides, painting a second panel over the footer.
 */
@media (min-width: 1025px) {
  /* Layout only -- NO display here. Elementor's SmartMenus shows and hides the
   * submenu with an inline `display` style, so an unconditional
   * `display: grid !important` pins the panel permanently open. The grid is
   * therefore applied only while the item is hovered or focused, which is also
   * how the static build opened it.
   */
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: 540px;
    padding: 14px;
    border-radius: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:hover > .sub-menu,
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:focus-within > .sub-menu {
    display: grid !important;
  }

  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu > li {
    width: auto;
  }

  /* Each cell carried a small sage leaf glyph to the left of the label on the
   * static build. Elementor's Nav Menu has no per-item icon, so it comes back
   * as a background image with the label indented to clear it.
   */
  .elementor-location-header .elementor-nav-menu--main .sub-menu .elementor-sub-item {
    display: block;
    border-radius: 12px;
    line-height: 1.35;
    padding-left: 40px !important;
    background-image: url("/wp-content/uploads/cl-icons/cl-leaf-sage.svg");
    background-repeat: no-repeat;
    background-position: 12px 14px;
    background-size: 20px 20px;
  }
}

/* The blurb sits under the label in a lighter, smaller face -- and must not
 * inherit the bold weight the dropdown link uses.
 */
.cl-nav-blurb {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: #5a6454;
  white-space: normal;
}

.elementor-location-header .elementor-nav-menu--main .sub-menu a:hover .cl-nav-blurb,
.elementor-location-header .elementor-nav-menu--main .sub-menu a:focus .cl-nav-blurb {
  color: #5a6454;
}

/* ------------------------------------------- "Keep reading" expander */

/* The toggle is an Elementor Button styled down to a text link, matching the
 * static build's `.copy-toggle` treatment. Its chevron flips when expanded.
 */
.copy-toggle .elementor-button {
  padding: 0;
  background: transparent;
  text-decoration: none;
}

.copy-toggle .elementor-button:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.copy-toggle .elementor-button-icon svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.copy-toggle[aria-expanded="true"] .elementor-button-icon svg {
  transform: rotate(180deg);
}

/* Elementor's own widget spacing collapses the gap the static build had between
 * the lead paragraph, the expanded copy and the toggle.
 */
.elementor-widget-text-editor.copy-more {
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ hero */

/* The hero photo is a real Image widget (so it keeps alt text and appears in
 * the DOM like the static build) stretched behind the copy, with the pine scrim
 * over it. Previously it was a container background-image, which rendered the
 * same but left no <img> on the page.
 */
.cl-hero {
  position: relative;
  overflow: hidden;
}

.cl-hero > .cl-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
}

.cl-hero .cl-hero-img .elementor-widget-container,
.cl-hero .cl-hero-img figure,
.cl-hero .cl-hero-img a {
  height: 100%;
}

.cl-hero .cl-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* The scrim: pine on the left fading right, matching the static gradient. */
.cl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(20, 41, 28, 0.96),
    rgba(20, 41, 28, 0.85) 45%,
    rgba(20, 41, 28, 0.45)
  );
}

.cl-hero > .cl-hero-copy {
  position: relative;
  z-index: 2;
}


/* ---- POSaBIT shop embed on the category pages (inc/shop-embed.php) ----
 * The frame starts at a placeholder height; the script inside it resizes it to
 * the product list, capped near one screen, and longer lists scroll inside. */
.cl-shop-embed {
  margin-top: 32px;
  background: #fff;
  border: 1px solid rgba(35, 41, 32, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px -18px rgba(20, 41, 28, 0.35);
}

.cl-shop-embed__frame {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  background: #fff;
}

.cl-shop-embed__fallback {
  margin: 0;
  padding: 24px;
  text-align: center;
}

@media (max-width: 767px) {
  /* Edge to edge on phones: the POSaBIT app needs ~370px before its toolbar
     (search, account, cart) stops fitting, the same width its own /store/ page
     gets. Inset by the section's 20px gutters it lost 40px and pushed the cart
     icon out of view on a 390px phone. */
  .cl-shop-embed {
    margin-top: 24px;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .cl-shop-embed__frame {
    height: 520px;
  }
}

/* Inside the frame: nothing but the POSaBIT app. */
html.cl-embed,
html.cl-embed body {
  background: #fff;
  margin: 0 !important;
}


/* ---- Deals (inc/deals.php) ---------------------------------------------------
 * One wp-admin list (Deals) feeds three things: the gold ticker under the header
 * on every page except home, the promo slider at the top of home, and the deal
 * boxes on /deals/. Colours are the site palette: gold #C08A3E, pine #1F3D2B,
 * pinedeep #14291C, ink #13291C on gold (5.1:1), cream #FAF7F1. */

/* Ticker. Two copies of the list scroll as one strip (translate -50%), so the
   loop is seamless and the bar is never blank. Taller than the first version
   (Zac, 2026-09-25: "it's kind of narrow"). */
.cl-ticker-bar {
  background: #C08A3E;
  color: #13291C;
  overflow: hidden;
  border-bottom: 1px solid rgba(20, 41, 28, 0.12);
}
.cl-ticker-track {
  display: flex;
  width: max-content;
  animation: cl-ticker var(--cl-ticker-duration, 36s) linear infinite;
}
.cl-ticker-bar:hover .cl-ticker-track,
.cl-ticker-bar:focus-within .cl-ticker-track {
  animation-play-state: paused;
}
.cl-ticker-list {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-ticker-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 15px 28px;
  font: 600 16px/1.3 Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.cl-ticker-item a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.cl-ticker-item a:hover span,
.cl-ticker-item a:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cl-ticker-icon {
  width: 16px;
  height: 16px;
  margin-right: 9px;
  flex: none;
}
@keyframes cl-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .cl-ticker-item { padding: 13px 22px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-ticker-track { animation: none; width: auto; justify-content: center; }
  .cl-ticker-list { flex-wrap: wrap; justify-content: center; }
  .cl-ticker-copy { display: none; }
  .cl-ticker-item { padding: 10px 18px; }
}

/* Homepage promo slider. Native horizontal scroll-snap (swipe works without JS);
   assets/js/deals.js adds arrows, dots and autoplay. The slide shape comes from
   the first banner image (--cl-promo-ratio, 3:1 for 1920x640). */
.cl-promo {
  position: relative;
  background: #14291C;
}
.cl-promo-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  aspect-ratio: var(--cl-promo-ratio, 3 / 1);
}
.cl-promo-track::-webkit-scrollbar { display: none; }
.cl-promo-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
}
.cl-promo-link,
.cl-promo-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}
.cl-promo-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  max-width: none;
}
.cl-promo-link:focus-visible {
  outline: 3px solid #C08A3E;
  outline-offset: -3px;
}
.cl-promo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(250, 247, 241, 0.92);
  color: #14291C;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.15s ease;
}
.cl-promo-arrow:hover { background: #fff; }
.cl-promo-arrow:focus-visible { outline: 3px solid #C08A3E; outline-offset: 2px; }
.cl-promo-prev { left: 18px; }
.cl-promo-next { right: 18px; }
/* Bottom-right, over the photo: centred dots collided with the slide's bottom text line
   at tablet widths. */
.cl-promo-dots {
  position: absolute;
  right: 20px;
  bottom: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  z-index: 2;
}
.cl-promo-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-promo-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(250, 247, 241, 0.55);
  box-shadow: 0 0 0 1px rgba(20, 41, 28, 0.35);
  transition: background-color 0.15s ease, width 0.2s ease;
}
.cl-promo-dot[aria-current="true"]::before {
  width: 24px;
  background: #C08A3E;
}
.cl-promo-dot:focus-visible { outline: 2px solid #FAF7F1; outline-offset: -4px; border-radius: 999px; }
@media (max-width: 767px) {
  .cl-promo-track { aspect-ratio: var(--cl-promo-ratio-m, var(--cl-promo-ratio, 3 / 1)); }
  /* On a phone the wide banner is short; swipe replaces the arrows. */
  .cl-promo-arrow { display: none; }
  .cl-promo-dots { bottom: 4px; right: 10px; }
}

/* Deal boxes on /deals/ ([cl_deals_grid]). Locals Canna House's layout (headline +
   Shop Now, four across) in the site's own type and colours. The whole card is one
   link (stretched from the headline anchor). */
.cl-deals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 1100px) { .cl-deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .cl-deals-grid { grid-template-columns: 1fr; gap: 16px; } }

.cl-deal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(35, 41, 32, 0.08);
  border-top: 4px solid #C08A3E;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(35, 41, 32, 0.06), 0 8px 24px -12px rgba(35, 41, 32, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cl-deal-card:hover,
.cl-deal-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(35, 41, 32, 0.06), 0 18px 36px -16px rgba(35, 41, 32, 0.28);
}
@media (hover: none) {
  .cl-deal-card:hover { transform: none; }
}
.cl-deal-img {
  background: #F2ECE1;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-deal-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.cl-deal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 22px;
}
.cl-deal-title {
  margin: 0;
  font: 700 24px/1.18 Fraunces, Georgia, serif;
  color: #1F3D2B;
}
.cl-deal-link {
  color: inherit;
  text-decoration: none;
}
.cl-deal-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cl-deal-link:focus-visible { outline: none; }
.cl-deal-card:focus-within { outline: 3px solid #C08A3E; outline-offset: 3px; }
.cl-deal-blurb {
  margin: 10px 0 0;
  font: 400 15px/1.55 Inter, system-ui, sans-serif;
  color: #5A6454;
}
.cl-deal-cta {
  margin-top: auto;
  padding-top: 18px;
  font: 700 13px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A5F26;
}
.cl-deal-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}
.cl-deal-card:hover .cl-deal-arrow { transform: translateX(4px); }
.cl-deals-empty {
  margin: 8px 0 0;
  font: 400 17px/1.6 Inter, system-ui, sans-serif;
  color: #5A6454;
}
.cl-deals-empty a { color: #1F3D2B; font-weight: 600; }


/* ---- Mobile audit fixes (2026-09-29) ------------------------------------------
 * See clients/crystal_leaves/audits/mobile_audit_2026-09-29.md. */

/* Footer contact icons drew in ink (#232920) on the pine footer: invisible. */
[data-elementor-type="footer"] .elementor-icon-list-icon svg {
  fill: none !important;
  stroke: #7A9B7E !important;
  color: #7A9B7E !important;
}

/* iOS zooms the page when a focused field is under 16px. */
.elementor-form .elementor-field,
.elementor-form .elementor-field-textual {
  font-size: 16px !important;
}

/* Bigger tap areas without moving anything: padding grows the target, the
   matching negative margin keeps the layout where it was. */
.copy-toggle .elementor-button {            /* "Keep reading" was 15px tall */
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  margin-top: -15px;
  margin-bottom: -15px;
}
.cl-ticker-item a {                          /* ticker links were 20px tall */
  padding-top: 13px;
  padding-bottom: 13px;
  margin-top: -13px;
  margin-bottom: -13px;
}
[data-elementor-type="footer"] .elementor-icon-list-item > a {   /* address / phone / directions */
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: -5px;
  margin-bottom: -5px;
}
[data-elementor-type="footer"] .elementor-nav-menu--layout-horizontal .elementor-item {  /* Privacy / Terms */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-top: -12px;
  margin-bottom: -12px;
}
.elementor-menu-toggle {                     /* hamburger was 42px */
  min-width: 44px;
  min-height: 44px;
}
#age-yes,
#age-no,
#age-yes .elementor-button,
#age-no .elementor-button {                  /* age-gate buttons were 41px */
  min-height: 44px;
}

/* Text under 12px: the header tagline (10-11px) and the sticky bar labels (11px). */
[data-elementor-type="header"] .elementor-element-clh0007 .elementor-heading-title {
  font-size: 12px !important;
}
.cl-sticky-bar a.flex-col {
  font-size: 12px;
}

/* /store/ heading for screen readers and search engines only. */
.cl-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accordion titles are now focusable divs (functions.php); give them a visible focus ring. */
.elementor-accordion .elementor-tab-title:focus-visible {
  outline: 2px solid #C08A3E;
  outline-offset: 2px;
}

/* Home category tiles: two per row on phones instead of one (the stack made the
   page ~14,000px tall on an iPhone). */
@media (max-width: 767px) {
  .cl-cat-tile {
    --width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  .cl-cat-tile .cl-cat-overlay {
    padding: 12px 12px 14px !important;
  }
  .cl-cat-tile .cl-cat-overlay .elementor-heading-title {
    font-size: 16px !important;
  }
  .cl-cat-tile .cl-cat-overlay .elementor-widget-text-editor,
  .cl-cat-tile .cl-cat-overlay p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}