/* Approved visual direction: charcoal navigation, orange actions, white compact catalog. */
:root{
    --orange:#f45100;
    --orange-bright:#ff6400;
    --ink:#121822;
    --muted:#596579;
    --line:#e5e9ef;
    --dark:#1c2228;
    --red:#e81723;
    --surface:#f6f8fa;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:#f4f6f8;
    font-synthesis:none
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:20px
}
body{
    margin:0;
    font-size:14px;
    line-height:1.5
}
a{
    color:inherit;
    text-decoration:none
}
a:hover{
    text-decoration:underline
}
button,input,select{
    font:inherit
}
button,a,input,select{
    -webkit-tap-highlight-color:transparent
}
button{
    cursor:pointer
}
button:disabled{
    cursor:not-allowed
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
    outline:3px solid #1475d5;
    outline-offset:4px
}
h1,h2,h3,p,figure{
    margin:0
}
svg{
    display:block;
    width:100%;
    height:100%
}
.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link{
    position:fixed;
    top:-100px;
    left:16px;
    z-index:100;
    background:white;
    padding:12px
}
.skip-link:focus{
    top:12px
}
/* Header keeps search prominent above centered browse dropdowns on desktop and phones. */
.site-header{
    background:linear-gradient(115deg,#252c32,#151a1e);
    color:white
}
.header-inner{
    max-width:1280px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:30px;
    padding:18px 28px
}
.brand{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:29px;
    font-weight:750;
    letter-spacing:-1.1px;
    white-space:nowrap;
    line-height:1.08
}
.brand:hover{
    text-decoration:none
}
.brand-mark{
    color:var(--orange-bright);
    width:38px;
    height:38px;
    flex-shrink:0
}
.brand-orange{
    color:var(--orange-bright);
    margin-left:3px
}
.brand small{
    display:block;
    font-size:8px;
    letter-spacing:2px;
    font-weight:400;
    margin-top:5px
}
.header-search{
    display:flex;
    flex:1;
    min-width:180px;
    max-width:500px
}
.header-search input{
    width:100%;
    min-width:0;
    border:0;
    border-radius:5px 0 0 5px;
    padding:12px 14px;
    color:var(--ink);
    background:#fff;
    font-size:13px
}
.header-search button{
    background:linear-gradient(135deg,#ff7900,#ff4e00);
    border:0;
    color:white;
    width:45px;
    flex-shrink:0;
    border-radius:0 5px 5px 0;
    padding:11px
}
.header-links{
    display:flex;
    margin-left:auto;
    gap:22px;
    font-size:12px;
    white-space:nowrap
}
.category-nav{
    /* Expanded categories remain reachable without widening the page at any viewport. */
    overflow-x:auto;
    max-width:1280px;
    margin:auto;
    border-top:1px solid #41474d;
    display:flex;
    justify-content:space-between;
    gap:24px;
    padding:10px 36px
}
.category-nav a{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    font-size:12px
}
.category-nav a>span{
    height:24px;
    width:24px
}
.page-shell{
    max-width:1280px;
    margin:0 auto;
    background:#fff;
    min-height:70vh
}
.hero{
    background:#111 url('/images/tech-hero.png') center center/cover no-repeat;
    min-height:270px;
    color:#fff;
    display:flex;
    align-items:center;
    padding:28px 40px
}
.hero-copy{
    max-width:650px
}
.eyebrow{
    font-size:12px;
    letter-spacing:.4px;
    color:#c34400;
    font-weight:700;
    margin-bottom:9px
}
.hero .eyebrow{
    color:#ff8a32
}
.hero h1{
    font-size:36px;
    line-height:1.15;
    font-weight:750;
    letter-spacing:-1px
}
.hero h1 span{
    color:#ffaf86
}
.hero-copy>p:not(.eyebrow){
    font-size:17px;
    line-height:1.5;
    margin:14px 0 20px
}
.hero-actions{
    display:flex;
    gap:12px
}
.button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border:1px solid #f45c00;
    border-radius:5px;
    background:linear-gradient(125deg,#ff7100,#ff4c00);
    color:#fff;
    font-size:13px;
    font-weight:700;
    padding:11px 22px;
    line-height:1.35;
    white-space:nowrap
}
.button:hover{
    background:#d84600;
    text-decoration:none
}
.button-outline{
    background:#15151595;
    border:1px solid #b6b6b6
}
.button-outline:hover{
    background:#333
}
.sample-notice{
    display:flex;
    gap:12px;
    padding:10px 16px;
    background:#fff7ec;
    color:#754514;
    border:1px solid #f5dfbf;
    border-radius:4px;
    margin:16px 28px;
    font-size:12px
}
.sample-notice strong{
    white-space:nowrap
}
/* Dense, responsive feed: no invented votes, savings, review counts, or retailer branding. */
.feed-section{
    padding:0 28px;
    scroll-margin-top:10px
}
.feed-heading{
    display:flex;
    align-items:center;
    gap:20px;
    border-bottom:1px solid var(--line);
    min-height:47px
}
.feed-heading h2{
    font-size:17px;
    font-weight:600;
    color:#d64200;
    border-bottom:3px solid var(--orange);
    padding:11px 0
}
.feed-heading>span{
    color:var(--muted);
    font-size:12px
}
.feed-heading>a{
    margin-left:auto;
    color:#d64200;
    font-size:12px
}
.filter-bar{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap
}
.filter-bar>div{
    display:flex;
    gap:7px;
    align-items:center
}
.filter-bar label{
    font-size:11px;
    color:var(--muted)
}
select{
    border:1px solid #dce2e9;
    border-radius:4px;
    padding:7px 24px 7px 8px;
    background:#fff;
    color:var(--ink);
    font-size:12px
}
.filter-button{
    background:#fff;
    color:#c73d00;
    border:1px solid #e0c6b8;
    border-radius:4px;
    padding:7px 12px;
    font-weight:600;
    font-size:12px
}
.filter-button:hover{
    background:#fff3eb
}
.search-summary{
    font-size:12px;
    color:var(--muted);
    overflow-wrap:anywhere
}
.search-summary a{
    color:#bd3b00;
    margin-left:6px;
    text-decoration:underline
}
.deal-row{
    display:grid;
    grid-template-columns:122px minmax(210px,1fr) 175px 108px;
    gap:20px;
    align-items:center;
    min-height:135px;
    border-bottom:1px solid var(--line);
    padding:12px 0
}
.product-link{
    display:block
}
.product-visual{
    aspect-ratio:1;
    background-color:#fff;
    background-size:200% 200%;
    background-repeat:no-repeat
}
.product-visual>svg{
    padding:20%;
    color:#64748b
}
.atlas-products{
    background-image:url('/images/sample-products.png')
}
.atlas-accessories{
    background-image:url('/images/sample-accessories.png')
}
.quadrant-one{
    background-position:0 0
}
.quadrant-two{
    background-position:100% 0
}
.quadrant-three{
    background-position:0 100%
}
.quadrant-four{
    background-position:100% 100%
}
.deal-copy{
    min-width:0
}
.deal-copy h3{
    font-size:16px;
    line-height:1.35;
    letter-spacing:-.2px
}
/* Homepage rows emphasize the linked title; descriptions remain on deal detail/directory pages. */
.deal-row-compact .deal-copy h3{
    font-size:22px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:10px;
    overflow-wrap:anywhere
}
@media(max-width:600px){
    .deal-row-compact .deal-copy h3{font-size:18px;margin-bottom:6px}
}
.deal-copy>p{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
    margin:4px 0 10px;
    max-width:500px
}
.deal-meta{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--muted)
}
.deal-meta>a,.brand-chip{
    background:#f0f2f5;
    border-radius:4px;
    padding:2px 6px
}
.deal-meta time{
    margin-left:5px;
    font-size:10px
}
.sample-label{
    display:inline-block;
    font-size:10px;
    font-weight:700;
    letter-spacing:.3px;
    padding:3px 6px;
    background:#eff2f6;
    color:#4e5b6b;
    border:1px solid #dde3ea;
    border-radius:4px
}
.deal-price{
    align-self:center
}
/* Optional source-qualified price comparisons and verified coupon instructions share both public surfaces. */
.original-price { display:block; color:var(--muted); font-size:12px; line-height:1.5; margin:5px 0; }
.original-price s { white-space:nowrap; }
.deal-coupon { padding:8px 10px; margin:10px 0; border:1px dashed #edb58d; border-radius:5px; background:#fff8f1; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.deal-coupon code { font-weight:700; color:#9a3500; user-select:all; }
.deal-coupon small { display:block; color:#536077; margin-top:3px; }
.price{
    font-size:22px;
    line-height:1.2;
    color:var(--red);
    font-weight:750;
    white-space:nowrap
}
.price-label{
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:3px
}
.retailer{
    display:block;
    font-size:12px;
    font-weight:700;
    margin-top:10px;
    color:#293e55
}
.row-button{
    padding:11px 16px;
    font-size:12px
}
.pagination{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    color:var(--muted);
    font-size:12px
}
.pagination>div{
    display:flex;
    gap:20px
}
.pagination a{
    color:#c33c00;
    font-weight:600
}
.empty-state{
    padding:50px 20px;
    text-align:center
}
.empty-state p{
    margin:10px 0;
    color:var(--muted)
}
.text-link{
    color:#c63e00
}
.newsletter{
    margin:12px 28px 0;
    padding:20px 22px;
    display:flex;
    gap:20px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:5px;
    background:linear-gradient(100deg,#fff,#f6f8fa)
}
.mail-icon{
    font-size:42px;
    line-height:1;
    color:var(--orange)
}
.newsletter h2{
    font-size:17px
}
.newsletter p{
    font-size:12px;
    color:var(--muted);
    margin-top:3px
}
.coming-soon{
    margin-left:auto;
    font-size:12px;
    background:#fff2e8;
    border:1px solid #f4d2bb;
    border-radius:4px;
    padding:9px 13px;
    color:#8d3900;
    white-space:nowrap
}
/* Detail page mirrors the approved product / summary / fact-panel arrangement. */
.breadcrumb{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    font-size:12px;
    color:var(--muted);
    padding:22px 28px 4px
}
.breadcrumb a:hover{
    color:#c64200
}
.detail-panel{
    display:grid;
    grid-template-columns:minmax(240px,1.1fr) minmax(240px,1fr) 235px;
    gap:24px;
    padding:12px 28px 32px;
    align-items:start
}
.detail-picture{
    border:1px solid var(--line);
    border-radius:6px;
    position:relative;
    overflow:hidden
}
.detail-picture>.sample-label{
    position:absolute;
    top:12px;
    left:12px;
    z-index:1
}
.detail-art figcaption{
    color:var(--muted);
    font-size:11px;
    text-align:center;
    margin-top:10px
}
.detail-copy{
    padding-top:12px
}
.detail-copy h1{
    font-size:26px;
    line-height:1.25;
    letter-spacing:-.6px;
    margin-bottom:12px
}
.detail-summary{
    font-size:14px;
    color:var(--muted);
    line-height:1.7
}
.detail-price{
    color:var(--red);
    font-size:32px;
    font-weight:750;
    margin:22px 0 18px
}
.detail-price>span{
    font-size:11px;
    font-weight:400;
    color:var(--muted);
    display:block
}
.unavailable-link{
    padding:13px;
    background:#fff4e9;
    border:1px solid #f4d7bf;
    border-radius:5px;
    color:#8f470b;
    font-weight:600;
    font-size:12px
}
.back-link{
    display:inline-block;
    margin-top:22px;
    font-size:12px;
    color:#b43b00
}
.retailer-button{
    white-space:normal;
    text-align:center;
    width:100%
}
.fine-print{
    font-size:11px;
    color:var(--muted);
    margin-top:10px
}
.deal-facts{
    background:#f7f8fa;
    border:1px solid var(--line);
    border-radius:6px;
    padding:18px 15px
}
.deal-facts h2{
    font-size:14px;
    margin-bottom:7px
}
dl{
    margin:0
}
.deal-facts dl>div{
    display:grid;
    grid-template-columns:80px 1fr;
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid var(--line);
    font-size:11px
}
.deal-facts dl>div:last-child{
    border:0
}
.deal-facts dt{
    color:var(--muted)
}
dd{
    margin:0
}
.deal-facts dd{
    text-align:right;
    overflow-wrap:anywhere
}
.detail-sections{
    margin:0 28px;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:30px;
    align-items:center;
    font-size:13px
}
.detail-sections>a{
    padding:12px 0
}
.detail-sections>a:first-child{
    border-bottom:3px solid var(--orange);
    color:#c13c00
}
.detail-sections>span{
    color:var(--muted)
}
.detail-sections small{
    display:block;
    font-size:9px
}
.detail-content{
    padding:26px 28px 30px;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:55px
}
.detail-content h2,.community-note h2{
    font-size:17px;
    margin-bottom:12px
}
.detail-content p{
    font-size:13px;
    color:var(--muted);
    margin-bottom:12px;
    line-height:1.8;
    max-width:660px
}
.product-facts>div{
    display:grid;
    grid-template-columns:85px 1fr;
    border-bottom:1px solid var(--line);
    font-size:12px;
    padding:10px 0;
    gap:12px
}
.product-facts dt{
    color:var(--muted)
}
.community-note{
    margin:0 28px 28px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:5px;
    background:var(--surface)
}
.community-note p{
    font-size:13px;
    color:var(--muted)
}
/* Shared text pages and footer inherit the same spacing and readable contrast. */
.prose,.content-page{
    padding:35px;
    max-width:900px
}
.prose p,.content-page p{
    margin:15px 0
}
.prose h2,.content-page h2{
    margin-top:24px
}
.site-footer{
    max-width:1280px;
    margin:auto;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 28px;
    background:#fff;
    color:var(--muted);
    font-size:11px
}
.site-footer>div{
    display:flex;
    align-items:center;
    gap:20px
}
.footer-brand{
    font-size:20px;
    color:var(--ink);
    font-weight:750;
    letter-spacing:-.6px
}
.footer-brand span{
    color:#d44800
}
.error-page{
    padding:40px
}
/* Tablet retains product/price emphasis while reducing secondary header elements. */
@media(max-width:1050px){
    .header-inner{
        gap:20px;
        padding:16px 22px
    }
    .header-links{
        display:none
    }
    .brand{
        font-size:25px
    }
    .hero{
        padding:28px;
        min-height:260px
    }
    .hero h1{
        font-size:34px
    }
    .hero-copy>p:not(.eyebrow){
        font-size:15px
    }
    .deal-row{
        grid-template-columns:105px minmax(180px,1fr) 145px 90px;
        gap:13px;
        min-height:120px
    }
    .deal-copy h3{
        font-size:14px
    }
    .deal-copy>p{
        font-size:11px
    }
    .price{
        font-size:19px
    }
    .row-button{
        padding:10px
    }
    .deal-meta time{
        display:none
    }
    .detail-panel{
        grid-template-columns:1fr 1fr;
        gap:20px
    }
    .deal-facts{
        grid-column:1/-1
    }
    .deal-facts dl{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:0 22px
    }
    .deal-facts dl>div{
        grid-template-columns:70px 1fr
    }
    .newsletter{
        gap:12px
    }
    .newsletter h2{
        font-size:15px
    }
    .coming-soon{
        font-size:10px
    }
}
/* Mobile follows the reference's compact catalog, with no hero obscuring the first results. */
@media(max-width:700px){
    body{
        font-size:13px
    }
    .header-inner{
        flex-wrap:wrap;
        gap:14px;
        padding:16px
    }
    .brand{
        font-size:23px;
        flex:1
    }
    .brand-mark{
        width:30px;
        height:30px
    }
    .brand small{
        font-size:6px;
        letter-spacing:1.8px
    }
    .header-search{
        order:3;
        min-width:100%;
        max-width:none
    }
    .header-search input{
        font-size:12px;
        padding:10px
    }
    .header-search button{
        padding:9px;
        width:40px
    }
    .category-nav{
        overflow:auto;
        justify-content:flex-start;
        padding:10px 16px;
        gap:24px;
        scrollbar-width:thin
    }
    .category-nav a{
        font-size:11px
    }
    .category-nav a>span{
        width:21px;
        height:21px
    }
    .hero{
        display:none
    }
    .sample-notice{
        margin:12px 14px;
        font-size:10px;
        padding:8px 10px;
        gap:3px;
        flex-direction:column
    }
    .feed-section{
        padding:0 14px
    }
    .feed-heading{
        gap:12px;
        min-height:42px
    }
    .feed-heading h2{
        font-size:14px;
        padding:9px 0
    }
    .feed-heading>span,.feed-heading>a{
        font-size:10px
    }
    .filter-bar{
        gap:8px;
        display:grid;
        grid-template-columns:1fr 1fr auto;
        align-items:end;
        padding:10px 0
    }
    .filter-bar>div{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:3px;
        min-width:0
    }
    .filter-bar label{
        font-size:9px
    }
    .filter-bar select{
        font-size:10px;
        width:100%;
        padding:7px 18px 7px 5px
    }
    .filter-button{
        font-size:10px;
        padding:7px
    }
    .search-summary{
        grid-column:1/-1;
        font-size:11px
    }
    .deal-row{
        grid-template-columns:80px minmax(0,1fr) auto;
        gap:3px 10px;
        padding:12px 0;
        min-height:116px;
        position:relative
    }
    .product-link{
        grid-column:1;
        grid-row:1/4;
        align-self:center
    }
    .deal-copy{
        grid-column:2/-1;
        grid-row:1
    }
    .deal-copy h3{
        font-size:12px;
        line-height:1.4
    }
    .deal-copy>p{
        display:none
    }
    .deal-meta { display:flex; margin:6px 0; }
    .deal-meta>a,.deal-meta>.brand-chip { display:none; }
    .deal-meta time { margin-left:0; font-size:9px; }
    .deal-coupon { font-size:10px; padding:6px; }
    .original-price { font-size:10px; }
    .deal-price{
        grid-column:2;
        grid-row:2
    }
    .price{
        font-size:17px
    }
    .price-label{
        font-size:8px;
        margin-top:0
    }
    .retailer{
        font-size:9px;
        margin-top:3px;
        font-weight:400;
        color:var(--muted)
    }
    .sample-label{
        font-size:8px;
        padding:2px 4px
    }
    .row-button{
        grid-column:3;
        grid-row:3;
        padding:5px 8px;
        font-size:9px;
        align-self:end
    }
    .pagination{
        font-size:11px
    }
    .newsletter{
        margin:12px 14px 0;
        padding:15px;
        gap:10px;
        flex-wrap:wrap
    }
    .mail-icon{
        font-size:30px
    }
    .newsletter>div{
        flex:1
    }
    .newsletter h2{
        font-size:13px
    }
    .newsletter p{
        font-size:10px
    }
    .coming-soon{
        margin:0 0 0 40px;
        font-size:10px;
        padding:6px 9px
    }
    .site-footer{
        padding:20px 14px;
        gap:20px;
        font-size:10px
    }
    .site-footer>div{
        flex-direction:column;
        gap:4px;
        align-items:flex-start
    }
    .footer-brand{
        font-size:17px
    }
    .breadcrumb{
        padding:16px 14px 4px;
        font-size:10px;
        gap:7px
    }
    .detail-panel{
        padding:8px 14px 25px;
        grid-template-columns:1fr;
        gap:15px
    }
    .detail-art{
        max-width:360px;
        width:100%;
        margin:auto
    }
    .detail-art figcaption{
        font-size:10px
    }
    .detail-copy{
        padding-top:0
    }
    .detail-copy h1{
        font-size:23px
    }
    .detail-summary{
        font-size:13px
    }
    .detail-price{
        font-size:29px;
        margin:15px 0
    }
    .deal-facts{
        grid-column:auto
    }
    .deal-facts dl{
        grid-template-columns:1fr 1fr;
        gap:0 16px
    }
    .deal-facts dl>div{
        grid-template-columns:1fr;
        font-size:10px;
        gap:2px
    }
    .deal-facts dd{
        text-align:left
    }
    .detail-sections{
        margin:0 14px;
        gap:24px;
        font-size:11px
    }
    .detail-content{
        padding:22px 14px;
        grid-template-columns:1fr;
        gap:20px
    }
    .community-note{
        margin:0 14px 20px;
        padding:16px
    }
    .prose,.content-page{
        padding:25px 16px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
}
/* Administrator sign-in and authenticator enrollment share the public brand shell. */
.account-card { max-width: 490px; margin: 45px auto; padding: 30px; border: 1px solid #e0e5eb; border-radius: 8px; background: #fff; }
.account-card h1 { font-size: 28px; line-height: 1.2; margin-bottom: 12px; }
.account-card>p { color: #657287; margin: 12px 0; }
.account-card form { margin: 24px 0; }
.account-card label { display: block; font-size: 12px; font-weight: 600; margin: 15px 0 7px; }
.account-card input:not([type=checkbox]):not([type=hidden]) { width: 100%; padding: 11px; border: 1px solid #ccd6e1; border-radius: 5px; }
.account-card .button { margin-top: 18px; }
.account-card .checkbox-label { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.account-card>a:not(.button) { color: #bc3e00; }
.account-card details { margin-top: 25px; font-size: 12px; color: #677589; }
.account-card details p { margin-top: 10px; }
.form-errors { color: #a32032; font-size: 12px; margin-bottom: 15px; }
.form-errors ul { padding-left: 18px; }
.validation-summary-valid { display: none; }
.setup-key { background: #f6f8fa; padding: 15px; border-radius: 5px; }
.setup-key dt { color: #637288; font-size: 11px; margin: 12px 0 3px; }
.setup-key dd { font-size: 13px; overflow-wrap: anywhere; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; padding: 20px 0; }
.recovery-codes code { background: #f1f4f7; padding: 6px; }
@media(max-width:700px) { .account-card { margin: 24px 14px; padding: 23px; } .account-card h1 { font-size: 23px; } }

/* Uploaded photos use the same square product visual as sample artwork. */
.product-visual>img { display:block; width:100%; height:100%; aspect-ratio:1; object-fit:contain; background:#fff; }
/* Store browsing is separate from product categories and remains available on mobile. */
.category-nav .mobile-stores-link { display:none; }
.header-links a[aria-current="page"] { color:var(--orange, #ff6500); }
.stores-heading { padding:28px 24px 18px; }
.stores-heading h1 { font-size:32px; margin:8px 0 12px; }
.stores-heading > p:last-child { color:#536077; }
.store-search { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; padding:20px 24px; }
.store-search > div { flex:1 1 260px; }
.store-search label { display:block; font-weight:600; margin-bottom:8px; }
.store-search input,.store-deal-filters input { font:inherit; width:100%; border:1px solid #dce1e7; padding:11px 12px; border-radius:5px; background:white; }
.store-result-count { margin:6px 24px 20px; color:#536077; }
/* Auto-fill retains empty tracks so a short directory never stretches two cards across the page. */
.store-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; padding:0 24px 24px; }
.store-card { display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:12px; align-content:center; min-height:100px; border:1px solid #e4e8ee; border-top:3px solid #ff6500; border-radius:8px; background:white; padding:14px; overflow-wrap:anywhere; }
.store-card:hover { border-color:#ff6500; box-shadow:0 4px 16px #17212b0d; }
.store-card h2 { grid-column:2; font-size:16px; line-height:1.3; margin:0; }
/* Category directory symbols occupy the same compact slot as brand/store logos. */
.category-directory-card .store-symbol svg { display:block; width:44px; height:44px; margin:auto; }
.store-card p { grid-column:2; color:#536077; font-size:12px; margin:4px 0 0; }
.store-card > span:last-child { grid-column:2; color:#b53c00; font-size:12px; font-weight:600; margin-top:6px; }
.store-symbol { display:inline-block; color:#ff6500; background:#fff1e8; border-radius:8px; padding:10px 14px; font-size:26px; }
.store-deal-filters { flex-wrap:wrap; }
@media(max-width:1050px) { .category-nav .mobile-stores-link { display:flex; color:#ff914d; font-weight:700; } }
@media(max-width:700px) { .stores-heading { padding:24px 16px 12px; } .stores-heading h1 { font-size:26px; } .store-search { padding:16px; } .store-grid { grid-template-columns:minmax(0,1fr); padding:0 16px 20px; } .store-result-count { margin-left:16px; } .store-deal-filters > div { min-width:0; flex:1 1 130px; } }
/* Give the store-specific search its own row on small screens. */
@media(max-width:700px) { .store-deal-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .store-deal-filters > div:first-child { grid-column:1 / -1; } }
/* Public information pages share readable measure, visible policy links, and the approved orange accents. */
.information-nav { display:flex; flex-wrap:wrap; gap:8px; padding:22px 32px; border-bottom:1px solid var(--line); }
.information-nav a { padding:9px 14px; border-radius:5px; font-size:14px; }
.information-nav a[aria-current="page"] { color:#a63500; background:#fff0e5; font-weight:700; }
.information-page { max-width:1040px; margin:0 auto; padding:42px 32px 56px; line-height:1.75; color:#38465a; }
.information-heading { max-width:800px; margin-bottom:32px; }
.information-heading h1 { color:var(--ink); font-size:38px; line-height:1.2; margin:10px 0 18px; letter-spacing:-.7px; }
.information-heading > p:not(.eyebrow):not(.information-updated) { font-size:18px; }
.information-page p { margin:12px 0; }
.information-page h2 { color:var(--ink); font-size:23px; line-height:1.3; margin:0 0 12px; }
.information-page h3 { color:var(--ink); font-size:17px; margin-top:24px; }
.information-page section,.information-note { margin:30px 0; scroll-margin-top:20px; }
.information-page a:not(.button) { color:#a73800; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.information-highlight { background:#fff7f0; border:1px solid #f4d6bf; border-left:4px solid #ff6500; border-radius:8px; padding:26px; }
.information-columns { display:grid; grid-template-columns:1fr 1fr; gap:38px; }
.information-columns section { margin:12px 0; }
.information-note { padding:24px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.information-updated { font-size:13px; color:#657287; }
.information-contents { display:flex; flex-wrap:wrap; gap:10px 20px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; }
.contact-address { font-size:22px; font-weight:700; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 18px; max-width:560px; }
.site-footer { gap:24px; }
.site-footer > div { flex-wrap:wrap; }
@media(max-width:700px) { .information-nav { padding:14px; gap:4px; } .information-nav a { font-size:12px; padding:8px 10px; } .information-page { padding:28px 18px 40px; } .information-heading h1 { font-size:29px; } .information-heading > p:not(.eyebrow):not(.information-updated) { font-size:16px; } .information-columns { grid-template-columns:1fr; gap:0; } .information-highlight,.information-note { padding:20px; } .contact-address { font-size:19px; } .site-footer { align-items:flex-start; } .footer-links { justify-content:flex-start; gap:10px 15px; } }

/* Center the three browse menus on the second header row; panels overlay rather than stretch the page. */
.browse-nav { position:relative; max-width:1440px; margin:auto; padding:8px 24px; display:flex; justify-content:center; align-items:center; gap:36px; border-top:1px solid #ffffff20; }
.category-menu { position:relative; flex:none; min-width:0; }
.category-menu summary { display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; padding:7px 0; color:white; font-weight:600; font-size:14px; }
.category-menu summary::-webkit-details-marker { display:none; }
.nav-chevron { display:inline-block; width:16px; height:16px; vertical-align:middle; flex:none; }
.category-menu summary .nav-chevron { transition:transform .15s ease; }
.category-menu[open] > summary .nav-chevron { transform:rotate(180deg); }
.header-menu-panel { position:absolute; z-index:30; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:270px; max-width:calc(100vw - 24px); max-height:60vh; overflow-y:auto; padding:6px; background:#fff; border:1px solid #e0e4eb; border-top:3px solid #ff6500; border-radius:6px; box-shadow:0 12px 30px #0003; }
.header-menu-panel a { display:block; padding:9px 12px; color:#19212a; font-size:14px; overflow-wrap:anywhere; border-radius:3px; }
.header-menu-panel a:hover, .header-menu-panel a:focus-visible { background:#fff0e5; color:#a83c00; }
.header-menu-panel .header-show-all { position:sticky; bottom:-6px; background:#fff; border-top:1px solid #e4e7ed; color:#b34300; font-weight:700; margin-top:5px; }
@media(prefers-reduced-motion:reduce) { .category-menu summary .nav-chevron { transition:none; } }
@media(max-width:600px) { .browse-nav { padding:8px 12px; gap:24px; } .category-menu { position:static; } .category-menu summary { font-size:13px; } .header-menu-panel { top:100%; width:calc(100% - 24px); max-height:55vh; } }
.identity-logo { display:block; width:100px; height:46px; object-fit:contain; background:white; border-radius:4px; padding:4px; margin:4px 0; }
/* Keep directory logos beside their labels without increasing card height. */
.store-card .identity-logo, .store-card .store-symbol { grid-column:1; grid-row:1 / span 3; align-self:center; width:56px; height:44px; margin:0; }
.identity-logo-preview { width:200px; height:100px; border:1px solid #e4e7ed; margin:12px 0; }
.identity-history { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; }
@media(max-width:600px) { .identity-logo { width:70px; height:32px; } }

/* Keep directory icons and pagination aligned with the shared search/card gutters. */
.store-card.category-directory-card .store-symbol { padding:0; background:transparent; }
.category-directory-pagination { margin:0 24px 20px; }
@media(max-width:700px) { .category-directory-pagination { margin-inline:16px; } }

/* Seasonal collections follow the approved orange/charcoal palette without invented countdowns or claims. */
.sale-event-heading { background: #1b2227; color: #fff; border-top: 4px solid #ff6600; border-radius: 10px; padding: 24px; margin: 20px 0; }
/* Homepage promotions are slim announcements, leaving the existing hero as the single focal point. */
.sale-event-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; padding: 4px 28px; min-height: 52px; background: #fff4eb; border-bottom: 1px solid #f2d8c5; color: #242c32; }
.sale-event-banner strong { font-size: 15px; overflow-wrap: anywhere; }
.sale-event-banner a { color: #a83c00; font-size: 13px; font-weight: 700; padding: 12px 0; white-space: nowrap; }
.sale-event-banner a:hover { text-decoration: underline; }
.sale-event-heading p { max-width: 68ch; }
.sale-event-heading h1 { margin: 8px 0; }
.sale-event-nav { color: #ffb278; font-weight: 700; padding: 12px; }
/* Additional campaigns wrap on narrow screens rather than pushing navigation off-screen. */
.browse-nav { flex-wrap: wrap; row-gap: 4px; }
.sale-event-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sale-event-badge { display: inline-block; background: #fff0e4; color: #923800; border: 1px solid #ffc28f; border-radius: 4px; padding: 3px 8px; font-size: .75rem; font-weight: 700; }
.event-filters { display: grid; align-items: end; gap: 14px; grid-template-columns: repeat(4, minmax(100px, 1fr)) auto auto; }
.event-filters > div { display: block; min-width: 0; }
.event-filters label { display: block; margin-bottom: 7px; }
.event-filters input, .event-filters select { width: 100%; font: inherit; padding: 10px; border: 1px solid #dce1e7; border-radius: 5px; background: white; }
.event-filters .filter-button { padding: 12px 16px; }
@media (max-width: 900px) { .event-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sale-event-banner { padding-inline: 14px; } .sale-event-heading { padding: 18px; } .event-filters { grid-template-columns: minmax(0, 1fr); } }

/* Circular covers stay compact; the viewer contains enlarged full-resolution pages in a keyboard-scrollable pane. */
.circular-section, .circular-heading, .circular-pagination { padding: 16px 28px; }
.circular-heading .breadcrumb { padding: 0 0 16px; }
.circular-heading h1 { font-size: 28px; overflow-wrap: anywhere; }
.circular-heading p { margin-top: 8px; color: var(--muted); }
.circular-empty { padding: 12px 0; color: var(--muted); }
.circular-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 28px; }
.circular-section .circular-grid { padding-inline: 0; }
.circular-card { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; color: var(--ink); }
.circular-card img { display: block; width: 100%; height: 180px; object-fit: contain; background: #f4f5f7; padding: 8px; }
.circular-card > div { padding: 12px; }
.circular-card h3 { font-size: 15px; margin: 6px 0; overflow-wrap: anywhere; }
.circular-card span { color: var(--muted); font-size: 12px; }
.circular-card p { color: #a83c00; font-size: 12px; }
.circular-viewer { padding: 0 28px 24px; }
.circular-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; background: #f4f5f7; border: 1px solid var(--line); }
.circular-toolbar form { display: flex; align-items: center; gap: 8px; }
.circular-toolbar a:not(.button) { color: #a83c00; }
.viewer-disabled { color: #64748b; padding: 11px; }
.circular-zoom[hidden] { display: none; }
.circular-canvas { overflow: auto; max-height: 78vh; background: #e5e7eb; border: 1px solid var(--line); }
.circular-canvas img { display: block; width: 100%; max-width: none; height: auto; }
.circular-caption { color: var(--muted); font-size: 12px; margin-top: 12px; }
@media (max-width: 900px) { .circular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .circular-section, .circular-heading, .circular-grid, .circular-viewer, .circular-pagination { padding-inline: 14px; } .circular-toolbar { gap: 8px; } .circular-card img { height: 130px; } }
/* Product galleries are bounded local images with native swipe/scroll and optional controls. */
.product-gallery { min-width:0; width:100%; }
.gallery-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border:1px solid #e1e6ed; border-radius:7px; background:white; }
.gallery-track > img { display:block; flex:0 0 100%; width:100%; min-width:0; height:300px; object-fit:contain; scroll-snap-align:start; padding:12px; }
.gallery-controls { display:flex; align-items:center; justify-content:center; gap:18px; margin:10px 0; font-size:12px; }
.gallery-controls button { width:36px; height:34px; border:1px solid #e1e6ed; border-radius:5px; background:#ff6500; color:white; font-size:24px; cursor:pointer; }
.gallery-controls button:disabled { opacity:.4; cursor:default; }
.gallery-thumbnails { display:flex; gap:8px; overflow-x:auto; padding:2px; }
.gallery-thumbnails button { flex:0 0 52px; padding:3px; border:2px solid #e1e6ed; border-radius:4px; background:white; cursor:pointer; }
.gallery-thumbnails button[aria-pressed=true] { border-color:#ff6500; }
.gallery-thumbnails img { width:42px; height:42px; object-fit:contain; }
.gallery-controls[hidden],.gallery-thumbnails[hidden] { display:none; }
.product-description { font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.product-description p { white-space:pre-wrap; margin:0 0 12px; }
.product-description ul,.product-description ol { padding-left:24px; margin:0 0 12px; }
.product-description ul { list-style:disc; }
.product-description ol { list-style:decimal; }
.product-description li { margin:4px 0; white-space:pre-wrap; }
@media(max-width:700px) { .gallery-track > img { height:250px; } }
/* Original Firmus Deals feedback panel: stacked choice tiles, context card and quiet secondary action. */
.report-link{display:inline-block;color:#626d7b;font-size:12px;text-decoration:underline;text-underline-offset:3px;margin-top:8px}
.report-dialog{border:0;border-top:4px solid #ff6000;border-radius:16px;padding:32px;width:min(520px,calc(100% - 28px));max-height:90dvh;overflow:auto;box-shadow:0 24px 80px #0005;color:#182127}
.report-dialog::backdrop{background:#111b24aa}
.report-close{position:absolute;right:14px;top:10px;border:0;background:#f0f2f5;border-radius:50%;width:32px;height:32px;font-size:24px;cursor:pointer;color:#34414e}
.report-page{max-width:560px;margin:32px auto;padding:28px;background:#fff;border:1px solid #e0e5eb;border-radius:16px}
.report-form .eyebrow{font-size:11px;letter-spacing:.12em;margin:0 32px 9px 0;color:#b84200}
.report-form h2{font-size:26px;line-height:1.15;margin:0 28px 10px 0;letter-spacing:-.5px}
.report-intro{color:#626d7b;font-size:14px;line-height:1.5;margin:0 0 18px}
.report-context{border-left:3px solid #ff6000;background:#f4f6f8;padding:12px 14px;margin-bottom:20px;border-radius:0 8px 8px 0;overflow-wrap:anywhere}
.report-context span{display:block;color:#626d7b;font-size:11px;margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.report-context strong{font-size:14px;line-height:1.4;display:block}
.report-form fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.report-form legend{font-size:14px;font-weight:700;margin-bottom:10px;padding:0}
.report-choice{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #dce2e8;border-radius:8px;margin-bottom:7px;font-size:14px;cursor:pointer}
.report-choice:has(input:checked){border-color:#f56913;background:#fff3e9}
.report-choice input{accent-color:#db5100;width:17px;height:17px;flex:none;margin:0}
.report-note{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.report-note span{font-weight:400;color:#626d7b}
.report-form textarea{width:100%;font:inherit;font-size:14px;padding:11px;border:1px solid #dce2e8;border-radius:8px;resize:vertical;min-height:80px}
.report-hint{font-size:11px;color:#626d7b;line-height:1.5;margin:7px 0 0}
.report-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #e7ebf0;padding-top:18px;margin-top:20px}
.report-actions>a{font-size:14px;color:#626d7b}
.report-actions .button{padding:12px 20px;font-size:14px;border-radius:8px}
.report-actions .button span{margin-left:6px}
.report-message{font-size:14px;color:#9b3e00}
.report-message:empty{display:none}
.report-admin-note{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:600px){.report-dialog{padding:24px 20px}.report-form h2{font-size:23px}.report-page{margin:20px 0;padding:20px}}