/* Exact reference homepage layer. Desktop uses the supplied 1536x1024 design as a pixel-matched visual canvas. */
.reference-home{margin:0;background:#020305;color:#fff;overflow-x:hidden}
.reference-home main{margin:0;max-width:none;padding:0}
.desktop-master{display:block;background:#020305;width:100%}
.reference-canvas{position:relative;width:100%;max-width:1536px;margin:0 auto;aspect-ratio:3/2;background:#020305;overflow:hidden}
.reference-canvas>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;z-index:5;display:block;border:0;background:transparent;color:transparent;cursor:pointer;border-radius:4px;padding:0;margin:0}
.hotspot span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hotspot:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 0 0 6px #ff2d18}
.hero-shop{left:1.7%;top:30.7%;width:11.1%;height:4.4%}
.nav-shop{left:36.8%;top:1.8%;width:4.2%;height:5.2%}.nav-new{left:41.1%;top:1.8%;width:3.2%;height:5.2%}.nav-best{left:44.2%;top:1.8%;width:6.1%;height:5.2%}.nav-collections{left:50.1%;top:1.8%;width:6.3%;height:5.2%}.nav-gift{left:56.5%;top:1.8%;width:5.6%;height:5.2%}.nav-custom{left:62.1%;top:1.8%;width:5.0%;height:5.2%}.nav-about{left:67.2%;top:1.8%;width:4.5%;height:5.2%}
.nav-bag{left:78.6%;top:1.6%;width:3.8%;height:5.4%}.top-shop{left:93.8%;top:2.1%;width:5.0%;height:3.6%}
.category-hotspot{top:38.4%;height:6.7%;width:5.4%}.cat-1{left:2.0%}.cat-2{left:7.5%}.cat-3{left:12.9%}.cat-4{left:18.1%}.cat-5{left:23.2%}.cat-6{left:28.6%}.cat-7{left:34.0%}.cat-8{left:39.5%}.cat-9{left:45.1%}.cat-10{left:50.7%}.cat-11{left:56.6%}.cat-12{left:62.4%}.cat-13{left:68.8%}.cat-14{left:74.4%}.cat-15{left:79.7%}.cat-16{left:85.0%;width:12.0%}
.featured-360{left:28.8%;top:46.3%;width:33.9%;height:28.1%}.featured-add{left:63.1%;top:59.6%;width:16.0%;height:4.2%}.featured-right{left:79.4%;top:46.3%;width:19.1%;height:28.1%}
.best-anchor{position:absolute;left:0;top:76%;width:1px;height:1px}
.best-card{top:78.1%;height:18.1%;width:9.4%}.best-1{left:.9%}.best-2{left:10.5%}.best-3{left:20.2%}.best-4{left:29.9%}.best-5{left:39.6%}.best-6{left:49.3%}.best-7{left:59.0%}.best-8{left:68.7%}.best-9{left:78.4%}.best-10{left:88.1%;width:10.7%}
.mobile-master{display:none}

/* The global modal/drawer styles come from styles.css, but reference page needs a higher stacking layer. */
.reference-home .quick-modal,.reference-home .bag-drawer,.reference-home .drawer-backdrop{z-index:5000}

@media (max-width:820px){
  body.reference-home{background:#020305;padding-bottom:62px}
  .desktop-master{display:none}
  .mobile-master{display:block;background:#050608;min-height:100vh}
  .m-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:7px 12px;background:rgba(3,4,6,.96);border-bottom:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px)}
  .m-logo{display:block;width:min(62vw,270px);overflow:hidden}.m-logo img{width:100%;height:auto;display:block}
  .m-actions{display:flex;gap:6px;align-items:center}.m-actions a,.m-actions button{display:grid;place-items:center;min-width:42px;height:42px;border:1px solid rgba(255,255,255,.24);background:#050608;color:#fff;border-radius:7px;font-size:19px;text-decoration:none}.m-actions b{font-size:10px;margin-left:3px;color:#ff3a20}
  .m-hero{position:relative;background:#07090c;border-bottom:1px solid rgba(255,255,255,.13)}.m-hero img{width:100%;height:auto;display:block}.m-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 14px}.m-hero-actions a{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid rgba(255,255,255,.32);font-size:12px;font-weight:900;letter-spacing:.12em}.m-hero-actions .m-primary{background:#fff;color:#050608}
  .m-category-wrap,.m-best-scroll{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}.m-category-wrap::-webkit-scrollbar,.m-best-scroll::-webkit-scrollbar{display:none}.wide-scroll-image{max-width:none;display:block}.categories-image{width:1250px;height:auto}.best-image{width:1450px;height:auto}
  .m-feature{background:#f4f4f4;color:#050505;padding:0 0 18px}.m-section-title{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:#050608;color:#fff;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.m-section-title span,.m-section-title strong{font-size:12px;font-weight:1000;letter-spacing:.09em}.m-section-title a{font-size:10px;font-weight:900;color:#fff;text-decoration:none}
  .m-viewer{display:grid;grid-template-columns:1fr;background:#fff}.m-viewer-stage{position:relative;min-height:420px;background:linear-gradient(#f3f3f3,#ececec);overflow:hidden}.m-viewer-stage>img{width:100%;height:420px;object-fit:contain;display:block}.m-viewer-stage .viewer-design{position:absolute;left:50%;top:34%;width:26%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.m-viewer-stage .viewer-design svg{width:100%;height:auto;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}.m-spin-controls{position:absolute;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:48px 1fr 48px;gap:8px}.m-spin-controls button{height:44px;border:0;background:#050505;color:#fff;font-weight:1000;letter-spacing:.05em}
  .m-product-info{padding:18px 16px 4px;background:#fff}.m-kicker{display:inline-block;padding:5px 8px;background:#050505;color:#fff;font-size:9px;font-weight:1000;letter-spacing:.11em}.m-product-info h1{margin:10px 0 2px;font-size:24px;line-height:1}.m-price{margin:0 0 10px;font-size:17px;font-weight:1000}.m-product-info>p:not(.m-price){font-size:12px;color:#454545}.m-size-row{display:flex;gap:5px;flex-wrap:wrap;margin:13px 0}.m-size-row button{min-width:39px;height:34px;border:1px solid #bbb;background:#fff;color:#111;font-size:10px;font-weight:900}.m-size-row button.active{background:#050505;color:#fff;border-color:#050505}.m-add{width:100%;height:50px;border:0;background:#e00000;color:#fff;font-size:14px;font-weight:1000;letter-spacing:.06em}.m-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:13px 0 2px;text-align:center}.m-benefits span{font-size:8px;font-weight:1000;line-height:1.15}
  .m-best{background:#050608;padding-bottom:12px}.m-best-scroll{background:#050608}
  .m-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);height:58px;background:rgba(4,5,7,.97);border-top:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px)}.m-bottom-nav a{display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:9px;font-weight:1000;letter-spacing:.08em}.m-bottom-nav a+a{border-left:1px solid rgba(255,255,255,.09)}
  .reference-home .quick-dialog{width:min(96vw,620px);max-height:90vh;overflow:auto}.reference-home .quick-product{min-height:360px}.reference-home .quick-product img{height:360px;object-fit:contain}.reference-home .bag-drawer{width:min(92vw,390px)}
}

@media (min-width:821px) and (max-aspect-ratio:3/2){
  .reference-canvas{max-width:none}
}