/* NatureTech shop archive — v2.
   Source: design/v2/shop/mockup.html (style block).
   Conflicting top-level class names from the mockup (.hero, .card, .page,
   .panel, .filters, .pill, .trust-row, etc.) have been renamed to
   .nt-shop-* equivalents so they don't collide with homepage.css's
   identically-named selectors. The design's .footer block was stripped
   (chrome.css owns the global footer).
   Sprint 3, 2026-04-26. */


body {
margin: 0;
font-family: 'Heebo', 'Arial Hebrew', system-ui, sans-serif;
color: #1A1628;
background: #FAFAFA;
direction: rtl;
line-height: 1.5;
}
.nt-shop-page {
max-width: 1920px;
margin: 0 auto;
padding: 24px;
}

/* HERO */
.nt-shop-hero {
position: relative;
height: 480px;
background-image: url('/wp-content/themes/naturetech-custom/assets/img/shop/hero-image.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 64px;
/* Full-bleed: break out of the .nt-container WC wrapper so the hero spans
   the whole viewport even though the rest of the shop content stays
   contained. Works in any writing direction. */
width: 100vw;
margin-inline: calc(50% - 50vw);
max-width: none;
}
.nt-shop-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(30,18,54,0.15) 0%, rgba(30,18,54,0) 30%, rgba(30,18,54,0) 70%, rgba(30,18,54,0.25) 100%);
pointer-events: none;
}
.nt-shop-hero-content {
position: relative;
z-index: 2;
color: white;
background: linear-gradient(90deg, rgba(30,18,54,0) 0%, rgba(30,18,54,0.55) 12%, rgba(30,18,54,0.72) 50%, rgba(30,18,54,0.55) 88%, rgba(30,18,54,0) 100%);
padding: 48px 72px;
max-width: 820px;
width: 100%;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.nt-shop-hero-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
letter-spacing: 0.22em;
color: #E6B149;
margin-bottom: 20px;
font-weight: 500;
}
.nt-shop-hero-title {
font-family: 'IBM Plex Sans Hebrew', sans-serif;
font-size: 46px;
font-weight: 500;
line-height: 1.2;
margin: 0 0 18px;
color: white;
}
.nt-shop-hero-title .nt-shop-accent {
color: #E6B149;
white-space: nowrap;
}
.nt-shop-hero-subtitle {
font-size: 17px;
line-height: 1.65;
color: rgba(255,255,255,0.94);
max-width: 560px;
margin: 0 auto;
font-weight: 300;
}

