/* I Already Own That! — ported from Claude design reference. Base + hovers + responsive. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#FBF7F1;color:#1B1712;font-family:'Hanken Grotesk',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#F7D3B6;color:#1B1712}
a{text-decoration:none}
img{display:block;max-width:100%}
@keyframes iaotFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes iaotPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* hover / focus states (reference used style-hover) */
.nlink:hover{background:rgba(27,23,18,.05);color:#1B1712 !important}
.bprimary:hover{background:#C9521A !important}
.boutline:hover{border-color:#1B1712 !important;background:rgba(27,23,18,.03)}
.bdark:hover{background:#F17A38 !important}
.footlink:hover{color:#1B1712 !important}
.shopbtn:hover{background:#C9521A !important}
.hotcard:hover{box-shadow:0 20px 40px -24px rgba(27,23,18,.3)}
.xclose:hover{color:#1B1712 !important}
.finput:focus{border-color:#E4611E !important}

/* responsive collapse (reference grids were desktop-fixed) */
@media(max-width:900px){
  .g-hero{grid-template-columns:1fr !important;gap:32px !important}
  .g-hero .carousel-wrap{justify-self:stretch !important;max-width:100% !important}
}
@media(max-width:820px){
  .g3{grid-template-columns:1fr !important}
  .g2{grid-template-columns:1fr !important}
  .navtext{display:none !important}
}
@media(max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:560px){ .g4{grid-template-columns:1fr !important} }