/* ==========================================================================
   8X Gear — front page product carousels
   Ported from the prototype's .ct-ropa-* block in 8xgear-home.html onto
   Flatsome's own product slider markup, so WooCommerce keeps supplying the
   products and Flickity keeps handling the sliding.
   ========================================================================== */

/* ---------------------------------------------------------- section head */
/* Flatsome frames a section title with two <b> rules either side. The design
   leads with a kicker instead and closes with a red bar under the word. */
body.home .section-title-container{max-width:1220px;}

/* The head is a three-row stack on the left — kicker, word, rule — with the
   View-all sitting against the bottom of it on the right. The rule and the
   kicker are pseudo-elements, which grid places as readily as real children. */
body.home h3.section-title{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "kicker view"
    "title  view"
    "rule   view";
  align-items:end;column-gap:24px;
  margin:0 0 24px;border:0;
}
body.home h3.section-title > b{display:none;}
body.home h3.section-title::before{
  content:"8X Gear";grid-area:kicker;margin:0 0 8px;
  color:var(--ct-red);
  font-size:10px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;
}
body.home .section-title-main{
  grid-area:title;margin:0;padding:0;border:0;
  color:#000;font-size:clamp(32px,5vw,58px);line-height:.9;
  /* The comp sets -.07em, which at this weight closes the gaps until the
     letters touch. -.02em keeps the condensed feel and stays readable. */
  font-weight:950;letter-spacing:-.02em;text-transform:uppercase;
}
/* The stop is its own span in the shortcode's title text, so it can take the
   brand red the way the comp draws it. */
/* The theme underlines a bare span inside a heading; the stop is a glyph, not
   a label, so it takes the colour and drops the rule. */
body.home .section-title-main span{color:var(--ct-red);border:0;}
body.home h3.section-title::after{
  content:"";grid-area:rule;width:86px;height:6px;margin-top:14px;background:var(--ct-red);
}

/* View all — Flatsome's own link_output, dressed as the comp's button. */
/* Flatsome right-aligns this link with margin-left:auto. An auto margin absorbs
   the free space in a grid track before justify-self is even consulted, so the
   side is set by the margins here, not by an alignment property. */
