/* =========================================================
AXONA SHOP PAGE
HTML + CSS BLOCK
========================================================= */

.axona-shop-page {
–axona-primary: #1B3A6B;
–axona-dark: #10233F;
–axona-accent: #D98E2B;
–axona-yellow: #FFE227;
–axona-purple: #4D375D;
–axona-text: #18202B;
–axona-muted: #687385;
–axona-light: #F5F7FA;
–axona-border: #E3E7ED;
–axona-white: #FFFFFF;

font-family: Inter, Arial, sans-serif;
color: var(–axona-text);
background: #fff;
line-height: 1.6;
}

.axona-shop-page *,
.axona-shop-page *::before,
.axona-shop-page *::after {
box-sizing: border-box;
}

.axona-shop-container {
width: min(1280px, calc(100% – 40px));
margin: 0 auto;
}

.axona-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* =========================================================
HERO
========================================================= */

.axona-shop-hero {
padding: 75px 0 80px;
background:
linear-gradient(
135deg,
var(–axona-dark) 0%,
var(–axona-primary) 65%,
var(–axona-purple) 100%
);
color: #fff;
}

.axona-shop-hero-content {
max-width: 850px;
margin: auto;
text-align: center;
}

.axona-eyebrow {
display: inline-block;
margin-bottom: 10px;
color: var(–axona-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.7px;
text-transform: uppercase;
}

.axona-shop-hero .axona-eyebrow {
color: var(–axona-yellow);
}

.axona-shop-hero h1 {
margin: 0 0 18px;
color: #fff;
font-family: Sora, Inter, sans-serif;
font-size: clamp(36px, 5vw, 62px);
line-height: 1.05;
font-weight: 800;
}

.axona-shop-hero p {
max-width: 700px;
margin: 0 auto 32px;
color: rgba(255, 255, 255, .88);
font-size: 18px;
}

/* =========================================================
SEARCH
========================================================= */

.axona-shop-search {
max-width: 780px;
margin: auto;
}

.axona-shop-search form {
display: flex;
gap: 10px;
padding: 8px;
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.axona-shop-search input[type=”search”] {
flex: 1;
min-width: 0;
height: 54px;
padding: 0 18px;
border: 0;
outline: none;
background: transparent;
color: var(–axona-text);
font-size: 16px;
}

.axona-shop-search button {
min-height: 54px;
padding: 0 26px;
border: 0;
border-radius: 10px;
background: var(–axona-yellow);
color: #111;
cursor: pointer;
font-weight: 800;
transition: .2s ease;
}

.axona-shop-search button:hover {
background: #ffd60a;
transform: translateY(-1px);
}

/* =========================================================
TRUST STRIP
========================================================= */

.axona-shop-trust {
border-bottom: 1px solid var(–axona-border);
background: #fff;
}

.axona-trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.axona-trust-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 90px;
padding: 16px 20px;
border-right: 1px solid var(–axona-border);
}

.axona-trust-item:last-child {
border-right: 0;
}

.axona-trust-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #FFF5CC;
color: var(–axona-primary);
font-size: 13px;
font-weight: 900;
}

.axona-trust-item strong {
display: block;
margin-bottom: 2px;
font-size: 14px;
}

.axona-trust-item small {
display: block;
color: var(–axona-muted);
font-size: 12px;
}

/* =========================================================
CATEGORY NAVIGATION
========================================================= */

.axona-shop-categories {
padding: 55px 0 25px;
}

.axona-section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-bottom: 25px;
}

.axona-section-heading h2 {
margin: 0;
font-family: Sora, Inter, sans-serif;
font-size: clamp(26px, 3vw, 38px);
line-height: 1.15;
}

.axona-text-link {
color: var(–axona-primary);
font-size: 14px;
font-weight: 800;
text-decoration: none;
}

.axona-category-scroll {
display: grid;
grid-template-columns: repeat(10, minmax(110px, 1fr));
gap: 12px;
}

.axona-mini-category {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 125px;
padding: 15px 10px;
border: 1px solid var(–axona-border);
border-radius: 14px;
background: #fff;
color: var(–axona-text);
text-align: center;
text-decoration: none;
transition: .2s ease;
}

.axona-mini-category span {
display: block;
margin-bottom: 10px;
font-size: 30px;
}

.axona-mini-category strong {
font-size: 13px;
}

.axona-mini-category:hover {
border-color: var(–axona-accent);
box-shadow: 0 10px 25px rgba(16, 35, 63, .08);
transform: translateY(-3px);
}

/* =========================================================
MAIN SHOP
========================================================= */

.axona-shop-main {
padding: 35px 0 70px;
background: var(–axona-light);
}

.axona-shop-toolbar {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 30px;
}

.axona-shop-title h2 {
margin: 0 0 8px;
font-family: Sora, Inter, sans-serif;
font-size: clamp(26px, 3vw, 38px);
}

.axona-shop-title p {
max-width: 700px;
margin: 0;
color: var(–axona-muted);
font-size: 14px;
}

.axona-shop-sort {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}

.axona-shop-sort label {
color: var(–axona-muted);
font-size: 13px;
font-weight: 700;
}

