.mobile-nav{display:none}
@media(max-width:650px){
  .mobile-nav{position:fixed;z-index:8;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #e9eaf3;background:#ffffffed;backdrop-filter:blur(16px)}
  .mobile-nav a,.mobile-nav button{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#777b96;font-size:9px;position:relative}
  .mobile-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-nav a:first-child{color:#4e5cf5}
  .mobile-nav b{position:absolute;top:0;left:calc(50% + 8px);min-width:15px;height:15px;padding-inline:4px;border-radius:50px;background:#4e5cf5;color:#fff;font-size:9px;display:grid;place-items:center}
  .footer{padding-bottom:78px}
  .cart-panel{padding-bottom:calc(21px + env(safe-area-inset-bottom))}
}

@media(max-width:650px){.mobile-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Rounded photo wells keep the product photography soft and consistent. */
.brand-mark{display:block;width:42px;height:30px;object-fit:contain;flex:none;padding:0;background:none;color:initial;font-size:initial;line-height:normal;letter-spacing:normal}
.category-photo{display:block;width:58px;height:52px;overflow:hidden;border-radius:12px;background:#f3f4fa;flex:none}
.category-photo img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;border-radius:inherit}
.product-visual{position:relative;overflow:hidden}
.product-visual{background:#fff}
.product-visual img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);max-width:none;max-height:none;object-fit:contain;object-position:center;border-radius:13px}
@supports (object-view-box:inset(10% 10% 10% 10%)){
  .product-visual img[src$="iphone18-pro.webp"]{object-view-box:inset(26.8% 13.2% 0 13.5%)}
  .product-visual img[src$="iphone18-pro-max.webp"]{object-view-box:inset(11.2% 12.4% 11.8% 12.4%)}
  .product-visual img[src$="iphone-air.webp"]{object-view-box:inset(30.1% 12.2% 0 12.5%)}
  .product-visual img[src$="iphone-17.webp"]{object-view-box:inset(33.4% 13.8% 0 14.2%)}
  .product-visual img[src$="iphone-17e.webp"]{object-view-box:inset(35% 14.2% 0 14.2%)}
  .product-visual img[src$="iphone-16.webp"]{object-view-box:inset(17% 15.2% 11.2% 15.2%)}
  .product-visual img[src$="macbook-neo.webp"]{object-view-box:inset(35.9% 15.2% 7.8% 15.2%)}
  .product-visual img[src$="macbook-air.webp"]{object-view-box:inset(30.3% 7.1% 7.8% 7.1%)}
  .product-visual img[src$="macbook-pro.webp"]{object-view-box:inset(27.1% 4.4% 7.8% 4.2%)}
  .product-visual img[src$="ipad-pro.webp"]{object-view-box:inset(0 16.9% 5.6% 16.9%)}
  .product-visual img[src$="ipad-air.webp"]{object-view-box:inset(0 16.3% 5.6% 16.3%)}
  .product-visual img[src$="ipad-mini.webp"]{object-view-box:inset(23.8% 27.1% 5.3% 26.7%)}
  .product-visual img[src$="ipad.webp"]{object-view-box:inset(8% 19.2% 5.3% 19.2%)}
  .product-visual img[src$="watch-series.webp"]{object-view-box:inset(3.6% 7.3% 0 7.6%)}
  .product-visual img[src$="watch-se.webp"]{object-view-box:inset(2.6% 8.6% 0 6.5%)}
  .product-visual img[src$="watch-ultra.webp"]{object-view-box:inset(0 2% 0 2.3%)}
  .product-visual img[src$="airpods-pro-3.webp"]{object-view-box:inset(14% 27.1% 1.3% 27.1%)}
  .product-visual img[src$="airpods-5-anc.webp"]{object-view-box:inset(14.7% 14.7% 0 14.7%)}
  .product-visual img[src$="airpods-5.webp"]{object-view-box:inset(37.6% 14.4% 0 14.4%)}
  .product-visual img[src$="airpods-max-2.webp"]{object-view-box:inset(1.8% 8.1% 1.2% 8.1%)}
  .product-visual img[src$="airtag.webp"]{object-view-box:inset(22% 8% 19% 0)}
  .product-visual img[src$="magsafe.webp"]{object-view-box:inset(0 0 15% 0)}
}
@media(max-width:650px){.brand-mark{width:36px;height:27px}.category-photo{width:48px;height:48px}.product-visual img{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}}

@media(max-width:650px){
  .catalog-toolbar{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:8px;margin:0 0 10px}
  .tool-button,.sort-control{width:100%;height:44px;min-width:0;justify-content:center;padding:0 9px;gap:7px;font-size:11px}
  .tool-icon{width:17px;height:17px}
  .sort-control{justify-content:flex-start;padding-left:10px;padding-right:28px}
  .sort-trigger{font-size:11px}
  .sort-chevron{right:9px;width:14px;height:14px}
  .filter-panel{grid-template-columns:minmax(0,1fr);gap:15px;padding:14px;margin-bottom:12px}
  .filter-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 8px}
  .filter-categories label{font-size:11px}
  .reset-filters{justify-self:start;min-height:36px}
  .add-button svg{width:16px;height:16px}
}

@media(max-width:650px){
  .hero{min-height:402px}
  .hero-slide{align-items:flex-start}
  .hero-slide>.hero-copy{padding-top:25px;padding-bottom:54px}
  .hero-slide>.hero-art:not(.connection-art){opacity:.27}
  .hero-slide>.hero-art:not(.connection-art) img{object-position:62% center}
  .connection-slide .hero-copy{max-width:none}
  .connection-slide .hero-art.connection-art{top:auto;right:18px;bottom:29px;width:132px;transform:none;opacity:.92}
  .connection-art svg{width:80%;height:80%}
  .hero-carousel-controls{right:12px;bottom:12px;gap:3px;padding:4px}
  .hero-arrow{width:27px;height:27px}
  .hero-dot{width:8px;height:8px}
  .hero-dot.is-active{width:17px}
  .connection-slide .hero-copy>p{max-width:285px}
  .connection-slide .hero-actions{flex-wrap:wrap;align-items:flex-start}
  .connection-slide .hero-note{max-width:130px}
}

/* Hero layout: reserve a clear text column and keep the full product image visible. */
@media(min-width:651px){
  .hero{min-height:405px}
  .hero-slide:not(.connection-slide)>.hero-copy{width:49%;max-width:560px;padding-right:18px}
  .hero-slide:not(.connection-slide)>.hero-art{left:49%;right:0;width:auto}
  .hero-slide:not(.connection-slide)>.hero-art img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:right center}
}
@media(min-width:651px) and (max-width:900px){.hero{min-height:440px}}
@media(max-width:650px){
  .hero{min-height:550px}
  .hero-slide:not(.connection-slide){display:flex;flex-direction:column;align-items:stretch}
  .hero-slide:not(.connection-slide)>.hero-copy{width:100%;flex:none;padding:23px 19px 0}
  .hero-slide:not(.connection-slide)>.hero-art{position:relative;inset:auto;width:100%;height:auto;min-height:160px;flex:1;opacity:1;display:flex;align-items:center;justify-content:center}
  .hero-slide:not(.connection-slide)>.hero-art img{width:100%;height:100%;max-height:220px;object-fit:contain;object-position:center}
  .hero-carousel-controls{left:16px;right:auto;bottom:11px;gap:3px;padding:3px}
  .hero-arrow{display:none}
  .hero-dots{padding:0 5px}
  .hero-dot{width:8px;height:8px}
  .hero-dot.is-active{width:16px}
  .connection-slide .hero-art.connection-art{bottom:35px}
}

/* Keep the filter in the normal mobile flow and let its button truly hide it. */
@media(max-width:760px){
  .catalog-toolbar{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);justify-content:stretch;gap:8px;margin:0 0 10px}
  .catalog-search-slot:empty{display:none}
  .catalog-search-slot:not(:empty){grid-column:1/-1;width:100%}
  .catalog-search-slot .search{width:100%;height:44px;margin:0;background:#f6f7fc;border-color:transparent}
  .catalog-toolbar #filter-toggle:not([hidden]),.catalog-toolbar .sort-control{display:flex;width:100%;min-width:0}
  .catalog-layout{display:block}
  .catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-panel[hidden]{display:none!important}
  .filter-panel:not([hidden]){position:static;width:100%;flex:none;margin:0 0 13px;padding:14px;border-radius:15px}
  .filter-panel .filter-categories{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;column-gap:8px}
  .filter-panel .filter-categories .filter-legend{grid-column:1/-1}
}

/* Keep the hero artwork as one intentional composition instead of squeezing a
   wide image into a narrow side column. */
@media(min-width:651px){
  .hero-slide:not(.connection-slide)>.hero-copy{width:54%;max-width:560px;padding:36px 18px 32px 34px}
  .hero-slide:not(.connection-slide)>.hero-art{inset:0;width:auto;height:100%;opacity:1}
  .hero-slide:not(.connection-slide)>.hero-art img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 54%}
}
@media(max-width:650px){
  .hero{min-height:560px}
  .hero-slide:not(.connection-slide){display:block;align-items:stretch}
  .hero-slide:not(.connection-slide)>.hero-copy{width:100%;max-width:none;padding:23px 19px 0}
  .hero-slide:not(.connection-slide)>.hero-art{position:absolute;inset:310px 0 0;width:auto;height:auto;min-height:0;opacity:1;display:block;background:#f1f2ff;mask-image:linear-gradient(to bottom,transparent 0,#000 15%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%)}
  .hero-slide:not(.connection-slide)>.hero-art img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:74% center}
  .hero-carousel-controls{left:16px;right:auto;bottom:11px;gap:3px;padding:3px}
  .hero-arrow{display:none}
  .hero-dots{padding:0 5px}
  .hero-dot{width:8px;height:8px}
  .hero-dot.is-active{width:16px}
}
@media(max-width:380px){
  .hero{min-height:610px}
  .hero-slide:not(.connection-slide)>.hero-art{inset:350px 0 0}
}
@media(max-width:650px){.connection-slide>.connection-caption{top:16px;right:16px;padding:7px 9px;font-size:8px}}

/* The wide photograph fills the banner; the mobile crop uses its own source. */
.hero-slide:not(.connection-slide)>.hero-art picture{display:block;width:100%;height:100%}
@media(min-width:651px){
  .hero-slide:not(.connection-slide)>.hero-copy{width:54%;max-width:560px;padding:36px 18px 32px clamp(26px,4vw,52px);z-index:2}
  .hero-slide:not(.connection-slide)>.hero-art{inset:0;width:100%;height:100%;opacity:1;overflow:hidden;border-radius:inherit}
  .hero-slide:not(.connection-slide)>.hero-art img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:right center}
}
@media(min-width:651px) and (max-width:900px){
  .hero{min-height:360px}
  .hero-slide:not(.connection-slide)>.hero-copy{width:53%;padding:20px 14px 20px 34px}
  .hero-slide:not(.connection-slide) h1{font-size:clamp(32px,4vw,38px);letter-spacing:-1.6px;margin:10px 0 12px}
  .hero-slide:not(.connection-slide) .hero-copy>p{max-width:345px;font-size:13px;line-height:1.45}
  .hero-slide:not(.connection-slide) .hero-actions{margin-top:16px}
  .hero-slide:not(.connection-slide) .hero-meta{margin-top:15px}
  .hero-slide:not(.connection-slide)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#ffffffed 0%,#ffffffd1 33%,#ffffff00 58%)}
  html[data-theme=dark] .hero-slide:not(.connection-slide)::after{background:linear-gradient(90deg,#15182be8 0%,#15182bce 33%,#15182b00 58%)}
}

.favorite-link.is-active{color:#4e5cf5}
.favorite-link.is-active svg,.favorite-toggle.is-favorite svg{fill:#4e5cf5}
.favorite-count{position:absolute;top:0;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#4e5cf5;color:#fff;font-size:10px;line-height:17px;text-align:center}
.product-visual .favorite-toggle{position:absolute;z-index:2;top:10px;right:10px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid #e2e5f2;border-radius:50%;background:#ffffffeb;color:#747996;box-shadow:0 3px 10px #1e24500c;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s}
.product-visual .favorite-toggle:hover{transform:scale(1.06);border-color:#cbd0fa;color:#4e5cf5}
.product-visual .favorite-toggle.is-favorite{border-color:#e1e3ff;background:#f0f1ff;color:#4e5cf5}
.product-visual .favorite-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.product-visual .favorite-toggle.is-favorite svg{fill:#4e5cf5;stroke:#4e5cf5}
.load-more{min-height:42px;display:block;margin:22px auto 0;padding:0 22px;border:1px solid #dfe2f3;border-radius:12px;background:#fff;color:#4e5cf5;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .18s,border-color .18s}
.load-more:hover{border-color:#c6cbfa;background:#f7f7ff}
.load-more[hidden]{display:none!important}
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:9;width:46px;height:46px;display:grid;place-items:center;border:1px solid #e4e6f2;border-radius:50%;background:#ffffffed;color:#4e5cf5;box-shadow:0 6px 22px #171d481c;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(9px);pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.back-to-top svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.category[data-category="ipad"] .category-photo img{mix-blend-mode:multiply}
@media(max-width:650px){
  .product-visual .favorite-toggle{top:7px;right:7px;width:31px;height:31px}
  .product-visual .favorite-toggle svg{width:16px;height:16px}
  .back-to-top{right:15px;bottom:calc(74px + env(safe-area-inset-bottom));width:42px;height:42px}
  .load-more{margin-top:16px}
}