/*
 * Blinds Direct - Premium layer (theme 1.3.1)
 *
 * A calm, modern finish on top of Flatsome + style.css: Lato throughout with
 * the tight, confident headings used on the Shop by Room page, a warm ink /
 * cream palette, soft layered shadows, rounded cards and smooth, restrained
 * motion. It only changes look and feel - no layout, pricing or behaviour.
 *
 * To switch it off without touching code, add to wp-config.php:
 *   define('BLINDSDIRECT_PREMIUM_CSS', false);
 */

:root {
  --bd-ink: #2f3137;
  --bd-ink-soft: #565b64;
  --bd-muted: #7b7f87;
  --bd-brown: #3c332d;
  --bd-accent: #f9a133;
  --bd-accent-deep: #e48a12;
  --bd-cream: #fbf7f1;
  --bd-sand: #f3ece1;
  --bd-line: #ece5da;
  --bd-white: #ffffff;
  --bd-radius: 14px;
  --bd-radius-sm: 10px;
  --bd-shadow-1: 0 1px 2px rgba(47, 49, 55, .05), 0 2px 8px rgba(47, 49, 55, .05);
  --bd-shadow-2: 0 2px 4px rgba(47, 49, 55, .05), 0 12px 32px rgba(47, 49, 55, .09);
  --bd-shadow-3: 0 4px 10px rgba(47, 49, 55, .06), 0 24px 48px rgba(47, 49, 55, .13);
  --bd-ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }

body {
  color: var(--bd-ink-soft);
  font-family: Lato, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(249, 161, 51, .28); color: var(--bd-ink); }

/* ---------- Typography ---------- */
h1, h2, h3, .section-title, .woocommerce-products-header__title {
  font-family: Lato, sans-serif;
  color: var(--bd-ink);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.15;
}
h1, h2, .woocommerce-products-header__title { line-height: 1.08; }
h4, h5, h6 { font-family: Lato, sans-serif; color: var(--bd-ink); letter-spacing: -.02em; }
h1 { letter-spacing: -.05em; }
/* Body copy only: global p line-height would loosen compact UI (mini cart, tables, price rows). */
.entry-content p, .product-short-description p { color: var(--bd-ink-soft); line-height: 1.7; }

/* Small orange eyebrow label, as on Shop by Room. Use class "bd-eyebrow" on any text element. */
.bd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bd-accent-deep);
}
.bd-eyebrow::before, .bd-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bd-accent);
  opacity: .7;
}

/* Section titles with a refined underline accent */
.section-title-container .section-title b { background-color: var(--bd-line); height: 1px; opacity: 1; }
.section-title-normal span { border-bottom: 2px solid var(--bd-accent); margin-bottom: -2px; }

/* ---------- Links ---------- */
a { transition: color .2s var(--bd-ease), opacity .2s var(--bd-ease); }
.entry-content a:not(.button):not(.btn) { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Buttons ---------- */
.button, .btn, button, input[type="submit"] {
  transition: background-color .25s var(--bd-ease), color .25s var(--bd-ease),
    box-shadow .25s var(--bd-ease), transform .25s var(--bd-ease), border-color .25s var(--bd-ease);
}
.btn-primary, .button.primary, .single_add_to_cart_button, .checkout-button, #place_order {
  border-radius: 999px !important;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(249, 161, 51, .32);
}
.btn-primary:hover, .button.primary:hover, .single_add_to_cart_button:hover,
.checkout-button:hover, #place_order:hover {
  background: var(--bd-accent-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(228, 138, 18, .36);
}
.btn-primary:active, .single_add_to_cart_button:active, .checkout-button:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(228, 138, 18, .3); }
.btn-secondary { border-radius: 999px !important; }
.btn-secondary:hover { background: var(--bd-ink) !important; transform: translateY(-1px); }
.button:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--bd-accent);
  outline-offset: 3px;
}

