/* =========================================================
   FLEXYPE-WP  ·  Base styles
   Typography + buttons + layout helpers + the two ported
   section styles (scrolling text, store features).
   All colours/fonts pull from tokens.css variables.
   ========================================================= */

/* ---- Reset-ish ---- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--fx-body-font);
  font-size:var(--fx-body-size);
  line-height:var(--fx-body-lh);
  color:var(--fx-ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--fx-ink-soft);text-decoration:none}
a:hover{color:var(--fx-primary-2)}

/* ---- Headings ---- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--fx-head-font);
  color:var(--fx-primary);
  font-weight:var(--fx-head-weight);
  line-height:var(--fx-head-lh);
  margin:0 0 .5em;
}
h1{font-size:var(--fx-h1)}
h2{font-size:var(--fx-h2)}
h3{font-size:var(--fx-h3)}
h4{font-size:var(--fx-h4)}

/* ---- Layout helpers (mirror the Shopify class names) ---- */
.page-width{max-width:var(--fx-page-width);margin:0 auto;padding:0 var(--fx-gutter)}
.fullwidth{width:100%}
.wd100{width:100%}
.fl{display:flex}
.f-aic{align-items:center}
.f-jcsb{justify-content:space-between}
.fl1{flex:1}
.tc{text-align:center}
.mr10{margin-right:10px}
.mb5{margin-bottom:5px}
.hide-sm,.hide-md,.hide-lg{display:none!important}
@media(min-width:769px){.hide-sm{display:block!important}}

/* ---- Buttons (brand) ---- */
.fx-btn,button.fx-btn,.button{
  display:inline-block;
  font-family:var(--ft3);
  font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:12px 28px;border:1px solid var(--fx-primary);
  background:var(--fx-btn-bg);color:var(--fx-btn-text);
  cursor:pointer;transition:all .3s ease;
}
.fx-btn:hover,.button:hover{background:var(--fx-btn-bg-hover);color:var(--fx-btn-text-hover)}

/* =========================================================
   SECTION · Scrolling text  (ported from sections/scrolling-text.liquid)
   ========================================================= */
.top-bar{overflow:hidden}
.top-bar .scrollingBar{
  display:flex;width:max-content;
  animation:fx-marquee var(--spdm,5s) linear infinite;
}
@media(min-width:769px){
  .top-bar .scrollingBar{animation:fx-marquee var(--spd,12s) linear infinite}
}
.top-bar .scrollingBar:hover{animation-play-state:paused}
.top-bar .ttlTxt{
  padding:0 20px;white-space:nowrap;
  color:var(--tcl,#fff);
  font-size:var(--tfsm,12px);
  font-family:var(--tff,var(--ft1));
  font-weight:var(--tfw,500);
}
@media(min-width:769px){
  .top-bar .ttlTxt{padding:0 35px;font-size:var(--tfs,12px)}
}
.top-bar .ttlTxt a{color:inherit}
@keyframes fx-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* =========================================================
   SECTION · Store features (ported from sections/store-features.liquid)
   ========================================================= */
.fx-store-features .section-cover{padding:35px 0}
.store-info{list-style:none;display:flex;justify-content:space-between;margin:0;padding:0}
.store-info li{flex:1;padding:10px 20px}
.store-info .at{color:var(--icl,#333);font-size:var(--isz,30px);display:inline-block;margin-bottom:20px;text-align:center}
.store-info i.at{width:calc(var(--isz,30px) + 10px)}
.store-info .text{color:var(--cl,#333)}
.store-info .ttlTxt{
  color:var(--tcl,#111);font-size:var(--tfs,14px);
  font-family:var(--ft1);font-weight:var(--tfw,600);
  line-height:var(--lh,1.2);margin:0 0 5px;
}
.store-info .sub-text{color:var(--cl,#333)}
.store-info.style2 .item > a,
.store-info.style2 .item > div{display:flex;align-items:flex-start;text-align:left}
.store-info.style2 .at{margin:0 15px 0 0}
.store-info.style2 .text{margin-top:2px}
.store-info.style1 li{text-align:center}
@media(min-width:769px){
  .store-info li + li{border-left:1px dotted var(--bd,#eee)}
}
@media(max-width:768px){
  .store-info{flex-wrap:wrap}
  .store-info.style2 li{flex:1 1 50%}
}
@media(max-width:480px){
  .store-info{flex-direction:column;margin:0}
  .store-info li{width:100%;padding:10px 0}
  .store-info li .at{font-size:30px;min-width:30px}
}

/* ---- WooCommerce light brand touch-ups ---- */
.woocommerce span.onsale{background:var(--fx-primary)!important}
.woocommerce a.button,.woocommerce button.button,
.woocommerce #respond input#submit,.woocommerce .button{
  background:var(--fx-btn-bg)!important;color:var(--fx-btn-text)!important;
  border:1px solid var(--fx-primary)!important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover{
  background:var(--fx-btn-bg-hover)!important;color:var(--fx-btn-text-hover)!important;
}
.woocommerce .price,.woocommerce ul.products li.product .price{color:var(--fx-primary)}

/* ---- Simple site chrome ---- */
.fx-site-header{border-bottom:1px solid var(--fx-border);padding:18px 0}
.fx-site-header .fx-logo{font-family:var(--fx-head-font);font-size:24px;color:var(--fx-primary);font-weight:700;letter-spacing:1px}
.fx-nav a{margin-left:22px;text-transform:uppercase;font-size:13px;font-weight:600;font-family:var(--ft3);color:var(--fx-primary)}
.fx-site-footer{background:var(--fx-footer-bottom-bg);padding:40px 0;margin-top:60px;text-align:center;color:var(--fx-ink-soft)}
.fx-content{padding:40px 0}