/* ThemeDokan UI v17 - loaded LAST, overrides v15/v16
   1) ONE corner token (--td-r) used by buttons, product image, thumbnails and product grid cards
   2) single product: image moved up into the hero
   3) AI chat bot: no overlap, stays above the mobile bottom nav
   To change the corner shape everywhere, edit ONLY --td-r below. */
:root{--td-r:var(--b-tl,5px) var(--b-tr,0px) var(--b-br,5px) var(--b-bl,0px);--td-nav-h:76px}

/* ---- 1) same radius: buttons = single product image = grid cards ---- */
.td-demo,.td-demo-dash,.td-buy-card button,.td-buy-card .td-btn,.td-buy-card a[class*="btn"],
.td-gallery-box,.td-gallery-btn,.td-gallery-main,.td-gallery-box img,
.td-gallery-box ~ div.flex button,.td-gallery-box ~ div.flex button img,
.td-card,.td-card>a,.td-card>a img,.td-card .td-sq,.td-card button,.td-card .td-btn,
button.td-btn,a.td-btn{border-radius:var(--td-r)!important}
.td-gallery-box,.td-card{overflow:hidden}
.td-zoom-hint{border-radius:var(--td-r)!important}
.td-card .absolute.left-0.top-0 span{border-radius:0 0 8px 0!important}

/* ---- 2) single product image: move up ---- */
.td-pdp-hero{padding-bottom:50px}
.td-pdp-hero + div{margin-top:-34px!important;position:relative;z-index:2}
.td-gallery-box{margin-top:0!important;position:relative;z-index:2}
@media (min-width:640px){.td-pdp-hero{padding-bottom:58px}.td-pdp-hero + div{margin-top:-40px!important}}

/* (AI chat bot overrides removed in v17.10: the widget uses its own CSS) */

/* ---- v17.2: smaller product image ---- */
.td-gallery-box,.td-gallery-box ~ div.flex{width:86%;max-width:440px!important;margin-left:auto!important;margin-right:auto!important}
@media (min-width:1024px){.td-gallery-box,.td-gallery-box ~ div.flex{width:100%;max-width:500px!important;margin-left:0!important}}

/* ---- v17.4: 'Choose an option' boxes = same corner as buttons ---- */
.td-buy-card fieldset label,fieldset label[class*="rounded"],.td-buy-card select,.td-buy-card .td-buy-save,.td-buy-card input:not([type=radio]):not([type=checkbox]){border-radius:var(--td-r)!important}

/* ---- v17.4: product image in YouTube-style 16:9 frame ---- */
.td-gallery-box,.td-gallery-box ~ div.flex{width:92%;max-width:640px!important}
.td-gallery-btn{position:relative;aspect-ratio:16/9;overflow:hidden}
.td-gallery-main,.td-gallery-box img.td-gallery-main{width:100%!important;height:100%!important;aspect-ratio:16/9;object-fit:cover;object-position:center top}
@media (min-width:1024px){.td-gallery-box,.td-gallery-box ~ div.flex{width:100%;max-width:680px!important}}

/* ---- v17.5: every button / select / option box / dropdown uses the SAME corner (--td-r) ---- */
button:not([class*="rounded-full"]):not(.tdw-fab):not([role="switch"]):not([role="checkbox"]),
a[class*="btn"],[role="combobox"],[role="option"],[role="menuitem"],[role="listbox"],[role="menu"],
select,fieldset label,label[class*="rounded"],[class*="SelectTrigger"],[data-radix-popper-content-wrapper]>div{border-radius:var(--td-r)!important}
.td-buy-card [class*="rounded-"]:not([class*="rounded-full"]){border-radius:var(--td-r)!important}

/* ---- v17.5: compact dark title area above the image ---- */
.td-pdp-hero{padding:10px 16px 34px!important}
.td-pdp-hero::after{height:26px!important}
.td-pdp-crumb{font-size:11.5px}
.td-pdp-title{margin-top:8px!important;font-size:20px!important;line-height:1.25!important}
.td-pdp-chips{margin-top:10px;gap:6px}
.td-pdp-chips a,.td-pdp-chips span{padding:4px 10px;font-size:12px}
.td-pdp-hero + div{margin-top:-18px!important}
@media (min-width:640px){.td-pdp-hero{padding:14px 24px 42px!important}.td-pdp-title{font-size:28px!important}.td-pdp-hero + div{margin-top:-22px!important}}

/* v17.6: rating chip scrolls to reviews */
#reviews{scroll-margin-top:84px}
.td-pdp-chips a[href="#reviews"]{cursor:pointer;text-transform:none}
html{scroll-behavior:smooth}

/* ======== v17.8 ======== */
/* A) all chips in ONE row (centered if they fit, swipe sideways if not) */
body .td-pdp-chips{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:6px!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:10px!important;padding:0 2px}
body .td-pdp-chips::-webkit-scrollbar{display:none}
body .td-pdp-chips>*{flex:0 0 auto!important;white-space:nowrap!important;padding:4px 9px!important;font-size:11.5px!important;line-height:1.35}
body .td-pdp-chips>:first-child{margin-left:auto}
body .td-pdp-chips>:last-child{margin-right:auto}
body .td-pdp-hero{padding:10px 16px 34px!important}
body .td-pdp-title{font-size:20px!important;line-height:1.25!important;margin-top:8px!important}
@media (min-width:640px){body .td-pdp-chips>*{font-size:13px!important;padding:5px 12px!important}body .td-pdp-title{font-size:28px!important}}

