/* =========================================================
   ONE NATION SHORTCODES — styles
   Design tokens ported from the original React app
   ========================================================= */
.ons-product-card, .ons-category-card, .ons-hero, .ons-loyalty-banner,
.ons-search-bar, .ons-section, .ons-breadcrumb, .ons-category-banner {
	--ons-primary: #186D42;
	--ons-primary-dark: #125433;
	--ons-secondary: #F5C842;
	--ons-secondary-dark: #F3BA12;
	--ons-secondary-fg: #212121;
	--ons-brand-dark: #152A0E;
	--ons-background: #F9F9F6;
	--ons-foreground: #333333;
	--ons-muted-fg: #666666;
	--ons-border: #E3E3DD;
	--ons-destructive: #EF4343;
	--ons-radius: 10px;
	font-family: "DM Sans", sans-serif;
	box-sizing: border-box;
}
.ons-product-card *, .ons-category-card *, .ons-hero *, .ons-loyalty-banner *,
.ons-search-bar *, .ons-section *, .ons-breadcrumb *, .ons-category-banner * { box-sizing: border-box; }

.ons-section { padding: 2rem 0; max-width: 1400px; margin: 0 auto; }
.ons-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem; }
.ons-section-heading h2 { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.5rem; margin: 0; color: var(--ons-foreground, #333); }
.ons-view-all-link { color: var(--ons-primary, #186D42); font-size: .875rem; font-weight: 500; text-decoration: none; }
.ons-view-all-link:hover { text-decoration: underline; }
.ons-empty-notice { background: #f3f3ef; border-radius: 10px; padding: 2rem; text-align: center; color: #666; }
.ons-text-gold { color: var(--ons-secondary, #F5C842); }

/* Buttons */
.ons-btn-primary, .ons-btn-gold {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: "Sora", sans-serif; font-weight: 600; font-size: .9375rem;
	padding: .75rem 1.5rem; border-radius: .5rem; border: none; text-decoration: none;
	cursor: pointer;
}
.ons-btn-primary { background: var(--ons-primary, #186D42); color: #fff; }
.ons-btn-primary:hover { background: var(--ons-primary-dark, #125433); color: #fff; }
.ons-btn-gold { background: var(--ons-secondary, #F5C842); color: var(--ons-secondary-fg, #212121); border-radius: 999px; }
.ons-btn-gold:hover { background: var(--ons-secondary-dark, #F3BA12); color: var(--ons-secondary-fg, #212121); }

/* =========================================================
   SEARCH BAR
   ========================================================= */
.ons-search-bar { position: relative; max-width: 32rem; }
.ons-search-bar input[type="search"] {
	width: 100%; border-radius: 999px; border: 1px solid var(--ons-border, #E3E3DD);
	background: #fff; padding: .75rem 3rem .75rem 1.25rem; font-size: .9375rem;
	color: var(--ons-foreground, #333); font-family: "DM Sans", sans-serif;
}
.ons-search-bar input[type="search"]:focus { outline: none; box-shadow: 0 0 0 2px var(--ons-primary, #186D42); }
.ons-search-bar button {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	background: var(--ons-primary, #186D42); color: #fff; border: none;
	width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.ons-search-bar button:hover { background: var(--ons-primary-dark, #125433); }
.ons-search-bar-lg input[type="search"] { padding: 1rem 3.5rem 1rem 1.5rem; font-size: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,.15); }
.ons-search-bar-lg button { width: 44px; height: 44px; background: var(--ons-secondary, #F5C842); color: var(--ons-secondary-fg, #212121); }
.ons-search-bar-lg button:hover { background: var(--ons-secondary-dark, #F3BA12); }

/* =========================================================
   HERO
   ========================================================= */
.ons-hero {
	position: relative; overflow: hidden; border-radius: 1rem;
	background: linear-gradient(to bottom right, var(--ons-primary, #186D42), var(--ons-primary, #186D42), var(--ons-brand-dark, #152A0E));
	padding: 3rem 1.5rem;
}
@media (min-width: 768px) { .ons-hero { padding: 4.5rem 2rem; } }
.ons-hero::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--ons-hero-image, none); background-size: cover; background-position: center; opacity: .12;
}
.ons-hero-inner { position: relative; max-width: 42rem; }
.ons-hero-title { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.875rem; color: #fff; margin: 0 0 1rem; line-height: 1.2; }
@media (min-width: 768px) { .ons-hero-title { font-size: 3rem; } }
.ons-hero-subtitle { color: rgba(255,255,255,.85); font-size: 1.125rem; margin: 0 0 2rem; line-height: 1.6; }
.ons-hero-search-wrap { margin-bottom: 2rem; }
.ons-hero-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; color: rgba(255,255,255,.7); font-size: .875rem; }

/* =========================================================
   CATEGORY GRID
   ========================================================= */
.ons-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .ons-category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ons-category-grid { grid-template-columns: repeat(5, 1fr); } }
.ons-category-card {
	display: block; background: #fff; border: 1px solid var(--ons-border, #E3E3DD);
	border-radius: .75rem; overflow: hidden; text-decoration: none; transition: box-shadow .2s, transform .2s;
}
.ons-category-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,.08); transform: translateY(-3px); }
.ons-category-card-image { aspect-ratio: 4/3; overflow: hidden; background: #f3f3ef; }
.ons-category-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ons-category-card:hover .ons-category-card-image img { transform: scale(1.05); }
.ons-category-card-body { padding: .75rem; text-align: center; }
.ons-category-icon { font-size: 1.5rem; display: block; margin-bottom: .25rem; }
.ons-category-card-body h3 { font-family: "Sora", sans-serif; font-size: .875rem; margin: 0; color: var(--ons-foreground, #333); font-weight: 600; }

/* =========================================================
   PRODUCT GRID / CARDS
   ========================================================= */
.ons-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .ons-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ons-product-grid { grid-template-columns: repeat(var(--ons-cols, 4), 1fr); } }
.ons-product-grid-single { max-width: 300px; }

.ons-product-card { background: #fff; border: 1px solid var(--ons-border, #E3E3DD); border-radius: .5rem; overflow: hidden; position: relative; transition: box-shadow .2s; }
.ons-product-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.ons-product-card-inner { display: block; position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f3f3ef; text-decoration: none; }
.ons-product-card-inner img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ons-product-card:hover .ons-product-card-inner img { transform: scale(1.05); }
.ons-onsale-badge {
	position: absolute; top: .5rem; left: .5rem; z-index: 2;
	background: var(--ons-destructive, #EF4343); color: #fff; font-size: 11px; font-weight: 700;
	padding: 2px 10px; border-radius: 999px;
}
.ons-out-of-stock-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.ons-out-of-stock-overlay span { background: var(--ons-destructive, #EF4343); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.ons-product-card-body { padding: .75rem; }
.ons-product-card-title { font-family: "Sora", sans-serif; font-size: .875rem; font-weight: 500; line-height: 1.3; margin: 0 0 .5rem; color: var(--ons-foreground, #333); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ons-product-card-title:hover { color: var(--ons-primary, #186D42); }
.ons-product-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ons-product-card-price { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ons-primary, #186D42); }
.ons-product-card-price del { color: var(--ons-muted-fg, #666); font-weight: 400; font-size: .75rem; opacity: .8; }
.ons-product-card-price ins { text-decoration: none; }

.ons-product-card-actions .add_to_cart_button {
	background: var(--ons-primary, #186D42) !important; color: #fff !important;
	border-radius: 999px !important; width: 32px; height: 32px; padding: 0 !important;
	display: flex; align-items: center; justify-content: center;
	font-size: 0 !important; line-height: 0 !important; border: none;
	text-decoration: none;
}
.ons-product-card-actions .add_to_cart_button:hover { background: var(--ons-primary-dark, #125433) !important; }
.ons-product-card-actions .ons-cart-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
.ons-product-card-actions .add_to_cart_button.loading .ons-cart-btn-icon { opacity: .4; }
.ons-product-card-actions .added_to_cart { display: none !important; }
.ons-product-card-actions .button:not(.add_to_cart_button) {
	background: var(--ons-primary, #186D42) !important; color: #fff !important;
	border-radius: .375rem !important; padding: .4rem .75rem !important; font-size: .75rem !important;
	text-decoration: none; font-family: "Sora", sans-serif; font-weight: 600;
}

.ons-product-card-rating { display: flex; align-items: center; gap: .375rem; margin-top: .5rem; }
.ons-product-card-rating .star-rating { font-size: .75rem; color: var(--ons-secondary, #F5C842); }
.ons-rating-count { font-size: .75rem; color: var(--ons-muted-fg, #666); }

/* =========================================================
   LOYALTY BANNER
   ========================================================= */
.ons-loyalty-banner {
	position: relative; overflow: hidden; border-radius: 1rem;
	background: linear-gradient(to right, var(--ons-primary, #186D42), var(--ons-brand-dark, #152A0E));
	padding: 2rem 1.5rem;
}
@media (min-width: 768px) { .ons-loyalty-banner { padding: 3rem; } }
.ons-loyalty-decor { position: absolute; border-radius: 999px; background: rgba(245,200,66,.1); }
.ons-loyalty-decor-1 { width: 16rem; height: 16rem; top: 0; right: 0; transform: translate(50%,-50%); }
.ons-loyalty-decor-2 { width: 12rem; height: 12rem; bottom: 0; left: 0; transform: translate(-50%,50%); background: rgba(245,200,66,.05); }
.ons-loyalty-banner-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .ons-loyalty-banner-inner { flex-direction: row; } }
.ons-loyalty-copy { flex: 1; }
.ons-loyalty-pill {
	display: inline-flex; align-items: center; gap: .5rem; background: var(--ons-secondary, #F5C842);
	color: var(--ons-secondary-fg, #212121); padding: .375rem 1rem; border-radius: 999px;
	font-size: .875rem; font-weight: 700; margin-bottom: 1rem; font-family: "Sora", sans-serif;
}
.ons-loyalty-copy h2 { font-family: "Sora", sans-serif; color: #fff; font-size: 1.5rem; margin: 0 0 .75rem; }
@media (min-width: 768px) { .ons-loyalty-copy h2 { font-size: 1.875rem; } }
.ons-loyalty-copy p { color: rgba(255,255,255,.8); margin: 0 0 1.5rem; line-height: 1.6; }
.ons-loyalty-tiers { display: flex; gap: 1rem; text-align: center; color: #fff; }
.ons-loyalty-tier { background: rgba(255,255,255,.1); border-radius: .75rem; padding: 1rem 1.25rem; }
.ons-loyalty-tier span { font-size: 1.5rem; }
.ons-loyalty-tier strong { display: block; font-family: "Sora", sans-serif; margin-top: .25rem; }
.ons-loyalty-tier small { font-size: 11px; opacity: .7; }

/* =========================================================
   CATEGORY BANNER / BREADCRUMB
   ========================================================= */
.ons-category-banner { display: flex; align-items: center; gap: .75rem; padding: 1.5rem 0; background: rgba(24,109,66,.05); border-radius: .5rem; padding: 1.5rem; }
.ons-category-banner-icon { font-size: 2.25rem; }
.ons-category-banner h2 { font-family: "Sora", sans-serif; margin: 0; font-size: 1.25rem; color: var(--ons-foreground, #333); }
.ons-category-banner p { font-size: .875rem; color: var(--ons-muted-fg, #666); margin: 0; }
.ons-breadcrumb { font-size: .8125rem; color: var(--ons-muted-fg, #666); margin-bottom: 1rem; }
.ons-breadcrumb a { color: var(--ons-muted-fg, #666); text-decoration: none; }
.ons-breadcrumb a:hover { color: var(--ons-primary, #186D42); }