/* =====================================================================
   6 MUSHROOMS - CONTENT PAGES (About, Contact, FAQ)  scope .six-page
   All sizes in px (theme sets html font-size:10px, so rem is 62.5% off).
   Every colour comes from the global tokens in chrome.css - never hardcode.

   These pages still render their original Beaver Builder layout so the owner
   can keep editing them and no copy is lost. Everything below neutralises
   BB's old chrome (1140px container, #480371/#212121 palette, full-bleed
   photo hero) and restyles its modules onto the design system.
   ===================================================================== */
.six-page{
  --f: var(--ap-font);
  --ink:var(--ap-ink); --ink-2:var(--ap-ink-2); --muted:var(--ap-mute); --faint:var(--ap-faint);
  --line:var(--ap-line); --line-soft:var(--ap-line-soft); --line-strong:var(--ap-line-strong);
  --canvas:var(--ap-canvas); --parch:var(--ap-parchment); --surface:var(--ap-surface);
  --plum:var(--ap-plum); --plum-h:var(--ap-plum-dark); --plum-tint:var(--ap-plum-tint);
  --gold:var(--ap-gold); --ok:var(--ap-stock);
  --wrap:1280px; --gut:clamp(20px,4vw,48px); --measure:68ch; --r:18px;
  --e:cubic-bezier(.16,1,.3,1);
  font-family:var(--f); color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.six-page *{box-sizing:border-box;}
.six-page .pg-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); width:100%;}
.six-page h1,.six-page h2,.six-page h3,.six-page h4{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.18; color:var(--ink);}
.six-page p{margin:0;}
.six-page a{color:inherit; text-decoration:none;}
.six-page img{max-width:100%; height:auto; display:block;}

/* ---------- HEAD (matches cart / checkout / shop exactly) ---------- */
.six-page .pg-crumb{padding:18px 0 0; font-size:12.5px; color:var(--faint);}
.six-page .pg-crumb .pg-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:7px;}
.six-page .pg-crumb a:hover{color:var(--ink); text-decoration:underline;}
.six-page .pg-head{padding:20px 0 26px; border-bottom:1px solid var(--line-soft);}
.six-page .pg-head h1{font-size:clamp(28px,3vw,38px); letter-spacing:-.026em;}
.six-page .pg-sub{margin-top:8px; font-size:15px; color:var(--muted); max-width:62ch;}
.six-page .pg-body{padding-block:8px 64px;}

/* =====================================================================
   NEUTRALISE THE BEAVER BUILDER LAYOUT
   ===================================================================== */
/* the old full-bleed storefront-photo hero + duplicate white H1 */
.six-page .fl-row-bg-photo,
.six-page .fl-row:first-child:has(.fl-row-bg-photo),
.six-page .pg-body > .fl-builder-content > .fl-row:first-child:has(h1){
  display:none !important;
}
/* container + spacing: BB used 1140px with no gutter; match the site's 1280px */
.six-page .fl-row-content,
.six-page .fl-row-fixed-width{
  max-width:var(--wrap) !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}
.six-page .fl-row-content-wrap{
  padding-left:0 !important; padding-right:0 !important;
  padding-top:0 !important; padding-bottom:0 !important;
  background-color:transparent !important; background-image:none !important;
}
.six-page .fl-row{background-color:transparent !important; background-image:none !important;}
.six-page .fl-col-content{padding:0 !important; background:none !important;}
.six-page .fl-module{margin:0 !important;}
.six-page .fl-module-content{margin:0 !important;}
/* vertical rhythm comes from the row, once, instead of BB's 60/60 everywhere */
.six-page .pg-body > .fl-builder-content > .fl-row + .fl-row{margin-top:clamp(36px,4vw,60px) !important;}
.six-page .fl-col-group{gap:clamp(24px,3vw,48px) !important; align-items:start !important;}

