/* ============================================================
   Syure Layout Tune - page width & dropdown panel width
   Reference: https://www.toto.com/en/
   TOTO layout facts (from its base.css):
     - main column .innerEl: max-width 1320px + 25px side padding
     - wide screens (>=1500px): max-width 1500px
     - dropdown panel: full-width sheet, content aligned to main column
   This file only affects desktop (>=992px) and keeps the dark theme.
   ============================================================ */

/* ---------- 1. Page content column width ---------- */
@media (min-width: 1200px) {
  body .woostify-container {
    max-width: 1320px !important;
  }
  body .woostify-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1600px) {
  body .woostify-container {
    max-width: 1500px !important;
  }
}

/* legacy mega inner wrapper, keep in sync */
body .main-navigation .mega-menu-inner-wrapper {
  max-width: 1320px !important;
}

/* ---------- 4. Hero banner carousel: align to content column (TOTO style) ----------
   The carousel lives INSIDE .woostify-container and was made full-bleed by
   negative margins from the optimizer CSS. Zero those margins on desktop so it
   fills exactly the container inner width (1272px / 1452px) and its edges line
   up with the product grid below. Below 1200px unchanged. */
@media (min-width: 1200px) {
  body .syure-carousel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------- 3. Sticky header on all pages ----------
   The whole header block (announcement topbar + logo/nav row)
   stays fixed at the top while scrolling, on every page. */
#masthead.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
}

/* soft shadow only while actually scrolled (stuck to top) */
@supports (position: sticky) {
  body.syure-stuck #masthead.site-header {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  }
}

/* ---------- 2. Hover dropdown panels: match page width ---------- */
@media (min-width: 992px) {

  /* Re-anchor the mega panel (Indoor / Outdoor Lights) to the header
     container instead of the single menu item. */
  .site-header .main-navigation ul.primary-navigation > li.syure-mega {
    position: static !important;
  }

  .site-header .main-navigation ul.primary-navigation > li.syure-mega > ul.sub-menu {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding: 26px 24px 30px !important;
    grid-template-columns: 280px 1fr !important;
    gap: 12px 40px !important;
    align-content: start !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45) !important;
  }

  /* Panel items: undo the theme's width:50% / padding so the product
     preview fills the right column and the panel keeps a tight height. */
  .site-header .main-navigation ul.primary-navigation > li.syure-mega > ul.sub-menu > li {
    width: auto !important;
    padding: 0 !important;
  }

  .site-header .main-navigation ul.primary-navigation > li.syure-mega > ul.sub-menu > li.syure-mega-preview {
    grid-row: 1 / span 6 !important;
    align-self: start !important;
  }

  /* Left column: category links */
  .site-header .main-navigation ul.primary-navigation > li.syure-mega > ul.sub-menu > li.menu-item > a {
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* Hover bridge: keep the panel open while the cursor travels from the
     menu bar down to the panel. */
  .site-header .main-navigation ul.primary-navigation > li.syure-mega > ul.sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -44px;
    height: 44px;
  }

  /* Right column: product preview grid fills the remaining width */
  .site-header .main-navigation .syure-mega-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 14px !important;
  }

  .site-header .main-navigation .syure-mega-item img {
    height: 150px !important;
  }

  /* Simple dropdowns (Support / Information): wider, same dark style */
  .site-header .main-navigation ul.primary-navigation > li.menu-item-has-children:not(.syure-mega) > ul.sub-menu {
    left: auto !important;
    right: 0 !important;
    min-width: 320px !important;
    padding: 14px 16px !important;
    border-radius: 0 0 14px 14px !important;
  }

  /* undo the theme's width:50% on dropdown items */
  .site-header .main-navigation ul.primary-navigation > li.menu-item-has-children:not(.syure-mega) > ul.sub-menu > li {
    width: auto !important;
  }

  /* open flyout levels to the left so they stay inside the viewport */
  .site-header .main-navigation ul.primary-navigation > li.menu-item-has-children:not(.syure-mega) > ul.sub-menu .sub-menu {
    left: auto !important;
    right: 100% !important;
    border-radius: 14px !important;
  }

  .site-header .main-navigation ul.primary-navigation > li.menu-item-has-children:not(.syure-mega) > ul.sub-menu > li > a {
    padding: 11px 14px !important;
    font-size: 14px !important;
  }
}

/* ---- v1.0.5: fixed-height mega preview --------------------------------
   The preview grid must not change the panel height when switching
   categories: height jitter re-triggers mouseenter on neighbouring menu
   items and causes an endless render loop. Fixed height + inner scroll. */
.main-navigation ul.primary-navigation > li.syure-mega > ul.sub-menu > li.syure-mega-preview {
  height: 470px !important;
  overflow: hidden !important;
}
.main-navigation ul.primary-navigation > li.syure-mega > ul.sub-menu > li.syure-mega-preview .syure-mega-grid {
  height: 440px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
  scrollbar-width: thin !important;
}

/* ---- v1.0.17 checkout tweaks -------------------------------------------
   1) Hide WooCommerce core terms line: duplicated with the required
      syure-terms-agree checkbox (which also locks the Place Order button).
   2) Required-field hints: red asterisk on labels of required inputs. */
