/* =========================================================
   Color Jam — mobile shopping layer
   Loaded after main.css. Desktop is untouched: everything here is either
   hidden above 900px or sits inside a max-width query.

   Principles, from the mobile commerce research this is built on:
   - products two-up, so a shopper compares at a glance instead of scrolling
     a screen per piece;
   - the important controls (shop, cart, chat, add to cart) in the thumb zone;
   - every category one tap from the homepage;
   - long brand storytelling compressed into swipeable or two-up blocks;
   - nothing floating on top of the content.
   ========================================================= */

/* ---------- desktop defaults for mobile-only parts ---------- */
.cj-cats,.cj-tabbar,.cj-buybar,.cj-card__price-line,.cj-swatch-more{display:none}
.cj-services__track{display:contents}

@media (max-width:900px){

  :root{--cj-tabbar-h:62px;--cj-header-h:58px}

  /* Nothing may make the page wider than the phone. iOS Safari zooms the
     whole page out when anything overflows sideways — including the cart
     drawer parked off-screen to the right. */
  html,body{overflow-x:clip}
  .cj-drawer{overflow:hidden}
  .woocommerce div.product .related,
  .woocommerce div.product .upsells,
  .woocommerce div.product .cj-bundle{min-width:0;max-width:100%}

  /* ---------- page chrome ---------- */
  body.cj-has-tabbar{padding-bottom:calc(var(--cj-tabbar-h) + env(safe-area-inset-bottom))}
  body.cj-has-buybar{padding-bottom:calc(74px + env(safe-area-inset-bottom))}

  /* The tab bar and buy bar carry WhatsApp now; the bubble only covered content. */
  .cj-wa{display:none!important}

  .cj-header{padding:9px var(--cj-gutter);min-height:var(--cj-header-h)}
  .cj-header__brand{height:36px}
  .cj-header__brand img{height:32px}
  /* Cart lives in the tab bar on pages that have one. */
  body.cj-has-tabbar .cj-header .cj-cart-link{display:none}

  /* Full-height menu with large, easy targets. */
  .cj-header.is-open{min-height:100svh;align-content:flex-start;overflow-y:auto}
  .cj-header.is-open .cj-nav{border-top:1px solid rgba(246,241,235,.2);margin-top:14px;padding-top:22px}
  .cj-header.is-open .cj-nav ul{gap:4px}
  .cj-header.is-open .cj-nav a{
    display:block;padding:10px 0;font-family:var(--cj-display);font-size:30px;
    letter-spacing:.01em;text-transform:none;
  }
  /* Open menu: logo and close on top, links, then the consultation button last. */
  .cj-header.is-open .cj-header__tools{display:contents}
  .cj-header.is-open .cj-header__brand{order:1}
  .cj-header.is-open .cj-cart-link{order:2;margin-left:auto}
  .cj-header.is-open .cj-burger{order:3}
  .cj-header.is-open .cj-nav{order:4}
  .cj-header.is-open .cj-header__cta{order:5;flex-basis:100%;margin-top:26px;padding:16px 22px;text-align:center}

  /* ---------- bottom tab bar ---------- */
  .cj-tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    background:rgba(251,248,244,.97);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--cj-rule-soft);
    box-shadow:0 -6px 24px rgba(43,35,32,.06);
    transition:transform .3s var(--cj-ease);
  }
  .cj-tabbar__item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:54px;color:var(--cj-soft);
    font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
  }
  .cj-tabbar__item svg{display:block}
  .cj-tabbar__item.is-active{color:var(--cj-burgundy)}
  .cj-tabbar__item.is-active span:last-child{font-weight:500}
  .cj-tabbar__item--chat svg{color:#1f9a52}
  .cj-tabbar__icon{position:relative;display:inline-flex}
  .cj-tabbar__badge{
    position:absolute;top:-5px;right:-11px;min-width:18px;height:18px;padding:0 5px;
    border-radius:9px;background:var(--cj-burgundy);color:var(--cj-cream);
    font-size:10px;line-height:18px;text-align:center;letter-spacing:0;
  }
  .cj-tabbar__badge[hidden]{display:none}
  body.cj-drawer-open .cj-tabbar,
  .cj-header.is-open ~ .cj-tabbar{transform:translateY(110%)}

  /* ---------- sticky buy bar (product pages) ---------- */
  .cj-buybar{
    display:flex;align-items:center;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:96;
    padding:10px var(--cj-gutter) calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,248,244,.98);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--cj-rule-soft);box-shadow:0 -8px 28px rgba(43,35,32,.08);
    transform:translateY(110%);transition:transform .3s var(--cj-ease);
  }
  .cj-buybar.is-visible{transform:none}
  body.cj-drawer-open .cj-buybar{transform:translateY(110%)}
  .cj-buybar__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  .cj-buybar__name{
    font-family:var(--cj-display);font-size:17px;line-height:1.15;color:var(--cj-ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cj-buybar__meta{font-size:13px;color:var(--cj-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cj-buybar__price{color:var(--cj-burgundy)}
  .cj-buybar__price del{opacity:.5}
  .cj-buybar__finish:not(:empty)::before{content:"·";margin:0 6px;color:var(--cj-soft)}
  .cj-buybar__chat{
    flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;
    border:1px solid var(--cj-rule);color:#1f9a52;
  }
  .cj-buybar__add{
    flex:0 0 auto;height:48px;padding:0 20px;border:0;cursor:pointer;
    background:var(--cj-burgundy);color:var(--cj-cream);
    font-family:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  }
  .cj-buybar__add.is-loading{opacity:.6}

  /* ---------- homepage order ---------- */
  /* Shopping first, story second: hero, categories, products, then the brand. */
  body.home main#main{display:flex;flex-direction:column}
  body.home main#main > .cj-hero{order:1}
  body.home main#main > .cj-marquee{order:2}
  body.home main#main > .cj-cats{order:3}
  body.home main#main > #collections{order:4}
  body.home main#main > .cj-brand{order:5}
  body.home main#main > #services{order:6}
  body.home main#main > #process{order:7}
  body.home main#main > #about{order:8}
  body.home main#main > .cj-cta{order:9}

  /* ---------- hero ---------- */
  .cj-hero{padding:calc(var(--cj-header-h) + 72px) 0 56px;min-height:min(78svh,620px);display:flex;align-items:center}
  .cj-hero__inner{gap:20px;width:100%}
  .cj-hero__title{font-size:clamp(40px,11.5vw,64px)}
  .cj-hero__lede{font-size:15px;max-width:34ch}
  .cj-hero__meta{display:none}
  .cj-hero__actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px;gap:6px}
  .cj-hero__actions .cj-btn{width:100%;text-align:center}
  /* One clear primary action; the second reads as a link. */
  .cj-hero__actions .cj-btn--outline{border-color:transparent;background:none;text-decoration:underline;text-underline-offset:5px}

  .cj-marquee{padding:12px 0}
  .cj-marquee__track{font-size:20px}

  /* ---------- shop by category ---------- */
  .cj-cats{display:block;padding:28px var(--cj-gutter) 6px}
  .cj-cats__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
  .cj-cats__title{font-family:var(--cj-display);font-size:24px;font-weight:400;line-height:1.1}
  .cj-cats__all{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cj-burgundy);border-bottom:1px solid currentColor;padding-bottom:2px}
  .cj-cats__row{
    display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px) / 3);gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    scroll-padding-inline:0;
  }
  .cj-cats__row::-webkit-scrollbar{display:none}
  .cj-cat{display:flex;flex-direction:column;gap:3px;color:var(--cj-ink);scroll-snap-align:start}
  .cj-cat__media{display:block;aspect-ratio:1/1;background:var(--cj-panel);padding:12%;margin-bottom:6px;overflow:hidden}
  .cj-cat__media img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;transition:transform .5s var(--cj-ease)}
  .cj-cat__media.is-photo{padding:0}
  .cj-cat__media.is-photo img{object-fit:cover;mix-blend-mode:normal}
  .cj-cat:active .cj-cat__media img{transform:scale(.97)}
  .cj-cat__name{font-size:15px;font-weight:500}
  .cj-cat__count{font-size:11px;color:var(--cj-soft);letter-spacing:.04em}

  /* ---------- section rhythm ---------- */
  .cj-section{padding:56px var(--cj-gutter)}
  .cj-section-head{gap:14px}
  .cj-section-head h2{font-size:clamp(30px,8.4vw,40px)}

  /* Filter chips: one swipeable row instead of wrapping lines. */
  .cj-filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(var(--cj-gutter) * -1);padding:2px var(--cj-gutter);width:calc(100% + var(--cj-gutter) * 2);
  }
  .cj-filters::-webkit-scrollbar{display:none}
  .cj-filter{flex:0 0 auto;padding:10px 16px}

  /* ---------- homepage collections ---------- */
  .cj-collections{padding-top:28px;padding-bottom:48px}
  .cj-collections .cj-card.is-capped{display:none}
  .cj-collections__more{padding-top:28px}
  .cj-collections__more .cj-btn{width:100%;text-align:center}

  /* ---------- brand intro ---------- */
  .cj-brand{padding:44px var(--cj-gutter) 40px;gap:24px;background:var(--cj-cream-2)}
  .cj-brand__copy{gap:16px}
  .cj-brand__statement{font-size:22px;line-height:1.35}
  .cj-brand__body{
    font-size:15px;line-height:1.75;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }
  .cj-brand__grid{gap:10px}
  .cj-brand__grid img:nth-child(2){margin-top:0}

  /* ---------- services: swipeable cards ---------- */
  .cj-services__track{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(var(--cj-gutter) * -1);padding:4px var(--cj-gutter) 6px;
    scroll-padding:0 var(--cj-gutter);
  }
  .cj-services__track::-webkit-scrollbar{display:none}
  .cj-service,
  .cj-service:last-child{
    flex:0 0 84%;display:flex;flex-direction:column;gap:0;padding:0;border:0;
    background:var(--cj-panel);scroll-snap-align:start;
  }
  .cj-service__media,
  .cj-service--flipped .cj-service__media{order:0;height:210px}
  .cj-service__copy,
  .cj-service--flipped .cj-service__copy{order:1;padding:20px 18px 22px;gap:10px}
  .cj-service__icon{display:none}
  .cj-service__title{font-size:23px}
  .cj-service__body{
    font-size:14px;line-height:1.7;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* ---------- process: two-up ---------- */
  .cj-steps{grid-template-columns:1fr 1fr;gap:0 18px}
  .cj-step,
  .cj-step:first-child,
  .cj-step:last-child,
  .cj-step:nth-child(2),
  .cj-step:nth-child(3),
  .cj-step:nth-child(-n+2){
    padding:18px 0;border:0;border-top:1px solid var(--cj-rule-soft);gap:6px;
  }
  .cj-step__num{font-size:30px}
  .cj-step__title{font-size:16px}
  .cj-step p{font-size:13px;line-height:1.6}

  /* ---------- personality: two-up ---------- */
  .cj-about__layout{gap:26px}
  .cj-about__title{font-size:30px}
  .cj-about__lede{font-size:14px}
  .cj-traits{grid-template-columns:1fr 1fr;gap:22px 16px}
  .cj-trait{padding-top:12px;gap:6px}
  .cj-trait h3{font-size:18px;line-height:1.2}
  .cj-trait p{font-size:13px;line-height:1.6}

  /* ---------- closing CTA ---------- */
  /* Stacked: the whole photo (portrait version on phones), then the text. */
  .cj-cta{grid-template-columns:1fr}
  .cj-cta__media{height:auto;max-height:none;aspect-ratio:auto}
  .cj-cta__overlay{padding:34px var(--cj-gutter) 40px}
  .cj-cta__inner{gap:20px;max-width:none;width:100%}
  .cj-cta__title{font-size:28px}
  .cj-cta .cj-btn{width:100%;text-align:center}

  /* ---------- footer ---------- */
  .cj-footer{padding:48px var(--cj-gutter) 28px}
  .cj-footer__top{grid-template-columns:1fr 1fr;gap:30px 20px;padding-bottom:30px}
  .cj-footer__lead{grid-column:1/-1;gap:18px}
  .cj-footer__title{font-size:34px}
  .cj-footer__col{gap:8px;font-size:14px}
  .cj-footer__col ul{gap:2px}
  .cj-footer__col a{word-break:break-word}
  .cj-footer__bottom{flex-direction:column;gap:6px;font-size:10px;letter-spacing:.18em}

  /* ---------- shop / category pages ---------- */
  .cj-page{padding-top:calc(var(--cj-header-h) + 26px)}
  .cj-shop-head{gap:16px}
  .cj-shop-head .cj-page__title,
  .cj-page__title{font-size:clamp(32px,9vw,44px)}
  .woocommerce .woocommerce-ordering{margin:14px 0 0;float:none}
  .woocommerce .woocommerce-ordering select{width:100%;padding:12px 14px}
  .woocommerce .woocommerce-result-count{display:none}

  /* ---------- product page ---------- */
  .woocommerce div.product{gap:22px}
  .woocommerce div.product .product_title{font-size:32px;margin-bottom:6px}
  .woocommerce div.product p.price{font-size:20px;margin-bottom:10px}
  .woocommerce div.product .woocommerce-product-details__short-description{font-size:15px;line-height:1.7}
  .woocommerce div.product form.cart{margin:22px 0 8px}
  .woocommerce div.product form.cart .single_add_to_cart_button{flex:1 1 auto;min-height:50px}
  .woocommerce div.product .woocommerce-tabs{margin-top:28px}

  /* Often bought together: compact rows instead of a tall stack. */
  .cj-bundle{margin-top:32px;padding-top:26px}
  .cj-bundle__title{font-size:24px;margin-bottom:16px}
  .cj-bundle__items{display:flex;flex-direction:column;gap:10px}
  .cj-bundle__item{
    display:grid;grid-template-columns:72px 1fr;column-gap:14px;row-gap:2px;align-items:center;
    padding-bottom:10px;border-bottom:1px solid var(--cj-rule-soft);
  }
  .cj-bundle__thumb{grid-row:1 / span 3;width:72px;padding:8px}
  .cj-bundle__name{font-size:14px}
  .cj-bundle__price{font-size:13px}
  .cj-bundle__foot{gap:14px}
  .cj-bundle__foot .cj-btn{width:100%;text-align:center}

  /* Related products: a swipeable rail, not another full grid. */
  .woocommerce div.product .related.products{margin-top:36px}
  .woocommerce div.product .related.products > h2{font-family:var(--cj-display);font-size:24px;font-weight:400;margin-bottom:14px}
  .woocommerce div.product .related ul.products,
  .woocommerce div.product .upsells ul.products{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(var(--cj-gutter) * -1);padding:0 var(--cj-gutter) 4px;
    /* Without this, snapping parks the first card against the screen edge. */
    scroll-padding-inline:var(--cj-gutter);
  }
  .woocommerce div.product .related ul.products::-webkit-scrollbar{display:none}
  .woocommerce div.product .related ul.products li.product,
  .woocommerce div.product .upsells ul.products li.product{flex:0 0 44%;scroll-snap-align:start;margin:0}
}

