/* GANGSTER4D · Onyx & champagne-gold editorial marketplace 2026
   An intentional re-layout of the reference ZIP. No third-party font/CDN. */
:root{
 --wine:#141009;--wine2:#241a0b;--red:#bb891f;--reddeep:#6f4a14;
 --orange:#d6a544;--gold:#f3cf77;--pale:#251e12;--cream:#161511;
 --ink:#f5efdf;--mute:#c7b99f;--stroke:#4c3c23;
 --shadow:0 16px 44px rgba(0,0,0,.29);--radius:18px;--footer-h:78px
}
html{scroll-padding-top:30px}
body{
 background:radial-gradient(ellipse 1000px 660px at 90% 0,#382512 0,transparent 70%),
            radial-gradient(ellipse 1200px 720px at 0 34%,#21180c 0,transparent 70%),
            #0e0d0b;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif
}
a:hover{color:#ffe3a5}
button,input{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{
 outline:3px solid #ffe49d;outline-offset:3px
}
h1,h2,h3,h4{letter-spacing:-.025em}
p{line-height:1.78}
.shell{max-width:1290px;padding-inline:26px}
.skip{background:#fee7ab;color:#1e160b}
.notice-top{background:#080807;border-bottom:1px solid #403017;color:#dbc799}
.notice-top a{color:#f7d37e}
.site-header{background:rgba(17,15,11,.96);border-bottom:1px solid #544126;box-shadow:0 10px 28px #0005}
.header-primary{grid-template-columns:190px minmax(200px,1fr) auto;min-height:111px;gap:24px}
.brand{width:190px;height:85px}
.brand img{width:184px;max-height:86px;object-fit:contain;border-radius:9px}
.site-search{background:#211b13;border:1px solid #6a5130;border-radius:12px;box-shadow:inset 0 2px 8px #0005}
.site-search input{color:#fbf1db}
.site-search input::placeholder{color:#baa98c}
.site-search span{color:#e1b85e}
.site-search button{background:linear-gradient(125deg,#f5d88b,#c38a27);color:#251703;font-weight:850;border-radius:9px}
.site-search button:hover{background:#ffe3a0;color:#251703}
.header-actions{gap:9px}
.button{border-radius:11px;font-weight:800;transition:background .16s ease,transform .16s ease,border-color .16s ease}
.button:hover{transform:translateY(-1px)}
.button-red{background:linear-gradient(135deg,#f0cc7b,#c99634 70%,#fce4a4);color:#251807;border:1px solid #f3d28d;box-shadow:0 7px 24px #c48a2040}
.button-red:hover{background:#ffe1a1;color:#1e1408}
.button-gold{background:linear-gradient(135deg,#f9e3a5,#d09a3a);color:#21170a;border-color:#ffe49e}
.button-gold:hover{background:#ffe8b3;color:#261707}
.button-outline{border-color:#98713c;color:#f9d98c;background:#241b10}
.button-outline:hover{background:#3a2a16;color:#fff1ca}
.button-soft{border-color:#534027;color:#e8d5b3;background:#1b1916}
.button-soft:hover{background:#352919;color:#ffe3a2}
.main-nav{background:#16130e;border-top:1px solid #302514;border-bottom:1px solid #3e301c}
.nav-inner{min-height:49px;gap:23px}
.nav-inner a{color:#d9c8ac;font-weight:750;white-space:nowrap}
.nav-inner a:hover,.nav-inner a[aria-current=page]{color:#ffe1a0}
.nav-inner a[aria-current=page]::after{background:#f0c66e;height:3px}
.ticker{background:linear-gradient(100deg,#161004,#533714 55%,#1a1107);color:#fff3d0;border-block:1px solid #60491e}
.ticker strong{background:#d8aa54;color:#130f08;border-radius:4px;padding:4px 10px;white-space:nowrap}
.category-rail{background:linear-gradient(90deg,#0d0d0b,#272014 52%,#0d0d0b);border-bottom:1px solid #4c3b20}
.category-rail-inner{display:flex;align-items:center;min-height:61px;gap:10px;overflow-x:auto;scrollbar-width:thin}
.rail-title{color:#bc9250;letter-spacing:.15em;font-size:.68rem;font-weight:950;white-space:nowrap;margin-right:12px}
.category-rail a{background:#352719;border:1px solid #74532a;color:#f9e6bd;border-radius:8px;padding:7px 13px;font-size:.79rem;font-weight:800;white-space:nowrap}
.category-rail a:hover{background:#63451c;color:#fff3ce}
.main{padding-top:26px;padding-bottom:70px}
.crumb,.crumb a{color:#bda783}
.crumb a:hover{color:#ffe2a1}
.eyebrow{color:#e4b95f;font-weight:850}
.section-head{border-bottom:1px solid #40331f;padding-bottom:14px;margin-top:44px}
.section-head h2{color:#f9e2ac}
.section-head p{color:#bfaf97}
.section-head>a{color:#f0c96e}
.card{background:linear-gradient(155deg,#232018,#161512 70%);color:#f7efdf;border:1px solid #524126;border-radius:19px;box-shadow:var(--shadow)}
/* Desktop hero differs intentionally: left large gallery, right vertically stacked details. */
.hero-shop{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:21px;align-items:stretch}
.hero-shop>.gallery{order:1}
.hero-shop>.shop-details{order:2}
.gallery{padding:16px;background:linear-gradient(145deg,#251b0c,#11110e)}
.gallery-main{aspect-ratio:1/1;background:#0a0908;border:1px solid #715528;border-radius:15px}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.thumb{border:2px solid #534023;border-radius:11px;background:#15120c;padding:3px}
.thumb:hover,.thumb[aria-pressed=true]{border-color:#f8c56c;box-shadow:0 0 0 2px #725016}
.thumb img{width:100%;height:100%;object-fit:contain}
.gallery .status{color:#baa78a;margin-top:10px;font-size:.8rem}
.shop-details{padding:34px 31px;background:linear-gradient(160deg,#282016 0,#181713 53%,#11110f 100%);display:flex;flex-direction:column;justify-content:center}
.shop-details h1{font-size:clamp(2rem,2.8vw,2.8rem);color:#ffe7ad;text-wrap:balance}
.shop-details .lead{font-size:1rem;color:#d9cbb3;line-height:1.75}
.tag{background:#4d3616;color:#ffe4a4;border:1px solid #82602a;border-radius:999px}
.shop-meta{border-top:1px solid #514026;border-bottom:1px solid #514026}
.shop-meta div{color:#ad9d81}
.shop-meta strong{color:#f9e9cc}
.shop-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shop-actions .button{padding:12px 11px;text-align:center;white-space:normal}
.shop-note{background:#241f15;color:#d9c29b;border:1px solid #60502c;border-radius:12px;font-size:.84rem}
.highlights{margin-top:24px;grid-template-columns:repeat(4,minmax(0,1fr))}
.highlight{background:linear-gradient(135deg,#282012,#161511);border:1px solid #695025;border-radius:14px;box-shadow:0 10px 24px #0004}
.hi-icon{background:#483217;color:#ffe29d;border:1px solid #88602b}
.highlight strong{color:#f8e1af}
.highlight span{color:#c9bca4}
.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.feature-card{background:#181713;overflow:hidden;border-color:#433621;display:flex;flex-direction:column;transition:transform .17s,border-color .17s}
.feature-card:hover{transform:translateY(-3px);border-color:#a17a38}
.feature-card .cover{background:#090909;border:1px solid #47391e;aspect-ratio:1.62}
.feature-card .cover img{object-fit:contain;width:100%;height:100%}
.feature-card .inside{display:flex;flex:1;flex-direction:column;padding:19px}
.feature-card .inside h3{color:#ffe4ad;font-size:1.14rem}
.feature-card .inside p{color:#c8bba4;line-height:1.63;flex:1}
.feature-card .card-actions{margin-top:auto}
.mini-btn{border:1px solid #826435;color:#f3d38b;background:#281f13;border-radius:9px}
.mini-btn:hover{background:#4a351b;color:#fff0c8}
.mini-btn.fill{background:#d4a247;border-color:#e2b75f;color:#27190b;font-weight:850}
.mini-btn.fill:hover{background:#f6cc7d;color:#23180b}
.content-split{grid-template-columns:minmax(0,1fr) 290px;gap:19px}
.article-main{min-width:0;overflow-wrap:anywhere;color:#eee1c9;background:linear-gradient(160deg,#201d17,#141411);padding:32px 38px}
.article-main h2{color:#f8d992;border-color:#544025;margin:30px 0 13px}
.article-main h2:first-child{margin-top:0}
.article-main p,.article-main ul{color:#dacbb3;line-height:1.88}
.article-main .ticker{border-radius:10px;overflow:hidden}
.side-panel{background:#211b13;align-self:start}
.side-panel h3{color:#ffe0a0}
.side-panel a{color:#ead0a2}
.side-panel a:hover{color:#fff1c9}
.link-list li{border-color:#3d301d}
.callout{background:#2d2416;border:1px solid #72522a;color:#ead1a4}
.content-banner,.hero-page .page-visual{background:#15120e;border:1px solid #70532b}
.hero-page{background:linear-gradient(120deg,#282017,#171510);border-left:5px solid #e5b65a;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:23px}
.hero-page h1{color:#ffe4ae}
.hero-page p{color:#d3bfa3}
.hero-page .page-visual{border-radius:15px;overflow:hidden}
.hero-page .page-visual img{object-fit:contain}
.topical span{background:#3c301c;color:#ebd5ab;border:1px solid #765c2e;border-radius:99px}
.grid-articles{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.blog-card{background:linear-gradient(135deg,#241e13,#171612)}
.blog-card h3{color:#fee0a3}
.blog-card p{color:#cfc1a9}
.blog-card a{color:#f7c76e}
.number-row{gap:17px}
.number-card{background:linear-gradient(160deg,#231c12,#161510)}
.number-card .n{color:#e4b14d}
.number-card h3{color:#ffe0a1}
.number-card p{color:#c3b49b}
.faq-card{background:#1d1b16}
.faq-card details{border-color:#493a24}
.faq-card summary{color:#f1d6a1}
.faq-card summary::after{color:#f6cc76}
.faq-card details p{color:#d4c4a9}
.list-toolbar input{background:#1d1a15;border:1px solid #86632f;color:#fff4dd}
.list-toolbar input::placeholder{color:#a5967e}
.list-toolbar input:focus{border-color:#f0c66c}
.filter-stats,.status{color:#c7b397}
.empty{background:#302316;color:#ecd6a7;border:1px solid #805d2e}
.section-band{background:radial-gradient(ellipse at top right,#6c4719 0,#292014 43%,#111110 100%);border:1px solid #98713a;border-radius:22px;box-shadow:0 20px 48px #0004}
.section-band h2{color:#ffe9b5}
.section-band p{color:#e1c9a1}
.section-band .button-outline{border-color:#c6a05c;color:#ffe2ab}
.section-band .button-outline:hover{background:#61451f}
.site-footer{background:#090908;color:#f4e1c0;border-top:3px solid #c99945}
.footer-grid img{width:187px;max-width:100%;border-radius:6px}
.footer-grid h3{color:#f3cf88}
.footer-grid p{color:#b7a58c}
.footer-links a{color:#d7c4a1}
.footer-links a:hover{color:#ffe9b9}
.footer-bottom{border-color:#47361e;color:#a99b83}
.bottom-dock{background:linear-gradient(100deg,#0b0a09,#292017 50%,#0b0a09);border-top:2px solid #daa94e;box-shadow:0 -9px 24px #0009}
.dock-inner{max-width:850px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px 14px}
.dock-link{color:#f7e2b5;border:1px solid #57401c;background:#251e13;font-size:.84rem;border-radius:12px}
.dock-link:hover{color:#fff0c9;background:#65451c}
.dock-link.cta{background:linear-gradient(125deg,#f7d17e,#c59032);color:#21160a;border-color:#f5d68b}
.dock-link.cta:hover{background:#ffe39d;color:#23190a}
.dock-link .dock-icon{font-size:1.27rem;line-height:1.2}
.compare-tray{background:#292015;color:#f8e7c6;border:1px solid #9c7337;box-shadow:0 14px 50px #000a}
.compare-tray h3{color:#ffe2a6}
.compare-tray .chip{background:#493419;color:#f5d28d}
.modal{background:#211b13;color:#f4e5c7;border:1px solid #ac803f}
.modal::backdrop{background:#000b}
.modal h2{color:#f9d590}
.modal .close{background:#49361e;color:#ffe8b5}
.compare-list .item{border-color:#6a502d;background:#302617}
.compare-list .item strong{color:#fbd58a}
/* Consistent widths, including narrow phones and landscape tablets. */
@media(min-width:1180px){
 .shop-details{padding:42px 38px}
 .gallery-main{aspect-ratio:1/1}
 .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hero-shop{grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr)}
}
@media(max-width:1060px){
 .header-primary{grid-template-columns:155px minmax(170px,1fr) auto;gap:15px}
 .brand,.brand img{width:153px}
 .hero-shop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .shop-details{padding:21px}
 .shop-details h1{font-size:1.94rem}
 .header-actions .button{font-size:.75rem;padding:9px}
 .content-split{grid-template-columns:minmax(0,1fr) 250px}
}
@media(max-width:760px){
 :root{--footer-h:73px}
 .shell{padding-inline:15px}
 .notice-top .shell{min-height:29px}
 .header-primary{min-height:88px}
 .site-header{position:relative}
 .category-rail-inner{min-height:54px}
 .category-rail a{font-size:.74rem;padding:6px 10px}
 .nav-inner{gap:18px}
 .nav-inner a{font-size:.84rem}
 .hero-shop{grid-template-columns:minmax(0,1fr)}
 .hero-shop>.gallery{order:1}
 .hero-shop>.shop-details{order:2}
 .shop-details{padding:25px}
 .highlights{grid-template-columns:repeat(2,minmax(0,1fr))}
 .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid-articles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .content-split{grid-template-columns:minmax(0,1fr)}
 .hero-page{grid-template-columns:minmax(0,1fr);padding:25px}
 .article-main{padding:24px}
 .dock-inner{gap:6px;padding:5px 8px}
 .dock-link{font-size:.75rem;gap:1px}
 .dock-link .dock-icon{font-size:1.2rem}
}
@media(max-width:460px){
 .shell{padding-inline:12px}
 .header-primary{grid-template-columns:minmax(95px,125px) minmax(0,1fr);gap:7px;min-height:80px}
 .brand,.brand img{width:115px;height:auto;max-height:64px}
 .site-search{min-width:0}
 .site-search span{display:none}
 .site-search button{padding-inline:9px}
 .header-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px}
 .header-actions .button{padding:8px 9px;font-size:.77rem}
 .category-grid,.grid-articles{grid-template-columns:minmax(0,1fr)}
 .feature-card .cover{aspect-ratio:2.1}
 .feature-card .inside{padding:17px}
 .gallery{padding:10px}
 .gallery-thumbs{gap:6px}
 .shop-details{padding:22px 18px}
 .shop-details h1{font-size:1.8rem}
 .shop-actions{grid-template-columns:1fr 1fr}
 .shop-actions .button{font-size:.84rem;padding:10px 5px}
 .shop-meta{grid-template-columns:1fr 1fr}
 .highlights{gap:9px}
 .highlight{padding:9px}
 .highlight span{font-size:.72rem}
 .article-main{padding:20px 17px}
 .dock-link{font-size:.7rem;letter-spacing:.015em}
 .dock-link .dock-icon{font-size:1.2rem}
 .main{padding-top:16px}
}
@media(max-width:355px){
 .dock-inner{padding-inline:4px;gap:4px}
 .dock-link{font-size:.67rem}
 .shop-details h1{font-size:1.65rem}
 .shop-actions .button{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
