/* SHUTTR mobile look study. Kept separate from the published site. */
:root { --look-ink:#352820; --look-orange:#ff8c00; --look-rust:#d95d30; --look-green:#176c51; --look-paper:#fffaf2; }
body { color:var(--look-ink); background:var(--look-paper); }
.demo-bar { background:#4b3324; color:#fff4df; letter-spacing:.03em; }
.demo-bar span { color:#f4bd78; margin:0 .35em; }
.site-header { background:#fff9ec; }
.site-header .brand-mark { background:var(--look-orange); color:#3d2b1f; }
.category-bar { background:#fffdf8; }
.intro { background:linear-gradient(115deg,#ffe8a8 0%,#ffd47d 65%,#ffc570 100%); border:1px solid #f8c977; box-shadow:0 12px 28px #a0522d12; }
.intro h1 { color:#3f2b20; }
.intro h1 span { color:#a44328; }
.intro .eyebrow { color:#7b422c; }
.hero-photo { display:grid; place-items:center; background:radial-gradient(circle at 45% 50%,#ffe19b,#ffc66e); }
.hero-photo img { width:100%; height:100%; object-fit:contain; padding:4%; }
.photo-note { background:#fff9e6; color:#714228; }
.category-tile-image { background:#fff1db; border:1px solid #f0e3ce; }
.category-tile-image img { width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; }
.category-tile[data-category="Plumbing"] .category-tile-image { background:#e8f8f7; }
.category-tile[data-category="Hardware"] .category-tile-image { background:#f3f1ed; }
.category-tile[data-category="Painting"] .category-tile-image { background:#fcebe2; }
.category-tile[data-category="Plywood"] .category-tile-image { background:#f7ebd5; }
.category-tile[data-category="Bathware"] .category-tile-image,
.category-tile[data-category="Waterproofing"] .category-tile-image { background:#e9f4f5; }
.category-tile[data-category="Tiles & Adhesives"] .category-tile-image { background:#eff4f1; }
.category-tile[data-category="Lighting & Fans"] .category-tile-image { background:#fff7d8; }
.category-tile-request .category-tile-image { background:#f9dba4; }
.category-tile-request .category-tile-image>span { color:#fff; }
.catalogue-alert { display:flex; align-items:center; gap:12px; margin:0 0 25px; padding:12px 15px; border-radius:17px; background:#f3eadb; color:#6c5846; font-size:.78rem; line-height:1.4; }
.catalogue-alert>span { flex:none; font-size:1.25rem; color:#a0522d; }
.catalogue-alert p { margin:0; }
.product-placeholder { position:relative; background:#f8efe1!important; display:grid; place-items:center; overflow:hidden; }
.product-placeholder img { display:block; width:100%; height:100%; object-fit:contain; padding:3px; }
.product-placeholder>span { display:none!important; }
.product-placeholder figcaption { position:absolute; left:5px; right:5px; bottom:4px; width:auto; background:#fffaf4e8; border-radius:6px; color:#725c4b; font-size:.55rem; line-height:1.15; padding:3px; }
.product-placeholder[data-category="Plumbing"],.product-placeholder[data-category="Bathware"],.product-placeholder[data-category="Waterproofing"] { background:#eaf5f5!important; }
.product-placeholder[data-category="Painting"] { background:#fcebe2!important; }
.product-placeholder[data-category="Plywood"] { background:#f7ebd5!important; }
.product-placeholder[data-category="Lighting & Fans"] { background:#fff7d8!important; }
.product-placeholder[data-category="Hardware"] { background:#f3f1ed!important; }
.product-placeholder[data-category="Tiles & Adhesives"] { background:#eff4f1!important; }
.product-placeholder[data-category="Cement & Steel"] { background:#f3f0e8!important; }
.category-nav-image,.rail-thumb img { mix-blend-mode:normal; }
.cart-peek { display:none; }
.bag-preview-summary { margin-top:18px; padding:17px; border-radius:16px; background:#f8efe0; color:#4d3c2e; }
.bag-preview-summary strong { display:block; font-size:.88rem; }
.bag-preview-summary p { margin:7px 0 14px; color:#756453; font-size:.73rem; line-height:1.45; }
.bag-preview-summary .primary-button { width:100%; min-height:43px; border-radius:11px; background:var(--look-green); }
.site-header .location[data-coverage="inside"] .location-icon { color:var(--look-green); }
.site-header .location[data-coverage="outside"] .location-icon { color:#b04d34; }
.location-dialog { width:min(480px,calc(100% - 24px)); padding:22px; border-radius:23px; }
.location-dialog .dialog-heading { padding-bottom:10px; border-bottom:1px solid #eee3d4; }
.location-dialog .dialog-heading h2 { font-size:1.3rem; }
.location-dialog .location-intro { margin:15px 0; color:#6c5a4b; font-size:.85rem; line-height:1.45; }
.detect-location { display:flex; align-items:center; gap:13px; width:100%; min-height:70px; padding:12px 15px; border:1px solid #edc691; border-radius:16px; background:#fff3dc; color:#503624; text-align:left; }
.detect-location>span:first-child { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:13px; background:var(--look-orange); color:#fff; font-size:1.6rem; }
.detect-location>span:nth-child(2) { flex:1; }
.detect-location strong,.detect-location small { display:block; }
.detect-location strong { font-size:.88rem; }
.detect-location small { margin-top:3px; color:#806953; font-size:.68rem; }
.detect-location>span:last-child { font-size:1.2rem; }
.detect-location:hover { background:#ffe6b5; }
.detect-location:disabled { cursor:wait; opacity:.7; }
.location-result { margin:14px 0; padding:13px 14px; border:1px solid #eee2d4; border-radius:14px; background:#f8f4ed; color:#665443; font-size:.76rem; line-height:1.4; }
.location-result strong { display:block; color:#45372b; font-size:.85rem; }
.location-result p { margin:4px 0 0; color:inherit; font-size:inherit; }
.location-result[data-status="inside"] { border-color:#b6ddc5; background:#ecf8ef; color:#2c644b; }
.location-result[data-status="outside"] { border-color:#e8c2ad; background:#fff1e9; color:#8f4934; }
.location-result[data-status="uncertain"],.location-result[data-status="pin-match"] { border-color:#ead79e; background:#fff9e7; }
.location-divider { display:flex; align-items:center; gap:12px; margin:17px 0 9px; color:#9a8b7b; font-size:.72rem; }
.location-divider::before,.location-divider::after { content:""; flex:1; height:1px; background:#e7ded3; }
.location-dialog .field { margin:10px 0 0; }
.location-dialog .field input { min-height:46px; }
.location-dialog .outline-button { width:100%; min-height:43px; margin-top:11px; border-radius:12px; color:#7e4328; }
.location-dialog .location-fineprint { margin:16px 0 0; color:#817265; font-size:.69rem; line-height:1.45; }

/* Motion is visual feedback only; browsing works without it. */
.intro { position:relative; isolation:isolate; overflow:hidden; background-size:160% 160%; animation:hero-glow 9s ease-in-out infinite alternate; }
.intro::before,.intro::after { content:""; position:absolute; z-index:-1; width:140px; height:140px; border:1px solid #ffffff70; border-radius:50%; pointer-events:none; }
.intro::before { top:-74px; right:18%; animation:hero-orbit 12s ease-in-out infinite alternate; }
.intro::after { width:76px; height:76px; bottom:-39px; left:29%; animation:hero-orbit 9s ease-in-out infinite alternate-reverse; }
.hero-photo img { animation:hero-float 5s ease-in-out infinite; }
.category-tile { animation:tile-arrive .55s cubic-bezier(.18,.72,.23,1) backwards; animation-delay:var(--tile-delay,0ms); transition:transform .25s ease; }
.category-tile-image { position:relative; overflow:hidden; background:#fff!important; border:1px solid #ede8df; box-shadow:0 3px 11px #3b30220d; transition:box-shadow .25s ease,border-color .25s ease; }
.category-tile-image::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(145deg,#ffffff75,transparent 45%); }
.category-tile-image img { position:relative; z-index:1; object-fit:contain; padding:2px; transition:transform .35s cubic-bezier(.18,.72,.23,1); }
.category-tile:hover,.category-tile:focus-visible { transform:translateY(-4px); }
.category-tile:hover .category-tile-image,.category-tile:focus-visible .category-tile-image { border-color:#eacb9b; box-shadow:0 8px 22px #8e5b291c; }
.category-tile:hover img,.category-tile:focus-visible img { transform:scale(1.07) rotate(-1deg); }
.category-tile:active { transform:scale(.97); }
.product { transition:transform .25s ease,box-shadow .25s ease; }
.product:hover { transform:translateY(-3px); box-shadow:0 11px 24px #54372118; }
.product-bottom .add,.hero-cta,.mobile-nav button,.cart-peek { transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease; }
.product-bottom .add:active,.hero-cta:active,.mobile-nav button:active,.cart-peek:active { transform:scale(.95); }
.cart-peek:not([hidden]) { animation:bag-enter .38s cubic-bezier(.2,.8,.2,1) both; }
.cart-peek.bag-bump { animation:bag-bump .42s ease; }
@keyframes hero-glow { from { background-position:0% 30%; } to { background-position:100% 70%; } }
@keyframes hero-float { 0%,100% { translate:0 0; } 50% { translate:0 -6px; } }
@keyframes hero-orbit { from { transform:translate(0,0) scale(1); } to { transform:translate(18px,12px) scale(1.14); } }
@keyframes tile-arrive { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes bag-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes bag-bump { 0%,100% { scale:1; } 45% { scale:1.025; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
  .hero-photo img { translate:0 0; }
}

@media (max-width:800px) {
  html { scroll-padding-top:150px; }
  body { background:#fffdf8; padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  .demo-bar { min-height:27px; display:flex; align-items:center; justify-content:center; padding:5px 7px; font-size:.58rem; text-align:center; font-weight:750; }
  .site-header { position:sticky; top:0; z-index:14; grid-template-columns:minmax(0,1fr) auto!important; grid-template-rows:32px 31px 49px; gap:2px 8px; padding:9px 4% 10px!important; border-bottom:1px solid #f0ddbe; box-shadow:0 3px 9px #442d1c0b; }
  .site-header .brand { grid-column:1; grid-row:1; align-self:center; gap:7px; font-size:1.23rem; line-height:1; letter-spacing:-.05em; }
  .site-header .brand small { display:none; }
  .site-header .brand-mark { width:26px; height:28px; border-radius:9px; font-size:18px; }
  .site-header .location { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; width:100%; padding:0; gap:5px; }
  .site-header .location-icon { font-size:1.2rem; color:#a44f2b; }
  .site-header .location small { display:inline; margin-right:5px; color:#8a5b3c; font-size:.63rem; font-weight:750; letter-spacing:.01em; }
  .site-header .location strong { display:inline; color:#3f3025; font-size:.74rem; max-width:230px; }
  .site-header .location[data-coverage="outside"] strong { color:#a74a34; }
  .site-header .location-chevron { font-size:1rem; }
  .site-header .search { grid-column:1 / -1; grid-row:3; height:47px; min-height:47px; margin:2px 0 0; padding:0 13px; background:#fff; border:1px solid #eadac3; border-radius:13px; box-shadow:0 3px 9px #86542a0d; }
  .site-header .search span { color:#8b6548; font-size:1.45rem; }
  .site-header .search input { color:#38291e; font-size:.88rem; }
  .site-header .search input::placeholder { color:#8c8175; }
  .site-header .bag-button { grid-column:2; grid-row:1; align-self:center; margin:0; padding:5px 9px; min-height:30px; border-radius:11px; background:#4b3324; font-size:.72rem; }
  .site-header .bag-button #bagCount { background:#ff8c00; color:#3b281b; border-radius:7px; }
  .category-bar { position:static; border-top:0; border-bottom:1px solid #eee3d4; }
  .category-bar .categories { padding:2px 4% 1px; gap:16px; }
  .category-bar .category { min-height:42px; padding:7px 0 6px; font-size:.73rem; font-weight:700; gap:5px; }
  .category-bar .category.active { color:#a44f2b; border-color:#d95d30; }
  .category-nav-image { width:20px; height:20px; border-radius:5px; }
  main { padding:0 4%; }
  .intro { min-height:197px; grid-template-columns:minmax(0,1fr) 37%; margin:12px 0 22px; border-radius:19px; }
  .intro-copy { padding:17px 2px 13px 16px; }
  .intro .eyebrow { margin:0 0 8px; padding:0; background:transparent; color:#7b472d; font-size:.52rem; letter-spacing:.07em; }
  .intro h1 { font-size:clamp(1.48rem,6.6vw,2.45rem); line-height:1.06; letter-spacing:-.055em; }
  .intro-text { font-size:.7rem; line-height:1.27; margin:7px 0 10px; max-width:210px; }
  .hero-cta { min-height:35px; padding:7px 10px; border-radius:10px; background:#4b3324; color:#fff; font-size:.68rem; font-weight:800; }
  .hero-smallprint { display:none; }
  .hero-photo { min-height:0; border-radius:0 19px 19px 0; overflow:hidden; }
  .hero-photo img { width:190%; max-width:none; height:110%; padding:0; object-fit:contain; object-position:42% center; transform:translateX(-7%); }
  .photo-note,.promo-grid { display:none; }
  .category-discovery { margin:0 0 16px; scroll-margin-top:155px; }
  .section-heading { align-items:end; margin-bottom:12px; }
  .section-heading .eyebrow { display:none; }
  .section-heading h2 { font-size:1.3rem; letter-spacing:-.045em; }
  .category-tiles { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 6px; }
  .category-tile { align-items:center; padding:0; }
  .category-tile-image { width:100%; height:auto; aspect-ratio:1.08; max-height:88px; border-radius:15px; }
  .category-tile-image img { width:100%; height:100%; }
  .category-tile strong { display:block; max-width:95px; min-height:2.4em; margin-top:6px; font-size:.66rem; font-weight:750; line-height:1.12; }
  .category-tile small { display:none; }
  .category-tile-request .category-tile-image>span { width:40px; height:40px; font-size:1.65rem; border-radius:12px; }
  .catalogue-alert { margin:0 0 19px; padding:10px 12px; border-radius:13px; font-size:.68rem; }
  .catalogue-alert>span { font-size:1.1rem; }
  .store-layout { scroll-margin-top:150px; }
  .shop-heading { align-items:center; }
  .shop-heading h2 { font-size:1.32rem; }
  .shop-heading .eyebrow { display:none; }
  .shop-heading .outline-button { min-height:32px; padding:6px 8px; background:#fff2da; border:1px solid #eec78d; border-radius:10px; font-size:.65rem; color:#8c4927; }
  .catalogue-controls { margin:6px 0 12px; }
  .catalogue-controls p { color:#87776a; font-size:.67rem; }
  .catalogue-controls label { font-size:.66rem; }
  .catalogue-controls select { min-height:32px; padding:5px 7px; border-radius:9px; }
  .catalogue-rail { padding:0; margin:0 0 14px; background:transparent; border:0; }
  .rail-options { gap:7px; padding:2px 0 6px; }
  .rail-option { flex-basis:115px; border:1px solid #eee0cc; border-radius:12px; background:#fff; font-size:.66rem; }
  .rail-option.active { background:#fff1d8; border-color:#efa84b; }
  .rail-thumb { background:#fff8ef; }
  .rail-thumb img { width:100%; height:100%; object-fit:contain; }
  .rail-option small { display:none; }
  .product-sections { gap:24px; }
  .category-section { scroll-margin-top:150px; }
  .category-section-heading { margin:0 0 9px; }
  .category-section-heading .eyebrow { display:none; }
  .category-section-heading h3 { font-size:1.08rem; letter-spacing:-.03em; }
  .section-see-all { font-size:.7rem; }
  .product-grid,.category-section:has(.product:nth-child(6)) .product-grid { grid-auto-columns:minmax(145px,44%); gap:9px; padding-bottom:8px; }
  .product { border:1px solid #ede5d8; border-radius:15px; background:#fff; box-shadow:0 3px 12px #5437210a; }
  .product-topline { display:none; }
  .product-image-open { min-height:0; }
  .product-placeholder,.product-photo { height:123px; min-height:123px; margin:7px 7px 0; border-radius:11px; }
  .product-placeholder img { height:100%; padding:3px; }
  .product-placeholder figcaption { font-size:.48rem; }
  .product-body { padding:7px 9px 9px; }
  .seller-label { display:none; }
  .brand-label { min-height:1.2em; margin:0 0 3px; font-size:.6rem; color:#997251; font-weight:750; }
  .product h3 { min-height:2.4em; font-size:.78rem; line-height:1.17; letter-spacing:-.02em; }
  .product .spec { min-height:2.5em; max-height:2.5em; overflow:hidden; font-size:.62rem; line-height:1.25; margin:4px 0; color:#75685c; }
  .product-unit { display:none; }
  .request-status { display:inline-block; margin-top:2px; padding:3px 6px; border-radius:6px; background:#f7f1e7; color:#7d6d5b; font-size:.55rem; font-weight:700; }
  .product-bottom { justify-content:flex-end!important; margin-top:5px; padding-top:0; border:0; }
  .product-bottom .add { min-width:64px; min-height:38px; border:1.5px solid var(--look-green); border-radius:9px; color:var(--look-green); background:#fafff9; font-size:.68rem; font-weight:850; text-transform:uppercase; }
  .product-bottom .quantity { min-height:38px; border:1px solid var(--look-green); border-radius:9px; background:#e8f5ec; color:var(--look-green); }
  .product-bottom .quantity button { min-height:38px; min-width:28px; color:var(--look-green); }
  .details-button { width:100%; min-height:35px; margin-top:5px; border-top:1px solid #f2eee7; padding:5px 0 0; color:#a0522d; font-size:.61rem; font-weight:750; }
  .details-button span { margin-left:auto; }
  .request-card { border-radius:18px; }
  .mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; gap:0; min-height:calc(69px + env(safe-area-inset-bottom)); padding:6px 2% calc(6px + env(safe-area-inset-bottom)); border-top:1px solid #efe2ce; border-radius:19px 19px 0 0; background:#fff; box-shadow:0 -7px 22px #39281917; }
  .mobile-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:52px; padding:3px 2px; border:0; border-radius:12px; background:transparent; color:#85766b; font-size:.57rem; line-height:1.1; font-weight:750; }
  .mobile-nav button.active { background:#fff1d8; color:#9e4a25; }
  .mobile-nav .nav-icon { display:block; margin:0; padding:0; border-radius:0; background:transparent; color:inherit; font-size:1.37rem; line-height:1; font-weight:500; }
  .mobile-nav button>span:last-child { margin:0; padding:0; background:transparent; color:inherit; }
  .mobile-nav em { display:inline-grid; place-items:center; min-width:15px; height:15px; padding:0 3px; border-radius:9px; color:#fff; background:#ff8c00; font-size:.57rem; font-style:normal; }
  .cart-peek:not([hidden]) { position:fixed; left:4%; right:4%; bottom:calc(77px + env(safe-area-inset-bottom)); z-index:25; display:flex; align-items:center; gap:10px; min-height:55px; padding:7px 12px; border:0; border-radius:14px; background:var(--look-green); color:#fff; text-align:left; box-shadow:0 9px 23px #176c5140; }
  .cart-peek-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#ffffff29; font-size:1.2rem; }
  .cart-peek strong,.cart-peek small { display:block; }
  .cart-peek strong { font-size:.78rem; }
  .cart-peek small { margin-top:2px; color:#d8f1e8; font-size:.62rem; }
  .cart-peek>span:last-child { margin-left:auto; font-size:1.1rem; }
  dialog { border-radius:22px 22px 0 0; }
  #detailDialog { width:100%; height:95dvh; max-height:95dvh; margin:auto 0 0; border-radius:23px 23px 0 0; }
  #detailDialog .dialog-heading { background:#fffaf1; border-bottom:1px solid #ecdfcf; border-radius:23px 23px 0 0; }
  #detailDialog .detail-photo.product-placeholder { min-height:245px; }
  #detailDialog .detail-photo.product-placeholder img { max-height:230px; }
  #detailAdd { background:var(--look-green); border-radius:12px; }
  .bag-dialog { border-radius:23px 23px 0 0; }
  .location-dialog { width:100%; max-height:86dvh; margin:auto 0 0; padding:19px 17px calc(20px + env(safe-area-inset-bottom)); border-radius:23px 23px 0 0; }
}

@media (max-width:370px) {
  .intro { grid-template-columns:minmax(0,1fr) 34%; min-height:185px; }
  .intro h1 { font-size:1.4rem; }
  .intro-text { font-size:.64rem; }
  .category-tile strong { font-size:.61rem; }
  .product-grid,.category-section:has(.product:nth-child(6)) .product-grid { grid-auto-columns:minmax(140px,47%); }
}