/* ---------- TYPE ---------- */
.six-page .fl-heading,
.six-page .pp-heading,
.six-page .fl-module-heading,
.six-page .fl-module-pp-heading{margin:0 0 14px !important;}
.six-page .fl-heading .fl-heading-text,
.six-page .pp-heading .title-text,
.six-page h2, .six-page h2 span{
  font-size:27px !important; font-weight:700 !important;
  letter-spacing:-.022em !important; line-height:1.2 !important;
  color:var(--ink) !important; text-align:left !important;
}
.six-page h3, .six-page h3 span{font-size:19px !important; color:var(--ink) !important; text-align:left !important;}
.six-page .pp-heading-separator{display:none !important;}
.six-page .fl-rich-text,
.six-page .fl-module-rich-text{
  font-size:16px; line-height:1.65; color:var(--ink-2); max-width:var(--measure);
}
.six-page .fl-rich-text p{margin:0 0 16px; font-size:16px; line-height:1.65; color:var(--ink-2);}
.six-page .fl-rich-text p:last-child{margin-bottom:0;}
.six-page .fl-rich-text strong{color:var(--ink); font-weight:700;}
.six-page .fl-rich-text a{color:var(--plum); text-decoration:underline; text-underline-offset:3px;}
.six-page .fl-rich-text ul,.six-page .fl-rich-text ol{margin:0 0 16px; padding-left:20px; color:var(--ink-2);}
.six-page .fl-rich-text li{margin-bottom:7px; line-height:1.6;}

/* ---------- PHOTOS ---------- */
.six-page .fl-photo,
.six-page .fl-photo-content{width:100% !important; margin:0 !important;}
.six-page .fl-photo-img{
  width:100%; height:auto; border-radius:var(--r);
  background:var(--parch); box-shadow:var(--ap-shadow-sm);
}

/* ---------- ICON + TEXT ROWS (phone, shipping) ---------- */
.six-page .fl-icon-group,
.six-page .fl-module-icon{margin:0 0 12px !important;}
.six-page .fl-icon-wrap{display:flex !important; align-items:flex-start; gap:12px;}
.six-page .fl-icon i, .six-page .fl-icon i:before{color:var(--plum) !important; font-size:18px !important;}
.six-page .fl-icon-text{font-size:16px !important; line-height:1.55 !important; color:var(--ink-2) !important;}
.six-page .fl-icon-text p{margin:0; font-size:16px; color:var(--ink-2);}
.six-page .fl-icon-text strong{color:var(--ink);}
.six-page .fl-icon-text a{color:var(--plum) !important; text-decoration:none;}
.six-page .fl-icon-text a:hover{text-decoration:underline;}

/* ---------- SUPPORT HOURS TABLE ---------- */
.six-page .pp-business-hours,
.six-page .pp-business-hours-content{
  max-width:460px; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--canvas); box-shadow:var(--ap-shadow-sm);
}
.six-page .pp-business-hours-row,
.six-page .pp-day-wrapper{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 18px !important;
  border-top:1px solid var(--line-soft) !important;
  background:var(--canvas) !important; margin:0 !important;
}
.six-page .pp-business-hours-row:first-child,
.six-page .pp-day-wrapper:first-child{border-top:0 !important;}
.six-page .pp-day-label,
.six-page .pp-business-hours-day{
  font-size:14.5px !important; font-weight:700 !important; color:var(--ink) !important;
  background:none !important; padding:0 !important; margin:0 !important;
}
.six-page .pp-day-timing,
.six-page .pp-business-hours-time{
  font-size:14.5px !important; color:var(--muted) !important;
  background:none !important; padding:0 !important; margin:0 !important;
  font-variant-numeric:tabular-nums;
}
.six-page .pp-business-hours-row.pp-highlight,
.six-page .pp-day-wrapper.pp-highlight{background:var(--plum-tint) !important;}

/* ---------- FAQ ACCORDIONS ----------
   PowerPack's real class names are .pp-faq-button / .pp-faq-button-label /
   .pp-faq-content (NOT .pp-faq-question / .pp-faq-answer).
   Its generated CSS paints the hover + open state #480371 with white text, and
   the question label is rendered as an <h3>, so the generic heading colour rule
   below was forcing it back to ink -> dark text on a deep purple bar.
   Everything here is keyed to the real selectors and to a light tint instead. */
