/* Shop catalogue (/shop) + cart drawer — "Clean Vedic Professional". Prefix: shop- */
.shop-shopWrapper { background: var(--color-bg); min-height: 70vh; overflow-x: clip; }
.shop-noScroll { overflow: hidden; }

/* ---- Announcement bar ---- */
.shop-announcementBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 10px var(--gutter); background: #f3e9cf; border-bottom: 1px solid var(--color-border); font-size: .88rem; color: var(--color-ink); }
.shop-announcementLeft { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; }
.shop-announcementLeft strong { font-weight: 700; }
.shop-codeHighlight { background: #fff; border: 1px dashed var(--color-gold); border-radius: 6px; padding: 1px 8px; color: var(--color-gold-dark); letter-spacing: .06em; }
.shop-trackOrderBtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.shop-trackOrderBtn:hover { color: var(--color-gold-dark); }

/* ---- Hero ---- */
.shop-shopHero { padding: clamp(36px, 6vw, 72px) var(--gutter); text-align: center; position: relative; }
.shop-heroOverlay, .shop-heroVisualCol { display: none; }
.shop-heroContentGrid { max-width: 760px; margin: 0 auto; }
.shop-heroTitle { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 10px; }
.shop-heroSubtitle { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 600; color: var(--color-gold-light) !important; margin-bottom: 10px; line-height: 1.4; }
.shop-heroDesc { font-size: 1.05rem; }

/* ---- Trust ribbon ---- */
.shop-trustRibbonWrap { max-width: var(--max-width); margin: -28px auto 0; padding-inline: var(--gutter); position: relative; z-index: 2; }
.shop-trustRibbonCard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 4px 12px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 20px; }
.shop-trustDivider { display: none; }
.shop-trustItem { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.shop-trustIconWrap { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(184,135,43,.12); display: grid; place-items: center; color: var(--color-gold-dark); }
.shop-trustTitle { font-family: var(--font-body); font-size: .92rem; font-weight: 700; color: var(--color-ink); line-height: 1.3; }
.shop-trustSub { font-size: .8rem; line-height: 1.4; }

/* ---- Mobile filter bar ---- */
.shop-mobileFilterBar { display: none; }

/* ---- Main layout ---- */
.shop-shopMainLayout { max-width: var(--max-width); margin: 0 auto; padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(56px, 8vw, 96px); display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 32px; align-items: start; }
.shop-filterBackdrop { display: none; }
.shop-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-offset) + 16px); }
.shop-sidebarMobileHead { display: none; }
.shop-sidebarCard { flex: none; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.shop-cardHeaderDark { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-2); color: var(--color-gold-dark); }
.shop-cardHeaderTitle { font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink); }
.shop-categoryList { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.shop-categoryItemBtn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-size: .95rem; text-align: left; transition: var(--transition); }
.shop-categoryItemBtn:hover { background: var(--color-bg-2); color: var(--color-ink); }
.shop-categoryActive, .shop-categoryActive:hover { background: var(--color-brand); color: #fff; font-weight: 600; }
.shop-categoryBadge { font-size: .75rem; font-weight: 600; min-width: 28px; text-align: center; padding: 2px 8px; border-radius: 999px; background: rgba(27,25,56,.07); color: var(--color-text-muted); }
.shop-categoryActive .shop-categoryBadge { background: rgba(255,255,255,.2); color: #fff; }
.shop-priceFilterBody { padding: 18px; }
.shop-priceTrackWrap { padding: 6px 0; }
.shop-priceRangeInput { padding: 0; min-height: 28px; border: 0; box-shadow: none; background: transparent; accent-color: var(--color-brand); }
.shop-priceRangeInput:focus { box-shadow: none; }
.shop-priceLabelsRow { display: flex; justify-content: space-between; font-size: .88rem; color: var(--color-text-muted); margin-top: 6px; }
.shop-maxPriceVal { font-weight: 700; color: var(--color-ink); }
.shop-ratingFilterList { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.shop-ratingRow { display: flex; align-items: center; gap: 8px; }
.shop-starsWrapper { display: flex; gap: 2px; }
.shop-ratingCount { font-size: .82rem; color: var(--color-text-dim); }

/* ---- Toolbar ---- */
.shop-catalogToolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; padding: 12px 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.shop-resultsCountText { font-size: .92rem; color: var(--color-text-muted); }
.shop-toolbarRightControls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.shop-sortDropdownGroup { display: flex; align-items: center; gap: 8px; }
.shop-sortLabel { font-size: .88rem; color: var(--color-text-muted); white-space: nowrap; }
.shop-sortSelectInput { width: auto; min-width: 190px; min-height: 44px; padding-block: 8px; }
.shop-viewToggleGroup { display: flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.shop-viewBtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: #fff; color: var(--color-text-muted); }
.shop-viewBtn + .shop-viewBtn { border-left: 1.5px solid var(--color-border); }
.shop-viewBtnActive { background: var(--color-brand); color: #fff; }

.shop-noResultsCard { text-align: center; padding: 56px 24px; background: #fff; border: 1px dashed var(--color-border-hover); border-radius: var(--radius-lg); }
.shop-noResultsCard p { margin: 8px 0 20px; }
.shop-resetFilterBtn { min-height: 46px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--color-brand); background: transparent; color: var(--color-brand); font-weight: 600; }
.shop-resetFilterBtn:hover { background: var(--color-brand); color: #fff; }

/* ---- Product grid / cards ---- */
.shop-productsGrid4Col { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.shop-productCard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.shop-productCard:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.shop-cardImageArea { position: relative; aspect-ratio: 4 / 3; background: var(--color-bg-2); overflow: hidden; }
.shop-cardImageArea a { display: block !important; width: 100%; height: 100%; }
.shop-productImg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shop-productCard:hover .shop-productImg { transform: scale(1.04); }
.shop-discountBadge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: var(--color-maroon); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.shop-wishlistBtn { position: absolute; top: 6px; right: 6px; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; }
.shop-wishlistBtn::before { content: ''; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); }
.shop-wishlistBtn svg { position: relative; }
.shop-cardContentArea { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.shop-cardMetaRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.shop-cardCategoryLabel { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--color-gold-dark); }
.shop-stockBadge { font-size: .7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(31,143,85,.12); color: #17724a; white-space: nowrap; }
.shop-stockOut { background: rgba(192,57,43,.12); color: #a62f23; }
.shop-cardProductTitle { font-family: var(--font-heading); font-size: 1.02rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.shop-cardProductTitle a:hover { color: var(--color-gold-dark); }
.shop-cardRatingRow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: .8rem; color: var(--color-text-muted); }
.shop-ratingVal { font-weight: 700; color: var(--color-ink); }
.shop-dotDivider { color: var(--color-text-dim); }
.shop-cardPriceBlock { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.shop-cardCurrentPrice { font-size: 1.25rem; font-weight: 700; color: var(--color-ink); }
.shop-cardComparePrice { font-size: .9rem; color: var(--color-text-dim); text-decoration: line-through; }
.shop-addToCartBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--color-brand); color: #fff; font-weight: 600; font-size: .92rem; transition: var(--transition); }
.shop-addToCartBtn:hover { background: var(--color-brand-2); transform: translateY(-1px); }
.shop-addToCartBtn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* list view */
.shop-productsListCol { display: flex; flex-direction: column; gap: 16px; }
.shop-productsListCol .shop-productCard { flex-direction: row; }
.shop-productsListCol .shop-cardImageArea { width: 220px; flex: none; aspect-ratio: auto; min-height: 180px; }
.shop-productsListCol .shop-cardProductTitle { min-height: 0; -webkit-line-clamp: 3; }
.shop-productsListCol .shop-cardPriceBlock { margin-top: 0; }
.shop-productsListCol .shop-addToCartBtn { width: auto; align-self: flex-start; padding-inline: 28px; }

/* ---- Cart drawer ---- */
.shop-cartOverlay { position: fixed; inset: 0; z-index: 1100; background: rgba(18,15,51,.55); display: flex; justify-content: flex-end; animation: fadeIn .2s ease; }
.shop-cartDrawer { width: min(100%, 440px); height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(18,15,51,.25); animation: fadeInRight .25s ease; }
.shop-drawerHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--color-band); color: #fff; }
.shop-drawerHeadTitle { display: flex; align-items: center; gap: 10px; color: var(--color-gold-light); }
.shop-drawerHeadTitle h2 { font-family: var(--font-heading); font-size: 1.1rem; margin: 0; color: #fff; }
.shop-drawerCloseBtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; }
.shop-drawerCloseBtn:hover { background: rgba(255,255,255,.22); }
.shop-drawerOfferNote { padding: 10px 20px; background: #f3e9cf; color: var(--color-ink); font-size: .85rem; border-bottom: 1px solid var(--color-border); }
.shop-drawerItemsList { flex: 1; overflow-y: auto; padding: 8px 20px; }
.shop-drawerItemRow { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.shop-drawerItemRow:last-child { border-bottom: 0; }
.shop-drawerItemImg { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg-2); }
.shop-drawerItemInfo { flex: 1; min-width: 0; }
.shop-drawerItemCategory { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-gold-dark); }
.shop-drawerItemTitle { font-family: var(--font-body); font-size: .95rem; font-weight: 600; line-height: 1.35; margin: 2px 0; }
.shop-drawerItemPrice { font-weight: 700; color: var(--color-ink); margin-bottom: 6px; }
.shop-stepperWrap { display: flex; align-items: center; gap: 4px; }
.shop-stepBtn, .shop-removeBtn { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-ink); font-size: 1.1rem; }
.shop-stepBtn:hover { border-color: var(--color-gold); }
.shop-removeBtn { margin-left: auto; border-color: transparent; color: var(--color-danger); }
.shop-removeBtn:hover { background: rgba(192,57,43,.08); }
.shop-stepNum { min-width: 32px; text-align: center; font-weight: 600; }
.shop-drawerEmpty { text-align: center; padding: 56px 16px; }
.shop-drawerFooter { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-bg); }
.shop-summaryRow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--color-text); }
.shop-drawerSubtotal { font-size: 1.2rem; font-weight: 700; color: var(--color-ink); }
.shop-summaryNote { font-size: .8rem; color: var(--color-text-muted); }
.shop-shipFree { color: var(--color-success); font-weight: 700; }
.shop-drawerCtaGroup { margin-top: 12px; }
.shop-checkoutBtn { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 20px; border-radius: 999px; background: var(--color-brand); color: #fff; font-weight: 600; text-align: center; box-shadow: var(--shadow-purple); }
.shop-checkoutBtn:hover { background: var(--color-brand-2); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .shop-shopMainLayout { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 860px) {
  .shop-trustRibbonWrap { margin-top: -20px; }
  .shop-mobileFilterBar { display: flex; gap: 10px; position: sticky; top: var(--header-offset); z-index: 50; padding: 10px var(--gutter); background: rgba(250,247,242,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-border); }
  .shop-mobileFilterTrigger, .shop-mobileCartBtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; border: 1.5px solid var(--color-border); background: #fff; color: var(--color-ink); font-weight: 600; font-size: .92rem; }
  .shop-mobileCartBtn { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
  .shop-shopMainLayout { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
  .shop-filterBackdrop { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(18,15,51,.55); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .shop-backdropOn { opacity: 1; pointer-events: auto; }
  .shop-sidebar { position: fixed; z-index: 1100; top: 0; bottom: 0; left: 0; width: min(88vw, 340px); background: var(--color-bg); padding: 0 16px 24px; overflow-y: auto; transform: translateX(-102%); transition: transform .28s ease; box-shadow: 20px 0 50px rgba(18,15,51,.25); visibility: hidden; }
  .shop-sidebarMobileActive { transform: none; visibility: visible; }
  .shop-sidebarMobileHead { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; margin: 0 -16px 8px; padding: 12px 16px; background: var(--color-band); color: #fff; font-family: var(--font-heading); font-size: 1.05rem; }
  .shop-sidebarClose { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
}
@media (max-width: 640px) {
  .shop-announcementBar { font-size: .82rem; gap: 0 16px; padding-block: 8px; }
  .shop-trustRibbonCard { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 10px; gap: 10px 6px; }
  .shop-trustItem { flex-direction: column; text-align: center; gap: 6px; }
  .shop-trustTitle { font-size: .84rem; }
  .shop-trustSub { font-size: .74rem; }
  .shop-productsGrid4Col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shop-cardContentArea { padding: 12px; gap: 6px; }
  .shop-cardProductTitle { font-size: .92rem; }
  .shop-cardCurrentPrice { font-size: 1.08rem; }
  .shop-soldText, .shop-dotDivider { display: none; }
  .shop-addToCartBtn { font-size: .85rem; padding-inline: 8px; }
  .shop-catalogToolbar { padding: 10px 12px; }
  .shop-toolbarRightControls, .shop-sortDropdownGroup { width: 100%; }
  .shop-sortSelectInput { flex: 1; min-width: 0; }
  .shop-viewToggleGroup { display: none; }
  .shop-productsListCol .shop-productCard { flex-direction: column; }
  .shop-productsListCol .shop-cardImageArea { width: 100%; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 380px) {
  .shop-productsGrid4Col { grid-template-columns: minmax(0, 1fr); }
}