/* Product category (catalog archive).
     Everything the category template needs that main.css does not already
     ship: the category head with the factory-painting card, the filter
     column, the toolbar, the applied-filter chips, the colour swatches on a
     card, the benefits row and the collapsible SEO text.

     .pgrid, .prod, .badge and .feat-chip come from main.css (the home
     carousels use the same card) — only the catalog-specific additions to
     them live here. */

  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cat-head{padding:22px 0 26px}
  .cat-head .ch-in{background:var(--soft); border-radius:14px; padding:34px 38px}
  .cat-head h1{font-size:clamp(28px,3.4vw,42px); display:flex; align-items:center; gap:16px; flex-wrap:wrap}
  .cat-head .cnt{font-family:"General Sans",sans-serif; font-size:14px; font-weight:600; color:var(--brand-d);
                 background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 12px}
  .ch-more p{margin-top:7px}
  .cat-head p{margin-top:10px; color:#3d4136; font-size:15px; line-height:1.5}


  .catalog{padding:20px 0 60px}
  .cat-layout{display:grid; grid-template-columns:210px 1fr; gap:28px; align-items:start}
  .filters{position:sticky; top:96px; border:none; border-radius:0; background:transparent; overflow:hidden}
  .filters .fhead{display:flex; align-items:center; justify-content:space-between; padding:0 0 12px; border-bottom:1px solid var(--line)}
  .filters .fhead b{font-family:"Anybody",sans-serif; font-size:15px}
  .fclose{display:none; background:none; border:none; cursor:pointer; padding:4px; margin-left:10px; color:var(--mut); vertical-align:middle}
  .fclose svg{width:20px; height:20px}
  .fclose:hover{color:var(--ink)}
  .fapply{display:none}
  .fmask{position:fixed; inset:0; background:rgba(15,20,10,.45); opacity:0; visibility:hidden; transition:.2s; z-index:190}
  .fmask.on{opacity:1; visibility:visible}
  .filters .clear{font-size:12.5px; color:var(--mut); background:none; border:none; cursor:pointer; text-decoration:underline}
  .filters .clear:hover{color:var(--ink)}
  .fgroup{border-bottom:1px solid var(--line)}
  .fgroup:last-child{border-bottom:none}
  .fgroup>summary{list-style:none; cursor:pointer; padding:12px 0; font-weight:600; font-size:14px;
                  display:flex; align-items:center; justify-content:space-between}
  .fgroup>summary::-webkit-details-marker{display:none}
  .fgroup>summary::after{content:""; width:8px; height:8px; flex:0 0 8px; margin-right:4px;
                         border-right:1.6px solid var(--mut); border-bottom:1.6px solid var(--mut);
                         transform:rotate(45deg) translateY(-2px); transition:transform .2s}
  .fgroup[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
  .fbody{padding:2px 0 13px}
  .fopt{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14px; cursor:pointer}
  .fopt input{width:17px; height:17px; accent-color:var(--brand); flex:0 0 17px; margin:0}
  .fopt .n{margin-left:auto; font-size:12.5px; color:var(--mut)}
  /* Sub-labels and chips. */
  .lbl-sm{font-size:12.5px; color:var(--mut); margin-bottom:5px}
  .fseg{display:flex; gap:4px; margin:4px 0 12px}
  .fbody .lbl-sm{font-size:13px; color:var(--ink); font-weight:600; margin:2px 0 0}
  .fseg button{flex:1; padding:6px 4px; border:1px solid var(--line); border-radius:8px; background:#fff;
               font:inherit; font-size:12px; cursor:pointer; color:var(--ink); white-space:nowrap}
  .fseg button.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
  .fseg button:not(.on):hover{border-color:var(--ink)}
  .fprof[hidden]{display:none}
  .fgroup>summary .f-sub{font-weight:400; font-size:12px; color:var(--brand-d); margin-left:7px}
  .fgroup>summary .f-sub[hidden]{display:none}
  .fprofs{display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:4px 0 2px}
  .fprof{display:block; position:relative; cursor:pointer; border:1.5px solid var(--line); border-radius:9px;
         padding:7px 9px 8px; transition:.15s; background:#fff}
  .fprof input{position:absolute; opacity:0; width:0; height:0}
  .fprof .pv{display:block; opacity:.85; padding:6px 0 6px}
  .fprof .pv img{width:100%; height:26px; object-fit:contain; display:block}
  .fprof .pn{display:block; font-size:12.5px; line-height:1.25; margin-top:2px}
  .fprof .n{position:absolute; right:8px; top:6px; font-size:11px; color:var(--mut); background:#fff; padding:0 2px; border-radius:4px}
  .fprof:hover{border-color:var(--ink)}
  .fprof:has(input:checked){border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
  .fprof:has(input:checked) .pv{opacity:1}
  .fchips{display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 2px}
  .fchips label{cursor:pointer}
  .fchips input{position:absolute; opacity:0; width:0; height:0}
  .fchips span{display:inline-block; border:1px solid var(--line); border-radius:7px; padding:6px 11px; font-size:14px; transition:.15s}
  .fchips label:hover span{border-color:var(--ink)}
  .fchips input:checked+span{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
  /* Colour swatches. */
  .fsearch{display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:8px; padding:7px 9px; margin:4px 0 10px}
  .fsearch svg{width:15px; height:15px; color:var(--mut); flex:0 0 15px}
  .fsearch input{border:none; outline:none; font:inherit; font-size:14px; width:100%; background:none}
  /* Category head: colour dots plus the factory-painting card. */
  .vMix{display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:center;
        background:var(--soft); border-radius:14px; padding:28px 32px}
  @media(max-width:900px){ .vMix{grid-template-columns:1fr} }
  .mx-cols{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-top:14px}
  .mx-sws{display:inline-flex; gap:5px; flex:0 0 auto}
  .mx-sws img{width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid #fff;
              box-shadow:0 0 0 1px var(--line); margin-left:-9px}
  .mx-sws img:first-child{margin-left:0}
  .mx-txt b{display:block; font-size:14.5px; font-weight:600}
  .mx-txt i{font-style:normal; display:block; font-size:13px; color:var(--mut); margin-top:1px}
  .prod[hidden]{display:none}
  .mx-card{display:flex; align-items:stretch; background:#fff; border:1px solid var(--line);
           border-radius:12px; overflow:hidden}
  .mx-pic{flex:0 0 118px; display:block; position:relative; background:var(--bg2)}
  .mx-pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .mx-card-t{padding:13px 15px; display:flex; flex-direction:column; justify-content:center; gap:3px}
  .mx-card-t b{font-size:14.5px; font-weight:600; line-height:1.25}
  .mx-card-t span{font-size:13px; color:var(--brand-d); font-weight:600}
  .mx-card-t .mx-link{margin-top:5px; font-size:13px; color:var(--brand); text-decoration:underline; text-underline-offset:3px}
  @media(max-width:900px){ .mx-pic{flex:0 0 96px} }
  .mx-link{font-size:13.5px; color:var(--brand); text-decoration:underline; text-underline-offset:3px}
  .ch-paint{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:10px 0 0; font-size:15px; color:var(--ink)}
  .ch-paint svg{width:19px; height:19px; flex:0 0 auto; color:var(--brand)}
  .ch-paint a{color:var(--brand); text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
  .fcolors{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
  .fcolors label{position:relative; cursor:pointer; line-height:0}
  .fcolors input{position:absolute; opacity:0; width:0; height:0}
  .fcolors .sw{display:block; width:26px; height:26px; border-radius:50%; overflow:hidden;
               box-shadow:0 0 0 1px var(--line) inset; position:relative}
  .fcolors .sw img{width:100%; height:100%; object-fit:cover; display:block}
  .fcolors label:hover .sw{transform:scale(1.09)}
  .fcolors input:checked+.sw{box-shadow:0 0 0 2px var(--brand), 0 0 0 3px #fff inset}
  .fcolors label.x{display:none}
  .fcolors.all label.x{display:block}
  .fmore{display:inline-block; margin-top:11px; font:inherit; background:none; border:none; padding:0; cursor:pointer; font-size:12.5px; color:var(--mut); text-decoration:underline; text-underline-offset:3px}
  .fmore:hover{color:var(--ink)}
  /* Radio rows. */
  .fradio{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14px; cursor:pointer}
  .fradio input{width:16px; height:16px; accent-color:var(--brand); flex:0 0 16px; margin:0}
  .fradio .n{margin-left:auto; font-size:12.5px; color:var(--mut)}
  .range{position:relative; padding:16px 8px 4px}
  .rtrack{position:relative; height:4px; background:var(--line); border-radius:2px}
  .rfill{position:absolute; top:0; bottom:0; background:var(--brand); border-radius:2px}
  .range input[type=range]{position:absolute; left:8px; right:8px; width:calc(100% - 16px); top:10px; margin:0;
                           -webkit-appearance:none; appearance:none; background:none; pointer-events:none; height:20px}
  .range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; pointer-events:auto; width:18px; height:18px;
        border-radius:50%; background:#fff; border:2px solid var(--brand); box-shadow:0 1px 4px rgba(20,30,15,.25); cursor:pointer}
  .range input[type=range]::-moz-range-thumb{pointer-events:auto; width:18px; height:18px; border-radius:50%;
        background:#fff; border:2px solid var(--brand); box-shadow:0 1px 4px rgba(20,30,15,.25); cursor:pointer}
  .rvals{display:flex; justify-content:space-between; margin-top:14px; font-size:14px; color:var(--mut)}
  .rvals b{color:var(--ink); font-weight:600}
  .fswitch{display:flex; align-items:center; gap:10px; padding:12px 0; font-size:14px; cursor:pointer; font-weight:600}
  .fswitch input{width:17px; height:17px; accent-color:var(--brand); margin:0}

  .toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px}
  .toolbar .shown{font-size:14px; color:var(--mut)}
  .toolbar .sort{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--mut)}
  .ddown{position:relative}
  .dd-btn{display:flex; align-items:center; gap:14px; font-family:"General Sans",sans-serif; font-size:14px; font-weight:600; color:var(--ink);
          border:1.5px solid var(--line); border-radius:8px; padding:11px 18px; background:#fff; cursor:pointer; white-space:nowrap; transition:.15s}
  .dd-btn:hover{border-color:var(--brand); color:var(--brand-d)}
  .dd-btn svg{width:15px; height:15px; color:var(--mut); transition:transform .2s}
  .ddown.open .dd-btn{border-color:var(--brand)}
  .ddown.open .dd-btn svg{transform:rotate(180deg)}
  .dd-menu{position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line);
           border-radius:10px; box-shadow:0 14px 34px rgba(20,30,15,.14); padding:6px; min-width:230px; display:none; z-index:130}
  .ddown.open .dd-menu{display:block}
  .dd-menu button{display:flex; align-items:center; gap:9px; width:100%; text-align:left; font:inherit; font-size:14px;
                  color:var(--ink); background:none; border:none; border-radius:7px; padding:9px 11px; cursor:pointer}
  .dd-menu button:hover{background:var(--soft)}
  .dd-menu button::before{content:""; width:15px; height:15px; flex:0 0 15px; opacity:0;
        background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359932F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l6 6L20 6'/></svg>")}
  .dd-menu button.on{color:var(--brand-d); font-weight:600}
  .dd-menu button.on::before{opacity:1}
  .fbtn{display:none; align-items:center; gap:9px; font-family:"General Sans",sans-serif; font-size:14px; font-weight:600; color:var(--ink);
        background:#fff; border:1.5px solid var(--line); border-radius:8px; padding:11px 18px; cursor:pointer; transition:.15s}
  .fbtn:hover{border-color:var(--brand); color:var(--brand-d)}
  .fbtn svg{width:18px; height:18px}
  .achips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
  .achip{display:inline-flex; align-items:center; gap:8px; background:var(--soft); border:1px solid var(--line);
         border-radius:8px; padding:6px 11px; font-size:14px}
  .achip button{background:none; border:none; cursor:pointer; color:var(--mut); font-size:15px; line-height:1; padding:0}
  .achip button:hover{color:var(--ink)}

  .pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px 22px}
  .pgrid .prod{flex:none; width:auto}
  .pgrid .prod .price{align-items:center; gap:2px 8px}
  .prod .media.tinted .ph img{object-fit:cover}
  /* Already-painted product: one fixed colour, no swatch row. */
  .pr-fixed{display:inline-flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto; font-size:12.5px; color:var(--mut)}
  .pr-fixed i{width:17px; height:17px; border-radius:50%; background-size:cover; background-position:center;
              box-shadow:0 0 0 1px var(--line) inset; flex:0 0 17px}
  .pr-fixed b{font-weight:600; color:var(--ink); white-space:nowrap}
  .pr-colors{display:inline-flex; align-items:center; gap:4px; margin-left:auto; flex:0 0 auto}
  .pr-colors .cc{width:17px; height:17px; padding:0; border-radius:50%; overflow:hidden; display:block; cursor:pointer;
                 border:1.5px solid #fff; box-shadow:0 0 0 1px var(--line); transition:.15s; background:none}
  .pr-colors .cc img{width:100%; height:100%; object-fit:cover; display:block}
  .pr-colors .cc:hover{box-shadow:0 0 0 1.5px var(--ink)}
  .pr-colors .cc.on{box-shadow:0 0 0 2px var(--brand)}
  .pr-colors .cc-more{font-size:12px; color:var(--mut); text-decoration:underline; text-underline-offset:3px;
                      white-space:nowrap; margin-left:3px}
  .pr-colors .cc-more:hover{color:var(--brand-d)}

  .pgrid .prod .likutis{font-size:12.5px; color:var(--mut); margin-top:8px}
  .pgrid .prod .likutis b{color:var(--mut); font-weight:600}


  .more-wrap{margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
             display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
  .more-wrap .mw-cnt{font-size:14px; color:var(--mut)}
  .more-wrap .mw-cnt b{color:var(--ink); font-weight:600}
  .more-wrap .btn{padding:11px 22px; font-size:14px}
  @media(max-width:720px){.more-wrap{justify-content:center; text-align:center} .more-wrap .btn{width:100%; justify-content:center}}

  .cat-ben{padding:0 0 34px}
  .ben-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .ben{background:var(--soft); border-radius:12px; padding:20px 22px}
  .ben .bi{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px;
           background:#fff; color:var(--brand-d); margin-bottom:12px}
  .ben .bi svg{width:20px; height:20px}
  .ben b{display:block; font-family:"Anybody",sans-serif; font-size:15px; margin-bottom:6px}
  .ben p{font-size:14px; color:#3d4136; line-height:1.5}
  @media(max-width:1000px){.ben-row{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.ben-row{grid-template-columns:1fr}}

  .seo-text{padding:0 0 60px}
  .seo-text .box{background:var(--soft); border-radius:14px; overflow:hidden;
                 display:grid; grid-template-columns:1.25fr 1fr; align-items:stretch}
  .seo-text .seo-txt{padding:32px 36px}
  .seo-text .seo-img{position:relative; min-height:260px}
  .seo-text .seo-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 78%}
  @media(max-width:900px){.seo-text .box{grid-template-columns:1fr} .seo-text .seo-img{aspect-ratio:16/9; min-height:0; order:-1} .seo-text .seo-txt{padding:26px 22px}}
  .seo-text h2{font-size:22px; margin-bottom:10px}
  .seo-text p{color:#3d4136; max-width:85ch; margin:9px 0; font-size:15px}
  .seo-text summary{cursor:pointer; font-weight:600; color:var(--brand-d); margin-top:10px; list-style:none}
  .seo-text summary::-webkit-details-marker{display:none}
  .seo-text summary{display:inline-flex; align-items:center; gap:7px}
  .seo-text summary svg{width:15px; height:15px; transition:transform .2s}
  .seo-text details[open] summary svg{transform:rotate(180deg)}
  .seo-text summary .s-less{display:none}
  .seo-text details[open] summary .s-more{display:none}
  .seo-text details[open] summary .s-less{display:inline}

  @media(max-width:1100px){
    .cat-layout{grid-template-columns:1fr}
    .filters{position:fixed; inset:0 auto 0 0; width:min(360px,92vw); border-radius:0; z-index:200; background:#fff;
             transform:translateX(-100%); transition:.25s; overflow-y:auto; border:none; padding:0 18px 82px}
    .filters .fhead{position:sticky; top:0; background:#fff; z-index:2; padding:14px 0}
    .fclose{display:inline-block}
    .fapply{display:block; position:fixed; left:0; width:min(360px,92vw); bottom:0; padding:12px 16px;
            background:#fff; border-top:1px solid var(--line)}
    .fapply .btn{width:100%; justify-content:center}
    .filters.open{transform:none}
    .fbtn{display:inline-flex}
    .fgroup>summary{padding:16px 18px; font-size:16px}
    .fopt{padding:10px 0; font-size:16px}
    .fopt input{width:20px; height:20px; flex:0 0 20px}
    .pgrid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:720px){
    .cat-head .ch-in{padding:24px 22px}
    /* One card per row; the old price moves onto its own line above. */
    .pgrid{grid-template-columns:1fr; gap:26px}
    .pgrid .prod .price{flex-wrap:wrap}
    .pgrid .prod .price .old{order:-1; flex:0 0 100%; margin-bottom:2px}
    .pgrid .prod .media{aspect-ratio:16/10}
    .pgrid .prod .nm{font-size:17px}
    .toolbar .sort{margin-left:0; width:100%}
  }

  /* Additions the layout does not ship: AJAX filtering needs a busy state and
     an empty state, neither of which a static mock-up has. */
  .pgrid.is-busy{opacity:.45; pointer-events:none; transition:opacity .15s}
  .more-wrap .btn.is-busy{opacity:.6; pointer-events:none}
  .cat-empty{padding:44px 0 10px; text-align:center; color:var(--mut); font-size:15px}
  .cat-empty b{display:block; font-family:"Anybody",sans-serif; font-size:18px; color:var(--ink); margin-bottom:6px}
  .cat-empty .btn{margin-top:16px}

  /* The card's photo and name became links (the catalog card is clickable,
     the home carousels render the same part). .ph and .nm are styled by class
     in main.css, so only the anchor defaults need resetting. */
  .prod .nm{display:block}
  .prod .nm:hover{color:var(--brand-d)}

  /* Profile drawing, lower-right on the photo tile. */
  .prod .prof-dwg{position:absolute; right:12px; bottom:12px; width:44px; height:26px;
                  background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px; z-index:2}
  .prod .prof-dwg img{width:100%; height:100%; object-fit:contain; display:block}

  /* display:flex/grid on these blocks outranks the browser's [hidden] rule,
     so the attribute has to be honoured explicitly — otherwise "load more"
     and the empty state stay visible when the server marks them hidden. */
  .more-wrap[hidden], .achips[hidden], .cat-empty[hidden]{display:none}

  /* Promo block inside the grid ("board + painting"). Spans the full row and
     steps aside while a filter is active — a shopper narrowing the list wants
     products, not an ad. */
  .promo-inline{grid-column:1/-1; display:grid; grid-template-columns:1.15fr 1fr; gap:0; align-items:stretch;
                background:var(--soft); border-radius:14px; overflow:hidden}
  .promo-inline .pi-txt{padding:30px 34px}
  .promo-inline h3{font-size:clamp(20px,2.2vw,27px); margin:10px 0 10px}
  .promo-inline p{color:#3d4136; max-width:44ch; margin-bottom:18px; font-size:15px}
  .promo-inline .pi-link{display:inline-block; margin-left:18px; font-size:14px; font-weight:600; color:var(--brand-d);
                         text-decoration:underline; text-underline-offset:3px}
  .promo-inline .pi-link:hover{color:var(--ink)}
  .promo-inline .pi-img{position:relative; min-height:0}
  .promo-inline .pi-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .promo-inline[hidden]{display:none}
  @media(max-width:720px){
    .promo-inline{grid-template-columns:1fr}
    .promo-inline .pi-img{aspect-ratio:16/9; order:-1}
    .promo-inline .pi-txt{padding:22px}
  }