.six-page .pp-faq{ max-width:900px; }
.six-page .pp-faq-item{
  border:1px solid var(--line) !important; border-radius:14px !important;
  margin:0 0 10px !important; overflow:hidden; background:var(--canvas) !important;
  transition:border-color .18s var(--e), box-shadow .18s var(--e);
}
.six-page .pp-faq-item:hover{ border-color:var(--line-strong) !important; }

/* the question row - normal, hover and open all use the same light tint */
.six-page .pp-faq-item .pp-faq-button,
.six-page .pp-faq-item .pp-faq-button:hover,
.six-page .pp-faq-item .pp-faq-button:focus,
.six-page .pp-faq-item.pp-faq-item-active .pp-faq-button{
  display:flex !important; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 18px !important; margin:0 !important; cursor:pointer;
  border:0 !important; box-shadow:none !important;
  background:var(--canvas) !important;
  transition:background-color .18s var(--e);
}
.six-page .pp-faq-item .pp-faq-button:hover,
.six-page .pp-faq-item.pp-faq-item-active .pp-faq-button{
  background:var(--plum-tint) !important;
}
/* the label is an <h3>; force it readable in every state */
.six-page .pp-faq-item .pp-faq-button .pp-faq-button-label,
.six-page .pp-faq-item .pp-faq-button:hover .pp-faq-button-label,
.six-page .pp-faq-item.pp-faq-item-active .pp-faq-button .pp-faq-button-label,
.six-page .pp-faq-item .pp-faq-button h2,
.six-page .pp-faq-item .pp-faq-button h3,
.six-page .pp-faq-item .pp-faq-button h4{
  margin:0 !important; padding:0 !important;
  font-family:var(--f) !important;
  font-size:16px !important; font-weight:700 !important;
  letter-spacing:-.012em !important; line-height:1.4 !important;
  color:var(--ink) !important; background:none !important; text-align:left !important;
}
/* toggle icon */
.six-page .pp-faq-item .pp-faq-button-icon,
.six-page .pp-faq-item .pp-faq-button:hover .pp-faq-button-icon{
  color:var(--plum) !important; font-size:13px !important; flex:0 0 auto;
  background:none !important;
}

/* the answer */
.six-page .pp-faq-item .pp-faq-content{
  padding:0 18px 16px !important; background:var(--canvas) !important;
  font-size:15.5px !important; line-height:1.65 !important; color:var(--ink-2) !important;
}
.six-page .pp-faq-item .pp-faq-content-text,
.six-page .pp-faq-item .pp-faq-content p{
  margin:0 0 12px; font-size:15.5px; line-height:1.65; color:var(--ink-2) !important;
}
.six-page .pp-faq-item .pp-faq-content p:last-child{ margin-bottom:0; }
.six-page .pp-faq-item .pp-faq-content a{
  color:var(--plum) !important; text-decoration:underline; text-underline-offset:3px;
}
.six-page .pp-faq-item .pp-faq-content strong{ color:var(--ink) !important; }

/* ---------- CONTACT CARDS (fills the empty form column) ---------- */
.six-page .pg-contact-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px); margin-top:8px;
}
.six-page .pg-contact-card{
  display:flex; flex-direction:column; gap:5px;
  padding:22px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--canvas); box-shadow:var(--ap-shadow-sm);
  transition:border-color .18s var(--e), transform .18s var(--e);
}
.six-page a.pg-contact-card:hover{border-color:var(--plum); transform:translateY(-2px);}
.six-page .pg-contact-label{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
}
.six-page .pg-contact-value{font-size:18px; font-weight:700; letter-spacing:-.018em; color:var(--ink);}
.six-page a.pg-contact-card:hover .pg-contact-value{color:var(--plum);}
.six-page .pg-contact-note{font-size:13.5px; line-height:1.5; color:var(--muted);}
.six-page .pg-contact-foot{margin-top:20px; font-size:15px; color:var(--muted);}
.six-page .pg-contact-foot a{color:var(--plum); text-decoration:underline; text-underline-offset:3px;}

