/* BITRONTIX USA — Responsive navigation, real bag and image layouts, Oct 19 2026. */
.brand-head .brand-head-inner{width:100%}
.brand-head .brand-menu-toggle{flex-shrink:0}
.brand-cart-toggle{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:45px;height:45px;background:transparent;color:#522239;border:1px solid transparent;border-radius:4px;cursor:pointer;padding:9px}
.brand-cart-toggle:hover{background:#f5eee5;border-color:#e7d6c8}
.brand-cart-toggle svg{width:23px;height:23px;display:block}
.brand-cart-count{position:absolute;min-width:16px;height:16px;top:2px;right:1px;border-radius:999px;background:#63223d;color:#fff;font:700 9px/16px Arial,sans-serif;padding:0 3px;text-align:center}
.brand-cart-count[hidden]{display:none!important}
.brand-drawer{left:0!important;right:auto!important;box-shadow:16px 0 50px #180f1945!important}
.brand-cart-backdrop{position:fixed;inset:0;background:#190e17ae;backdrop-filter:blur(3px);z-index:100099}
.brand-cart-backdrop[hidden],.brand-cart-drawer[hidden]{display:none!important}
.brand-cart-drawer{position:fixed!important;top:0;right:0;bottom:0;width:min(100vw,450px);height:100dvh;background:#fefbf6;color:#382834;z-index:100100;display:flex;flex-direction:column;box-shadow:-18px 0 55px #23101d59}
body.brand-cart-open{overflow:hidden!important}
.cart-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:25px 25px 21px;border-bottom:1px solid #e9ded0}
.cart-drawer-eyebrow{font:700 9px/1.5 Arial,sans-serif;letter-spacing:.19em;color:#ad8963}
.cart-drawer-top h2{margin:7px 0 0;color:#53243c;font:400 30px/1 Georgia,serif}
#brand-cart-heading-count{font:400 17px Georgia,serif;color:#9b7f72}
.cart-drawer-close{width:42px;height:42px;border:1px solid #ded3c5;border-radius:50%;background:#fff;color:#53243c;font:26px/1 Arial,sans-serif;cursor:pointer}
.cart-drawer-content{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:25px 25px}
.cart-drawer-bottom{padding:18px 25px max(22px,env(safe-area-inset-bottom));border-top:1px solid #e9ded0;background:#fbf6ee;text-align:center;font:11px/1.6 Arial,sans-serif}
.cart-drawer-bottom .cart-drawer-trust{color:#654b53;font-weight:600}
.cart-drawer-trust span{padding:0 7px;color:#bda48d}
.cart-drawer-bottom a{display:inline-block;margin-top:7px;color:#6b304d;text-underline-offset:3px}
.cart-empty{text-align:center;padding:65px 7px 34px}
.cart-empty-symbol{font:63px Georgia,serif;color:#c9a275;margin-bottom:18px}
.cart-empty h3{font:400 30px/1.18 Georgia,serif;color:#51243b;margin:0 0 14px}
.cart-empty p{font:13px/1.7 Arial,sans-serif;color:#736365;margin:0 auto 27px;max-width:320px}
.cart-primary-link{display:flex;align-items:center;justify-content:center;text-decoration:none!important;background:#53213a;color:#fffaf6!important;font:700 11px/1.3 Arial,sans-serif;letter-spacing:.09em;min-height:51px;padding:14px 18px}
.cart-primary-link:hover{background:#37192c}
.cart-line{display:flex;gap:15px;padding:17px 0;border-bottom:1px solid #e7dacf;align-items:flex-start}
.cart-line-image{width:103px;height:103px;aspect-ratio:1;background:#f4eadf;border:1px solid #e6d9cd;object-fit:cover;border-radius:4px;flex:none}
.cart-line-info{flex:1;min-width:0}.cart-line-tag{font:700 9px/1.5 Arial,sans-serif;letter-spacing:.09em;color:#a58160}
.cart-line-info h3{font:400 20px/1.2 Georgia,serif;color:#4b243a;margin:8px 0 7px}
.cart-line-info p{font:11px/1.5 Arial,sans-serif;color:#82746d;margin:0 0 10px}
.cart-line-info strong{font:700 13px Arial,sans-serif;color:#48333d}
.cart-totals{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:27px;padding:17px 0;border-top:1px solid #bca896;font:12px Arial,sans-serif;color:#453b3a}
.cart-totals strong{font-size:18px;color:#4f2739}
.cart-small-print{font:11px/1.6 Arial,sans-serif;color:#80736c;margin:0 0 17px}
.cart-remove{display:block;width:100%;margin:17px 0 0;padding:11px;background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;font:11px Arial,sans-serif;color:#705c61;cursor:pointer}
:is(.brand-cart-toggle,.cart-drawer-close,.cart-primary-link,.cart-remove):focus-visible{outline:3px solid #cf9e68;outline-offset:3px}
@media(max-width:900px){
 .brand-head .brand-head-inner{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:7px;min-height:66px}
 .brand-head .brand-menu-toggle{display:flex!important;grid-column:1;grid-row:1;justify-self:start;width:43px;height:43px}
 .brand-head .brandmark{grid-column:2;grid-row:1;justify-self:center;text-align:center;gap:6px;min-width:0}
 .brand-head .brand-nav{display:none!important}
 .brand-head .brand-head-actions{grid-column:3;grid-row:1;justify-self:end}
 .brand-head .brand-head-actions .brand-cta{display:none!important}
 .brand-head .brandword{font-size:21px}
}
@media(max-width:430px){
 .brand-head .brand-head-inner{grid-template-columns:43px minmax(0,1fr) 43px;gap:4px;min-height:63px}
 .brand-head .brandword{font-size:20px;letter-spacing:.14em}
 .brand-head .branddescriptor{font-size:6.4px}
 .brand-head .brand-emblem{font-size:25px}
 .brand-cart-toggle{width:43px;height:43px}
 .brand-cart-drawer{width:100vw}
 .cart-drawer-top{padding:19px 20px}
 .cart-drawer-content{padding:20px}
 .cart-drawer-bottom{padding-left:20px;padding-right:20px}
}
/* The standalone upsell used to hide all page siblings. Keep the site's header + working navigation visible. */
main.app:has(#checkout-choice:not(.hidden)) > #site-header{display:flex!important}
main.app:has(#checkout-choice:not(.hidden)) > #brand-menu-backdrop:not([hidden]),
main.app:has(#checkout-choice:not(.hidden)) > #brand-cart-backdrop:not([hidden]){display:block!important}
main.app:has(#checkout-choice:not(.hidden)) > #brand-drawer:not([hidden]),
main.app:has(#checkout-choice:not(.hidden)) > #brand-cart-drawer:not([hidden]){display:flex!important}
/* All real product media remain proportionate on phone/tablet/desktop, without huge image letterboxing. */
main.app .wrap{width:100%;max-width:650px;margin-inline:auto}
main.app img{max-width:100%;height:auto}
main.app #hero-img{display:block;width:100%!important;max-width:550px!important;aspect-ratio:1/1!important;height:auto!important;object-fit:cover!important;object-position:center!important;margin:12px auto!important;border-radius:12px}
main.app #why-img,main.app #meaning-img{width:100%!important;max-width:590px!important;aspect-ratio:4/5!important;height:auto!important;max-height:none!important;object-fit:cover!important;object-position:center!important;margin-inline:auto!important}
main.app #men-img,main.app #women-img{display:block;width:100%!important;aspect-ratio:4/5!important;height:auto!important;max-height:none!important;object-fit:cover!important;object-position:center!important}
main.app #chart-match-product{display:block!important;width:min(100%,430px)!important;max-width:430px!important;aspect-ratio:1/1!important;height:auto!important;object-fit:cover!important;margin:15px auto!important;border-radius:12px}
main.app #final-img{display:block!important;width:min(100%,510px)!important;max-width:510px!important;aspect-ratio:4/5!important;height:auto!important;max-height:none!important;object-fit:cover!important;object-position:center!important;margin:13px auto!important}
main.app #checkout-choice .checkout-bracelet-image{display:block!important;width:min(100%,380px)!important;max-width:380px!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;object-position:center center!important;border:0!important;background:#f4ece2!important;border-radius:12px!important;margin:11px auto 9px!important}
main.app #checkout-choice .checkout-panel{width:100%;max-width:550px;padding:18px 20px 24px}
main.app #checkout-choice h3{margin:7px 0!important}
@media(max-width:700px){
 main.app .wrap{width:100%;max-width:600px}
 main.app #checkout-choice .checkout-panel{padding:16px 14px 21px}
 main.app #checkout-choice .checkout-bracelet-image{width:min(100%,355px)!important;max-width:355px!important;aspect-ratio:4/3!important;margin:7px auto 7px!important}
 main.app #chart-match-product{width:min(100%,350px)!important}
}
@media(max-width:440px){
 main.app #hero-img{max-width:100%!important;aspect-ratio:1/1!important}
 main.app #why-img,main.app #meaning-img{aspect-ratio:4/5!important}
 main.app #checkout-choice .checkout-bracelet-image{width:min(100%,335px)!important;aspect-ratio:4/3!important}
 main.app #final-img{width:100%!important}
}
/* Maintain proper media ratios for every generated image (12 stone variants). */
main.app .benefit img{max-width:100%;object-fit:cover}
@media(prefers-reduced-motion:reduce){.cart-primary-link,.brand-cart-toggle{transition:none!important}}