:root { color-scheme: light; --ink: #100b22; --purple: #8110bc; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at 50% 310px, #faf5fc, #fff 75%); font-family: Vazirmatn, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid #c679eb; outline-offset: 5px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.products-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 300px; background: #0c041d; color: #fff; text-align: center; }
/* Only the grapes from the supplied banner are shown; its baked-in logo and text are cropped away. */
.products-hero::before { content: ''; position: absolute; inset: 0 0 0 auto; z-index: -1; width: min(430px, 45%); background: url('../images/products-hero.png') right center / auto 100% no-repeat; -webkit-mask-image: linear-gradient(to right, transparent, #000 40%); mask-image: linear-gradient(to right, transparent, #000 40%); }
.hero-copy { padding: 40px 6%; }
.hero-copy h1 { font-size: clamp(32px, 3.4vw, 52px); line-height: 1.5; margin: 0 0 8px; }
.hero-copy p { font-size: clamp(16px, 1.4vw, 21px); line-height: 1.8; margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.products-shell { width: min(1360px, 88.5%); margin: 0 auto; padding-bottom: 22px; }
.category-filters { display: flex; justify-content: center; gap: 16px; padding-block: 24px; }
.category-filters button { border: 1px solid #f3ecfa; border-radius: 30px; min-width: 166px; min-height: 52px; padding: 8px 25px; background: #ffffffb3; color: var(--ink); font-size: 19px; font-weight: 700; }
.category-filters button[aria-pressed="true"] { color: white; border-color: var(--purple); background: var(--purple); }
.category-filters button:hover { box-shadow: 0 2px 10px #8110bc18; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.product-card { --accent: #69209c; overflow: hidden; border-radius: 21px; background: #fff; box-shadow: 0 4px 10px #1e10200c; display: flex; flex-direction: column; }
.white-grape { --accent: #8c9c35; }
.raisin { --accent: #c6a057; }
.product-image { width: 100%; aspect-ratio: 1.23; height: auto; object-fit: cover; display: block; }
.product-copy { padding: 17px 20px 22px; text-align: center; flex: 1; display: flex; align-items: center; flex-direction: column; }
.product-category { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 15px; font-weight: 700; }
.product-category .icon { width: 22px; height: 22px; }
.product-copy h2 { font-size: 26px; line-height: 1.7; margin: 10px 0 9px; }
.product-copy p { margin: 0 0 17px; font-size: 16px; line-height: 1.7; color: #19131e; }
.view-product { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; border: 1px solid #b776ce; border-radius: 28px; min-width: 214px; min-height: 49px; padding: 9px 22px; background: white; color: #7c1ab2; font-size: 16px; font-weight: 700; }
.view-product .icon { width: 17px; height: 17px; stroke-width: 2.6; }
.view-product:hover { color: white; background: var(--purple); border-color: var(--purple); }
.product-price { margin: -6px 0 14px; color: var(--accent); font-size: 18px; font-weight: 700; }
.products-empty { text-align: center; padding: 40px 0; }
.product-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: white; box-shadow: 0 20px 80px #0006; }
.product-dialog::backdrop { background: #0c041dcc; }
.close-dialog { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: white; color: var(--ink); font-size: 27px; line-height: 1; box-shadow: 0 2px 10px #0002; }
.detail-image { display: block; width: 100%; height: auto; }
.detail-copy { padding: 15px 24px 24px; text-align: center; }
.detail-copy h2 { margin: 0 0 12px; font-size: 25px; }
.detail-copy p { margin: 0; line-height: 1.9; }
body:has(dialog[open]) { overflow: hidden; }
[hidden] { display: none !important; }
@media (max-width: 1100px) {
    .product-grid { gap: 20px; }
    .product-copy { padding-inline: 14px; }
    .product-copy h2 { font-size: 21px; }
    .product-copy p { font-size: 14px; }
    .wide-break { display: none; }
    .view-product { min-width: 0; width: 90%; font-size: 14px; }
}
@media (max-width: 760px) {
    .products-hero { min-height: 240px; }
    .products-hero::before { width: 65%; opacity: .5; }
    .category-filters { gap: 10px; padding-block: 20px; }
    .category-filters button { min-width: 0; flex: 1; max-width: 166px; min-height: 44px; padding: 8px 10px; font-size: 14px; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .product-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .product-copy { padding: 17px 20px 22px; }
    .product-copy h2 { font-size: 25px; }
    .product-copy p { font-size: 16px; }
    .view-product { width: auto; min-width: 214px; font-size: 16px; }
}