/* ---------- BUTTONS: one plum, never grey ---------- */
.six-page .fl-button,
.six-page a.fl-button,
.six-page .fl-button-wrap a{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:48px; padding:13px 26px !important;
  background:var(--plum) !important; color:var(--ap-on-dark) !important;
  border:0 !important; border-radius:9999px !important;
  font-family:inherit !important; font-size:15px !important; font-weight:700 !important;
  letter-spacing:-.012em; text-shadow:none !important; box-shadow:none !important;
  transition:background-color .2s var(--e), transform .15s var(--e);
}
.six-page .fl-button:hover{background:var(--plum-h) !important; transform:translateY(-1px);}
.six-page .fl-button *{color:inherit !important; background:none !important;}

/* ---------- GOOGLE REVIEWS ----------
   The reviews module calls the Google Places API for the CLOSED store's Place
   ID; that call is blocked in functions.php, so the module renders empty.
   Hide the empty shell rather than leaving a stranded heading. */
.six-page .pp-reviews:empty,
.six-page .greviews:empty,
.six-page .fl-module-pp-reviews:has(.pp-reviews:empty){display:none !important;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .six-page .pg-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .six-page .fl-col-group{flex-direction:column !important;}
  .six-page .fl-col{width:100% !important; max-width:none !important;}
}
@media(max-width:600px){
  .six-page .pg-contact-grid{grid-template-columns:minmax(0,1fr);}
  .six-page .pg-body{padding-bottom:48px;}
  .six-page .fl-heading .fl-heading-text,
  .six-page .pp-heading .title-text,
  .six-page h2, .six-page h2 span{font-size:23px !important;}
}
@media (prefers-reduced-motion:reduce){ .six-page *{transition:none !important;} }

/* ---------------------------------------------------------------------
   Contact: the original layout ends with a "Send Us a Message" heading and an
   empty column (its Gravity Forms module has no active plugin behind it).
   Hide that orphaned heading + empty column and use our own contact block,
   which carries the same heading and real ways to get in touch.
   ------------------------------------------------------------------- */
.six-page--contact .fl-col-content:empty,
.six-page--contact .fl-col:has(> .fl-col-content:empty){ display:none !important; }
/* the heading module whose form never renders */
.six-page--contact .pg-body .fl-builder-content > .fl-row:last-child{ display:none !important; }

.six-page .pg-contact{ padding-block:8px 64px; }
.six-page .pg-contact-h{
  font-size:27px; font-weight:700; letter-spacing:-.022em; line-height:1.2;
  padding-top:32px; border-top:1px solid var(--line-soft);
}
.six-page .pg-contact-lead{ margin:8px 0 20px; font-size:16px; color:var(--muted); max-width:60ch; }
/* the original "Send Us a Message" heading module (its form column is empty) */
.six-page--contact .fl-node-tg3is5zxoh9f{ display:none !important; }

/* About: the "Latest / Google Reviews" heading + module. The module fetches
   reviews for the CLOSED storefront's Google Place ID, and that outbound call
   is blocked in functions.php, so it renders 0px tall and leaves the heading
   stranded. Hidden until there is a review source that isn't the old store. */
.six-page--about-us .fl-node-pj0god94sxtb,
.six-page--about-us .fl-node-4xcots8q706f,
.six-page--about-us .fl-module-pp-reviews{ display:none !important; }
.six-page--about-us .fl-row:has(> .fl-row-content-wrap .fl-module-pp-reviews){ display:none !important; }

/* ---------------------------------------------------------------------
   Column overlap fix.
   Beaver Builder sizes its columns in percentages that already add up to
   100%, so adding a flex `gap` pushed the total past the row width and the
   copy ran underneath the photo. Let the columns flex and shrink instead of
   holding their percentage, and give them a min-width so text can wrap.
   ------------------------------------------------------------------- */
.six-page .fl-col-group{
  display:flex !important; flex-wrap:wrap !important;
  align-items:start !important;
}
.six-page .fl-col-group > .fl-col{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}
.six-page .fl-col-group > .fl-col > .fl-col-content{ min-width:0 !important; }
/* long words and links must not force the column wider than its share */
.six-page .fl-rich-text, .six-page .fl-rich-text p{ overflow-wrap:break-word; }