.wc-block-checkout .wc-block-checkout__terms { display: none !important; }
.wc-block-checkout :is(.wc-block-components-text-input, .wc-block-components-select-input, .wc-block-components-country-input, .wc-block-components-state-input):has(input[required]) label::after,
.wc-block-checkout .wc-block-components-combobox-control:has([aria-required='true']) label::after {
  content: ' *' !important;
  color: #ff6b6b !important;
  font-weight: 700 !important;
}
/* summary line above place order: shipping note styling */
.syure-ship-note { font-size: 12.5px !important; color: #9aa0b4 !important; margin: 6px 0 0 !important; line-height: 1.6 !important; }

/* ---- v1.0.18 checkout：隐藏 "Shipping options" 区块 ---------------------
   每单只应用一种运费（满额免运费，否则统一运费），无需客户选择；
   运费金额仍在右侧订单摘要中显示。 */
.wc-block-checkout__shipping-option,
.wp-block-woocommerce-checkout-shipping-methods-block {
  display: none !important;
}

/* ============================================================
   PhotoSwipe 产品图灯箱：置顶 + 深色遮罩 + 可见的关闭/缩放/全屏按钮
   （默认 pswp z-index 1500 低于吸顶 header 9999，且白底配浅色按钮导致关闭键看不见）
   ============================================================ */
.pswp{z-index:2147483000!important;}
.pswp__bg{background:rgba(13,14,20,.95)!important;opacity:1!important;}
.pswp__ui{visibility:visible!important;}
.pswp__counter{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.5);}
/* 皮肤按钮图标本身为白色，深色遮罩下直接可见，只微调不透明度 */
.pswp__button{opacity:.92!important;}
.pswp__button:hover{opacity:1!important;}

/* 强制 PhotoSwipe 按钮各用正确的 sprite 格子（否则全显示左上角的全屏图标，关闭键不可辨认） */
.pswp__button--close{background-position:0 -44px!important;}
.pswp__button--share{background-position:-44px -44px!important;}
.pswp__button--fs{background-position:0 0!important;}
.pswp--fs .pswp__button--fs{background-position:-44px 0!important;}
.pswp__button--zoom{background-position:-88px 0!important;}
.pswp--zoomed-in .pswp__button--zoom{background-position:-132px 0!important;}
.pswp__button--arrow--left:before{background-position:-138px -44px!important;}
.pswp__button--arrow--right:before{background-position:-94px -44px!important;}

/* 首页产品卡 B2B 询盘入口（lt.js 注入的 span 按钮） */
.syure-cat-item .syure-card-rfq{display:block;margin:12px auto 0;padding:9px 14px;border:1px solid #3f4a63;border-radius:9px;background:transparent;color:#dfe6f2;font-size:12.5px;font-weight:700;text-align:center;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.syure-cat-item .syure-card-rfq:hover{background:#22d3ee;border-color:#22d3ee;color:#06251a;}

/* ============================================================
   v1.0.17 头部调整（2026-11-01）：
   1) 主菜单（Home 起始）整体左移，紧跟 logo 排列
   2) 头部导航/工具区禁止出现 <img>：菜单与工具图标本应全部是
      内联 SVG，个别浏览器仍显示破图占位符，这里直接 CSS 兜底隐藏
   ============================================================ */
@media (min-width: 992px) {
  .has-header-layout-1 .site-navigation { text-align: left !important; padding-left: 60px !important; }
  .main-navigation .primary-navigation > .menu-item > a { margin: 0 18px 0 0 !important; }
}
#masthead .site-navigation img { display: none !important; }
#masthead .site-tools img { display: none !important; }
#masthead .wrap-toggle-sidebar-menu img { display: none !important; }
#masthead .site-navigation .syure-mega-item img { display: block !important; }

/* v1.0.18：顶栏已有 My Account，第二行的 Account 胶囊按钮隐藏（Country 选择保留） */
.syure-hm-user { display: none !important; }

/* v1.0.19：头部（整个 masthead）除 logo 与 mega 产品图外，一切 img/object/embed
   一律隐藏——破图占位符曾在工具区反复出现，此规则不依赖 JS，CSS 层直接兜底 */
#masthead img:not(.custom-logo):not(.syure-mega-item img),
#masthead object, #masthead embed, #masthead input[type="image"] { display: none !important; }
#masthead .syure-mega-item img { display: block !important; }

/* v1.0.20：菜单 7 项防换行 + 语言缩写不竖排 */
.main-navigation .primary-navigation { flex-wrap: nowrap !important; white-space: nowrap !important; }
.syure-lang-cur { white-space: nowrap !important; }

/* 语言按钮宽度自适应（woostify .tools-icon 固定宽度导致 EN 竖排） */
#masthead .site-tools .syure-lang { width: auto !important; min-width: 0 !important; }
#masthead .site-tools .syure-lang-btn { width: auto !important; white-space: nowrap !important; }
#masthead .site-tools .syure-lang-cur { display: inline-block !important; width: auto !important; white-space: nowrap !important; }

#masthead .site-tools .syure-lang-cur { flex: 0 0 auto !important; min-width: 24px !important; max-width: none !important; }