/* ---------- Forms ---------- */
input[type=email], input[type=search], input[type=number], input[type=url], input[type=tel],
input[type=text], input[type=password], textarea, select {
  border-radius: var(--bd-radius-sm);
  border: 1px solid #ddd5c8;
  background-color: #fff;
  box-shadow: none;
  transition: border-color .2s var(--bd-ease), box-shadow .2s var(--bd-ease);
}
input[type=email]:focus, input[type=search]:focus, input[type=number]:focus, input[type=url]:focus,
input[type=tel]:focus, input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
  border-color: var(--bd-accent);
  box-shadow: 0 0 0 4px rgba(249, 161, 51, .16);
  outline: none;
}

/* ---------- Header ---------- */
#masthead, .header-main { transition: box-shadow .3s var(--bd-ease), background-color .3s var(--bd-ease); }
.header-wrapper.stuck #masthead,
.header-wrapper.stuck .header-main { box-shadow: 0 6px 24px rgba(47, 49, 55, .09); }
.header-bottom { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05); }

/* Main menu: animated underline */
.header-nav:not(.nav-vertical):not(.nav-dropdown) > li > a { position: relative; font-weight: 700; transition: color .2s var(--bd-ease); }
.header-bottom .header-nav:not(.nav-vertical):not(.nav-dropdown) > li > a::after,
#masthead .header-nav-main:not(.nav-vertical):not(.nav-dropdown) > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .3s var(--bd-ease);
}
.header-bottom .header-nav:not(.nav-vertical):not(.nav-dropdown) > li:hover > a::after,
.header-bottom .header-nav:not(.nav-vertical):not(.nav-dropdown) > li.active > a::after,
.header-bottom .header-nav:not(.nav-vertical):not(.nav-dropdown) > li.current-menu-item > a::after { width: 60%; }

/* Dropdowns */
.nav-dropdown {
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  box-shadow: var(--bd-shadow-2);
}
.nav-dropdown > li > a, .nav-dropdown li a { transition: color .2s var(--bd-ease); }


/* ---------- Product & category cards ---------- */
.product-small.box, .product-category.box, .box-vertical, .box-bounce, .box-shade { transition: transform .35s var(--bd-ease), box-shadow .35s var(--bd-ease); }
.product-small .box-image, .product-category .box-image, .product-small .image-fade_in_back {
  border-radius: var(--bd-radius);
  overflow: hidden;
}
.product-small .box-image img, .product-category .box-image img {
  transition: transform .8s var(--bd-ease), opacity .4s var(--bd-ease);
}
.product-small:hover .box-image img:first-child, .product-category:hover .box-image img { transform: scale(1.045); }
.product-small .box-text { padding-top: 14px; }
.product-small .name, .woocommerce-loop-product__title {
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.2;
  color: var(--bd-ink);
}
.product-small .name a:hover, .woocommerce-loop-product__title a:hover { color: var(--bd-accent-deep); }
.product-small .price, .price-wrapper .price { color: var(--bd-ink); font-weight: 700; letter-spacing: -.01em; }
.price del, .price del .amount { color: var(--bd-muted); font-weight: 400; }
.price ins { text-decoration: none; color: var(--bd-ink); }
.badge-container .badge-inner { font-weight: 700; letter-spacing: .02em; }
.on-sale .badge-inner { background: var(--bd-accent); }

/* Grid boxes already framed in style.css: softer, premium finish */
.bd-grid-box-frame > .col-inner {
  border: 1px solid var(--bd-line) !important;
  border-radius: var(--bd-radius) !important;
  box-shadow: var(--bd-shadow-1);
  transition: box-shadow .35s var(--bd-ease), border-color .35s var(--bd-ease);
}
.bd-grid-box-frame > .col-inner:hover {
  box-shadow: var(--bd-shadow-2);
  border-color: #e3d9c8 !important;
}
/* The category menu column must never form its own stacking layer or sit under the banner beside it,
   or its pop-out panel is painted behind the banner. */