@media(max-width:820px){
  .six-page .fl-col-group{ flex-direction:column !important; }
  .six-page .fl-col-group > .fl-col{ flex:1 1 100% !important; width:100% !important; }
}

/* Empty Beaver Builder columns were still claiming their share of the row,
   pushing the real content across the page. Collapse them so a single-column
   row uses the full width and starts at the page gutter. */
.six-page .fl-col-group > .fl-col:has(> .fl-col-content:empty){ display:none !important; }
.six-page .fl-col-group > .fl-col:only-child{ flex:1 1 100% !important; }
/* a row whose only real content is one column should not be centred */
.six-page .fl-col-group{ justify-content:flex-start !important; }
.six-page .fl-module-content, .six-page .fl-module{ margin-left:0 !important; }
/* the Beaver Builder content still sat 44px inside the page gutter */
.six-page .pg-body .fl-row-content,
.six-page .pg-body .fl-col,
.six-page .pg-body .fl-col-content,
.six-page .pg-body .fl-module,
.six-page .pg-body .fl-module-content{
  padding-left:0 !important; margin-left:0 !important;
}

/* ---------------------------------------------------------------------
   About page: the buying guide and the psilocybin FAQ, moved off the home
   page. Same accordion and step treatment as elsewhere, on a light ground.
   ------------------------------------------------------------------- */
.six-page .pg-h2{
  font-size:21px; font-weight:700; letter-spacing:-.018em;
  padding-top:34px; margin-bottom:20px; border-top:1px solid var(--line-soft);
}
.six-page .pg-guide, .six-page .pg-faq{ padding-bottom:14px; }
.six-page .pg-steps{ list-style:none; margin:0; padding:0; display:grid; gap:22px; max-width:var(--measure); }
.six-page .pg-step{ display:flex; gap:16px; align-items:flex-start; }
.six-page .pg-step-num{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--plum-tint); color:var(--plum);
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
}
.six-page .pg-step h3{ font-size:16px; font-weight:700; margin-bottom:5px; letter-spacing:-.012em; }
.six-page .pg-step p{ font-size:15.5px; line-height:1.6; color:var(--ink-2); }

.six-page .pg-faq-item{
  border:1px solid var(--line); border-radius:14px; margin-bottom:10px;
  overflow:hidden; background:var(--canvas); max-width:900px;
}
.six-page .pg-faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 18px; font-size:16px; font-weight:400; color:var(--ink);
  transition:background-color .18s var(--e);
}
.six-page .pg-faq-item summary::-webkit-details-marker{ display:none; }
.six-page .pg-faq-item summary:hover,
.six-page .pg-faq-item[open] summary{ background:var(--plum-tint); }
.six-page .pg-chev{ width:16px; height:16px; flex:0 0 16px; color:var(--plum); transition:transform .22s var(--e); }
.six-page .pg-faq-item[open] .pg-chev{ transform:rotate(180deg); }
.six-page .pg-faq-a{ padding:0 18px 16px; }
.six-page .pg-faq-a p{ font-size:15.5px; line-height:1.65; color:var(--ink-2); max-width:70ch; }
.six-page .pg-faq-more{ margin-top:18px; font-size:14.5px; color:var(--muted); }
.six-page .pg-faq-more a{ color:var(--plum); text-decoration:underline; text-underline-offset:3px; }

/* same fix as the home FAQ: the answer was capped well inside the card */
.six-page .pg-faq-a p{ max-width:none; }

/* ---------------------------------------------------------------------
   CONTACT: one clean section, no duplication.
   The old Beaver Builder body carried a duplicate "Contact Us" heading, a
   weekly hours schedule, a scattered phone/shipping list and an empty form.
   All of it is hidden; the page is the breadcrumb + "Contact" H1 + intro +
   the tidy Email / Phone / Shipping cards this template renders below.
   ------------------------------------------------------------------- */
.six-page--contact .pg-body{ display:none !important; }