body.home h3.section-title > a{
  grid-area:view;align-self:end;margin-left:auto;margin-right:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;
  background:#fff;color:#000;border:1px solid rgba(0,0,0,.16);
  text-decoration:none;white-space:nowrap;
  font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:4px 4px 0 rgba(0,0,0,.10);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
body.home h3.section-title > a:hover{
  background:var(--ct-ink);color:#fff;box-shadow:4px 4px 0 var(--ct-red);transform:translateY(-2px);
}
/* The shortcode appends a chevron; the comp's button is type only. */
body.home h3.section-title > a i{display:none;}

/* ---------------------------------------------------------------- cards */
/* The offset shadow sits outside the card box, so the slider track needs the
   room or Flickity's viewport clips it. */
body.home .row-slider{padding-bottom:16px;}
body.home .row-slider .col{padding-bottom:12px;}

body.home .product-small.box{
  position:relative;padding:8px;
  background:#fff;border:1px solid rgba(0,0,0,.14);
  box-shadow:7px 7px 0 rgba(0,0,0,.12);
  transition:transform .22s ease,box-shadow .22s ease;
}
/* The red tag in the corner is decorative and carries no state, so it stays in
   CSS rather than in the product markup. */
body.home .product-small.box::before{
  content:"";position:absolute;top:8px;right:8px;width:11px;height:11px;
  background:var(--ct-red);z-index:3;pointer-events:none;
}
body.home .product-small.box:hover{
  transform:translateY(-3px);box-shadow:7px 7px 0 var(--ct-red);
}

body.home .product-small.box .box-image{
  background:var(--ct-cream);border:1px solid rgba(0,0,0,.10);overflow:hidden;
}
body.home .product-small.box .box-image img{transition:transform .28s ease,opacity .28s ease;}
body.home .product-small.box:hover .box-image img{transform:scale(1.03);}

/* ----------------------------------------------------------- card text */
body.home .product-small.box .box-text{padding:10px 2px 2px;text-align:left;}
/* Collection eyebrow above the name. The comp's product card has no such line,
   so it borrows the journal card's tag settings — same size, weight, tracking
   and red — which keeps one eyebrow style across both kinds of card.
   Flatsome ships it at opacity .8 via its op-8 class; at 10px that reads washed,
   so the colour carries the emphasis instead. */
body.home .product-small.box .box-text .category{
  display:block;margin:0 0 6px;opacity:1;
  color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.2em;line-height:1.3;text-transform:uppercase;
}
body.home .product-small.box .product-title{margin:0;}
body.home .product-small.box .product-title a{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* Exactly two lines. A fixed 32px left 2.6px of a clamped third line showing
     under the ellipsis once the type stepped down to 14px on small screens. */
  min-height:calc(2 * 1.05em);color:#000;
  font-size:15px;line-height:1.05;font-weight:950;letter-spacing:-.04em;text-transform:uppercase;
  transition:color .18s ease;
}
body.home .product-small.box:hover .product-title a{color:var(--ct-red);}
body.home .product-small.box .price-wrapper{margin-top:7px;}
body.home .product-small.box .price-wrapper .price,
body.home .product-small.box .price-wrapper .price .amount{
  color:var(--ct-ink);font-size:13px;line-height:1.2;font-weight:950;
}

body.home .product-small.box a:focus-visible{outline:3px solid var(--ct-red-ink);outline-offset:3px;}

/* ----------------------------------------------------------- responsive */
@media (max-width:849px){
  /* The two-column head is kept at every width: the title column is minmax(0,1fr)
     so it shrinks and wraps rather than pushing the button out, and the button is
     only ~76px wide. The margins stay as the base rule sets them. */
  body.home h3.section-title{margin-bottom:20px;column-gap:16px;}
  body.home h3.section-title > a{min-height:38px;padding:0 14px;font-size:10.5px;}
  body.home h3.section-title > a:hover{transform:none;}
  body.home .section-title-main{font-size:clamp(30px,9vw,42px);}
  body.home h3.section-title::after{width:70px;height:5px;margin-top:10px;}
  body.home .product-small.box{box-shadow:6px 6px 0 rgba(0,0,0,.12);}
  body.home .product-small.box:hover{transform:none;box-shadow:6px 6px 0 rgba(0,0,0,.12);}
  body.home .product-small.box:hover .box-image img{transform:none;}
  body.home .product-small.box .product-title a{font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
  body.home .product-small.box,
  body.home .product-small.box .box-image img,
  body.home .product-small.box .product-title a{transition:none;}
  body.home .product-small.box:hover{transform:none;}
  body.home .product-small.box:hover .box-image img{transform:none;}
}


/* ------------------------------------------------------- journal cards */
/* Ported from the prototype's .ct-blog-card onto Flatsome's blog box. The comp
   deliberately carries no post date — the card is built to read complete without
   one — so the overlay badge goes and the space returns to the picture. */
body.home .box-blog-post{
  position:relative;
  background:#fff;border:1px solid rgba(0,0,0,.14);
  box-shadow:4px 4px 0 rgba(0,0,0,.10);
  transition:transform .2s ease,box-shadow .2s ease;
}
body.home .box-blog-post::before{
  content:"";position:absolute;top:0;right:0;width:14px;height:14px;
  background:var(--ct-red);z-index:3;pointer-events:none;
}
body.home .box-blog-post:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ct-red);}

/* The date rides the picture as an overlay chip, which is where Flatsome puts
   it and the only place CSS can keep it without moving the markup. Ink rather
   than red: the red corner square is already on this card, and two red marks on
   one image compete. */