/* PANEL */
.nt-shop-panel {
background: linear-gradient(135deg, #FFFFFF 0%, #F0EBF7 55%, #E9F1EA 100%);
padding: 40px 44px 60px;
border-radius: 14px;
}

/* SEARCH */
.nt-shop-search {
display: flex;
align-items: center;
gap: 12px;
background: white;
border: 1px solid #D8D3C5;
border-radius: 999px;
padding: 13px 22px;
max-width: 500px;
margin-bottom: 28px;
transition: border-color 0.15s;
}
.nt-shop-search:focus-within {
border-color: #6B3FA0;
}
.nt-shop-search svg { flex-shrink: 0; }
.nt-shop-search input {
flex: 1;
border: none;
background: transparent;
font-family: inherit;
font-size: 14px;
color: #1E1236;
outline: none;
}
.nt-shop-search input::placeholder { color: #999; }

/* FILTERS */
.nt-shop-filters {
display: flex;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px solid rgba(30,18,54,0.08);
}
.nt-shop-pill {
font-family: inherit;
font-size: 13px;
padding: 9px 18px;
border-radius: 999px;
background: white;
color: #1E1236;
border: 1px solid #D8D3C5;
cursor: pointer;
transition: all 0.15s;
}
.nt-shop-pill:hover { border-color: #6B3FA0; color: #6B3FA0; }
.nt-shop-pill--active { background: #1E1236; color: white; border-color: #1E1236; font-weight: 500; }
.nt-shop-pill--active:hover { background: #2D1B4E; color: white; border-color: #2D1B4E; }
.nt-shop-sort {
margin-right: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #777;
}
.nt-shop-sort-label { color: #777; }
.nt-shop-sort-select {
appearance: none;
-webkit-appearance: none;
background: white url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231E1236' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat;
background-position: left 12px center;
border: 1px solid #D8D3C5;
border-radius: 999px;
padding: 8px 16px 8px 30px;
font-family: inherit;
font-size: 13px;
color: #1E1236;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.nt-shop-sort-select:hover,
.nt-shop-sort-select:focus { border-color: #6B3FA0; outline: none; }

.nt-shop-results { transition: opacity 0.18s ease; }
.nt-shop-results.is-loading { opacity: 0.5; pointer-events: none; }

/* SUBCATEGORY BAR */
.nt-shop-subfilters {
display: none;
gap: 6px;
margin: -2px 0 20px;
padding: 14px 18px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(30,18,54,0.08);
border-radius: 12px;
flex-wrap: wrap;
align-items: center;
animation: slideDown 0.25s ease-out;
}
.nt-shop-subfilters.active { display: flex; }
@keyframes slideDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.nt-shop-subfilters-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
color: #6B3FA0;
margin-left: 8px;
font-weight: 500;
}
.nt-shop-subpill {
font-family: inherit;
font-size: 12px;
padding: 6px 14px;
border-radius: 999px;
background: transparent;
color: #1E1236;
border: 1px solid rgba(30,18,54,0.18);
cursor: pointer;
transition: all 0.15s;
}
.nt-shop-subpill:hover { border-color: #6B3FA0; color: #6B3FA0; background: white; }
.nt-shop-subpill--active { background: #6B3FA0; color: white; border-color: #6B3FA0; }

/* GRID */
.nt-shop-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 1024px) { .nt-shop-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .nt-shop-product-grid { grid-template-columns: repeat(2, 1fr); } }

/* CARD */
.nt-shop-card {
background: white;
border-radius: 10px;
overflow: hidden;
position: relative;
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
}
.nt-shop-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(30,18,54,0.1);
}
.nt-shop-card-image {
aspect-ratio: 1/1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: hidden;
}
/* Tone modifiers retained as no-ops so legacy markup stays valid; the visual
   accent now lives on the .nt-shop-card-tag chip, not on the image canvas. */
.nt-shop-card-image--systems,
.nt-shop-card-image--maintenance,
.nt-shop-card-image--upgrades { background: #fff; }
.nt-shop-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

.nt-shop-card-tag {
position: absolute;
top: 10px;
right: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.14em;
padding: 4px 10px;
border-radius: 999px;
color: white;
font-weight: 500;
}
.nt-shop-card-tag--systems { background: #2D6A4F; }
.nt-shop-card-tag--maintenance { background: #6B3FA0; }
.nt-shop-card-tag--upgrades { background: #E6B149; color: #1E1236; }

.nt-shop-card-badge {
position: absolute;
top: 10px;
left: 10px;
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
}
.nt-shop-card-badge--sale { background: #C4922A; color: white; }
.nt-shop-card-badge--featured { background: #E6B149; color: #1E1236; }

.nt-shop-card-body { padding: 14px 16px 16px; }
.nt-shop-card-title {
font-family: 'IBM Plex Sans Hebrew', sans-serif;
font-size: 14px;
font-weight: 500;
margin: 0 0 3px;
color: #1E1236;
line-height: 1.3;
}
.nt-shop-card-sub { font-size: 11px; color: #777; margin: 0 0 10px; min-height: 14px; }
.nt-shop-card-price-line { display: flex; align-items: baseline; gap: 6px; }
.nt-shop-card-price { font-size: 15px; font-weight: 500; color: #1E1236; }
.nt-shop-card-price-old { font-size: 12px; color: #999; text-decoration: line-through; }

/* OUT OF STOCK */
.nt-shop-card--out .nt-shop-card-image { filter: grayscale(0.4) opacity(0.75); }
.nt-shop-card--out .nt-shop-card-title, .nt-shop-card--out .nt-shop-card-sub, .nt-shop-card--out .nt-shop-card-price { color: #999; }
.nt-shop-card-out-overlay {
position: absolute;
inset: 0;
background: rgba(26,22,40,0.55);
display: flex;
align-items: center;
justify-content: center;
filter: none;
}
.nt-shop-card-out-label {
background: white;
color: #1E1236;
font-size: 11px;
font-weight: 500;
padding: 6px 14px;
border-radius: 999px;
}

/* LOAD MORE */
.nt-shop-load-more {
text-align: center;
margin-top: 36px;
}
.nt-shop-load-more button {
background: white;
border: 1px solid #1E1236;
color: #1E1236;
font-family: inherit;
font-size: 14px;
font-weight: 500;
padding: 13px 34px;
border-radius: 999px;
cursor: pointer;
transition: all 0.15s;
}
.nt-shop-load-more button:hover { background: #1E1236; color: white; }

/* RESPONSIVE HERO */
@media (max-width: 900px) {
.nt-shop-hero { height: 440px; padding: 0 24px; }
.nt-shop-hero-content { padding: 36px 40px; }
.nt-shop-hero-title { font-size: 38px; }
.nt-shop-hero-subtitle { font-size: 16px; }
}
@media (max-width: 600px) {
.nt-shop-page { padding: 14px; }
.nt-shop-hero { height: 400px; padding: 0 12px; }
.nt-shop-hero-content { padding: 28px 24px; background: rgba(30,18,54,0.68); }
.nt-shop-hero-title { font-size: 28px; }
.nt-shop-hero-subtitle { font-size: 14px; }
.nt-shop-hero::before { background: linear-gradient(to bottom, rgba(30,18,54,0.2) 0%, rgba(30,18,54,0) 40%, rgba(30,18,54,0) 60%, rgba(30,18,54,0.35) 100%); }
.nt-shop-panel { padding: 28px 20px 40px; border-radius: 10px; }
.nt-shop-sort { width: 100%; margin-right: 0; margin-top: 8px; }
}

/* TRUST ROW */
.nt-shop-trust-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 28px 0 0;
}
.nt-shop-trust-item {
display: flex;
align-items: center;
gap: 14px;
background: white;
border-radius: 12px;
padding: 18px 22px;
border: 1px solid #EEE7D8;
}
.nt-shop-trust-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: #F0EBF7;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #6B3FA0;
}
.nt-shop-trust-label {
font-size: 13px;
font-weight: 500;
color: #1E1236;
line-height: 1.3;
}
@media (max-width: 900px) { .nt-shop-trust-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .nt-shop-trust-row { grid-template-columns: 1fr; } }

/* ONLINE NOTE */
.nt-shop-online-note {
background: linear-gradient(135deg, #F7F3E9 0%, #F0EBF7 100%);
border-right: 3px solid #6B3FA0;
border-radius: 10px;
padding: 18px 24px;
margin-top: 18px;
}
.nt-shop-online-note p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #2D1B4E;
}
.nt-shop-online-note a { color: #6B3FA0; font-weight: 500; }

/* DISTRIBUTORS */
.nt-shop-distributors {
margin-top: 44px;
}
.nt-shop-distributors h3 {
font-family: 'IBM Plex Sans Hebrew', sans-serif;
font-size: 15px;
font-weight: 500;
color: #1E1236;
margin: 0 0 16px;
letter-spacing: 0.02em;
}
.nt-shop-logo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.nt-shop-logo-cube {
aspect-ratio: 1/1;
background: white;
border-radius: 12px;
border: 1px solid #EEE7D8;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
transition: border-color 0.15s, transform 0.15s;
}
.nt-shop-logo-cube:hover {
border-color: #6B3FA0;
transform: translateY(-2px);
}
.nt-shop-logo-cube img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
@media (max-width: 600px) { .nt-shop-logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* FOOTER */







@media (max-width: 720px) {



}