.axona-shop-sort select {
min-width: 190px;
height: 46px;
padding: 0 38px 0 14px;
border: 1px solid var(–axona-border);
border-radius: 9px;
background: #fff;
color: var(–axona-text);
font-size: 13px;
}

/* =========================================================
SHOP LAYOUT
========================================================= */

.axona-shop-layout {
display: grid;
grid-template-columns: 255px minmax(0, 1fr);
gap: 30px;
align-items: start;
}

/* =========================================================
FILTER SIDEBAR
========================================================= */

.axona-shop-sidebar {
position: sticky;
top: 25px;
}

.axona-filter-box {
padding: 22px;
border: 1px solid var(–axona-border);
border-radius: 14px;
background: #fff;
}

.axona-filter-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 18px;
border-bottom: 1px solid var(–axona-border);
}

.axona-filter-heading h3 {
margin: 0;
font-size: 17px;
}

.axona-filter-heading a {
color: var(–axona-primary);
font-size: 11px;
font-weight: 800;
text-decoration: none;
}

.axona-filter-group {
padding: 20px 0;
border-bottom: 1px solid var(–axona-border);
}

.axona-filter-group:last-child {
border-bottom: 0;
padding-bottom: 0;
}

.axona-filter-group h4 {
margin: 0 0 12px;
font-size: 14px;
}

.axona-filter-group label {
display: flex;
align-items: center;
gap: 9px;
margin: 9px 0;
color: var(–axona-muted);
cursor: pointer;
font-size: 13px;
}

.axona-filter-group input {
accent-color: var(–axona-primary);
}

.axona-mobile-filter-button {
display: none;
}

/* =========================================================
PRODUCTS
========================================================= */

.axona-products-area {
min-width: 0;
}

.axona-products-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
color: var(–axona-muted);
font-size: 13px;
}

.axona-mobile-sort {
display: none;
}

.axona-product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}

.axona-product-card {
overflow: hidden;
border: 1px solid var(–axona-border);
border-radius: 14px;
background: #fff;
transition: .2s ease;
}

.axona-product-card:hover {
border-color: #d3d9e2;
box-shadow: 0 14px 35px rgba(16, 35, 63, .10);
transform: translateY(-3px);
}

.axona-product-image {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f3f4f6;
}

.axona-product-image a {
display: block;
width: 100%;
height: 100%;
}

.axona-product-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}

.axona-product-card:hover .axona-product-image img {
transform: scale(1.04);
}

.axona-product-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 5px 9px;
border-radius: 6px;
background: var(–axona-primary);
color: #fff;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
}

.axona-product-badge.sale {
background: var(–axona-accent);
}

.axona-wishlist {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .95);
color: var(–axona-dark);
cursor: pointer;
font-size: 22px;
line-height: 1;
}

.axona-product-content {
padding: 15px;
}

.axona-product-category {
display: block;
margin-bottom: 6px;
color: var(–axona-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}

.axona-product-content h3 {
min-height: 43px;
margin: 0 0 8px;
font-size: 14px;
line-height: 1.45;
}

.axona-product-content h3 a {
color: var(–axona-text);
text-decoration: none;
}

.axona-product-rating {
margin-bottom: 8px;
color: #F3A800;
font-size: 12px;
}

.axona-product-rating span {
color: var(–axona-muted);
}

.axona-product-price {
margin-bottom: 13px;
color: var(–axona-primary);
font-size: 17px;
font-weight: 900;
}

.axona-product-price del {
margin-right: 5px;
color: #9299a5;
font-size: 12px;
font-weight: 500;
}

.axona-add-cart {
width: 100%;
min-height: 42px;
border: 0;
border-radius: 8px;
background: var(–axona-primary);
color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: 800;
transition: .2s ease;
}

.axona-add-cart:hover {
background: var(–axona-dark);
}

/* =========================================================
PAGINATION
========================================================= */

.axona-shop-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 40px;
}

.axona-shop-pagination a,
.axona-shop-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 7px;
color: var(–axona-text);
font-size: 13px;
text-decoration: none;
}

.axona-shop-pagination a {
border: 1px solid var(–axona-border);
background: #fff;
}

.axona-shop-pagination a:hover,
.axona-shop-pagination a.active {
border-color: var(–axona-primary);
background: var(–axona-primary);
color: #fff;
}

/* =========================================================
DISCOVERY
========================================================= */

.axona-shop-discover {
padding: 75px 0;
background: #fff;
}

.axona-discover-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.axona-discover-card {
position: relative;
min-height: 240px;
padding: 28px;
overflow: hidden;
border-radius: 16px;
background: var(–axona-dark);
color: #fff;
text-decoration: none;
transition: .2s ease;
}

.axona-discover-card:nth-child(2) {
background: var(–axona-primary);
}

.axona-discover-card:nth-child(3) {
background: var(–axona-purple);
}

.axona-discover-card:hover {
transform: translateY(-4px);
}

.axona-discover-card span {
display: block;
margin-bottom: 30px;
color: var(–axona-yellow);
font-size: 12px;
font-weight: 800;
}

