/* ============================================================
   Ortodio — site stylesheet (dark premium palette)
   Ink #0C1017 · Surface #141B24 · Hairline #273140
   Primary #3D6FD6 · Accent #6E9BF0 · Champagne #C6A971
   Text #EAEFF7 / #AAB6C8 / #6E7B8F
   ============================================================ */

.single-product .summary .price ins .woocommerce-Price-amount,
.single-product .summary > .price .woocommerce-Price-amount{ color:#EAEFF7; }
.single-product .summary .price del .woocommerce-Price-amount{ color:#6E7B8F; }

.sale-item.product-label{
  background:#C6A971 !important; color:#2A2010 !important; font-weight:700 !important;
}
.single-product .entry-summary .onsale{ display:none !important; }
.single-product .woocommerce-product-gallery .rb-sale-badge{
  position:absolute; top:28px; left:28px; z-index:6;
  background:#C6A971; color:#2A2010; font-weight:700; font-size:12px;
  letter-spacing:.4px; padding:5px 12px; border-radius:7px; line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
@media(max-width:768px){ .single-product .woocommerce-product-gallery .rb-sale-badge{ top:22px; left:22px; } }

.woocommerce-message,
body.single-product .woocommerce-message .message-inner{
  background-color:#141B24 !important; color:#EAEFF7 !important;
}
.woocommerce-message::before{ color:#EAEFF7 !important; }
.woocommerce-message a,
.woocommerce-message .button,
.woocommerce-message a.wc-forward,
.woocommerce-info a, .woocommerce-info .button{
  color:#EAEFF7 !important; opacity:1 !important; background:transparent !important;
}
.woocommerce-message a:hover,
.woocommerce-message .button:hover,
.woocommerce-message a.wc-forward:hover{ color:#6E9BF0 !important; }

.single-product div.product .summary.entry-summary{
  background:#141B24; border:2px dashed rgba(61,111,214,.42); border-radius:18px; padding:24px;
  box-shadow:0 12px 34px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30);
}
.single-product div.product .woocommerce-product-gallery{
  background:#141B24; border:2px dashed rgba(61,111,214,.42); border-radius:18px; padding:16px; position:relative;
  box-shadow:0 12px 34px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30);
}
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a{
  border-radius:14px !important;
}
/* Tablet fix: keep the gallery window (.flex-viewport) square. flexslider gets
   stuck with a height taller than the square photo and the thumbnail pill drops below it.
   aspect-ratio + height:auto with !important override any inline flexslider height
   at any width. (Leave __wrapper alone — it is the wide slide track.) */
.single-product .woocommerce-product-gallery .flex-viewport{
  aspect-ratio:1 / 1 !important; height:auto !important;
}
/* CLS fix WITHOUT a flash. Reserve the gallery's square space (so the deferred flexslider
   re-build does not shift the summary), but do NOT force opacity. WooCommerce keeps the gallery
   opacity:0 until flexslider finishes, so the whole re-build happens invisibly and the gallery
   simply fades in to its final state -> no layout shift AND no flash. Gallery scripts stay
   deferred, so page speed is unaffected. (overflow:hidden stays on always = extra safety.) */
.single-product .woocommerce-product-gallery__wrapper:not(.flexslider){ aspect-ratio:1 / 1; overflow:hidden; }
.single-product .woocommerce-product-gallery__wrapper:not(.flexslider) .woocommerce-product-gallery__image:not(:first-child){ display:none; }
.single-product .woocommerce-product-gallery__image{ aspect-ratio:1 / 1 !important; overflow:hidden; }
.single-product .woocommerce-product-gallery__image a{ display:block !important; height:100% !important; }
.single-product .woocommerce-product-gallery__image img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  display:block; border-radius:14px !important;
}
@media(max-width:768px){
  .single-product div.product .summary.entry-summary{ padding:16px; border-radius:14px; }
  .single-product div.product .woocommerce-product-gallery{ padding:12px; border-radius:14px; }
}

.woocommerce-product-gallery .flex-direction-nav{ display:none !important; }

a.reset_variations{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; letter-spacing:.2px;
  color:#AAB6C8 !important; text-decoration:none !important;
  background:#1C2431; border:1px solid #273140; border-radius:999px;
  padding:4px 13px; margin-top:6px; line-height:1.5;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
a.reset_variations::before{ content:"\00d7"; font-size:14px; line-height:1; margin-top:-1px; }
a.reset_variations:hover{ color:#fff !important; background:#3D6FD6; border-color:#3D6FD6; }

/* Variation Swatches hides Clear with visibility:hidden, which still reserves
   ~47px and leaves a gap until a colour/size is chosen. Collapse it for real;
   on selection the style becomes visibility:visible and Clear shows again. */
.single-product a.reset_variations[style*="hidden"]{ display:none !important; }

.pswp__bg{
  background:rgba(8,11,16,0.55) !important;
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
}

.single-product .woocommerce-product-gallery .flex-control-thumbs{
  position:absolute !important; left:50% !important; bottom:36px !important;
  transform:translateX(-50%) !important;
  width:auto !important; max-width:calc(100% - 40px) !important;
  display:flex !important; flex-wrap:nowrap !important; gap:7px !important;
  justify-content:center !important; align-items:center !important;
  margin:0 !important; padding:7px !important; list-style:none !important;
  background:rgba(20,27,36,0.60) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,0.12) !important;
  border-radius:16px !important; box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
  overflow-x:auto !important; z-index:5 !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li{
  box-sizing:border-box !important; flex:0 0 42px !important; width:42px !important; height:42px !important;
  margin:0 !important; padding:0 !important; list-style:none !important;
  overflow:hidden !important; border-radius:9px !important; border:2px solid transparent !important; cursor:pointer;
  transition:border-color .15s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img{
  box-sizing:border-box !important; width:100% !important; height:100% !important; object-fit:cover !important;
  display:block !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; opacity:.7 !important; transition:opacity .15s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active){
  border-color:#6E9BF0 !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li:hover img{ opacity:1 !important; }

@media(max-width:768px){
  .single-product .woocommerce-product-gallery .flex-control-thumbs{ bottom:30px !important; gap:5px !important; }
  .single-product .woocommerce-product-gallery .flex-control-thumbs li{ flex:0 0 34px !important; width:34px !important; height:34px !important; }
}


/* ============================================================
   HOMEPAGE — banner, product grid, See more, trust bar
   ============================================================ */

/* Coupon code pill (background/text of the strip itself is set natively in
   Customize > Colors > Below Header). Only the pill around the code lives here. */
.header-widget-region .rb-coupon__code{
  display:inline-block; background:#3D6FD6; color:#fff; font-weight:700;
  letter-spacing:.6px; padding:2px 9px; border-radius:6px; margin-left:3px;
}

/* Hero banner (class rb-hero) */
.home .rb-hero{ margin:0 0 8px; }
.home .rb-hero img{
  display:block; width:100%; height:auto; border-radius:0;
  box-shadow:0 28px 30px -22px rgba(0,0,0,.60);
  transition:box-shadow .35s ease;
}
.home .rb-hero a:hover img{ box-shadow:0 34px 36px -22px rgba(0,0,0,.70); }

/* Section heading (class rb-home-heading) */
.home .rb-home-heading{
  text-align:center; font-weight:800; color:#EAEFF7; letter-spacing:-.01em;
  margin:46px 0 6px;
}
.home .rb-home-sub{ text-align:center; color:#AAB6C8; margin:0 0 30px; font-size:15px; }

/* Product grid (shortcode [products class="rb-home-grid"]) */
.rb-home-grid.products li.product{
  background:#141B24; border:1px solid #273140; border-radius:16px; padding:14px 14px 18px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rb-home-grid.products li.product:hover{
  transform:translateY(-5px); border-color:#33507F;
  box-shadow:0 16px 38px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.30);
}
.rb-home-grid.products li.product img{ border-radius:11px; }
.rb-home-grid.products li.product .price{ color:#EAEFF7; font-weight:700; }
.rb-home-grid.products li.product .price del .woocommerce-Price-amount{ color:#6E7B8F; font-weight:400; }
.rb-home-grid.products li.product .button,
.rb-home-grid.products li.product .added_to_cart{
  background:#3D6FD6; color:#fff; font-weight:700; border-radius:10px;
}
.rb-home-grid.products li.product .button:hover{ background:#345FCB; color:#fff; }

/* "See more" button (class rb-seemore) */
.home .rb-seemore{ text-align:center; margin:34px 0 8px; }
.home .rb-seemore .wp-block-button__link,
a.rb-seemore-link{
  display:inline-block; background:#1C2431; color:#EAEFF7 !important; font-weight:700;
  letter-spacing:.3px; padding:15px 40px; border-radius:999px; text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.home .rb-seemore .wp-block-button__link:hover,
a.rb-seemore-link:hover{ background:#3D6FD6; color:#fff !important; transform:translateY(-2px); }

/* Pre-footer trust bar (single Custom HTML widget in Below Content). */
.below-content{ padding-top:10px; }
.rb-trust{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:16px;
  background:transparent; padding:14px 20px 4px; margin:0;
}
.rb-trust__item{
  flex:1 1 175px; max-width:212px; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:13px; padding:4px 8px;
}
/* Icon in a round badge. position:static puts it back in flow —
   the theme sets svg{position:absolute}, which would stack all icons on one spot. */
.rb-trust .rb-trust__item svg{
  position:static; box-sizing:content-box; width:23px; height:23px; padding:14px; flex:none;
  color:#6E9BF0; background:#141B24; border:1px solid #273140; border-radius:50%;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.rb-trust__item strong{ color:#EAEFF7; font-size:14.5px; font-weight:700; line-height:1.3; }
.rb-trust__item span{ color:#AAB6C8; font-size:12.5px; line-height:1.4; }
@media(max-width:782px){
  .rb-trust{ gap:10px; padding:12px 14px 4px; }
  .rb-trust__item{ flex:1 1 42%; max-width:none; }
}


/* ============================================================
   FOOTER — link columns + contact (native Footer widget area)
   Heading/link colours come from the theme (Customize > Colors > Footer). CSS = polish only.
   ============================================================ */
.site-footer .rb-flinks{ list-style:none; margin:0; padding:0; }
.site-footer .rb-flinks li{ margin:0 0 11px; }
.site-footer .rb-flinks a{ display:inline-block; transition:color .15s ease, padding-left .15s ease; }
.site-footer .rb-flinks a:hover{ padding-left:4px; }

/* Contact column */
.site-footer .rb-fcontact__tag{ font-size:13.5px; line-height:1.55; color:#AAB6C8; margin:0 0 16px; max-width:235px; }
.site-footer .rb-fcontact__email{
  display:inline-flex; align-items:center; gap:9px; font-weight:600; color:#EAEFF7;
  background:rgba(61,111,214,.12); border:1px solid rgba(61,111,214,.35);
  padding:9px 14px; border-radius:10px; transition:background .15s ease, border-color .15s ease;
}
.site-footer .rb-fcontact__email svg{ color:#6E9BF0; flex:none; }
.site-footer .rb-fcontact__email:hover{ background:rgba(61,111,214,.20); border-color:#6E9BF0; color:#EAEFF7; }


/* ============================================================
   CATEGORY / ARCHIVE
   ============================================================ */
/* Hide the category/tag H1 — the name is already in the breadcrumb. The theme prints the
   title via a custom archive template and ignores the woocommerce_show_page_title filter,
   and there is no native toggle, so one targeted rule. The Shop page keeps its title. */
.tax-product_cat .woocommerce-products-header__title,
.tax-product_tag .woocommerce-products-header__title{ display:none; }


/* ============================================================
   PRODUCT DESCRIPTION — alternating image/text "herringbone" layout
   Markup: .ortodio-container > .ortodio-header
           + .ortodio-row(.reverse) > .ortodio-col(img) + .ortodio-col(text)
   Everything is scoped under .ortodio-container so it wins over the theme's
   content styles by specificity (no !important needed).
   ============================================================ */
.ortodio-container{ max-width:1120px; margin:8px auto 0; color:#AAB6C8; }

/* Intro block */
.ortodio-container .ortodio-header{ max-width:760px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
.ortodio-container .ortodio-title{
  margin:0 0 16px; font-size:clamp(26px,3.4vw,40px); font-weight:800;
  line-height:1.15; letter-spacing:-.02em; color:#EAEFF7;
}
.ortodio-container .ortodio-header p{
  margin:0; font-size:clamp(15px,1.5vw,17px); line-height:1.7; color:#AAB6C8;
}

/* Alternating two-column rows */
.ortodio-container .ortodio-row{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(28px,4vw,60px); margin:0 0 clamp(40px,5vw,72px);
}
.ortodio-container .ortodio-row:last-child{ margin-bottom:0; }
/* wpautop injects an empty <p></p> into each row; hide any non-column child so it does
   not take a grid cell (which would otherwise push the reverse row into a broken stack). */
.ortodio-container .ortodio-row > :not(.ortodio-col){ display:none; }
/* Zigzag: on reverse rows the image (first child) moves to the right column */
.ortodio-container .ortodio-row.reverse .ortodio-col:first-child{ order:2; }

/* Image */
.ortodio-container .ortodio-img{
  display:block; width:100%; height:auto; margin:0; border-radius:20px; border:1px solid #273140;
  box-shadow:0 18px 44px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.30);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ortodio-container .ortodio-img:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 54px rgba(0,0,0,.55), 0 5px 14px rgba(0,0,0,.35);
}

/* Text column */
.ortodio-container .ortodio-h3{
  position:relative; padding-top:18px; margin:0 0 14px;
  font-size:clamp(20px,2.2vw,27px); font-weight:800; line-height:1.25;
  letter-spacing:-.01em; color:#EAEFF7;
}
.ortodio-container .ortodio-h3::before{
  content:""; position:absolute; top:0; left:0; width:46px; height:4px;
  border-radius:3px; background:#C6A971;
}
.ortodio-container .ortodio-col p{ margin:0 0 14px; font-size:16px; line-height:1.75; color:#AAB6C8; }
.ortodio-container .ortodio-col p:last-child{ margin-bottom:0; }
.ortodio-container .ortodio-col strong{ color:#EAEFF7; font-weight:700; }

/* Highlight callout */
.ortodio-container .ortodio-highlight{
  margin-top:18px; padding:15px 18px; border-radius:14px; font-size:15px; line-height:1.65; color:#AAB6C8;
  background:#141B24; border:1px solid #273140; border-left:4px solid #3D6FD6;
}
.ortodio-container .ortodio-highlight strong{ color:#C6A971; }

/* Tablet / mobile: stack to one column, image always first, capped + centered */
@media(max-width:860px){
  .ortodio-container .ortodio-row{ grid-template-columns:1fr; gap:20px; }
  .ortodio-container .ortodio-row.reverse .ortodio-col:first-child{ order:0; }
  .ortodio-container .ortodio-img{ max-width:520px; margin:0 auto; }
}
@media(max-width:600px){
  .ortodio-container .ortodio-img{ border-radius:16px; }
  .ortodio-container .ortodio-col p{ font-size:15px; }
  .ortodio-container .ortodio-h3::before{ width:38px; }
}


/* ============================================================
   DARK BASE — only what Shoptimizer has NO native control for.
   Body text, paragraphs and headings (H1-H5) are set NATIVELY in
   Customize > Typography > Font Color (product titles are H2, so they are
   covered there too). The rules below fill the remaining gaps that have no
   Customizer slot: the product search field and form inputs, two link groups
   the theme hard-codes dark (breadcrumb, My Account menu), and table/notice
   surfaces. !important is deliberate here (theme rules are plain, so it wins).
   ============================================================ */

/* Header product search + all form controls (dark surface, light text) */
.woocommerce-product-search .search-field, input.search-field,
.woocommerce form .input-text,
input[type="text"]:not(.adminbar-input), input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="url"],
input[type="search"]:not(.adminbar-input), textarea, select{
  background:#141B24 !important; color:#EAEFF7 !important; border:1px solid #273140 !important;
}
::placeholder{ color:#6E7B8F !important; }
input:focus, textarea:focus, select:focus{ border-color:#3D6FD6 !important; outline:none; }

/* Breadcrumb — no native slot for font/size. Chakra Petch (enqueued in functions.php)
   echoes the logo's techno-geometric feel but stays legible small. */
.woocommerce-breadcrumb{ color:#AAB6C8 !important; font-family:"Chakra Petch", sans-serif; font-size:10px; letter-spacing:.02em; }
.woocommerce-breadcrumb a{ color:#6E9BF0 !important; font-family:"Chakra Petch", sans-serif; font-size:10px; }

/* My Account navigation (theme hard-codes #555 — no native slot) */
.woocommerce-MyAccount-navigation li{ border-color:#273140 !important; }
.woocommerce-MyAccount-navigation a{ color:#AAB6C8 !important; }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover{ color:#EAEFF7 !important; }

/* Tables (cart, orders, account) — no native slot */
.woocommerce table.shop_table{ border-color:#273140 !important; }
.woocommerce table.shop_table th{ color:#EAEFF7 !important; }
.woocommerce table.shop_table td, .woocommerce table.shop_table tr{ color:#AAB6C8 !important; border-color:#273140 !important; }

/* Info / error notices — no native slot */
.woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  background-color:#141B24 !important; color:#EAEFF7 !important; border-top-color:#3D6FD6 !important;
}
.woocommerce-info a, .woocommerce-error a{ color:#6E9BF0 !important; }


/* ============================================================
   HOMEPAGE (Ortodio) — hero + popular categories + trust
   Content block lives in a classic page (see ortodio-homepage-setup.md),
   template "Full width (no heading)". Scoped under .home so nothing leaks.
   ============================================================ */
.home .ort-hero{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,4vw,56px);
  align-items:center; margin:clamp(20px,4vw,44px) 0 clamp(44px,6vw,76px);
}
.home .ort-eyebrow{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#6E9BF0; border-bottom:1px solid #C6A971; padding-bottom:5px; margin-bottom:16px;
}
.home .ort-hero__title{
  font-size:clamp(26px,3.3vw,42px); font-weight:800; line-height:1.1; letter-spacing:-.02em;
  color:#EAEFF7; margin:0 0 14px;
}
.home .ort-hero__sub{ font-size:clamp(15px,1.6vw,18px); line-height:1.6; color:#AAB6C8; margin:0 0 24px; max-width:440px; }
.home .ort-btn{
  display:inline-flex; align-items:center; gap:9px; background:#3D6FD6; color:#fff;
  font-weight:600; font-size:15px; padding:14px 30px; border-radius:11px; text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.home .ort-btn:hover{ background:#345FCB; transform:translateY(-2px); }
.home .ort-btn svg{ flex:none; }
.home .ort-badges{ display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; }
.home .ort-badge{ display:flex; flex-direction:column; }
.home .ort-badge svg{ color:#6E9BF0; margin-bottom:7px; }
.home .ort-badge strong{ color:#EAEFF7; font-size:13.5px; font-weight:700; line-height:1.3; }
.home .ort-badge span{ color:#8794A6; font-size:12px; }

/* Clean premium photo: no frame — just soft rounding and a layered ambient shadow. */
.home .ort-hero__media{ margin:0; }
.home .ort-hero__media img{
  display:block; width:100%; height:auto; border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
}
/* Placeholder shown until a real hero photo is dropped in (see setup guide) */
.home .ort-hero__media--empty{
  aspect-ratio:4 / 3; border:2px dashed rgba(61,111,214,.42); border-radius:18px; background:#141B24;
  display:flex; align-items:center; justify-content:center; color:#3A475A;
}

/* Popular categories */
.home .ort-cats{ margin:0 0 clamp(44px,6vw,76px); }
.home .ort-cats__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0 0 22px; }
.home .ort-cats__head h2{ font-size:clamp(20px,2.2vw,26px); font-weight:800; color:#EAEFF7; margin:0; }
.home .ort-cats__all{ font-size:14px; color:#6E9BF0; text-decoration:none; white-space:nowrap; }
.home .ort-cats__all:hover{ color:#9DBEF5; }
.home .ort-cats__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
/* Premium "Depth + Aurora" tile (iOS-style): gradient depth, top inner highlight,
   aurora glow behind the icon, gradient icon badge, spring hover with blue glow. */
.home .ort-cat{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:32px 16px 24px; border-radius:20px; text-decoration:none;
  background:linear-gradient(180deg, #18212E 0%, #111823 100%);
  border:1px solid #263241;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
/* champagne accent at the top edge */
.home .ort-cat::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:46px; height:3px; border-radius:0 0 3px 3px; background:#C6A971; opacity:.5; z-index:2;
  transition:width .35s ease, opacity .35s ease;
}
/* aurora glow behind the icon */
.home .ort-cat::after{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:150px; height:110px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(61,111,214,.22), transparent 70%);
  filter:blur(6px); opacity:.7; transition:opacity .35s ease;
}
.home .ort-cat__badge{
  position:relative; z-index:1;
  width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:15px;
  background:radial-gradient(circle at 50% 35%, rgba(61,111,214,.30), rgba(61,111,214,.08));
  border:1px solid rgba(110,155,240,.32); box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.home .ort-cat__badge svg{ color:#9DBEF5; transition:color .35s ease; }
.home .ort-cat__name{ position:relative; z-index:1; color:#EAEFF7; font-size:16px; font-weight:700; line-height:1.25; }
.home .ort-cat__link{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:5px; color:#6E9BF0; font-size:12.5px; margin-top:3px; }
.home .ort-cat__link svg{ transition:transform .25s ease; }
.home .ort-cat:hover{
  transform:translateY(-7px); border-color:rgba(61,111,214,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 26px 54px rgba(0,0,0,.55), 0 0 34px rgba(61,111,214,.22);
}
.home .ort-cat:hover::before{ width:74px; opacity:1; }
.home .ort-cat:hover::after{ opacity:1; }
.home .ort-cat:hover .ort-cat__badge{
  background:linear-gradient(180deg, #3D6FD6, #2E52A8); border-color:#3D6FD6;
  box-shadow:0 10px 24px rgba(61,111,214,.50); transform:translateY(-2px) scale(1.04);
}
.home .ort-cat:hover .ort-cat__badge svg{ color:#fff; }
.home .ort-cat:hover .ort-cat__link svg{ transform:translateX(3px); }

/* Trust strip (reuses the dark-styled .rb-trust block) */
.home .ort-trust-wrap{ border-top:1px solid #273140; padding-top:clamp(24px,4vw,40px); margin:0 0 clamp(20px,4vw,40px); }

@media(max-width:960px){
  .home .ort-hero{ grid-template-columns:1fr; }
  .home .ort-hero__media{ order:-1; max-width:520px; }
  .home .ort-cats__grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:600px){
  .home .ort-cats__grid{ grid-template-columns:repeat(2,1fr); }
  .home .ort-badges{ gap:16px; }
}


/* ============================================================
   SINGLE PRODUCT — only what the theme has NO native control for.
   (Product title size/font is set natively in Typography > WooCommerce >
   Single Product Title, so it is NOT here.) Theme rules are plain, so the
   higher-specificity selectors below win without !important.
   ============================================================ */

/* Tabs / description area: drop the white card so the dark page shows through */
.single-product .woocommerce-tabs.wc-tabs-wrapper{ background:transparent; box-shadow:none; }
.single-product .woocommerce-tabs ul.tabs{ border-bottom:1px solid #273140; }
.single-product .woocommerce-tabs ul.tabs li a{ color:#AAB6C8; }
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover{ color:#EAEFF7; }

/* Variation labels (Color / Size): brighter than the body colour for clarity */
.single-product .variations th.label,
.single-product .variations th.label label,
.single-product .variations td.label,
.single-product .variations label{ color:#EAEFF7; font-weight:600; }

/* Additional information tab: the theme prints the attribute labels (<th>) in #111,
   which is invisible on dark. Make labels light, values readable, borders a hairline. */
.single-product .woocommerce-product-attributes th,
.single-product table.shop_attributes th{ color:#EAEFF7; }
.single-product .woocommerce-product-attributes td,
.single-product table.shop_attributes td{ color:#AAB6C8; }
.single-product .woocommerce-product-attributes,
.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td,
.single-product table.shop_attributes th,
.single-product table.shop_attributes td{ border-color:#273140; }


/* ============================================================
   PRODUCT LOOP (shop / category / homepage) — dark fixes
   The theme prints the loop price in #111 (invisible on dark); make it light.
   ============================================================ */
.woocommerce ul.products li.product .price{ color:#EAEFF7; }
.woocommerce ul.products li.product .price del{ color:#6E7B8F; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }


/* ============================================================
   HOMEPAGE — "New arrivals" product grid (premium dark cards)
   Section markup: <section class="ort-new"> with the [products class="ort-home-grid"] shortcode.
   ============================================================ */
.home .ort-new{ margin:0 0 clamp(44px,6vw,76px); }
/* [products class="ort-home-grid"] puts the class on the WRAPPER, so target li.product
   as a descendant (not .ort-home-grid.products). Shoptimizer draws its own card via
   li.product::before (white on the light theme) — disable it and style li.product itself
   as an always-on premium dark card. */
.home .ort-home-grid li.product{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #161E2A 0%, #111823 100%);
  border:2px dashed rgba(61,111,214,.42); border-radius:16px; padding:14px 14px 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px rgba(0,0,0,.40);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.home .ort-home-grid li.product::before{ display:none; }
/* champagne accent at the top edge (premium cue, matches the category tiles) */
.home .ort-home-grid li.product::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:44px; height:3px; border-radius:0 0 3px 3px; background:#C6A971; opacity:.5; z-index:2;
}
.home .ort-home-grid li.product:hover{
  transform:translateY(-5px); border-color:rgba(61,111,214,.50);
  box-shadow:0 22px 46px rgba(0,0,0,.50), 0 0 26px rgba(61,111,214,.18);
}
.home .ort-home-grid li.product img{ border-radius:11px; }
.home .ort-home-grid li.product .woocommerce-loop-product__title,
.home .ort-home-grid li.product .woocommerce-loop-product__title a{ color:#EAEFF7; font-size:15px; }
.home .ort-home-grid li.product .product__categories,
.home .ort-home-grid li.product .product__categories a{ color:#8794A6; font-weight:500; }
/* Price is now the last element (button removed) — drop its trailing margin so the
   bottom padding alone sets the spacing and the card fits tight to its content. */
.home .ort-home-grid li.product .price{ color:#EAEFF7; margin-bottom:0; }
.home .ort-home-grid li.product .price del{ color:#6E7B8F; }
/* Remove the hover "Select options" button: the whole card already links to the
   product, so the button only adds an empty gap. Shoptimizer reserves 40px of
   padding-bottom for it (ul.products li.product:not(.product-category) @min-width:993px);
   the 4-class override below beats that (0,4,2 > 0,3,2) with no !important, collapsing
   the reserved space so the card fits its content. */
.home .ort-home-grid li.product a.button.add_to_cart_button{ display:none; }
.home .ort-home-grid ul.products li.product{ padding-bottom:16px; }