.bd-shop-nav { z-index: 20; }
.bd-shop-nav > .col-inner, .bd-shop-nav > .col-inner:hover { transform: none !important; transition: box-shadow .35s var(--bd-ease); }

/* ---------- Single product ---------- */
.single-product .product-main .product-title { letter-spacing: -.045em; line-height: 1.06; }
.single-product .product-images .woocommerce-product-gallery__wrapper,
.single-product .product-gallery-slider { border-radius: var(--bd-radius); overflow: hidden; }
.single-product .product-thumbnails .col a,
.single-product .product-thumbnails img { border-radius: var(--bd-radius-sm); transition: opacity .25s var(--bd-ease), box-shadow .25s var(--bd-ease); }
.single-product .product-thumbnails .is-nav-selected a img,
.single-product .product-thumbnails .col:hover a img { box-shadow: 0 0 0 2px var(--bd-accent); opacity: 1; }
.single-product .price-wrapper .price,
.single-product p.price { font-size: 1.5em; letter-spacing: -.02em; }
.product-info .is-divider { background-color: var(--bd-accent); max-width: 44px; height: 3px; border-radius: 3px; opacity: 1; }
.product-footer .woocommerce-tabs, .product-section { border-color: var(--bd-line); }

/* ---------- Cart & checkout ---------- */
.cart_totals, .woocommerce-checkout-review-order, .cart-collaterals .cart_totals {
  border-radius: var(--bd-radius);
}
.cart-sidebar, .is-well {
  background: var(--bd-cream);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  box-shadow: none;
}
table.shop_table { border-collapse: separate; border-spacing: 0; }
table.shop_table th { font-weight: 700; color: var(--bd-ink); letter-spacing: -.005em; }
table.shop_table td, table.shop_table th { border-color: var(--bd-line); }
.woocommerce-cart-form__cart-item td.product-name a { font-weight: 700; color: var(--bd-ink); }
.woocommerce-checkout h3, #order_review_heading { letter-spacing: -.03em; }
/* Checkout payment block: left exactly as on production (no card styling). */
/* Cart totals card: give the content room inside the cream box */
.cart-sidebar { padding: 18px 20px 20px; }
.cart-sidebar .cart_totals { margin: 0; }
.cart-sidebar .cart_totals table { margin-bottom: 14px; }
.cart-sidebar .coupon-error-notice, .cart-sidebar .woocommerce-form-coupon { margin-bottom: 0; }
@media (max-width: 549px) {
  .cart-sidebar { padding: 14px 14px 16px; }
}
.woocommerce-message, .woocommerce-info, .woocommerce-error, .message-container {
  border-radius: var(--bd-radius-sm);
}
.quantity .button.minus, .quantity .button.plus { transition: background-color .2s var(--bd-ease), color .2s var(--bd-ease); }

/* ---------- Mini cart / off-canvas ---------- */
.mfp-content .off-canvas, .off-canvas .sidebar-inner { box-shadow: var(--bd-shadow-3); }
.cart-popup-inner, .nav-dropdown .widget_shopping_cart { font-size: .95em; }

/* Item rows: name + price line up, details sit tight underneath. No layout properties
   (float / display / width) are changed, so Flatsome's own mini cart structure is untouched. */
.widget_shopping_cart .woocommerce-mini-cart-item { line-height: 1.35; }
.widget_shopping_cart .woocommerce-mini-cart-item > a:not(.remove) { font-weight: 700; color: var(--bd-ink); letter-spacing: -.01em; }
.widget_shopping_cart .woocommerce-mini-cart-item .quantity { color: var(--bd-ink-soft); font-size: .92em; }
.widget_shopping_cart .woocommerce-mini-cart-item img { border-radius: var(--bd-radius-sm); }

/* Product details (shutters and blinds list many rows): compact and evenly spaced */
.woocommerce-mini-cart dl.variation { margin: 4px 0 0; font-size: .84em; line-height: 1.4; }
.woocommerce-mini-cart dl.variation dt { margin: 0; font-weight: 700; }
.woocommerce-mini-cart dl.variation dd { margin: 0 0 2px; }
.woocommerce-mini-cart dl.variation dd p { margin: 0; }