body.home .box-blog-post .badge.post-date{
  top:0;left:0;right:auto;margin:0;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;
}
body.home .box-blog-post .badge.post-date .badge-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:52px;padding:8px 6px;
  background:var(--ct-ink);color:#fff;border:0;border-radius:0;box-shadow:none;
}
body.home .box-blog-post .badge.post-date .post-date-day{
  font-size:17px;font-weight:900;line-height:1;letter-spacing:-.02em;
}
body.home .box-blog-post .badge.post-date .post-date-month{
  margin-top:3px;color:rgba(255,255,255,.82);
  font-size:9px;font-weight:900;line-height:1;letter-spacing:.18em;text-transform:uppercase;
}
/* Flatsome inserts a <br> between the two lines; the flex column already stacks
   them, and the break would add a stray line box. */
body.home .box-blog-post .badge.post-date .badge-inner br{display:none;}

/* 16:10, the comp's crop; Flatsome ships 16:9. */
body.home .box-blog-post .box-image{overflow:hidden;background:#E6DFD2;}
body.home .box-blog-post .image-cover{padding-top:62.5%!important;}
body.home .box-blog-post .box-image img{transition:transform .35s ease;}
body.home .box-blog-post:hover .box-image img{transform:scale(1.04);}

body.home .box-blog-post .box-text{padding:18px 20px 20px;text-align:left;}
body.home .box-blog-post .blog-post-inner{
  display:flex;flex-direction:column;gap:9px;height:100%;
}
/* Flatsome rules a divider under the title; the comp separates with space. */
body.home .box-blog-post .is-divider{display:none;}

body.home .box-blog-post .post-title{margin:0;}
body.home .box-blog-post .post-title a{
  color:#0E1013;font-size:19px;line-height:1.22;font-weight:900;letter-spacing:-.02em;
  text-transform:none;
}
/* The comp makes the whole card one link. The title's anchor is stretched to
   cover the card, which keeps that behaviour without touching the markup —
   the image carries its own anchor to the same post, so nothing is lost. */
body.home .box-blog-post .post-title a::after{content:"";position:absolute;inset:0;z-index:2;}

body.home .box-blog-post .from_the_blog_excerpt{
  margin:0;color:rgba(0,0,0,.66);font-size:14px;line-height:1.6;
}
/* The read-more cue is decoration: the card itself is the link, so this is a
   pseudo-element rather than a second anchor competing with it. */
body.home .box-blog-post .blog-post-inner::after{
  content:"Read more \2192";margin-top:auto;padding-top:6px;
  color:var(--ct-red-ink);
  font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
body.home .box-blog-post:hover .blog-post-inner::after{
  text-decoration:underline;text-underline-offset:3px;
}
body.home .box-blog-post .post-title a:focus-visible{
  outline:3px solid var(--ct-red-ink);outline-offset:3px;
}

@media (max-width:849px){
  body.home .box-blog-post{box-shadow:4px 4px 0 rgba(0,0,0,.10);}
  body.home .box-blog-post:hover{transform:none;box-shadow:4px 4px 0 rgba(0,0,0,.10);}
  body.home .box-blog-post:hover .box-image img{transform:none;}
  body.home .box-blog-post .post-title a{font-size:17px;}
}
@media (prefers-reduced-motion:reduce){
  body.home .box-blog-post,
  body.home .box-blog-post .box-image img{transition:none;}
  body.home .box-blog-post:hover{transform:none;}
  body.home .box-blog-post:hover .box-image img{transform:none;}
}

/* ==========================================================================
   FAQ — prototype `8xgear-home.html`, the `.fq` block
   Built from Flatsome's own Section / Row / Text / Button / Accordion so the
   questions stay editable in UX Builder, which is what the raw-HTML port the
   other blocks use cannot offer. The prototype's `<details>` becomes Flatsome's
   `a.accordion-title` + `.accordion-inner`, so the rules below dress that
   markup rather than the prototype's.
   ========================================================================== */

.x-fq .x-fq-kicker{
  margin:0 0 18px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
}
.x-fq .x-fq-title{
  margin:0;color:#0E1013;
  font-size:clamp(38px,4.8vw,66px);line-height:.88;
  font-weight:950;letter-spacing:-.055em;text-transform:uppercase;
}
.x-fq .x-fq-lead{
  margin:26px 0 0;max-width:34ch;font-size:16px;line-height:1.7;color:var(--ct-quiet);
}

/* The prototype's CTA: ink block, square, with a trailing arrow. Flatsome's
   button carries no icon, so the arrow is a masked pseudo-element — the same
   idiom the cart drawer's checkout button uses. */
.x-fq a.button.x-fq-cta{
  display:inline-flex;align-items:center;gap:11px;
  margin:28px 0 0;min-height:52px;padding:0 24px;
  background:var(--ct-ink);border:0;border-radius:0;color:#fff;
  font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:none;transition:background .16s ease;
}
.x-fq a.button.x-fq-cta:hover{background:#000;}
.x-fq a.button.x-fq-cta span{padding:0;}
.x-fq a.button.x-fq-cta::after{
  content:"";width:15px;height:15px;flex:0 0 auto;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ------------------------------------------------------------- accordion */
.x-fq .x-fq-list{border-top:2px solid var(--ct-ink);}
.x-fq .accordion-item{border-bottom:1px solid rgba(0,0,0,.14);}
.x-fq .accordion-title{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  margin:0;padding:26px 0;border:0;background:none;
  color:#0E1013;font-size:17px;font-weight:900;line-height:1.3;
  letter-spacing:-.01em;text-transform:uppercase;
}
.x-fq .accordion-title:hover{background:none;color:#000;}
.x-fq .accordion-title > span{flex:1 1 auto;}

/* Flatsome prints the toggle before the label; the design puts the mark at the
   far end of the row. The chevron glyph is dropped for the prototype's plus,
   which loses its upright bar when the row opens and so reads as a minus. */
.x-fq .accordion-title > .toggle{
  order:2;position:relative;flex:0 0 auto;
  width:18px;height:18px;min-height:0;margin:0;padding:0;
  background:none;border:0;opacity:1;transform:none;
}
.x-fq .accordion-title > .toggle i{display:none;}
.x-fq .accordion-title > .toggle::before,
.x-fq .accordion-title > .toggle::after{
  content:"";position:absolute;background:var(--ct-red);transition:transform .18s ease;
}
/* Centred on the button rather than offset from its edges: Flatsome gives
   `.toggle` a min-width this cannot override cleanly (it measured 24px against
   the 18px asked for), which left the upright bar 3px off centre. */
.x-fq .accordion-title > .toggle::before,
.x-fq .accordion-title > .toggle::after{left:50%;top:50%;}
.x-fq .accordion-title > .toggle::before{
  width:18px;height:4px;transform:translate(-50%,-50%);
}
.x-fq .accordion-title > .toggle::after{
  width:4px;height:18px;transform:translate(-50%,-50%);
}
.x-fq .accordion-title[aria-expanded="true"] > .toggle::after{
  transform:translate(-50%,-50%) scaleY(0);
}

.x-fq .accordion-inner{
  padding:0 44px 28px 0;max-width:68ch;
  font-size:15px;line-height:1.78;color:var(--ct-quiet);
}
.x-fq .accordion-inner p{margin:0;font-size:inherit;line-height:inherit;color:inherit;}

@media (max-width:849px){
  .x-fq .x-fq-lead{max-width:56ch;}
  .x-fq .accordion-title{font-size:15px;gap:18px;padding:22px 0;}
  .x-fq .accordion-inner{padding-right:0;}
  .x-fq a.button.x-fq-cta{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .x-fq .accordion-title > .toggle::before,
  .x-fq .accordion-title > .toggle::after,
  .x-fq a.button.x-fq-cta{transition:none;}
}

/* ==========================================================================
   Instagram — prototype `8xgear-home.html`, the `.ct-ig` block
   Same approach as the FAQ above: Flatsome's Section / Row / Text / Button /
   Image, so the six tiles and their links stay editable in UX Builder. The
   strip runs edge to edge through Flatsome's own `row-collapse row-full-width`
   rather than the prototype's 100vw margin trick.
   ========================================================================== */

.x-ig{overflow:hidden;}

/* The head keeps a readable gutter while the grid below runs to the edges. */
.x-ig .x-ig-head{
  max-width:1220px;margin:0 auto;padding:52px 22px 30px;align-items:flex-end;
}
.x-ig .x-ig-kicker{
  margin:0 0 8px;color:var(--ct-red);
  font-size:10px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;
}
.x-ig .x-ig-title{
  margin:0;color:#fff;font-size:clamp(34px,5.4vw,64px);line-height:.9;
  font-weight:950;letter-spacing:-.07em;text-transform:uppercase;
}
.x-ig .x-ig-title span{color:var(--ct-red);}
.x-ig .x-ig-title::after{
  content:"";display:block;width:86px;height:6px;background:var(--ct-red);margin-top:14px;
}
.x-ig .x-ig-actions > .col-inner{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
}
.x-ig .x-ig-handle{
  margin:0;color:rgba(255,255,255,.74);
  font-size:13px;font-weight:800;letter-spacing:.06em;white-space:nowrap;
}
.x-ig a.button.x-ig-follow{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin:0;min-height:44px;padding:0 20px;
  background:#fff;border:1px solid #fff;border-radius:0;color:#0B0D0F;
  font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;box-shadow:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.x-ig a.button.x-ig-follow:hover{
  background:var(--ct-red-ink);border-color:var(--ct-red-ink);color:#fff;
}
.x-ig a.button.x-ig-follow span{padding:0;}
.x-ig a.button.x-ig-follow::before{
  content:"";width:16px;height:16px;flex:0 0 auto;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ------------------------------------------------------------ tile strip */
.x-ig .x-ig-grid{margin:0;}
.x-ig .x-ig-tile,
.x-ig .x-ig-tile > .col-inner{padding:0;}
.x-ig .x-ig-tile .img{margin:0;}
/* The catalogue is shot portrait; the strip crops it square, as the design does. */
.x-ig .x-ig-tile .img-inner{aspect-ratio:1/1;overflow:hidden;background:#15181B;}
.x-ig .x-ig-tile .img-inner img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;
}
.x-ig .x-ig-tile .img > a{display:block;position:relative;}
.x-ig .x-ig-tile .img > a:hover img{transform:scale(1.06);}

/* Veil and glyph are two pseudo-elements on the link: the anchor is the only
   element Flatsome gives the tile that covers the whole image. */
.x-ig .x-ig-tile .img > a::before,
.x-ig .x-ig-tile .img > a::after{
  content:"";position:absolute;opacity:0;pointer-events:none;
  transition:opacity .22s ease;z-index:1;
}
.x-ig .x-ig-tile .img > a::before{inset:0;background:rgba(9,11,13,.52);}
.x-ig .x-ig-tile .img > a::after{
  left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;z-index:2;
  background-color:#fff;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") no-repeat center/contain;
}
.x-ig .x-ig-tile .img > a:hover::before,
.x-ig .x-ig-tile .img > a:hover::after,
.x-ig .x-ig-tile .img > a:focus-visible::before,
.x-ig .x-ig-tile .img > a:focus-visible::after{opacity:1;}
.x-ig .x-ig-tile .img > a:focus-visible{outline:3px solid var(--ct-red);outline-offset:-3px;}

/* The design steps the strip down at 900 and 560; Flatsome's own `medium`
   breakpoint is 849, which left six 147px tiles in a row across the 50px band
   between the two. The column widths are set here so the thresholds are the
   design's, not the grid framework's. */
@media (max-width:899px){
  .x-ig .x-ig-head{padding:40px 16px 24px;}
  .x-ig .x-ig-actions > .col-inner{justify-content:flex-start;}
  .x-ig .x-ig-tile{flex-basis:33.3333%;max-width:33.3333%;}
}
@media (max-width:559px){
  .x-ig .x-ig-head{padding:32px 16px 20px;}
  .x-ig .x-ig-tile{flex-basis:50%;max-width:50%;}
}
@media (prefers-reduced-motion:reduce){
  .x-ig .x-ig-tile .img-inner img,
  .x-ig .x-ig-tile .img > a::before,
  .x-ig .x-ig-tile .img > a::after{transition:none;}
  .x-ig .x-ig-tile .img > a:hover img{transform:none;}
}