/* MAYA9 Shop — marketplace-first layout, photographic category system. */
#view-shop.marketplace-layout.is-active { display:block; }
#view-shop > .shop-rail { display:none; }
#view-shop .shop-main { max-width:1200px; margin:0 auto; min-width:0; }
body:has(#view-shop.is-active) { background:var(--m9-disabled-bg); }
body:has(#view-shop.is-active) main { width:min(1248px,calc(100% - 40px)); padding-top:16px; }
#view-shop button, #view-shop select { font:inherit; cursor:pointer; }

.shop-utility { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.shop-utility h1 { margin:0; font-size: 1.25rem; letter-spacing:-.03em; }
.shop-utility > span { color:var(--m9-neutral-strong); font-size: 0.875rem; }
.shop-utility > div { display:flex; gap:16px; margin-left:auto; }
.shop-utility button { border:0; padding:3px 0; background:none; color:var(--m9-text-secondary); font-size: 0.875rem !important; }
.catalog-section { scroll-margin-top:95px; }
.market-campaign-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:137px 137px; gap:8px; }
.market-campaign { position:relative; overflow:hidden; border:0; border-radius: var(--m9-radius-lg); }
.primary-campaign { grid-row:span 2; padding:30px 34px; background:var(--m9-primary); color:var(--m9-on-primary); }
.primary-campaign > div:first-child { position:relative; z-index:2; width:66%; }
.campaign-eyebrow { color:var(--m9-input-border); font-size: 0.75rem; letter-spacing:.1em; font-weight: 700; }
.primary-campaign h2 { margin:12px 0 9px; font: var(--m9-type-page-title); line-height:1.28; font-weight: 800; }
.primary-campaign h2 em { font-style:normal; color:var(--m9-input-border); }
.primary-campaign p { margin:0 0 20px; font-size: 0.875rem; color:var(--m9-border); }
.primary-campaign button { border:0; border-radius: var(--m9-radius-xs); padding:10px 18px; color:var(--m9-brand-navy); background:var(--m9-input-border); font-size: 0.875rem; font-weight: 700; }
.primary-campaign > img { position:absolute; width:40%; height:100%; right:0; top:0; object-fit:cover; object-position:center 30%; mask-image:linear-gradient(90deg,transparent,var(--m9-text) 32%); }
.campaign-dots { position:absolute; display:flex; gap:6px; left:50%; bottom:12px; }
.campaign-dots i { width:7px; height:7px; border-radius: var(--m9-radius-pill); background:color-mix(in srgb, var(--m9-on-primary) 33%, transparent); }
.campaign-dots i:first-child { background:var(--m9-input-border); }
.mini-campaign { padding:20px 24px; display:grid; align-content:center; gap:5px; color:var(--m9-brand-navy); text-align:left; background:var(--m9-surface-accent); }
.beauty-campaign { background:var(--m9-primary); color:var(--m9-on-primary);}
.mini-campaign > span { font-size: 0.75rem; color:var(--m9-primary); letter-spacing:.06em; font-weight: 800; }
.mini-campaign > b { font-size: 1.25rem; line-height:1.35; z-index:1; }
.mini-campaign small { font-size: 0.75rem; color:var(--m9-text-secondary); z-index:1; }
.mini-campaign img { position:absolute; width:31%; height:85%; right:8px; top:7%; object-fit:contain; mix-blend-mode:multiply; }
.shop-shortcuts { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; padding:20px 12px 18px; background:var(--m9-on-primary); border-radius: var(--m9-radius-lg); margin-top:12px; }
.shop-shortcut { border:0; background:none; display:grid; justify-items:center; align-content:start; gap:8px; color:var(--m9-text-secondary); font-size: 0.875rem !important; line-height:1.35; text-align:center; }
.shop-shortcut > span:first-child { width:48px; height:48px; display:grid; place-items:center; color:var(--m9-primary); background:var(--m9-surface-accent); border:1px solid var(--m9-border); border-radius: var(--m9-radius-xl); }
.shop-shortcut .m9-icon { width:25px; height:25px; }
.shop-shortcut:hover { color:var(--m9-primary); }
.market-section { margin-top:20px; background:var(--m9-on-primary); border:1px solid var(--m9-border); border-radius: var(--m9-radius-lg); overflow:hidden; }
.market-section-head { padding:17px 20px; min-height:64px; display:flex; align-items:center; gap:12px; justify-content:space-between; border-bottom:1px solid var(--m9-border-soft); }
.market-section-head h2 { margin:0; font-size: 1.0rem; font-weight: 700; color:var(--m9-text-secondary); }
.market-section-head > button { border:0; padding:4px 0; background:none; color:var(--m9-primary); font-size: 0.875rem !important; font-weight: 600; }
.category-section { position:relative; }
.category-viewport { overflow:visible; }
.category-grid { display:grid; grid-auto-flow:row; grid-template-columns:repeat(8,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); }
.category-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:12px 8px; color:var(--m9-text-secondary); background:var(--m9-on-primary); border:0; border-right:1px solid var(--m9-border-soft); border-bottom:1px solid var(--m9-border-soft); line-height:1.45; font-size: 0.875rem !important; }
.category-tile .category-photo { display:grid; place-items:center; width:78px; height:78px; padding:4px; background:var(--m9-on-primary); border-radius: var(--m9-radius-lg); overflow:hidden; flex-shrink:0; }
.category-photo img { width:100%; height:100%; object-fit:contain; }
.category-tile > b { font-weight: 500; text-align:center; min-height:40px; }
.category-tile:hover, .category-tile.is-active { color:var(--m9-primary); background:var(--m9-page); box-shadow: var(--m9-shadow-surface); }
.flash-heading, .official-heading { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.market-section.flash-section { margin-top:0; margin-bottom:16px; background:var(--m9-danger-strong); border-color:var(--m9-danger-strong); }
.flash-section .market-section-head { border-bottom-color:color-mix(in srgb, var(--m9-on-primary) 19%, transparent); }
.flash-section .flash-heading h2, .flash-section .market-section-head > button { color:var(--m9-on-primary); }
.flash-section .flash-heading > span { color:var(--m9-on-primary); }
.flash-section .flash-heading strong { background:var(--m9-danger); }
.flash-heading h2 { font-size: 1.25rem; font-style:italic; color:var(--m9-primary); letter-spacing:-.03em; }
.flash-heading > span { color:var(--m9-neutral-strong); font-size: 0.75rem; }
.flash-heading strong { padding:5px 9px; color:var(--m9-on-primary); background:var(--m9-brand-navy); border-radius: var(--m9-radius-xs); font-size: 0.875rem; font-variant-numeric:tabular-nums; }
.flash-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; padding:18px; }
.flash-card { position:relative; display:grid; min-width:0; gap:9px; padding:10px; border:0; border-radius: var(--m9-radius-sm); background:var(--m9-on-primary); color:var(--m9-text); text-align:center; }
.flash-card > img { width:100%; aspect-ratio:1.1; object-fit:contain; background:var(--m9-surface-soft); border-radius: var(--m9-radius-sm); }
.flash-card .flash-discount { position:absolute; right:0; top:0; padding:5px 7px; font-size: 0.75rem; font-weight: 700; color:var(--m9-on-primary); background:var(--m9-danger); border-radius: 0 var(--m9-radius-xs) 0 var(--m9-radius-xs); }
.flash-card strong { color:var(--m9-danger); font-size: 1.25rem; }
.flash-card > b { font-size: 0.8125rem; font-weight: 500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flash-progress { position:relative; overflow:hidden; height:24px; background:var(--m9-danger-bg); border-radius: var(--m9-radius-3xl); }
.flash-progress i { position:absolute; inset:0; right:auto; background:var(--m9-primary); border-radius: var(--m9-radius-3xl); color:var(--m9-on-primary);}
.flash-progress small { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; color:var(--m9-danger); font-size: 0.75rem; line-height:1; white-space:nowrap; }
.popular-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:16px; gap:12px; }
.popular-card { position:relative; padding:0; border:0; background:none; display:grid; gap:8px; color:var(--m9-text-secondary); text-align:center; }
.popular-card img { width:100%; height:132px; object-fit:contain; background:var(--m9-surface-soft); border-radius: var(--m9-radius-sm); }
.popular-card > span { position:absolute; left:5px; top:5px; padding:4px 7px; color:var(--m9-on-primary); background:var(--m9-primary); font-size: 0.75rem; font-weight: 700; border-radius: var(--m9-radius-xs); }
.popular-card b { font-size: 0.875rem; font-weight: 600; }
.popular-card small { color:var(--m9-neutral-strong); font-size: 0.75rem; }
.official-heading h2 { color:var(--m9-info); }
.official-heading > span { color:var(--m9-neutral-strong); font-size: 0.8125rem; }
.official-body { display:grid; grid-template-columns:260px 1fr; gap:18px; padding:18px; }
.official-editorial { position:relative; padding:24px; overflow:hidden; border:0; background:var(--m9-primary); border-radius: var(--m9-radius-sm); color:var(--m9-on-primary); text-align:left; min-height:280px; display:grid; align-content:start; gap:9px; }
.official-editorial > span { font-size: 0.75rem; letter-spacing:.1em; color:var(--m9-input-border); }
.official-editorial > b { font: var(--m9-type-page-title); line-height:1.3; z-index:2; }
.official-editorial > small { font-size: 0.75rem; color:var(--m9-border); z-index:2; }
.official-editorial img { position:absolute; bottom:0; right:0; height:40%; width:60%; object-fit:contain; background:var(--m9-on-primary); border-radius: var(--m9-radius-3xl) 0 0; }
.official-products { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-content:center; }
.official-product { border:0; padding:0; background:none; display:grid; gap:9px; text-align:center; color:var(--m9-text); }
.official-product img { width:100%; aspect-ratio:1; object-fit:contain; background:var(--m9-surface-soft); border-radius: var(--m9-radius-sm); }
.official-product b { font-size: 0.875rem; line-height:1.4; }
.official-product strong { color:var(--m9-primary); font-size: 1.0rem; }
.shop-live-grid { padding:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.shop-live-card { position:relative; padding:0; border:0; overflow:hidden; border-radius: var(--m9-radius-md); background:var(--m9-brand-navy); text-align:left; color:var(--m9-on-primary); }
.shop-live-card img { display:block; width:100%; height:210px; object-fit:cover; }
.shop-live-card > span { position:absolute; top:10px; left:10px; padding:4px 8px; font-size: 0.75rem; background:var(--m9-danger); border-radius: var(--m9-radius-xs); }
.shop-live-card > div { padding:11px 12px; display:grid; gap:2px; }
.shop-live-card b { font-size: 0.875rem; }
.shop-live-card small { color:var(--m9-input-border); font-size: 0.75rem; }
.catalog-heading { border-bottom:3px solid var(--m9-primary); }
.catalog-heading h2 { color:var(--m9-primary); }
.catalog-toolbar { margin:16px; padding:12px; display:flex; align-items:center; gap:12px; background:var(--m9-disabled-bg); border-radius: var(--m9-radius-xs); }
.catalog-toolbar > span { color:var(--m9-neutral-strong); font-size: 0.875rem; min-width:100px; }
.sort-buttons { display:flex; gap:5px; }
.sort-buttons button { padding:7px 14px; border:1px solid var(--m9-border); background:var(--m9-on-primary); color:var(--m9-text-secondary); border-radius: var(--m9-radius-xs); font-size: 0.875rem !important; }
.sort-buttons button.is-active { color:var(--m9-on-primary); background:var(--m9-primary); border-color:var(--m9-primary); }
.catalog-toolbar label { display:flex; align-items:center; gap:7px; margin-left:auto; font-size: 0.875rem; }
.catalog-toolbar select { max-width:150px; padding:7px; border:1px solid var(--m9-border); border-radius: var(--m9-radius-xs); background:var(--m9-on-primary); color:var(--m9-text-secondary); font-size: 0.875rem; }
.catalog-filter-button { display:none; }
.catalog-layout { display:grid; grid-template-columns:185px minmax(0,1fr); gap:16px; padding:0 16px 20px; }
.catalog-filters { padding:12px; border:1px solid var(--m9-chart-grid); border-radius: var(--m9-radius-sm); background:var(--m9-on-primary); align-self:start; }
.catalog-filters h3 { margin:0 0 12px; font-size: 0.875rem; }
.catalog-filters h4 { margin:16px 0 7px; padding-top:12px; border-top:1px solid var(--m9-neutral-bg); font-size: 0.875rem; }
.catalog-filters label { display:flex; gap:6px; align-items:center; padding:7px 0; font-size: 0.8125rem; color:var(--m9-text-secondary); cursor:pointer; }
.catalog-filters input { width:15px; height:15px; accent-color:var(--m9-primary); }
.catalog-filters button { border:0; background:none; padding:6px 0; color:var(--m9-neutral-strong); text-align:left; font-size: 0.8125rem !important; }
.catalog-filters [data-reset-shop-filters] { margin-top:14px; width:100%; text-align:center; background:var(--m9-border-soft); border-radius: var(--m9-radius-xs); color:var(--m9-primary); }
#catalogCategoryFilters { display:grid; gap:3px; max-height:230px; overflow:auto; }
#catalogCategoryFilters button.is-active { color:var(--m9-primary); font-weight: 700; }
.catalog-context { margin:14px 16px 0; }
.catalog-context > div { display:flex; align-items:center; gap:12px; }
.catalog-context img { width:48px; height:48px; object-fit:contain; border:1px solid var(--m9-border); border-radius: var(--m9-radius-sm); }
.catalog-context b { font-size: 1.0rem; }
.catalog-subcategories { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.catalog-subcategories button { padding:6px 11px; border:1px solid var(--m9-border); border-radius: var(--m9-radius-xs); background:var(--m9-on-primary); color:var(--m9-text-secondary); font-size: 0.875rem !important; }
.catalog-subcategories button.is-active { color:var(--m9-primary); border-color:var(--m9-primary); background:var(--m9-page); }
.shop-active-filters { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px; margin-bottom:12px; }
.shop-active-filters:empty { display:none; }
.shop-active-filters button { padding:5px 9px; color:var(--m9-primary); border:1px solid var(--m9-input-border); border-radius: var(--m9-radius-xs); background:var(--m9-page); font-size: 0.8125rem !important; }
#view-shop .catalog-layout .product-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
#view-shop .product-card { position:relative; padding:8px; min-height:326px; border-radius: var(--m9-radius-xs); border:1px solid var(--m9-border); box-shadow: var(--m9-shadow-surface); background:var(--m9-on-primary); }
#view-shop .product-card:hover { border-color:var(--m9-primary); transform:translateY(-2px); box-shadow: var(--m9-shadow-surface); }
#view-shop .product-visual { aspect-ratio:1; width:100%; padding:0; border:0; background:var(--m9-surface-soft); border-radius: var(--m9-radius-xs); }
#view-shop .product-visual img { width:100%; height:100%; object-fit:contain; }
#view-shop .product-card h3 { font-size: 0.875rem; min-height:40px; line-height:1.45; margin:8px 0 5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#view-shop .product-name-link { font-weight: 500; }
#view-shop .product-store small, #view-shop .program-badge, #view-shop .delivery-line, #view-shop .rating-line { font-size: 0.75rem; }
#view-shop .card-programs { display:none; }
#view-shop .delivery-line { margin-top:7px; }
#view-shop .delivery-line > span:last-child { display:none; }
#view-shop .product-price { gap:5px; flex-wrap:wrap; margin-top:8px; }
#view-shop .product-price b { color:var(--m9-danger); font-size: 1.0rem; }
#view-shop .product-price del { font-size: 0.75rem; }
#view-shop .save-product { width:27px; height:27px; top:12px; right:12px; }
#view-shop .product-card .discount { font-size: 0.75rem; padding:3px 5px; }
#view-shop .product-card .rating-line { margin-top:auto; padding-top:7px; gap:4px; }
#view-shop .product-card .rating-line span { font-size: 0.75rem; }
#view-shop .catalog-load-more { display:block; margin:24px auto 0; min-width:220px; padding:11px 20px; color:var(--m9-text-secondary); border:1px solid var(--m9-border); border-radius: var(--m9-radius-xs); background:var(--m9-on-primary); font-size: 0.875rem; }
#view-shop .catalog-load-more[hidden] { display:none; }
#view-shop .store-program-grid, #view-shop .store-grid { padding:16px; }
#view-shop .store-program-card { border-radius: var(--m9-radius-sm); min-height:135px; }
#view-shop .recommended-products { padding:16px; grid-template-columns:repeat(6,minmax(0,1fr)); }
#view-shop .scene-products { padding:0 16px 18px; display:none; }
.shop-asset-credit { display:flex; justify-content:space-between; gap:12px; padding:18px 4px 2px; font-size: 0.75rem; color:var(--m9-neutral-strong); }
.shop-asset-credit a { color:var(--m9-primary); text-decoration:underline; }
.pdp-main-image img, .pdp-thumbs img { object-fit:contain; }
.product-photo-note { font-size: 0.75rem; color:var(--m9-neutral-strong); margin:10px 0; }
@media (max-width:1120px) {
  .category-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .shop-shortcuts { grid-template-columns:repeat(5,1fr); row-gap:18px; }
  #view-shop .catalog-layout .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .catalog-layout { grid-template-columns:170px minmax(0,1fr); }
  .official-body { grid-template-columns:210px 1fr; }
  .official-products { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .official-product:nth-child(4) { display:none; }
}
@media (max-width:820px) {
  body:has(#view-shop.is-active) main { width:calc(100% - 24px); padding-top:12px; }
  .shop-utility { margin-bottom:12px; flex-wrap:wrap; gap:4px 12px; }
  .shop-utility h1 { font-size: 1.0rem; }
  .shop-utility > span { display:none; }
  .shop-utility > div { gap:10px; }
  .shop-utility button { font-size: 0.75rem !important; }
  .market-campaign-grid { grid-template-rows:110px 110px; }
  .primary-campaign { padding:20px; }
  .primary-campaign h2 { font: var(--m9-type-page-title); }
  .primary-campaign p { max-width:190px; font-size: 0.75rem; }
  .mini-campaign { padding:12px; }
  .mini-campaign > b { font-size: 0.875rem; }
  .mini-campaign img { opacity:.55; }
  .category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(144px,auto); }
  .category-tile .category-photo { width:70px; height:70px; }
  .flash-grid, .popular-grid { grid-auto-flow:column; grid-auto-columns:145px; grid-template-columns:none; overflow:auto; }
  .official-body { grid-template-columns:170px 1fr; padding:12px; gap:12px; }
  .official-editorial { padding:18px; min-height:220px; }
  .official-editorial > b { font-size: 1.5625rem; }
  .official-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .official-product:nth-child(3) { display:none; }
  .official-heading > span { display:none; }
  .shop-live-grid { grid-template-columns:repeat(4,190px); overflow:auto; }
  .shop-live-card img { height:190px; }
  .catalog-toolbar { margin:12px; gap:7px; flex-wrap:wrap; }
  .catalog-toolbar > span { flex:1; }
  .sort-buttons { order:3; }
  .sort-buttons button { padding:7px 10px; }
  .catalog-toolbar label { order:4; }
  .catalog-filter-button { display:block; border:1px solid var(--m9-border); border-radius: var(--m9-radius-xs); background:var(--m9-on-primary); color:var(--m9-text-secondary); padding:6px 10px; font-size: 0.875rem !important; }
  .catalog-layout { grid-template-columns:1fr; padding:0 12px 16px; }
  .catalog-filters { display:none; }
  .catalog-filters.is-open { display:block; }
  #view-shop .catalog-layout .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #view-shop .recommended-products { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #view-shop .store-program-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px) {
  body:has(#view-shop.is-active) main { width:calc(100% - 16px); }
  .market-campaign-grid { grid-template-columns:1fr 1fr; grid-template-rows:220px 105px; }
  .primary-campaign { grid-column:span 2; grid-row:span 1; }
  .primary-campaign > div:first-child { width:72%; }
  .primary-campaign h2 { font: var(--m9-type-page-title); margin:9px 0; }
  .primary-campaign p { margin-bottom:15px; }
  .mini-campaign > span { font-size: 0.75rem; }
  .mini-campaign > b { font-size: 0.875rem; }
  .mini-campaign small { font-size: 0.75rem; }
  .shop-shortcuts { padding:16px 4px; gap:13px 4px; }
  .shop-shortcut { font-size: 0.75rem !important; }
  .shop-shortcut > span:first-child { width:40px; height:40px; border-radius: var(--m9-radius-lg); }
  .market-section { margin-top:14px; border-radius: var(--m9-radius-sm); }
  .market-section-head { padding:13px 12px; min-height:56px; }
  .market-section-head h2 { font-size: 1.0rem; }
  .market-section-head > button { font-size: 0.75rem !important; }
  .category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(142px,auto); }
  .category-tile { font-size: 0.875rem !important; padding:10px 5px; }
  .category-tile .category-photo { width:62px; height:62px; }
  .category-tile > b { min-height:40px; }
  .flash-heading { gap:6px; }
  .flash-heading h2 { font-size: 1.0rem; }
  .flash-heading > span { display:none; }
  .flash-heading strong { font-size: 0.75rem; }
  .flash-grid, .popular-grid { grid-auto-columns:132px; padding:12px; gap:10px; }
  .official-body { grid-template-columns:125px 1fr; gap:10px; }
  .official-editorial { min-height:195px; padding:14px 12px; }
  .official-editorial > b { font-size: 1.25rem; }
  .official-editorial > small { font-size: 0.75rem; }
  .official-products { display:grid; grid-auto-flow:column; grid-auto-columns:125px; grid-template-columns:none; overflow:auto; }
  .official-product:nth-child(n) { display:grid; }
  .official-product b { font-size: 0.75rem; }
  .shop-live-grid { grid-template-columns:repeat(4,155px); padding:12px; gap:10px; }
  .shop-live-card img { height:170px; }
  .shop-live-card b { font-size: 0.875rem; }
  .catalog-toolbar > span { min-width:90px; font-size: 0.75rem; }
  .sort-buttons button { font-size: 0.75rem !important; }
  .catalog-toolbar label > span { display:none; }
  .catalog-toolbar select { width:122px; font-size: 0.75rem; }
  #view-shop .catalog-layout .product-grid, #view-shop .recommended-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #view-shop .product-card { min-height:310px; }
  #view-shop .product-card h3 { font-size: 0.875rem; }
  #view-shop .store-program-grid { grid-template-columns:repeat(2,1fr); padding:12px; gap:8px; }
  #view-shop .store-grid { grid-template-columns:1fr 1fr; padding:12px; gap:8px; }
  #view-shop .store-card { grid-template-columns:1fr; gap:7px; padding:10px; }
  #view-shop .store-card p { display:none; }
  #view-shop .store-card .store-stats { flex-wrap:wrap; gap:5px; }
  .shop-asset-credit { flex-wrap:wrap; }
}