/* ---------- phones: two-up product grids ---------- */
@media (max-width:640px){
  .cj-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px;padding-top:22px}

  .cj-card{gap:10px}
  .cj-card__media > a{padding:9%}
  .cj-card__cat,
  .cj-card__price,
  .cj-card__finish{display:none}
  .cj-card__foot{flex-direction:column;align-items:flex-start;gap:4px}
  .cj-card__names{gap:3px}
  .cj-card__title{font-size:16px;line-height:1.2}
  .cj-card__price-line{display:block;font-size:13px;color:var(--cj-ink);letter-spacing:.02em}
  .cj-card__price-line del{opacity:.5;margin-right:4px}

  /* Small dots, finger-sized hit areas. */
  .cj-swatches{gap:9px;padding-top:6px;flex-wrap:nowrap}
  .cj-swatch{position:relative;width:15px;height:15px}
  .cj-swatch::after{content:"";position:absolute;inset:-7px -4px}
  .cj-swatch.is-active{outline-width:2px;outline-offset:1px;outline-color:var(--cj-ink);border-color:var(--cj-cream)}
  .cj-swatch.is-overflow{display:none}
  .cj-swatch-more{display:inline-block;font-size:11px;color:var(--cj-soft);align-self:center;line-height:15px}

  /* Project cards follow the same two-up rhythm. */
  .cj-grid--projects{gap:24px 12px}
  .cj-project-card .cj-card__title{font-size:16px}
  .cj-project-card .cj-card__cat{display:none}
}

@media (max-width:360px){
  .cj-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products{gap:22px 10px}
  .cj-card__title{font-size:15px}
  .cj-buybar__chat{display:none}
}