/* Subtotal and buttons */
.woocommerce-mini-cart__total { margin: 0; padding-top: 12px; border-top: 1px solid var(--bd-line); color: var(--bd-ink); }
.woocommerce-mini-cart__buttons { margin-bottom: 0; }
.woocommerce-mini-cart__buttons .button { border-radius: 999px; font-weight: 700; letter-spacing: .02em; }
.woocommerce-mini-cart__buttons .button:last-child { margin-bottom: 0; }

/* ---------- Accordions, tabs, notices ---------- */
.accordion-item { border-color: var(--bd-line); }
.accordion-title { transition: color .2s var(--bd-ease), background-color .2s var(--bd-ease); font-weight: 700; color: var(--bd-ink); }
.accordion-title.active, .accordion-title:hover { color: var(--bd-accent-deep); }
.tabbed-content .nav-tabs > li > a, .nav-tabs > li > a { font-weight: 700; }

/* ---------- Footer ---------- */
.footer-wrapper { background: var(--bd-cream); }
.footer-1, .footer-2 { background: var(--bd-cream); }
.footer-widgets .widget-title, .footer-widgets .widgettitle { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78em; color: var(--bd-ink); }
.footer-widgets a { transition: color .2s var(--bd-ease); }
.footer-widgets li a:hover { color: var(--bd-accent-deep); }
.absolute-footer { color: var(--bd-muted); }

/* ---------- Images & media ---------- */
.entry-content img:not(.product-swatches img):not(.finish-image-wrap img), .blog-single img { border-radius: var(--bd-radius-sm); }
.img-inner, .box-image .image-cover { border-radius: var(--bd-radius); }
.lightbox-content, .mfp-content .lightbox-inner { border-radius: var(--bd-radius); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 549px) {
  h1 { letter-spacing: -.04em; }
  .btn-primary, .single_add_to_cart_button, .checkout-button, #place_order { box-shadow: 0 4px 12px rgba(249, 161, 51, .3); }
  .product-small .box-text { padding-top: 10px; }
}

/* ---------- Image loading polish (1.3.6) ---------- */
/* Lazy pictures show a soft sand block (not a white gap) until they arrive. No animation: nothing flickers. */
img[data-lazy-src], img[loading="lazy"] { background-color: var(--bd-sand); }
.product-swatches img, .finish-image-wrap img { background-color: transparent; }

/* ---------- Header: search as one pill, steady menu colour (1.3.8) ---------- */
/* Search: the box and its magnifier button read as ONE white pill instead of two separate pieces. */
#masthead .header-search-form .searchform .flex-row {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  align-items: stretch;
}
#masthead .header-search-form .searchform .flex-col { margin: 0; }
#masthead .header-search-form .searchform input.search-field {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  height: 40px;
}
#masthead .header-search-form .searchform input.search-field:focus { box-shadow: none; }
#masthead .header-search-form .searchform .ux-search-submit {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  height: 100%;
  min-height: 40px;
  padding: 0 12px 0 4px;
  color: var(--bd-accent);
}
#masthead .header-search-form .searchform .ux-search-submit:hover { background: transparent; color: var(--bd-accent-deep); transform: none; }

/* Main menu: the page you are on (or its parent menu item) keeps the SAME colour as the other items.
   Previously it turned darker. The underline still marks where you are. */
#masthead .header-nav-main > li.active > a,
#masthead .header-nav-main > li.current-menu-item > a,
#masthead .header-nav-main > li.current-menu-ancestor > a,
#masthead .header-nav-main > li.current-menu-parent > a,
#masthead .header-nav-main > li.current_page_item > a,
#masthead .header-nav-main > li.current-product-ancestor > a,
#masthead .header-nav-main > li.current-product_cat-ancestor > a {
  color: #404040;
}