/* MSQTO shop: compact navigation, generous photography, useful product details. */
.shop-view { --shop-ink: #253c2d; --shop-green: #385d43; }
.shop-view .nav-desktop { gap: 1.2rem; }
.shop-view .nav-link { font-size: .83rem; }
.shop-view .nav-cta { font-size: .8rem; padding: .55rem .9rem; }
.shop-cart-link { display: inline-flex; align-items: center; gap: .35rem; }
.shop-cart-link [data-cart-count] { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--surface-3); font-size: .66rem; }
.shop-page [hidden] { display: none !important; }
.shop-page .btn-primary { background: var(--shop-green); border-color: var(--shop-green); color: #fff; }
.shop-page .btn-primary:hover { background: #294a33; border-color: #294a33; }
.shop-free-help { background: #eaf0e6; border-bottom: 1px solid #dce4d6; }
.shop-free-help .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 1rem; padding-top: .52rem; padding-bottom: .52rem; font-size: .72rem; color: #3a503a; }
.shop-free-help a { color: #2a4c32; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.shop-hero { padding: 2.6rem 0 2.8rem; }
.shop-hero-layout { display: grid; grid-template-columns: .98fr 1.02fr; gap: clamp(2rem, 5vw, 4.25rem); align-items: center; }
.shop-eyebrow { display: block; color: var(--shop-green); font-weight: 650; font-size: .64rem; text-transform: uppercase; letter-spacing: .13em; margin-bottom: .7rem; }
.shop-hero h1 { color: var(--shop-ink); font-size: clamp(2.65rem, 5.2vw, 4.05rem); line-height: 1.04; letter-spacing: -.06em; font-weight: 650; }
.shop-hero-copy > p { max-width: 24rem; font-size: .96rem; line-height: 1.65; margin: 1.2rem 0 1.45rem; }
.shop-hero .btn { gap: 1.6rem; font-size: .81rem; min-height: 46px; padding: .62rem 1.15rem; border-radius: 8px; }
.shop-hero-caption { color: var(--text-secondary); font-size: .65rem; margin-top: 1rem; }
.shop-hero-photo { position: relative; overflow: hidden; border-radius: 3px 3px 48px 3px; aspect-ratio: 1.28; background: var(--surface-2); }
.shop-hero-photo::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(24,35,21,.48)); pointer-events: none; }
.shop-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-hero-photo > span { position: absolute; bottom: 1.25rem; left: 1.35rem; right: 1rem; z-index: 1; color: #fff; font-size: .76rem; font-weight: 500; }
.shop-catalog { padding: 2.2rem 0 3.25rem; border-top: 1px solid var(--border-subtle); scroll-margin-top: 5rem; }
.shop-catalog-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.8rem; }
.shop-catalog-heading h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -.04em; color: var(--shop-ink); }
.shop-catalog-heading > p { margin: 0; color: var(--text-secondary); font-size: .78rem; line-height: 1.6; }
.shop-categories { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.shop-categories button { border: 1px solid var(--border-medium); border-radius: 100px; background: transparent; color: var(--text-secondary); font: inherit; font-size: .72rem; font-weight: 550; min-height: 42px; padding: .45rem .9rem; cursor: pointer; }
.shop-categories button:hover { border-color: var(--shop-green); color: var(--shop-green); }
.shop-categories button[aria-pressed="true"] { color: #fff; background: var(--shop-green); border-color: var(--shop-green); }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.shop-search { display: flex; align-items: center; gap: .65rem; background: #fff; border: 1px solid var(--border-medium); padding: 0 .8rem; border-radius: 6px; width: min(100%, 24rem); min-width: 0; }
.shop-search:focus-within { outline: 2px solid var(--shop-green); outline-offset: 2px; }
.shop-search svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--text-secondary); }
.shop-search input { font: inherit; font-size: .8rem; width: 100%; min-width: 0; padding: .63rem 0; border: 0; color: var(--text-primary); background: transparent; outline: none; min-height: 44px; }
.shop-search input::placeholder { color: var(--text-secondary); opacity: 1; }
.shop-sort { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; font-size: .72rem; color: var(--text-secondary); }
.shop-sort select { font: inherit; color: var(--text-primary); border: 1px solid var(--border-medium); background: #fff; border-radius: 6px; min-height: 44px; padding: .45rem .6rem; max-width: 12rem; }
.shop-results-heading { display: flex; align-items: center; justify-content: space-between; min-height: 2.85rem; gap: 1rem; }
.shop-results-heading p { font-size: .71rem; margin: 0; color: var(--text-secondary); }
.shop-reset { padding: .3rem 0; min-height: 40px; border: 0; background: transparent; font: inherit; font-size: .72rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--shop-green); }
.shop-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.shop-product { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e5e3db; border-radius: 9px; scroll-margin-top: 5.5rem; transition: border-color .2s ease, box-shadow .2s ease; }
.shop-product:hover { border-color: #b6c4b2; box-shadow: 0 8px 25px rgba(44,61,36,.06); }
.shop-product-photo { aspect-ratio: 1.1; padding: 1.55rem; background: #fff; border-bottom: 1px solid #f1eee8; overflow: hidden; }
.shop-product-photo img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform .3s ease; }
.shop-product:hover .shop-product-photo img { transform: scale(1.035); }
.shop-product-body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem; }
.shop-product-category { color: var(--shop-green); text-transform: uppercase; letter-spacing: .09em; font-size: .57rem; font-weight: 650; margin-bottom: .5rem; }
.shop-product h3 { font-size: 1.04rem; line-height: 1.3; letter-spacing: -.025em; margin-bottom: .4rem; }
.shop-product-format { font-size: .71rem; color: var(--text-secondary); margin: 0 0 .7rem; }
.shop-product-description { font-size: .77rem; line-height: 1.6; margin: 0 0 .85rem; }
.shop-product-details { margin-top: auto; margin-bottom: .85rem; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.shop-product-details summary { font-size: .71rem; font-weight: 600; padding: .55rem 0; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; cursor: pointer; }
.shop-product-details summary::-webkit-details-marker { display: none; }
.shop-product-details summary > span { font-size: 1.1rem; font-weight: 400; color: var(--shop-green); }
.shop-product-details[open] summary > span { transform: rotate(45deg); }
.shop-product-details dl { padding: 0 0 .7rem; font-size: .7rem; line-height: 1.55; }
.shop-product-details dl > div { display: grid; grid-template-columns: 4.7rem 1fr; gap: .4rem; padding: .25rem 0; }
.shop-product-details dt { color: var(--text-primary); font-weight: 550; }
.shop-product-details dd { color: var(--text-secondary); margin: 0; }
.shop-product-action .btn { display: flex; width: 100%; min-height: 44px; justify-content: space-between; padding: .55rem .8rem; font-size: .75rem; border-radius: 6px; gap: .5rem; }
.shop-product-action [data-retail-note] { color: var(--text-secondary); text-align: center; font-size: .6rem; line-height: 1.4; margin: .5rem 0 0; }
.shop-use-note { max-width: 43rem; text-align: center; font-size: .71rem; color: var(--text-secondary); line-height: 1.65; margin: 1.5rem auto 0; }
.shop-use-note a { color: var(--shop-green); text-decoration: underline; text-underline-offset: 3px; }
.shop-label-note { text-align: center; font-size: .65rem; line-height: 1.5; margin: .45rem 0 0; }
.shop-no-results { background: #fff; border: 1px solid var(--border-subtle); border-radius: 9px; padding: 3rem 1.25rem; text-align: center; }
.shop-no-results h3 { font-size: 1.25rem; }
.shop-no-results p { font-size: .86rem; margin: .65rem 0 1rem; }
.shop-no-results .btn { font-size: .8rem; }
.shop-alerts { padding: 3rem 0; background: #edf0e7; border-top: 1px solid #dde3d7; scroll-margin-top: 5rem; }
.shop-alerts .form-card { max-width: 32rem; padding: 2rem; border-color: #dbe0d4; box-shadow: none; }
.shop-alerts-heading { text-align: center; margin-bottom: 1.5rem; }
.shop-alerts-heading .section-tag { font-family: var(--font-system); font-size: .65rem; }
.shop-alerts-heading .section-title { font-size: 1.7rem; line-height: 1.2; letter-spacing: -.04em; color: var(--shop-ink); }
.shop-alerts-heading p { font-size: .85rem; margin: .7rem 0 0; }
.shop-alerts-submit { width: 100%; margin-top: .5rem; }
.shop-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .shop-view .nav-desktop { gap: .85rem; }
  .shop-hero-layout { gap: 2rem; }
  .shop-product-grid { gap: 1rem; }
  .shop-product-body { padding: 1rem; }
}
@media (max-width: 850px) {
  .shop-view .nav-desktop { display: none; }
  .shop-view .nav-toggle-btn { display: block; }
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-hero h1 { font-size: 2.9rem; }
  .shop-hero-copy > p { font-size: .85rem; }
  .shop-hero-caption { display: none; }
}
@media (max-width: 600px) {
  .shop-page .container { padding-left: 1rem; padding-right: 1rem; }
  .shop-free-help .container { column-gap: .6rem; font-size: .62rem; }
  .shop-hero { padding: 1.7rem 0 2rem; }
  .shop-hero-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .shop-hero h1 { font-size: clamp(2.9rem, 12vw, 3.6rem); }
  .shop-hero-copy > p { max-width: 23rem; margin: .9rem 0 1.2rem; }
  .shop-hero-photo { aspect-ratio: 1.9; border-bottom-right-radius: 32px; }
  .shop-hero-photo > span { left: 1rem; bottom: 1rem; font-size: .69rem; }
  .shop-catalog { padding-top: 1.7rem; }
  .shop-catalog-heading { display: block; margin-bottom: 1.25rem; }
  .shop-catalog-heading > p { margin-top: .6rem; }
  .shop-catalog-heading > p br { display: none; }
  .shop-categories { flex-wrap: nowrap; overflow-x: auto; padding: .15rem .15rem .55rem; margin-left: -.15rem; margin-right: -.15rem; scroll-padding: .2rem; }
  .shop-categories button { white-space: nowrap; font-size: .68rem; flex-shrink: 0; padding: .42rem .8rem; }
  .shop-toolbar { flex-wrap: wrap; gap: .75rem; }
  .shop-search { width: 100%; }
  .shop-sort { width: 100%; justify-content: space-between; }
  .shop-sort select { flex: 1; }
  .shop-product-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .shop-product-photo { aspect-ratio: 1.4; padding: 1.5rem; }
  .shop-product-body { padding: 1.1rem; }
  .shop-product h3 { font-size: 1.15rem; }
  .shop-product-category { font-size: .63rem; }
  .shop-product-format, .shop-product-description { font-size: .8rem; }
  .shop-product-details summary, .shop-product-details dl { font-size: .75rem; }
  .shop-product-action .btn { font-size: .82rem; }
  .shop-product-action [data-retail-note] { font-size: .65rem; }
  .shop-alerts { padding: 2rem 0; }
  .shop-alerts .form-card { padding: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-product, .shop-product-photo img { transition: none; }
  .shop-product:hover .shop-product-photo img { transform: none; }
}

.shop-comparison { padding: 0 0 3.25rem; }
.shop-comparison h2 { color: var(--shop-ink); font-size: 1.9rem; letter-spacing: -.04em; margin-bottom: 1.35rem; }
.shop-comparison-head, .shop-comparison-list li { display: grid; grid-template-columns: 1fr 1.35fr 1.65fr; gap: 1.3rem; align-items: start; }
.shop-comparison-head { border-bottom: 1px solid var(--border-medium); padding: .6rem .9rem; color: var(--text-secondary); font-size: .64rem; font-weight: 600; }
.shop-comparison-list { list-style: none; margin: 0; padding: 0; }
.shop-comparison-list li { padding: 1rem .9rem; border-bottom: 1px solid var(--border-subtle); }
.shop-comparison-list li:nth-child(even) { background: rgba(255,255,255,.48); }
.shop-comparison-list h3 { font-size: .76rem; line-height: 1.55; letter-spacing: 0; font-weight: 600; }
.shop-comparison-list a { color: var(--shop-green); font-size: .76rem; line-height: 1.55; text-decoration: underline; text-underline-offset: 3px; }
.shop-comparison-list p { font-size: .72rem; line-height: 1.6; margin: 0; }
@media (max-width: 600px) {
  .shop-comparison { padding-bottom: 2rem; }
  .shop-comparison h2 { font-size: 1.6rem; margin-bottom: 1rem; }
  .shop-comparison-head { display: none; }
  .shop-comparison-list { border-top: 1px solid var(--border-subtle); }
  .shop-comparison-list li { grid-template-columns: 1fr; gap: .45rem; padding: 1.1rem .85rem; }
  .shop-comparison-list h3 { font-size: .72rem; color: var(--text-secondary); font-weight: 500; }
  .shop-comparison-list a { font-size: .86rem; font-weight: 600; }
  .shop-comparison-list p { font-size: .76rem; }
}
