/* ========================================================================
   NOBLE FACTORY SHOP ARCHIVE
   Source-locked to supplied All Natural /all page.
   Desktop >=1200, tablet 810-1199, phone <=809.
   ======================================================================== */

body.nf-shop-page{background:#fff}
.nf-shop{padding-top:70px;background:#fff;overflow:visible}
.nf-shop__catalogue{display:flex;flex-direction:column;gap:20px;width:100%;max-width:1200px;margin:0 auto;padding:60px 40px 100px;background:#fff}
.nf-shop__desktop-sort{display:flex;justify-content:flex-end;align-items:center;width:100%;min-height:34px;overflow:visible}
.nf-shop__layout{display:flex;align-items:flex-start;gap:20px;width:100%;background:#fff}
.nf-shop__filters{position:relative;z-index:2;flex:0 0 250px;width:250px;align-self:stretch}
.nf-shop__filter-panel{position:sticky;top:80px;width:100%;background:#fff}
.admin-bar .nf-shop__filter-panel{top:112px}
.nf-shop__products{flex:1 0 0;min-width:0;width:1px;transition:opacity .2s ease-in-out}
.nf-shop__products.is-loading{opacity:.42;pointer-events:none}
.nf-shop__grid{display:grid;grid-template-columns:repeat(4,minmax(20px,1fr));gap:20px;width:100%;align-items:start;background:#fff}
.nf-shop__grid>.nf-product-card{width:100%;min-width:0}
.nf-shop__mobile-control-row,.nf-shop__mobile-sort{display:none}

/* Source Filter (n) heading. */
.nf-shop__filter-title{display:flex;align-items:center;justify-content:flex-start;gap:5px;width:100%;padding:0 0 20px;font:500 16px/100% var(--nf-font);letter-spacing:-.6px;color:#000}
.nf-shop__filter-count{font:500 16px/100% var(--nf-font);letter-spacing:-.6px}

/* Source accordion family: 10px vertical title padding, 16px chevron, 1px rules. */
.nf-shop-filter{position:relative;width:100%;border-top:1px solid rgba(0,0,0,.1)}
.nf-shop-filter:last-child{border-bottom:1px solid rgba(0,0,0,.1)}
.nf-shop-filter__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:37px;padding:10px 0;border:0;background:#fff;color:#000;font:500 16px/100% var(--nf-font);letter-spacing:-.6px;text-align:left;cursor:pointer}
.nf-shop-filter__trigger svg{display:block;width:16px;height:16px;fill:currentColor;transform:rotate(90deg);transition:transform .2s var(--nf-ease-source)}
.nf-shop-filter.is-open .nf-shop-filter__trigger svg{transform:rotate(270deg)}
.nf-shop-filter__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--nf-ease-source)}
.nf-shop-filter.is-open .nf-shop-filter__body{grid-template-rows:1fr}
.nf-shop-filter__body-inner{min-height:0;overflow:hidden;padding:0 0 0}
.nf-shop-filter.is-open .nf-shop-filter__body-inner{padding-bottom:20px}

/* All Natural filter checkbox: 7px row padding, 18px square, 4px radius,
   14px Inter / -0.5px. Context counts remain accessible but visually quiet. */
.nf-shop-filter-option{position:relative;display:flex;align-items:center;width:100%;min-height:32px;padding:7px 0;color:#000;font:400 14px/1 var(--nf-font);letter-spacing:-.5px;text-decoration:none;cursor:pointer;transition:opacity .2s ease,color .2s ease}
.nf-shop-filter-option__box{display:flex;flex:0 0 18px;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid rgba(0,0,0,.1);border-radius:4px;background:#fff;transition:border-color .2s ease,background-color .2s ease}
.nf-shop-filter-option__box svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.8);transition:opacity .16s ease,transform .16s ease}
.nf-shop-filter-option__label{display:block;min-width:0;margin-left:8px;line-height:1.15}
.nf-shop-filter-option.is-selected .nf-shop-filter-option__box{border-color:#000;background:#000}
.nf-shop-filter-option.is-selected .nf-shop-filter-option__box svg{opacity:1;transform:scale(1)}
.nf-shop-filter-option:hover .nf-shop-filter-option__box,.nf-shop-filter-option:focus-visible .nf-shop-filter-option__box{border-color:rgba(0,0,0,.42)}
.nf-shop-filter-option.is-disabled{opacity:.28;cursor:default}
.nf-shop-filter-option__count{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.nf-shop-filter-option .woocommerce-Price-amount{font:inherit;color:inherit}

/* Source sort: 147.5 x 33.5-ish visual, transparent native select on top. */
.nf-shop-sort{position:relative;display:flex;align-items:center;justify-content:flex-end;width:max-content;max-width:100%;min-height:33.5px;padding:8px;border-radius:4px;color:#000;cursor:pointer;overflow:hidden;transition:opacity .2s ease}
.nf-shop-sort:hover{opacity:.4}
.nf-shop-sort__visual{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content;white-space:nowrap;font:500 14px/125% var(--nf-font);letter-spacing:-.5px}
.nf-shop-sort__title,.nf-shop-sort__value{display:block}
.nf-shop-sort__icon{display:block;width:16px;height:16px;fill:currentColor;transform:rotate(90deg)}
.nf-shop-sort__select{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;opacity:0;cursor:pointer}
.nf-shop-sort:focus-within{outline:1px solid var(--nf-gold);outline-offset:2px}

/* Product card archive context: the image geometry is owned only by the shared
   product-card contract in home.css. Shop may tune spacing/state but must not
   redefine the media box or image sizing. */
.nf-shop .nf-product-card{padding-bottom:20px}
.nf-shop .nf-product-card__image--secondary{transform:scale(1.06)}
.nf-shop .nf-product-card__swatches{margin-top:8px}
@media (hover:hover) and (min-width:1200px){.nf-shop .nf-product-card:hover .nf-product-card__image--secondary{transform:scale(1)}}

/* Empty state stays intentionally plain/source-consistent. */
.nf-shop__empty{grid-column:1/-1;display:flex;min-height:420px;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:20px 0;font:500 16px/125% var(--nf-font);letter-spacing:-.6px}

/* Source-compatible restrained load-more treatment. No extra card/chrome. */
.nf-shop__load-more-wrap{display:flex;justify-content:center;width:100%;padding:48px 0 0}
.nf-shop__load-more{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 4px;color:#000;font:500 11px/100% var(--nf-font);letter-spacing:0;text-transform:uppercase}
.nf-shop__load-more-line{position:relative;width:100%;height:1px;overflow:hidden}
.nf-shop__load-more-line::after{content:"";position:absolute;inset:0;background:#000;transform:translateX(0);transition:transform .7s var(--nf-ease-source)}
.nf-shop__load-more:hover .nf-shop__load-more-line::after,.nf-shop__load-more:focus-visible .nf-shop__load-more-line::after{transform:translateX(calc(100% + 3px))}
.nf-shop__load-more.is-loading{opacity:.4;pointer-events:none}

@media (min-width:810px) and (max-width:1199px){
  .nf-shop__catalogue{max-width:810px;padding:60px 20px 100px}
  .nf-shop__filters{flex-basis:200px;width:200px}
  .nf-shop__grid{grid-template-columns:repeat(3,minmax(20px,1fr));gap:20px}
}

@media (max-width:809px){
  .nf-shop{padding-top:64px}
  .nf-shop__catalogue{display:block;max-width:none;padding:60px 20px 100px}
  .nf-shop__desktop-sort{display:none}
  .nf-shop__layout{display:flex;flex-direction:column;gap:20px}
  .nf-shop__filters{flex:none;width:100%;align-self:auto;border-bottom:1px solid rgba(0,0,0,.1);background:#fff;z-index:4}
  .nf-shop__mobile-control-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;background:#fff}
  .nf-shop__mobile-filter-toggle{display:flex;align-items:center;justify-content:flex-start;gap:5px;flex:1 1 50%;min-width:0;height:60px;padding:0;border:0;background:#fff;color:#000;font:500 16px/100% var(--nf-font);letter-spacing:-.6px;text-align:left}
  .nf-shop__mobile-sort{display:flex;flex:1 1 50%;justify-content:flex-end;min-width:0}
  .nf-shop__mobile-sort .nf-shop-sort{padding-right:0}
  .nf-shop__filter-panel{position:static;display:none;top:auto;width:100%;padding:0 0 20px;background:#fff}
  .nf-shop.is-mobile-filter-open .nf-shop__filter-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start}
  .nf-shop__filter-title{display:none}
  .nf-shop-filter{border-top:1px solid rgba(0,0,0,.1)}
  .nf-shop-filter:nth-last-child(-n+2){border-bottom:1px solid rgba(0,0,0,.1)}
  .nf-shop-filter:last-child{border-bottom:1px solid rgba(0,0,0,.1)}
  .nf-shop-filter__trigger{font-size:14px;letter-spacing:-.5px}
  .nf-shop-filter-option{font-size:14px}
  .nf-shop__products{flex:none;width:100%;order:3}
  .nf-shop__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .nf-shop .nf-product-card__details{gap:8px}
  .nf-shop .nf-product-card__identity,.nf-shop .nf-product-card__commerce{flex:none;width:auto}
  .nf-shop .nf-product-card__identity{flex:1 1 auto}
  .nf-shop .nf-product-card__commerce{max-width:48%}
  .nf-shop__load-more-wrap{padding-top:38px}
}

@media (max-width:430px){
  .nf-shop__grid{gap:15px}
  .nf-shop.is-mobile-filter-open .nf-shop__filter-panel{column-gap:15px}
  .nf-shop-sort__visual{font-size:13px}
  .nf-shop__mobile-filter-toggle{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .nf-shop-filter__body,.nf-shop-filter__trigger svg,.nf-shop__products,.nf-shop-filter-option__box,.nf-shop-filter-option__box svg{transition:none!important}
}