.axona-discover-card h3 {
margin: 0 0 10px;
font-family: Sora, Inter, sans-serif;
font-size: 25px;
}

.axona-discover-card p {
max-width: 340px;
margin: 0 0 20px;
color: rgba(255, 255, 255, .78);
font-size: 13px;
}

.axona-discover-card strong {
color: var(–axona-yellow);
font-size: 12px;
}

/* =========================================================
SEO CONTENT
========================================================= */

.axona-shop-seo {
padding: 70px 0;
background: var(–axona-light);
}

.axona-seo-content {
max-width: 900px;
margin: auto;
text-align: center;
}

.axona-seo-content h2 {
margin: 0 0 20px;
font-family: Sora, Inter, sans-serif;
font-size: clamp(27px, 4vw, 42px);
}

.axona-seo-content p {
margin: 0 auto 15px;
color: var(–axona-muted);
font-size: 15px;
}

/* =========================================================
BUTTONS
========================================================= */

.axona-primary-button,
.axona-secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 24px;
border-radius: 9px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition: .2s ease;
}

.axona-primary-button {
margin-top: 15px;
background: var(–axona-primary);
color: #fff;
}

.axona-primary-button:hover {
background: var(–axona-dark);
}

.axona-secondary-button {
background: var(–axona-yellow);
color: #111;
}

.axona-secondary-button:hover {
background: #ffd60a;
transform: translateY(-2px);
}

/* =========================================================
SELLER CTA
========================================================= */

.axona-seller-banner {
padding: 55px 0;
background: var(–axona-dark);
color: #fff;
}

.axona-seller-banner .axona-shop-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

.axona-seller-banner .axona-eyebrow {
color: var(–axona-yellow);
}

.axona-seller-banner h2 {
margin: 0 0 7px;
font-family: Sora, Inter, sans-serif;
font-size: clamp(26px, 3vw, 38px);
}

.axona-seller-banner p {
margin: 0;
color: rgba(255, 255, 255, .75);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {

.axona-category-scroll {
grid-template-columns: repeat(5, 1fr);
}

.axona-product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

}

/* =========================================================
MOBILE / TABLET
========================================================= */

@media (max-width: 850px) {

.axona-shop-container {
width: min(100% – 30px, 700px);
}

.axona-trust-grid {
grid-template-columns: repeat(2, 1fr);
}

.axona-trust-item:nth-child(2) {
border-right: 0;
}

.axona-trust-item:nth-child(-n + 2) {
border-bottom: 1px solid var(–axona-border);
}

.axona-shop-toolbar {
align-items: flex-start;
flex-direction: column;
}

.axona-shop-sort {
width: 100%;
}

.axona-shop-sort select {
flex: 1;
}

.axona-shop-layout {
display: block;
}

.axona-shop-sidebar {
position: static;
margin-bottom: 20px;
}

.axona-mobile-filter-button {
display: block;
}

.axona-mobile-filter-button button {
width: 100%;
min-height: 46px;
border: 1px solid var(–axona-border);
border-radius: 9px;
background: #fff;
color: var(–axona-primary);
cursor: pointer;
font-size: 13px;
font-weight: 800;
}

.axona-filter-box {
display: none;
}

.axona-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.axona-discover-grid {
grid-template-columns: 1fr;
}

.axona-seller-banner .axona-shop-container {
align-items: flex-start;
flex-direction: column;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

.axona-shop-container {
width: min(100% – 24px, 500px);
}

.axona-shop-hero {
padding: 55px 0 60px;
}

.axona-shop-hero p {
font-size: 15px;
}

.axona-shop-search form {
flex-direction: column;
padding: 7px;
}

.axona-shop-search input[type=”search”] {
height: 50px;
}

.axona-shop-search button {
width: 100%;
}

.axona-trust-grid {
grid-template-columns: 1fr;
}

.axona-trust-item,
.axona-trust-item:nth-child(2) {
border-right: 0;
border-bottom: 1px solid var(–axona-border);
}

.axona-trust-item:last-child {
border-bottom: 0;
}

.axona-category-scroll {
display: flex;
overflow-x: auto;
gap: 10px;
padding-bottom: 8px;
scroll-snap-type: x mandatory;
}

.axona-mini-category {
flex: 0 0 125px;
scroll-snap-align: start;
}

.axona-section-heading {
align-items: flex-start;
flex-direction: column;
}

.axona-product-grid {
gap: 10px;
}

.axona-product-content {
padding: 12px;
}

.axona-product-content h3 {
min-height: auto;
font-size: 13px;
}

.axona-product-price {
font-size: 15px;
}

.axona-product-rating {
font-size: 10px;
}

.axona-add-cart {
min-height: 44px;
}

.axona-shop-pagination {
gap: 4px;
}

}

/* =========================================================
VERY SMALL PHONES
========================================================= */

@media (max-width: 400px) {

.axona-product-grid {
grid-template-columns: 1fr;
}

.axona-product-image {
aspect-ratio: 1.1 / 1;
}

.axona-product-content {
padding: 15px;
}

.axona-product-content h3 {
font-size: 14px;
}

}