/* A compact collection, using the site's shared palette and actual product media. */
body.shop-collection { background: var(--bg); }
body.shop-collection:not(.admin) { opacity: 1; transition: none; }
.shop-collection .container { max-width: 1280px; }
.shop-masthead { position: relative; background: var(--bg); padding: 26px 0 24px; border-bottom: 1px solid var(--line); }
.shop-masthead-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
.shop-heading { position: relative; min-width: 0; }
.shop-wordmark { display: flex; align-items: center; gap: 16px; width: fit-content; color: var(--ink); font: 500 22px/1.2 'Fraunces', Georgia, serif; }
.shop-wordmark span { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); color: var(--muted); font: 500 11px/1.5 'Inter', sans-serif; }
.shop-masthead h1 { margin: 12px 0 8px; font: 500 52px/1.08 'Fraunces', Georgia, serif; letter-spacing: 0; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
[dir="rtl"] .shop-masthead h1 { font-family: 'Tajawal', sans-serif; font-weight: 800; }
.shop-masthead p { max-width: 640px; margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.shop-edition { display: grid; place-items: center; gap: 10px; padding: 8px 30px; border-inline-start: 1px solid var(--line); }
.shop-edition img { width: 128px; height: 92px; object-fit: contain; }
[data-theme="dark"] .shop-edition img { background: var(--brand-paper); border-radius: 4px; padding: 6px; }
.shop-edition > span { font-size: 11px; color: var(--muted); }
.shop-heading-skeleton { display: none; position: absolute; top: 48px; inset-inline-start: 0; width: min(70%, 340px); height: 48px; background: var(--line-soft); border-radius: 4px; }
html.cms-loading .shop-heading-skeleton { display: block; }
.shop-collection .shop-shipping-band { border: 0; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.shop-collection .shop-service-row { display: flex; align-items: center; gap: 16px; padding-block: 8px; }
.shop-collection .shop-shipping-band p { text-align: start; font-size: 12px; font-weight: 500; color: var(--ink-soft); line-height: 1.6; }
.shop-cart-link { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; color: var(--ink); font-size: 12px; white-space: nowrap; min-height: 40px; }
.shop-cart-link b { font: 500 11px/1 'Inter', sans-serif; }
.shop-cart-link:hover { color: var(--accent); }
.shop-collection .shop-category-nav { padding-top: 8px; }
.shop-collection .shop-category-tabs { display: flex; width: 100%; gap: 28px; padding: 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.shop-collection .shop-category-tab { position: relative; display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 0 14px; border-radius: 0; background: none; color: var(--muted); font-size: 15px; box-shadow: none; }
.shop-collection .shop-category-tab.active { color: var(--ink); background: none; box-shadow: none; }
.shop-category-tab::after { content: ''; position: absolute; bottom: -1px; inset-inline: 0; height: 3px; border-radius: 4px; background: var(--brand-green); transform: scaleX(0); transition: transform .2s; }
.shop-category-tab.active::after { transform: scaleX(1); }
[data-theme="dark"] .shop-category-tab::after { background: var(--brand-gold); }
[data-shop-product-count] { font: 500 11px/1 'Inter', sans-serif; color: var(--muted); }
.shop-collection #shop-products-pane { padding-block: 0 50px; }
.shop-browse-bar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, 190px) minmax(160px, 220px); align-items: center; gap: 12px; padding-block: 14px; background: var(--bg); }
.shop-search, .shop-select { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--surface); min-width: 0; }
.shop-search:focus-within, .shop-select:focus-within { border-color: var(--ink); outline: 1px solid var(--ink); }
.shop-search input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); padding: 10px 0; font: inherit; font-size: 13px; border-radius: 0; box-shadow: none; }
.shop-search input::placeholder { color: var(--muted); opacity: 1; }
.shop-select > span { font-size: 11px; white-space: nowrap; }
.shop-select select { width: 100%; min-width: 0; border: 0; background: transparent; outline: none; padding: 10px 0; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.shop-select option { background: var(--surface); color: var(--ink); }
.shop-results-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 24px; margin-bottom: 10px; }
.shop-results-line p { margin: 0; font-size: 12px; color: var(--muted); }
#shop-clear { display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; color: var(--ink); background: none; cursor: pointer; font: inherit; font-size: 12px; }
#shop-clear[hidden] { display: none; }
.shop-collection .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
.shop-collection .product-card { min-width: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.shop-collection .product-card:hover { transform: none; border-color: transparent; box-shadow: none; }
.shop-collection .product-card-img { display: block; flex-shrink: 0; width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; border: 1px solid var(--line-soft); background: var(--bg-alt); }
.shop-collection .product-card-img::after { display: none; }
.shop-collection [data-shop-product] .product-card-img .product-image-main { z-index: 1; object-fit: contain; opacity: 0; transition: opacity .22s ease; }
.shop-collection [data-shop-product] .product-card-img .product-image-main.is-ready { opacity: 1; }
.shop-browse-bar[hidden], .shop-results-line[hidden] { display: none; }
.shop-product-open { position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-paper); color: var(--brand-night); border: 1px solid #203d3029; transition: transform .2s, background .2s; }
.product-card-img:hover .shop-product-open { background: var(--brand-gold); transform: translateY(-3px); }
.shop-photo-strip { display: flex; align-items: center; gap: 5px; min-height: 46px; padding-top: 8px; overflow-x: auto; scrollbar-width: thin; }
.shop-photo-strip button { padding: 2px; width: 36px; height: 34px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); cursor: pointer; }
.shop-photo-strip button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.shop-photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; }
.shop-photo-strip img[hidden] { display: none; }
.shop-photo-index { margin-inline-start: auto; padding-inline: 6px 0; white-space: nowrap; font: 500 10px/1 'Inter', sans-serif; color: var(--muted); }
.shop-collection .product-card-body { flex: 1; padding: 14px 0 0; gap: 9px; }
.shop-product-type { color: var(--muted); font-size: 10px; }
.shop-product-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
.shop-collection .product-card-body h3 { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; text-wrap: pretty; }
.shop-product-heading a:hover { text-decoration: underline; text-underline-offset: 4px; }
.shop-collection .product-card-price { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.shop-product-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.shop-swatch { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 50%; padding: 4px; background: none; color: var(--ink); cursor: pointer; }
.shop-swatch i { width: 16px; height: 16px; border: 1px solid #203d3040; border-radius: 50%; background: var(--swatch); }
.shop-swatch[aria-pressed="true"] { border-color: var(--ink); }
.shop-swatch:hover { border-color: var(--muted); }
.shop-swatch:disabled { opacity: .35; cursor: not-allowed; }
.shop-swatch-named { width: auto; height: auto; min-height: 28px; border-radius: 4px; padding: 4px 6px; font: inherit; font-size: 11px; }
.shop-color-label { margin-inline-start: 6px; font-size: 11px; color: var(--muted); }
.shop-product-bottom { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding-block: 8px 4px; margin-top: auto; border-top: 1px solid var(--line); }
.shop-size-range { font-size: 10px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.shop-detail-link { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--ink); border-radius: 50%; }
.shop-detail-link:hover { background: var(--bg-alt); }
[dir="rtl"] .shop-icon-arrow { transform: scaleX(-1); }
.shop-stock-label { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 5px 9px; background: var(--brand-paper); color: var(--brand-night); font-size: 11px; border-radius: 3px; }
.shop-image-placeholder { height: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; padding: 14px; }
.shop-image-placeholder[hidden], .shop-collection .product-image-main[hidden] { display: none; }
.shop-empty { grid-column: 1 / -1; text-align: center; padding: 64px 20px; color: var(--muted); }
.shop-empty h2 { font-size: 24px; margin-block: 14px 8px; color: var(--ink); }
.shop-empty p { font-size: 14px; }
.shop-product-skeleton { aspect-ratio: 4 / 6; border-radius: 6px; background: var(--bg-alt); border: 1px solid var(--line); }
.shop-collection .gift-card-section { padding-block: 32px 56px; background: var(--bg); border: 0; }
.shop-collection .gift-card-section-head h2 { font-size: 36px; }
.shop-collection .gift-card-section-head p { font-size: 14px; }
.shop-collection .gift-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px 20px; }
.shop-collection .gift-card-option { display: flex; flex-direction: column; width: 100%; max-width: 460px; margin-inline: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.shop-collection .gift-card-option:hover { transform: none; box-shadow: none; }
.shop-collection .gift-card-art { flex-shrink: 0; width: 100%; aspect-ratio: 1.65; min-height: 0; border-radius: 6px; padding: 22px; }
.shop-collection .gift-card-art::before { display: none; }
.shop-collection .gift-card-art::after { border-radius: 2px; inset: 9px; }
.shop-collection .gift-card-art strong { font: 400 44px/1 'Fraunces', Georgia, serif; }
.shop-collection .gift-card-art img { background: var(--brand-paper); padding: 6px; border-radius: 3px; }
.shop-collection .gift-card-kicker { letter-spacing: 0; }
.shop-collection .gift-card-option-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 18px 0 0; }
.shop-collection .gift-card-option-body h3 { overflow-wrap: anywhere; }
.shop-collection .gift-card-option-body p { min-height: 0; margin: 0 0 8px; }
.shop-collection .gift-card-option-body .btn { width: fit-content; max-width: 100%; min-height: 44px; margin-top: auto; padding: 10px 18px; border-radius: 4px; font-size: 14px; line-height: 1.4; letter-spacing: 0; white-space: normal; }
.shop-collection .gift-card-added[hidden] { display: none; }
.shop-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; background: currentColor; mask: var(--shop-icon) center / contain no-repeat; }
.shop-icon-search { --shop-icon: url('../icons/shop/search.svg'); }
.shop-icon-filter { --shop-icon: url('../icons/shop/filter.svg'); }
.shop-icon-x { --shop-icon: url('../icons/shop/x.svg'); }
.shop-icon-arrow { --shop-icon: url('../icons/shop/arrow.svg'); }
.shop-icon-gift { --shop-icon: url('../icons/shop/gift.svg'); }
.shop-icon-bag { --shop-icon: url('../icons/shop/bag.svg'); }
.shop-icon-truck { --shop-icon: url('../icons/shop/truck.svg'); }
.shop-icon-image { --shop-icon: url('../icons/shop/image.svg'); }
.shop-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shop-collection :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (min-width: 900px) { .shop-browse-bar { position: sticky; top: 82px; z-index: 6; } }
@media (max-width: 1050px) { .shop-collection .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; } }
@media (max-width: 700px) {
  .shop-masthead { padding-block: 26px; }
  .shop-masthead-inner { gap: 20px; }
  .shop-masthead h1 { font-size: 40px; }
  .shop-masthead p { font-size: 13px; }
  .shop-wordmark { font-size: 18px; gap: 10px; }
  .shop-wordmark span { padding-inline-start: 10px; }
  .shop-edition { padding: 0; border: 0; }
  .shop-edition img { width: 88px; height: 72px; }
  .shop-edition > span { font-size: 10px; }
  .shop-collection .shop-service-row { gap: 10px; }
  .shop-cart-link > span:first-child { display: none; }
  .shop-collection .shop-category-tab { font-size: 14px; }
  .shop-browse-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 14px; gap: 10px; }
  .shop-search { grid-column: 1 / -1; }
  .shop-select > span { display: none; }
  .shop-collection .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .shop-product-heading { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .shop-collection .product-card-body h3 { font-size: 14px; }
  .shop-collection .product-card-price { justify-self: start; font-size: 13px; }
  .shop-collection .product-card-body { gap: 7px; padding-top: 10px; }
  .shop-product-open { width: 28px; height: 28px; bottom: 8px; inset-inline-end: 8px; }
  .shop-photo-strip { gap: 4px; }
  .shop-photo-strip button { width: 30px; height: 30px; }
  .shop-photo-index { font-size: 9px; }
  .shop-color-label { flex-basis: 100%; margin-inline-start: 4px; }
  .shop-product-bottom { gap: 6px; }
  .shop-collection .gift-card-section-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .shop-collection .gift-card-section-head h2 { font-size: 30px; }
  .shop-collection .gift-card-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 400px) {
  .shop-collection .container { padding-inline: 20px; }
  .shop-edition { display: none; }
  .shop-masthead-inner { grid-template-columns: minmax(0, 1fr); }
  .shop-collection .products-grid { gap: 24px 12px; }
  .shop-collection .shop-shipping-band p { font-size: 11px; }
  .shop-service-row > .shop-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-collection .product-image-main, .shop-product-open, .shop-category-tab::after { transition: none; }
  .product-card-img:hover .shop-product-open { transform: none; }
}
