/* EARMANSSGOD — Premium Demo inspired reference skin
   White editorial Shopify-style layout, black rules, condensed typography.
   Keeps the existing V84.16 functionality underneath. */

:root{
  --ref-black:#080808;
  --ref-white:#fff;
  --ref-line:#171717;
  --ref-muted:#777;
  --ref-soft:#f6f6f6;
  --ref-font:"Inter",Arial,sans-serif;
  --ref-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
}

html,body{
  background:#fff!important;
  color:var(--ref-black)!important;
  font-family:var(--ref-font)!important;
  letter-spacing:.01em;
}
body{
  min-width:320px;
  overflow-x:hidden;
}
body.dark-mode,html.dark-mode{
  background:#fff!important;color:#080808!important;
}
*{box-sizing:border-box}
button,input,textarea,select{font-family:inherit}
a{color:inherit}

/* INTRO */
.site-loader{
  position:fixed!important;inset:0!important;z-index:99999!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:#fff!important;color:#050505!important;
  opacity:1;visibility:visible;
}
.site-loader.hide{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.site-loader-inner{display:none!important}
.reference-intro{
  width:min(420px,88vw);
  min-height:78vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;text-align:center;
}
.reference-intro-date{
  order:1;font:500 10px/1 var(--ref-display);
  letter-spacing:.12em;text-transform:uppercase;
}
.reference-intro-logo{
  order:2;width:min(310px,76vw);height:auto;max-height:180px;object-fit:contain;
  mix-blend-mode:multiply;
}
.reference-intro-links{
  order:3;width:min(250px,76vw);display:grid;gap:7px;
}
.reference-intro-links button{
  height:34px;border:1px solid #111;background:#fff;color:#111;
  font:600 11px/1 var(--ref-display);letter-spacing:.08em;cursor:pointer;
}
.reference-intro-links button:hover{background:#080808;color:#fff}
.reference-intro-socials{
  order:4;display:flex;gap:20px;margin-top:20px;
}
.reference-intro-socials a{font:600 18px/1 var(--ref-font);text-decoration:none}

/* TOP BAR */
body:before{
  content:"EARMANSSGOD  •  PREMIUM AIRPODS  •  ORDER VIA WHATSAPP";
  display:block;position:relative;z-index:80;
  height:24px;border-bottom:1px solid #111;
  text-align:center;padding-top:7px;
  font:600 8px/1 var(--ref-display);letter-spacing:.13em;
  background:#fff;color:#111;
}

/* HEADER */
.header{
  position:sticky!important;top:0!important;z-index:70!important;
  height:76px!important;padding:0 max(22px,calc((100vw - 1160px)/2))!important;
  display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;
  border-bottom:1px solid #111!important;background:#fff!important;
  box-shadow:none!important;
}
.header-left{display:flex!important;align-items:center;gap:18px!important;justify-content:flex-start}
.settings-button,.search-button,.account-icon-button,.cart-button{
  width:28px!important;height:28px!important;padding:0!important;border:0!important;
  background:transparent!important;color:#080808!important;box-shadow:none!important;
  display:grid!important;place-items:center!important;cursor:pointer!important;
}
.settings-button svg{display:none!important}
.hamburger-lines{display:flex;flex-direction:column;gap:4px;width:17px}
.hamburger-lines i{display:block;width:17px;height:1px;background:#111}
.search-button svg,.account-icon-button svg,.cart-button svg{width:19px!important;height:19px!important;stroke:#111!important;fill:none!important}
.header .brand{
  justify-self:center!important;width:170px!important;max-width:35vw!important;height:50px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.header .brand img{
  width:100%!important;height:100%!important;object-fit:contain!important;opacity:1!important;
  mix-blend-mode:multiply;
}
.header nav,.language-switch{display:none!important}
.header-actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:18px!important}
.cart-button span{
  min-width:14px!important;height:14px!important;line-height:14px!important;
  position:absolute!important;margin:0 0 27px 26px!important;
  border-radius:50%!important;background:#080808!important;color:#fff!important;
  font-size:8px!important;text-align:center!important;
}
.cart-button span[hidden]{display:none!important}

/* MENU */
.settings-panel{
  position:fixed!important;z-index:100!important;left:0!important;top:0!important;
  width:min(390px,100vw)!important;height:100dvh!important;
  padding:28px 28px 24px!important;background:#fff!important;color:#111!important;
  border-right:1px solid #111!important;box-shadow:none!important;
  overflow:auto!important;transform:translateX(-105%)!important;transition:transform .28s ease!important;
}
.settings-panel.open,.settings-panel.show,[aria-hidden="false"].settings-panel{transform:translateX(0)!important}
.reference-menu-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #111;padding-bottom:18px;margin-bottom:32px}
.reference-menu-head img{width:170px;height:56px;object-fit:contain;mix-blend-mode:multiply}
.reference-menu-head .settings-close{
  order:2;width:28px;height:28px;border:0;background:#fff;font-size:28px;line-height:1;cursor:pointer
}
.reference-menu-links{display:grid;gap:8px}
.reference-menu-links button{
  width:100%;height:42px;border:1px solid #111;background:#fff;color:#111;
  font:600 12px/1 var(--ref-display);letter-spacing:.1em;cursor:pointer
}
.reference-menu-links button:hover{background:#111;color:#fff}
.reference-menu-socials{display:flex;justify-content:center;gap:24px;margin:42px 0 28px}
.reference-menu-socials a{font-size:20px;text-decoration:none}
.reference-menu-meta{border-top:1px solid #111;padding-top:20px;display:grid;gap:8px}
.reference-menu-meta button{border:0;background:#fff;text-align:left;font:600 10px/1.2 var(--ref-display);letter-spacing:.1em;padding:8px 0}
.settings-panel .setting-group,.settings-panel .settings-links,.settings-panel .setting-action,.settings-panel .settings-note{display:none!important}
.settings-backdrop{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(4px)!important}

/* SEARCH */
.search-panel{
  position:fixed!important;z-index:95!important;inset:100px 0 auto!important;
  background:#fff!important;color:#111!important;border-bottom:1px solid #111!important;
  box-shadow:none!important;
}
.search-inner{max-width:1160px!important;margin:auto!important;padding:38px 28px 48px!important}
.search-top{border-bottom:1px solid #111!important;padding-bottom:14px!important}
.search-top .eyebrow{font:600 10px/1 var(--ref-display)!important;letter-spacing:.12em}
.search-top button{font-size:28px!important;background:none!important;border:0!important}
.search-input-wrap{border-bottom:1px solid #111!important;border-radius:0!important;background:#fff!important;margin:28px 0 14px!important}
.search-input-wrap input{font:500 28px/1.1 var(--ref-display)!important;border:0!important;background:#fff!important}
.search-filters{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.filter-btn{border:1px solid #111!important;border-radius:0!important;background:#fff!important;color:#111!important;padding:8px 12px!important;font:600 10px/1 var(--ref-display)!important}
.filter-btn.active{background:#111!important;color:#fff!important}
.search-results{margin-top:24px!important}

/* MAIN */
main{max-width:1160px!important;margin:0 auto!important}
.catalog{padding:42px 28px 0!important}
.catalog-head{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
  border-bottom:1px solid #111!important;padding-bottom:14px!important;margin-bottom:28px!important;
}
.catalog-head .eyebrow{display:none!important}
.catalog-head h1{
  margin:0!important;font:800 clamp(42px,8vw,76px)/.82 var(--ref-display)!important;
  letter-spacing:.02em!important;
}
.catalog-filter{
  min-width:112px;height:34px;border:1px solid #111;background:#fff;color:#111;
  font:600 10px/1 var(--ref-display);letter-spacing:.08em;cursor:pointer;
}
.catalog-filter span{font-size:16px;margin-left:8px}

/* PRODUCT GRID */
.product-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:38px 14px!important;
}
.product-card{
  min-width:0!important;background:#fff!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;overflow:visible!important;cursor:pointer!important;
}
.product-photo{
  position:relative!important;width:100%!important;aspect-ratio:1/1.02!important;
  background:#fff!important;border:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;
}
.product-photo img{
  width:100%!important;height:100%!important;object-fit:contain!important;
  mix-blend-mode:multiply!important;transition:transform .35s ease!important;
}
.product-card:hover .product-photo img{transform:scale(1.04)}
.product-badges{margin:0 0 5px!important}
.badge{
  border:1px solid #111!important;background:#fff!important;color:#111!important;border-radius:0!important;
  padding:4px 7px!important;font:600 8px/1 var(--ref-display)!important;letter-spacing:.08em!important;
}
.product-body{padding:0!important}
.product-rating{display:none!important}
.product-body h2{
  margin:8px 0 8px!important;font:700 13px/1.08 var(--ref-display)!important;
  letter-spacing:.04em!important;text-transform:uppercase!important;
}
.product-bottom{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
.sale-price{display:block!important}
.sale-price del{display:none!important}
.sale-price strong{display:block!important;font:600 13px/1 var(--ref-display)!important}
.product-bottom button{
  width:100%!important;height:29px!important;border:1px solid #111!important;border-radius:0!important;
  background:#080808!important;color:#fff!important;font:700 9px/1 var(--ref-display)!important;
  letter-spacing:.08em!important;cursor:pointer!important;
}
.product-bottom button:hover{background:#fff!important;color:#111!important}

/* REFERENCE LOOKBOOK */
.reference-lookbook{padding:90px 28px 70px!important;text-align:center!important}
.lookbook-head h2{margin:4px 0!important;font:800 54px/.85 var(--ref-display)!important}
.lookbook-head p:last-child{font:500 10px/1 var(--ref-display);letter-spacing:.1em}
.lookbook-strip{
  display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:35px auto 0;
  max-width:760px;height:260px;overflow:hidden
}
.lookbook-strip img{height:100%;width:32%;object-fit:contain;mix-blend-mode:multiply}

/* HIDE / REFRAME NON-REFERENCE SECTIONS */
.benefits{display:none!important}
.recentlyViewedSection,.buyer-tools{border-top:1px solid #111!important}
.faq-section{padding:70px 28px!important;border-top:1px solid #111!important}
.faq-head h2{font:800 58px/.82 var(--ref-display)!important}
.faq-item{border-bottom:1px solid #111!important;border-radius:0!important;background:#fff!important}
.faq-item summary{font:600 14px/1.2 var(--ref-display)!important;padding:18px 0!important}
.faq-answer{padding:0 0 18px!important;color:#333!important}

/* SOCIAL / FOOTER */
.social.section{padding:70px 28px!important;border-top:1px solid #111!important}
.social-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
.social-card{
  border:1px solid #111!important;border-radius:0!important;background:#fff!important;
  min-height:120px!important;padding:18px!important;display:grid!important;align-content:center!important;
}
.social-card b{font:600 9px var(--ref-display)!important}
.site-footer{
  border-top:1px solid #111!important;background:#fff!important;color:#111!important;
  padding:42px 28px 28px!important;display:grid!important;grid-template-columns:1fr auto!important;gap:24px!important;
}
.footer-brand strong{font:800 32px/.8 var(--ref-display)!important}
.footer-brand p,.footer-copy,.footer-links{font:500 9px/1.5 var(--ref-display)!important;letter-spacing:.08em!important}
.footer-socials{display:flex!important;gap:14px!important}
.footer-socials a{border:1px solid #111!important;width:30px!important;height:30px!important;display:grid!important;place-items:center!important}
.footer-socials svg{width:15px!important;height:15px!important;stroke:#111!important;fill:none!important}
.footer-links{grid-column:1/-1;border-top:1px solid #111;padding-top:16px}
.footer-copy{grid-column:1/-1}

/* DETAIL PRODUCT */
.detail-overlay{
  position:fixed!important;inset:0!important;z-index:120!important;background:#fff!important;color:#111!important;
}
.detail-page{background:#fff!important;max-width:1160px!important;margin:auto!important;min-height:100dvh!important}
.detail-header{
  position:sticky!important;top:0!important;z-index:4!important;height:76px!important;
  display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;
  border-bottom:1px solid #111!important;background:#fff!important;padding:0 24px!important;
}
.detail-brand{justify-self:center;width:150px;height:52px}
.detail-brand img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.back-link,.detail-cart{
  width:auto!important;border:0!important;background:#fff!important;color:#111!important;
  font:600 10px var(--ref-display)!important;letter-spacing:.08em!important
}
.back-link svg{width:18px!important;height:18px!important;stroke:#111!important}
.detail-cart svg{width:18px!important;height:18px!important;stroke:#111!important;fill:none!important}
.detail-content{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr)!important;
  gap:48px!important;padding:38px 28px 120px!important;
}
.detail-gallery{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;gap:0!important}
.detail-gallery .slide{min-width:100%!important;aspect-ratio:1/1!important;scroll-snap-align:start!important;background:#fff!important}
.detail-gallery .slide img{width:100%!important;height:100%!important;object-fit:contain!important;mix-blend-mode:multiply!important}
.gallery-hint{font:600 9px var(--ref-display)!important;letter-spacing:.08em!important;text-align:center!important;margin:10px 0!important}
.thumbs{display:flex!important;gap:6px!important;overflow:auto!important}
.thumb{border:1px solid #111!important;background:#fff!important;padding:0!important;width:60px!important;height:60px!important}
.thumb img{width:100%!important;height:100%!important;object-fit:contain!important}
.detail-info .eyebrow{display:none!important}
.detail-rating{font-size:11px!important}
.detail-info h2{font:800 44px/.9 var(--ref-display)!important;margin:10px 0 18px!important}
.detail-price{border-top:1px solid #111;border-bottom:1px solid #111;padding:14px 0!important}
.price-line{display:flex;justify-content:space-between;gap:12px;font:600 11px var(--ref-display)!important}
.price-line strong{font-size:20px!important}
.detail-info hr{border:0;border-top:1px solid #111!important}
.detail-info h3{font:700 14px var(--ref-display)!important;letter-spacing:.08em!important}
.detail-description{font:400 12px/1.6 var(--ref-font)!important;color:#333!important}
.detail-features{display:grid!important;grid-template-columns:repeat(3,1fr)!important;border-top:1px solid #111!important;border-bottom:1px solid #111!important}
.detail-features div{padding:12px 8px!important;border-right:1px solid #111!important}
.detail-features div:last-child{border-right:0}
.detail-features b,.detail-features span{display:block!important;font-size:9px!important}
.detail-qty-row{display:flex!important;justify-content:space-between!important;padding:18px 0!important}
.qty{display:flex!important;border:1px solid #111!important}
.qty button{border:0!important;background:#fff!important;width:30px!important}
.qty strong{padding:6px 10px!important}
.review-box{border-top:1px solid #111!important;border-bottom:1px solid #111!important;border-radius:0!important}
.shopee-purchase-bar{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:130!important;
  display:grid!important;grid-template-columns:1fr 1fr 48px!important;
  height:58px!important;background:#fff!important;border-top:1px solid #111!important;padding:8px!important;gap:6px!important;
}
.shopee-purchase-bar button{border:1px solid #111!important;background:#fff!important;color:#111!important;font:700 10px var(--ref-display)!important}
.shopee-purchase-bar .shopee-buy-btn{background:#111!important;color:#fff!important}
.shopee-purchase-bar .shopee-chat-btn{display:grid!important;place-items:center!important}

/* CHECKOUT / CART */
.overlay,.auth-overlay,.chat-overlay,.info-overlay{
  background:#fff!important;color:#111!important;backdrop-filter:none!important;
}
.checkout{
  width:100%!important;max-width:920px!important;min-height:100dvh!important;margin:auto!important;
  border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;padding:24px!important;
}
.checkout-head{border-bottom:1px solid #111!important;padding-bottom:18px!important}
.checkout-head h2{font:800 42px/.85 var(--ref-display)!important}
.checkout-steps{border-bottom:1px solid #111!important;border-radius:0!important;padding:14px 0!important}
.checkout-steps span{font:600 10px var(--ref-display)!important}
.checkout-page{padding-top:28px!important}
.page-intro h3,.payment-top h3{font:800 34px/.9 var(--ref-display)!important}
.cart-item,.cart-help-grid>div,.buy-now-summary,.payment-summary,.payment-card{
  border:1px solid #111!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;
}
.cart-help-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
input,textarea,select{
  border:1px solid #111!important;border-radius:0!important;background:#fff!important;color:#111!important;
}
.primary-btn,.auth-submit{
  border:1px solid #111!important;border-radius:0!important;background:#111!important;color:#fff!important;
  font:700 11px var(--ref-display)!important;letter-spacing:.08em!important;
}
.back-btn,.outline-btn{
  border:1px solid #111!important;border-radius:0!important;background:#fff!important;color:#111!important;
}
.payment-layout{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
.payment-choice-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
.payment-choice{border:1px solid #111!important;border-radius:0!important;background:#fff!important;color:#111!important}
.payment-choice.active{background:#111!important;color:#fff!important}
.qris-frame{border:1px solid #111!important;border-radius:0!important;background:#fff!important}
.payment-proof-box{border-top:1px solid #111!important;border-radius:0!important}

/* AUTH / CHAT / INFO */
.auth-modal,.chat-modal,.info-modal{
  border:1px solid #111!important;border-radius:0!important;background:#fff!important;color:#111!important;box-shadow:none!important;
}
.auth-modal{width:min(420px,calc(100vw - 32px))!important;padding:28px!important}
.auth-modal h2,.chat-head h2,.info-modal h2{font:800 38px/.9 var(--ref-display)!important}
.chat-modal{width:min(560px,calc(100vw - 32px))!important}
.chat-head,.chat-form{border-color:#111!important}
.chat-messages{background:#fff!important}
.chat-form input{border:1px solid #111!important}
.info-modal{width:min(700px,calc(100vw - 32px))!important;padding:28px!important}

/* FLOATING CHAT */
.floating-live-chat{
  width:44px!important;height:44px!important;border-radius:0!important;border:1px solid #111!important;
  background:#fff!important;color:#111!important;box-shadow:none!important;
}
.floating-live-chat svg{stroke:#111!important;fill:none!important}

/* MOBILE */
@media(max-width:700px){
  body:before{height:22px;padding-top:6px;font-size:7px}
  .header{height:62px!important;padding:0 16px!important}
  .header .brand{width:120px!important;height:44px!important}
  .header-actions{gap:11px!important}
  .header-left{gap:11px!important}
  .catalog{padding:28px 16px 0!important}
  .catalog-head{margin-bottom:20px!important}
  .catalog-head h1{font-size:48px!important}
  .catalog-filter{min-width:96px;height:30px;font-size:9px}
  .product-grid{gap:32px 9px!important}
  .product-body h2{font-size:12px!important;min-height:25px}
  .sale-price strong{font-size:12px!important}
  .product-bottom button{height:28px!important}
  .reference-lookbook{padding:65px 16px 45px!important}
  .lookbook-strip{height:190px}
  .faq-section,.social.section{padding-left:16px!important;padding-right:16px!important}
  .site-footer{grid-template-columns:1fr!important;padding-left:16px!important;padding-right:16px!important}
  .detail-content{display:block!important;padding:20px 16px 100px!important}
  .detail-header{height:62px!important;padding:0 16px!important}
  .detail-brand{width:110px;height:44px}
  .detail-info h2{font-size:40px!important}
  .detail-features{grid-template-columns:1fr 1fr!important}
  .detail-features div:nth-child(2){border-right:0}
  .detail-features div:nth-child(3){grid-column:1/-1;border-top:1px solid #111;border-right:0}
  .payment-layout{grid-template-columns:1fr!important}
  .cart-help-grid{grid-template-columns:1fr!important}
  .checkout{padding:16px!important}
  .checkout-head h2{font-size:38px!important}
  .payment-choice-grid{grid-template-columns:1fr!important}
  .settings-panel{width:100vw!important;padding:24px 20px!important}
  .reference-intro{width:84vw;min-height:82vh}
  .reference-intro-logo{width:min(320px,82vw)}
  .reference-intro-links{width:min(250px,78vw)}
}
@media(min-width:900px){
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}