/* B) image sits on a dark colour panel over the white page (Themeve style) */
body .td-gallery-box{background:linear-gradient(135deg,#0d1533 0%,#1d1b4d 50%,#4a2468 100%)!important;border:0!important;box-shadow:0 22px 44px -24px rgba(20,16,60,.75)!important;padding:0!important}
body .td-gallery-btn{display:flex!important;align-items:center;justify-content:center;aspect-ratio:16/9;padding:14px!important;background:transparent!important}
body .td-gallery-main,body .td-gallery-box img.td-gallery-main{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:calc(var(--b-tl,5px) + 3px) 0 calc(var(--b-br,5px) + 3px) 0!important;box-shadow:0 16px 34px -14px rgba(0,0,0,.65)}
body .td-zoom-hint{background-color:rgba(255,255,255,.92)!important}

/* ======== v17.9: image floats ABOVE both backgrounds (dark hero + white page) with a strong shadow ======== */
:root{--td-ov:96px}
@media (min-width:640px){:root{--td-ov:130px}}
@media (min-width:1024px){:root{--td-ov:170px}}
body .td-pdp-hero{padding-bottom:calc(var(--td-ov) + 22px)!important}
body .td-pdp-hero + div{margin-top:calc(var(--td-ov) * -1)!important;position:relative;z-index:3}
@media (min-width:1024px){body .td-pdp-hero + div>div:nth-child(2){margin-top:var(--td-ov)}}
body .td-gallery-box{
  background:hsl(var(--card))!important;border:1px solid rgba(255,255,255,.18)!important;padding:0!important;
  box-shadow:0 34px 60px -22px rgba(6,10,30,.70),0 14px 28px -14px rgba(6,10,30,.45),0 0 0 1px rgba(15,23,42,.06)!important}
body .td-gallery-btn{display:block!important;padding:0!important;aspect-ratio:16/9;background:transparent!important}
body .td-gallery-main,body .td-gallery-box img.td-gallery-main{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center top;border-radius:0!important;box-shadow:none!important}

/* ======== v17.10: icons inside chips ======== */
.td-pdp-chips .td-ic{display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-2px;flex:none}

/* ======== v17.12: checkout ======== */
.td-co-trust,.td-co-fine{display:none!important}
body .td-co-pay{border-radius:var(--td-r)!important;min-height:44px!important;padding:10px 16px!important;font-size:14px!important;line-height:1.25!important}
body .td-co-pay svg{width:16px!important;height:16px!important}
body .td-addnote{border:0!important;outline:0;box-shadow:none!important;background:transparent!important;padding:4px 0!important;border-radius:0!important}

/* ======== v17.13: bigger product image ======== */
body .td-gallery-box,body .td-gallery-box ~ div.flex{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
@media (min-width:640px){body .td-gallery-box,body .td-gallery-box ~ div.flex{max-width:820px!important;margin-left:auto!important;margin-right:auto!important}}
@media (min-width:1024px){body .td-gallery-box,body .td-gallery-box ~ div.flex{max-width:none!important;margin-left:0!important}}
body .td-gallery-box ~ div.flex button.h-16{height:60px;width:60px}

/* ======== v17.14: product info dropdowns (What you get / FAQ / Requirements / Support / Licence) ======== */
.td-acc-group{padding:0 16px}
.td-acc-group>div>[data-state]{border-bottom:1px solid hsl(var(--border))}
.td-acc-group>div>[data-state]:last-child{border-bottom:0}
.td-acc-group [data-state] [data-state]{border-top:0}
.td-acc-group [role=region]>div{padding-bottom:14px}

/* ======== v17.15: dropdown sections (script-driven, works with any bundle) ======== */
.td-dd{border:1px solid hsl(var(--border))!important;border-radius:var(--td-r)!important;background:hsl(var(--card))!important;padding:0!important;overflow:hidden;margin-top:10px!important}
.td-dd>:not(.td-dd-h){display:none!important}
.td-dd.td-open>:not(.td-dd-h){display:block!important;margin:0!important;padding:0 16px 14px!important}
.td-dd-h{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0!important;padding:14px 16px;cursor:pointer;user-select:none;font-size:15px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;color:hsl(var(--foreground))!important;-webkit-tap-highlight-color:transparent}
.td-dd-h::after{content:"";flex:none;width:8px;height:8px;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;opacity:.55}
.td-dd.td-open>.td-dd-h::after{transform:rotate(-135deg)}
.td-wyg>h2{display:none!important}
.td-wyg>div{display:flex!important;flex-direction:column;gap:0!important;margin-top:0!important}
/* FAQ: remove the inner box border = no double border */
.td-dd [data-orientation="vertical"]{border:0!important;background:transparent!important;border-radius:0!important;margin-top:0!important}
.td-dd [data-orientation="vertical"]>[data-state]{padding-left:0!important;padding-right:0!important}