/* Texperts Classic: custom rules that sit beside the compiled Tailwind utilities */

/* Dark mode: every "surface"/"text"/"border-subtle" Tailwind colour below is really this CSS
   variable, so switching the value here (by adding .dark to <html>, see main.js) reskins the
   whole site without touching a single template. "surface-dark"/"surface-dark-card"/"border-dark"
   are deliberately NOT variables: they are the always-dark accent blocks (hero, footer, tiles)
   used on the light theme today, and they already look right once every page around them is dark. */
:root{
--tx-surface:245 243 250;--tx-surface-card:255 255 255;--tx-surface-container-low:240 236 244;
--tx-surface-container-lowest:250 249 252;--tx-surface-container-high:234 231 238;
--tx-border-subtle:228 225 238;--tx-text-primary:11 11 16;--tx-text-muted:104 102 122;
}
html.dark{
--tx-surface:11 11 16;--tx-surface-card:20 20 30;--tx-surface-container-low:29 27 41;
--tx-surface-container-lowest:18 17 24;--tx-surface-container-high:42 40 57;
--tx-border-subtle:43 40 61;--tx-text-primary:237 235 245;--tx-text-muted:156 153 179;
}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}::-webkit-scrollbar{display:none;}
/* Safety net: a long unbroken word (an email, a tracking number) inside a flex row can otherwise force
   that row, and the whole page with it, wider than the screen on mobile. Nothing here stops an element's
   OWN intentional horizontal scroll (the brand marquee, a scrollable tab row), only the page itself. */
