/* Product category archive. Common components and tokens live in shared.css. */
.archive-page{background:var(--color-page)}
.archive-main{padding-block:24px 16px}
.archive-breadcrumb{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px;color:var(--color-muted);font-size:.76rem}
.archive-breadcrumb [aria-current]{color:var(--color-ink)}
.archive-catalog{scroll-margin-top:20px}
.archive-page .archive-categories{justify-content:safe center}
.archive-page .archive-categories a{flex:0 0 auto;min-width:76px}
.archive-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-block:1px solid var(--color-line)}
.archive-toolbar>p{margin:0;color:var(--color-muted);font-size:.81rem}
.archive-tools{display:flex;align-items:center;gap:18px;visibility:hidden}
.archive-enhanced .archive-tools{visibility:visible}
.archive-filter-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 13px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-white);color:var(--color-ink);font-size:.8rem}
.archive-filter-toggle svg,.archive-filter-head svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.archive-filter-toggle [data-filter-count]{display:grid;place-items:center;min-width:20px;height:20px;padding-inline:4px;border-radius:50%;background:var(--color-brand);color:var(--color-white);font-size:.67rem}
.archive-sort{display:flex;align-items:center;gap:9px;color:var(--color-muted);font-size:.78rem}
.archive-sort select{min-width:144px;min-height:44px;padding:8px 12px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-white);color:var(--color-ink);font:inherit}
.archive-active-filters{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:12px 15px;border-radius:12px;background:var(--color-brand-pale);color:var(--color-brand-deep);font-size:.79rem}
.archive-active-filters button{flex:none;padding:5px 0;border:0;background:none;color:inherit;font-size:inherit;font-weight:700}
.archive-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.archive-products .product-card{padding:14px;box-shadow:none;transform:none}
.archive-products .product-media{margin-top:22px}
.archive-products .product-media img{width:min(100%,190px);height:auto}
.archive-card-info{min-width:0}
.archive-products .product-card h3{display:flex;align-items:center;justify-content:center;min-height:46px;margin:7px 0 0;font-size:.94rem;line-height:1.65}
.archive-rating{display:flex;align-items:center;justify-content:center;gap:4px;min-height:22px;margin-block:1px 4px;color:var(--color-muted);font-size:.72rem}
.archive-rating svg{width:14px;height:14px;fill:var(--color-gold-deep)}
.archive-rating:empty{display:none}
.archive-card-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px}
.archive-products .detail-price{justify-content:center;flex-wrap:wrap;gap:3px 6px;margin:4px 0 7px;font-size:.94rem;line-height:1.6}
.archive-products .detail-price strong{color:var(--color-brand-deep-2);overflow-wrap:anywhere}
.archive-products .detail-price del{color:var(--color-muted);font-size:.7rem}
.archive-products .detail-price>span{display:none}
.archive-products .product-purchase{display:flex;flex-direction:column;gap:8px}
.archive-products .weight-choices{flex-wrap:wrap;gap:4px}
.archive-products .weight-choices button{padding:5px;font-size:.67rem}
.archive-products .weight-choices button.selected{border-color:var(--color-brand-pale-5);background:var(--color-brand-pale-2);color:var(--color-ink-6);font-weight:400}
.archive-products .weight-choices button:hover{border-color:var(--color-brand-line-2)}
.archive-products :is(.weight-choices button,.quantity button,.quantity input,.buy-button):focus-visible{outline:2px solid var(--color-gold-deep);outline-offset:2px}
.archive-products .quantity:focus-within{outline:2px solid var(--color-gold-deep);outline-offset:2px}
.archive-products .buy-button{padding-inline:6px;font-size:.74rem}
.archive-products .quantity button{width:29px}
.archive-products .quantity input{width:30px}
.archive-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:32px}
.archive-pagination :is(a,span.current){display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px 14px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-white);color:var(--color-ink);font-size:.83rem}
.archive-pagination .page-numbers[aria-current]{border-color:var(--color-brand);background:var(--color-brand);color:var(--color-white)}
.archive-empty{padding:60px 20px;text-align:center}
.archive-empty h2{margin:0 0 12px;color:var(--color-ink);font-size:1.2rem}
.archive-empty p{color:var(--color-muted);font-size:.85rem}
.archive-empty :is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;border:0;border-radius:12px;background:var(--color-brand);color:var(--color-white)}
.archive-description p{margin:0;color:var(--color-muted);font-size:.84rem;line-height:1.9}
.archive-filter-dialog[open]{position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;width:min(90vw,390px);max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0 22px 22px 0;background:var(--color-white);color:var(--color-ink);font:inherit}
.archive-filter-dialog::backdrop{background:var(--color-menu-backdrop)}
.archive-filter-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:80px;padding:20px 22px;border-bottom:1px solid var(--color-line)}
.archive-filter-head h2{margin:0;font-size:1.05rem}
.archive-filter-head button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-white);color:var(--color-ink)}
#archive-filter-form{display:flex;flex:1;flex-direction:column;min-height:0}
.archive-filter-fields{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:22px}
.archive-filter-label{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;font-size:.85rem;font-weight:700}
.archive-filter-fields input:not([type=checkbox]):not([type=range]){width:100%;min-width:0;min-height:44px;padding:9px 10px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-white);color:var(--color-ink);font-size:.8rem;font-weight:400}
.archive-filter-fields fieldset{margin:0 0 20px;padding:0;border:0}
.archive-filter-fields legend{margin-bottom:12px;font-size:.85rem;font-weight:700}
.archive-price-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.archive-price-fields label{display:flex;flex-direction:column;gap:7px;color:var(--color-muted);font-size:.78rem}
.archive-price-slider{position:relative;height:34px;margin:2px 7px 14px;direction:ltr}
.archive-price-track{position:absolute;inset:14px 0 auto;height:6px;border-radius:99px;background:linear-gradient(to right,var(--color-line) 0 var(--range-start),var(--color-brand) var(--range-start) var(--range-end),var(--color-line) var(--range-end) 100%)}
.archive-price-slider input[type=range]{position:absolute;inset:0;width:100%;height:34px;margin:0;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;pointer-events:none}
.archive-price-slider input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent}
.archive-price-slider input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8px;border:3px solid var(--color-white);border-radius:50%;background:var(--color-brand);box-shadow:0 1px 6px rgba(0,0,0,.22);appearance:none;-webkit-appearance:none;pointer-events:auto;cursor:grab}
.archive-price-slider input[type=range]::-moz-range-track{height:6px;background:transparent}
.archive-price-slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--color-white);border-radius:50%;background:var(--color-brand);box-shadow:0 1px 6px rgba(0,0,0,.22);pointer-events:auto;cursor:grab}
.archive-price-slider input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid color-mix(in srgb,var(--color-brand) 30%,transparent);outline-offset:2px}
.archive-check{display:flex;align-items:center;gap:10px;min-height:48px;font-size:.83rem;cursor:pointer}
.archive-check input{width:18px;height:18px;accent-color:var(--color-brand)}
.archive-attribute-filter{padding-top:18px!important;border-top:1px solid var(--color-line)!important}
.archive-attribute-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.archive-attribute-options .archive-check{min-height:42px;padding:8px 10px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-surface,#f8faf9)}
.archive-attribute-options .archive-check:has(input:checked){border-color:var(--color-brand);background:color-mix(in srgb,var(--color-brand) 9%,white);color:var(--color-brand)}
.archive-filter-error{margin:12px 0 0;color:var(--color-coral-hover);font-size:.8rem}
.archive-filter-actions{display:flex;gap:12px;padding:16px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--color-line)}
.archive-filter-actions button{min-height:46px;padding:9px 16px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-white);color:var(--color-ink);font-size:.84rem;font-weight:700}
.archive-filter-actions button[type=submit]{flex:1;border-color:var(--color-brand);background:var(--color-brand);color:var(--color-white)}
@media(max-width:1100px){.archive-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.archive-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .archive-products{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:18px}
  .archive-products .product-card{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:8px 12px;padding:14px;border:1px solid var(--color-line);border-radius:16px;background:var(--color-white)}
  .archive-products .product-media{grid-column:1;grid-row:1/3;align-self:center;width:80px;margin:0}
  .archive-products .product-media img{width:80px;height:80px;object-fit:contain}
  .archive-card-info,.archive-products .product-purchase{display:contents}
  .archive-products .product-card h3{grid-column:2;grid-row:1;justify-content:flex-start;align-self:end;min-height:0;margin:0;text-align:start;font-size:.86rem;line-height:1.9;overflow-wrap:anywhere}
  .archive-products .product-card h3 a{display:flex;align-items:center;min-height:36px}
  .archive-card-meta{display:none}
  .archive-products .weight-row{grid-column:2;grid-row:2;align-self:start;min-width:0;margin:0}
  .archive-products .weight-row>span{display:none}
  .archive-products .weight-choices{flex:1;min-width:0;flex-wrap:wrap;gap:4px}
  .archive-products .weight-choices button{min-height:32px;min-width:0;padding:4px 6px;border-radius:7px;font-size:.62rem;line-height:1.5}
  .archive-products .detail-price{grid-column:1/-1;grid-row:3;justify-self:start;align-content:center;justify-content:flex-start;width:calc(100% - 154px);min-height:46px;margin:8px 0 0;gap:2px 4px;font-size:.75rem;text-align:start}
  .archive-products .detail-price>span{display:block;width:100%;font-size:.6rem;font-weight:400;color:var(--color-muted)}
  .archive-products .detail-price strong{line-height:1.7}
  .archive-products .detail-price del{width:100%;font-size:.6rem}
  .archive-products .purchase-actions{display:flex;grid-column:1/-1;grid-row:3;justify-self:end;align-items:center;gap:8px;width:auto;margin-top:8px}
  .archive-products .quantity{flex:none;border-radius:12px}
  .archive-products .quantity button{width:32px;height:44px;font-size:1rem;line-height:1}
  .archive-products .quantity input{width:28px;height:44px;font-size:.8rem;font-weight:700}
  .archive-products .buy-button{display:grid;place-items:center;flex:none;width:38px;height:38px;min-height:38px;padding:0;border-radius:12px;font-size:0}
  .archive-products .buy-button::before{content:"";display:block;width:21px;height:21px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l2 14H4L6 7ZM9 7V5a3 3 0 0 1 6 0v2M9 14h6m-3-3v6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

}
@media(max-width:600px){
  .archive-main{padding-top:18px}
  .archive-breadcrumb{gap:7px;margin-bottom:18px;font-size:.69rem}
  .archive-toolbar{align-items:stretch;flex-direction:column;gap:12px;padding-block:14px}
  .archive-toolbar>p{font-size:.74rem}
  .archive-tools{justify-content:space-between;gap:8px}
  .archive-sort{gap:7px;font-size:.7rem}
  .archive-sort select{min-width:0;width:110px;padding-inline:8px}
  .archive-filter-toggle{padding-inline:10px;font-size:.75rem}
  .archive-active-filters{align-items:flex-start;font-size:.73rem}
  .archive-pagination{gap:6px;margin-top:24px}
  .archive-pagination :is(a,span.current){padding-inline:10px;font-size:.76rem}
}
@media(max-width:359px){.archive-sort{font-size:0}.archive-sort select{font-size:.72rem}}
@media(hover:hover) and (pointer:fine){.archive-products .product-card:hover{border-color:var(--color-brand-line-4)}.archive-pagination a:hover{border-color:var(--color-brand)}}
@media(max-width:640px),(pointer:coarse),(hover:none){.archive-categories{contain:layout paint;overscroll-behavior-x:contain;scroll-snap-type:none}.archive-products .product-card:hover,.archive-products .product-card:hover .product-media img{transform:none;box-shadow:none}}

/* Desktop archive cards use the home page card layout. */
@media(min-width:701px){
 .archive-products .product-card{padding:13px;border-color:var(--color-line-2);border-radius:20px}
 .archive-products .product-media{margin-top:20px}
 .archive-products .product-card h3{min-height:46px;margin:6px 0 2px;font-size:1rem}
 .archive-products .archive-rating{display:none}
 .archive-products .product-purchase{gap:0;margin-top:auto;padding-top:10px;border-top:1px solid var(--color-line-3)}
 .archive-products .weight-choices{gap:6px}
 .archive-products .weight-choices button{padding:5px 6px;font-size:.72rem}
 .archive-products .detail-price{justify-content:flex-start;min-height:24px;margin:7px 0 8px;gap:8px;font-size:.82rem;line-height:normal}
 .archive-products .detail-price>span{display:block;margin-inline-end:auto}
 .archive-products .detail-price del{color:var(--color-muted-5);font-size:.75rem}
 .archive-products .quantity button{width:34px}
 .archive-products .quantity input{width:36px}
 .archive-products .buy-button{padding:7px 10px;font-size:.82rem}
}