main,.woocommerce-MyAccount-content,address,.tx-legal{overflow-wrap:break-word;}
.tx-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.tx-card:hover,.tx-card:focus-within{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(11,11,16,.4);border-color:rgb(var(--tx-text-primary));}
.tx-img{transition:transform .3s ease;}
.tx-hl{background-image:linear-gradient(transparent 58%,#C8F542 58%);}
.ico-accent{stroke-dasharray:32;stroke-dashoffset:0;}
@keyframes tx-draw{from{stroke-dashoffset:32;}to{stroke-dashoffset:0;}}
.tx-card:hover .ico-accent{animation:tx-draw .55s ease-out;}
.tx-cart-btn:hover,.tx-cart-btn:focus-visible{background-color:#C8F542;color:#0B0B10;}
.tx-cart-btn:hover .material-symbols-outlined,.tx-cart-btn:focus-visible .material-symbols-outlined{color:#0B0B10;}
.tx-card:hover .tx-img{transform:scale(1.05);}
.tx-sep{position:relative;border-top:1.5px dashed #D8D3E8;}
.tx-sep::before,.tx-sep::after{content:"";position:absolute;top:-8px;width:14px;height:14px;border-radius:50%;background:var(--tx-bg,rgb(var(--tx-surface)));border:1px solid rgb(var(--tx-border-subtle));}
.tx-sep::before{left:-7px;}.tx-sep::after{right:-7px;}
.tx-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.tx-marquee-track{display:flex;width:max-content;animation:tx-marquee 55s linear infinite;}
.tx-marquee-list{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem;margin:0;list-style:none;}
.tx-marquee:hover .tx-marquee-track,.tx-marquee[data-paused] .tx-marquee-track{animation-play-state:paused;}
@keyframes tx-marquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.tx-marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;}.tx-marquee-list[aria-hidden]{display:none;}.tx-marquee-list{flex-wrap:wrap;justify-content:center;padding-right:0;}.tx-card,.tx-img{transition:none;}.tx-card:hover{transform:none;}}
.tx-media{background:linear-gradient(160deg,#F7F5FC,#ECE8F6);}
.dark .tx-media{background:linear-gradient(160deg,#1D1B29,#16151E);}
.material-symbols-outlined{width:1em;height:1em;overflow:hidden;position:relative;top:-1px;flex-shrink:0;}
/* An icon absolutely positioned inside a search input (header search, FAQ search) needs to win
   over the base rule above: same specificity, but the base rule loads later in the cascade (this
   stylesheet depends on tailwind.css), so its position/top silently beat the .absolute utility
   and the icon collapsed onto its own line instead of overlaying the input. */
.material-symbols-outlined.absolute{position:absolute;top:50%;}

/* Native <select> boxes (Sort, Province, ...): drop the OS default arrow and box styling so the closed
   control matches the rest of the design. The open options list is drawn by the browser itself and
   cannot be fully restyled with CSS in every browser; this styles what the platform allows (background
   and text colour of each option), which is the most consistent look CSS can guarantee everywhere. */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right .65rem center;background-size:16px;padding-right:2.25rem!important;}
.dark select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEBF5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");}
select option{background:rgb(var(--tx-surface-card));color:rgb(var(--tx-text-primary));font-family:inherit;}
select::-ms-expand{display:none;}
.tx-js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms);}
.tx-js [data-reveal].is-in{opacity:1;transform:none;}
@keyframes tx-rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
.tx-rise{animation:tx-rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms);}
.tx-seg{transform-origin:left center;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease;transition-delay:calc(var(--i,0)*45ms);}
.tx-js [data-product-card]:not(.is-in) .tx-seg{transform:scaleX(.15);opacity:0;}
@keyframes tx-bump{0%{transform:scale(1);}40%{transform:scale(1.55);}100%{transform:scale(1);}}
.tx-bump{animation:tx-bump .45s ease;}
@keyframes tx-pop{0%{transform:scale(1);}40%{transform:scale(1.06);}100%{transform:scale(1);}}
.tx-added{background-color:#C8F542!important;color:#0B0B10!important;animation:tx-pop .4s ease;}
.tx-added .material-symbols-outlined{color:#0B0B10!important;}
@media (prefers-reduced-motion:reduce){.tx-js [data-reveal]{opacity:1;transform:none;transition:none;}.tx-rise{animation:none;}.tx-seg{transition:none;}.tx-js [data-product-card]:not(.is-in) .tx-seg{transform:none;opacity:1;}.tx-bump,.tx-added{animation:none;}.animate-pulse{animation:none;}.tx-card:hover .ico-accent{animation:none;}}
.cursor-node{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cline x1='2' y1='10' x2='7' y2='10' stroke='%23FFFFFF' stroke-width='5'/%3E%3Ccircle cx='12' cy='10' r='5' fill='none' stroke='%23FFFFFF' stroke-width='5'/%3E%3Cline x1='2' y1='10' x2='7' y2='10' stroke='%230B0B10' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='5' fill='none' stroke='%230B0B10' stroke-width='2'/%3E%3C/svg%3E") 12 10, pointer;}

/* ---- WordPress / WooCommerce glue ---- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.woocommerce-checkout .form-row{display:flex;flex-direction:column;gap:.375rem;margin:0;}
.woocommerce-checkout .form-row-wide{grid-column:1/-1;}
.woocommerce-checkout .form-row label .required{color:#dc2626;text-decoration:none;}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,.woocommerce-checkout .form-row.woocommerce-invalid select{border-color:#dc2626;}
.woocommerce-checkout .form-row .optional{display:none;}
.woocommerce-checkout .select2-container{width:100%!important;}
.woocommerce-checkout .select2-container--default .select2-selection--single{height:2.65rem;border:1px solid rgb(var(--tx-border-subtle));border-radius:.375rem;background:rgb(var(--tx-surface-card));display:flex;align-items:center;}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{font-size:.875rem;line-height:1.25rem;padding-left:.75rem;color:rgb(var(--tx-text-primary));}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;}
.select2-dropdown{background:rgb(var(--tx-surface-card));border-color:rgb(var(--tx-border-subtle));}
.select2-container--default .select2-results__option{color:rgb(var(--tx-text-primary));}
.blockUI.blockOverlay{background:rgba(245,243,250,.7)!important;}
.dark .blockUI.blockOverlay{background:rgba(11,11,16,.7)!important;}
.tx-legal a{color:#532CD8;font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.tx-legal a:hover{text-decoration:none;}
.tx-legal p{margin:0;}
.tx-legal ul{list-style:disc;padding-left:1.25rem;display:flex;flex-direction:column;gap:.375rem;}
.tx-legal h3{font-weight:700;margin-top:.5rem;}
.tx-added{background-color:#C8F542!important;color:#0B0B10!important;}
.admin-bar header.sticky{top:32px;}
@media (max-width:782px){.admin-bar header.sticky{top:46px;}}

/* My account: WooCommerce's own forms (details, addresses, order view) in the site style */
.tx-account .woocommerce-MyAccount-content h2,.tx-account .woocommerce-MyAccount-content h3{font-family:inherit;font-weight:700;font-size:1.25rem;margin:0 0 1rem}
.tx-account .woocommerce-MyAccount-content form,.tx-account .woocommerce-Addresses,.tx-account .woocommerce-order-details,.tx-account .woocommerce-customer-details{background:rgb(var(--tx-surface-card));border:1px solid rgb(var(--tx-border-subtle));border-radius:16px;padding:24px;margin-bottom:20px}
.tx-account .woocommerce-MyAccount-content form .form-row{margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.tx-account .woocommerce-MyAccount-content label{font-size:12px;font-weight:600;color:rgb(var(--tx-text-muted))}
.tx-account .woocommerce-MyAccount-content input.input-text,.tx-account .woocommerce-MyAccount-content select,.tx-account .woocommerce-MyAccount-content textarea{border:1px solid rgb(var(--tx-border-subtle));border-radius:6px;padding:10px 12px;font-size:14px;width:100%;background:rgb(var(--tx-surface-card));color:rgb(var(--tx-text-primary))}
.tx-account .woocommerce-MyAccount-content input:focus-visible,.tx-account .woocommerce-MyAccount-content select:focus-visible{outline:2px solid #532CD8;outline-offset:1px}
.tx-account .woocommerce-MyAccount-content button.button,.tx-account .woocommerce-MyAccount-content a.button{background:#0B0B10;color:#C8F542;border-radius:999px;padding:11px 22px;font-weight:700;font-size:13px;border:0;cursor:pointer}
.tx-account .woocommerce-MyAccount-content button.button:hover,.tx-account .woocommerce-MyAccount-content a.button:hover{background:#C8F542;color:#0B0B10}
.tx-account .woocommerce-MyAccount-content fieldset{border:1px solid rgb(var(--tx-border-subtle));border-radius:12px;padding:16px;margin:20px 0}
.tx-account .woocommerce-MyAccount-content legend{font-weight:700;padding:0 8px}
.tx-account .woocommerce-MyAccount-content table{width:100%;font-size:14px;border-collapse:collapse}
.tx-account .woocommerce-MyAccount-content th,.tx-account .woocommerce-MyAccount-content td{padding:10px 8px;border-bottom:1px solid rgb(var(--tx-border-subtle));text-align:left}
.tx-account .woocommerce-Address-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tx-account .woocommerce-Address-title h3{margin:0}
.tx-account .woocommerce-Address-title a{color:#532CD8;font-weight:700;font-size:13px}
.tx-account .u-columns.woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.tx-account address{font-style:normal;line-height:1.7;font-size:14px}

/* WooCommerce notices (login errors, "confirm your email" prompts, etc.) sometimes embed an action
   link ahead of the sentence explaining it. Left as WC's default a.button it becomes a big pill that
   crashes into the text; render it as a small bold link on its own line instead, everywhere a notice
   can appear (cart, checkout, login, account). */
[role="status"] a.button,[role="alert"] a.button,.tx-account [role="status"] a.button,.tx-account [role="alert"] a.button{display:block;width:fit-content;background:transparent;color:inherit;padding:0;border:0;border-radius:0;font-weight:700;font-size:inherit;text-decoration:underline;text-underline-offset:2px;margin-bottom:4px}
[role="status"] a.button:hover,[role="alert"] a.button:hover,.tx-account [role="status"] a.button:hover,.tx-account [role="alert"] a.button:hover{background:transparent;color:inherit;opacity:.7}

/* Product description on the product page: intro paragraph first, then headed feature lists. */
.tx-prose{font-size:.875rem;line-height:1.65;color:rgb(var(--tx-text-muted));}
.tx-prose>*+*{margin-top:.75rem;}
.tx-prose p{margin:0;}
.tx-prose .tx-lead{font-size:.9375rem;color:rgb(var(--tx-text-primary));}
.tx-prose strong{font-weight:600;color:rgb(var(--tx-text-primary));}
.tx-prose h3,.tx-prose h4{margin:1.5rem 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid rgb(var(--tx-border-subtle));font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--tx-text-primary));}
.tx-prose>h3:first-child,.tx-prose>h4:first-child{margin-top:0;}
.tx-prose ul{margin:.5rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem;}
.tx-prose li{position:relative;padding-left:1.15rem;}
.tx-prose li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.4rem;height:.4rem;border-radius:9999px;background:#c8f542;box-shadow:0 0 0 1px rgb(var(--tx-text-primary) / .35);}
.tx-prose li>ul{margin-top:.4rem;}

/* Brand strip: dark logos (Apple, Yesido, ...) would vanish on the dark theme, so each sits on a light chip there. */
.dark .tx-marquee img{background:#fff;border-radius:.75rem;padding:.35rem .9rem;}