/* DiyYarn Storefront 1.3.8 — Shoptimizer 2.9.9 Header layout layer. * Native Top Bar structure, logo, product search, cart fragments, nav and mobile drawer remain untouched. * Styles are namespaced; a single master toggle removes dysh-enhanced from the document. */ body.dysh-enhanced { --dysh-container-gutter: clamp(15px, 2.3vw, 32px); /* All quick links, More and Basket use intrinsic label width and one spacing scale. */ --dysh-icon-left-margin: 16px; --dysh-header-gap: clamp(14px, 1.7vw, 28px); /* Layout containers already supply a centered max-width; avoid padding twice. */ --dysh-inset:0px; } /* 1 — independent banner, optional custom height. */ .dysh-promotion { background:var(--dysh-promo-bg,#b8eaf0); color:var(--dysh-promo-text,#24566a); width:100%; } .dysh-promotion-inner { box-sizing:border-box; display:flex; align-items:center; justify-content:center; min-height:44px; height:var(--dysh-promo-height,auto); max-width:1440px; padding:9px var(--dysh-container-gutter); margin:0 auto; font-size:16px; font-weight:700; line-height:1.4; text-align:center; } .dysh-promotion-inner > * { width:100%; } .dysh-promo-align-left .dysh-promotion-inner { text-align:left; } .dysh-promotion a { color:inherit; text-decoration:none; } .dysh-promotion a:hover { text-decoration:underline; } /* User-controlled divider: the original Top Bar wrapper spans the viewport width. Scope by class so disabling the option returns control to the theme Kirki setting. */ body.dysh-enhanced.dysh-topbar-border-enabled .topbar-wrapper.col-full { position:relative; border-bottom:0 !important; } body.dysh-enhanced.dysh-topbar-border-enabled .topbar-wrapper.col-full::after { content:"" !important; display:block !important; pointer-events:none; position:absolute; z-index:1; left:50%; bottom:0; width:100vw; height:var(--dysh-topbar-border-width,1px); background:var(--dysh-topbar-border-color,#e5e7eb); transform:translateX(-50%); } /* 2 — Shoptimizer's ORIGINAL Top Bar wrapper and Widget layout. */ body.dysh-enhanced .topbar-wrapper.col-full { box-sizing:border-box; width:100%; max-width:100%; padding:0 !important; margin:0 auto !important; } body.dysh-enhanced .topbar-wrapper .top-bar { padding-block:0 !important; } /* Respect Shoptimizer's centered max-width. The nested .col-full must NOT add another 2.617924em inset. Fix the bar's vertical footprint; the account, announcement and header share the same container edges. */ @media (min-width:993px) { body.dysh-enhanced .topbar-wrapper .top-bar { padding:0 !important; margin:0 !important; } body.dysh-enhanced .topbar-wrapper .top-bar > .col-full { box-sizing:border-box; display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(12px,1.5vw,28px); min-height:var(--dysh-topbar-height-desktop,56px); padding:0 !important; margin-inline:auto; } body.dysh-enhanced .topbar-wrapper .top-bar > .col-full::before, body.dysh-enhanced .topbar-wrapper .top-bar > .col-full::after { content:none !important; } } body.dysh-enhanced .top-bar > .col-full > .top-bar-left { flex:1 1 0; min-width:0; margin:0; } /* Shoptimizer places a .textwidget (or a Shortcode block) inside the flexed .top-bar-left widget. Ticker slides are absolutely positioned, so that intermediate flex child otherwise has ZERO intrinsic width. On the actual Shoptimizer stylesheet this clips the entire ticker to 0px. */ body.dysh-enhanced.dysh-topbar-rotator-enabled .top-bar > .col-full > .top-bar-left > .textwidget, body.dysh-enhanced.dysh-topbar-rotator-enabled .top-bar > .col-full > .top-bar-left > .wp-block-shortcode, body.dysh-enhanced.dysh-topbar-rotator-enabled .top-bar > .col-full > .top-bar-left > .widget-content, body.dysh-enhanced.dysh-topbar-rotator-enabled .top-bar > .col-full > .top-bar-left > .wp-block-group { box-sizing:border-box; flex:1 1 auto; width:100%; min-width:0; } body.dysh-enhanced.dysh-topbar-rotator-enabled .top-bar .top-bar-left .dysh-topbar-notice, body.dysh-enhanced.dysh-topbar-rotator-enabled .top-bar .top-bar-left .dysh-topbar-rotator { box-sizing:border-box; width:100%; min-width:0; } /* Native mobile basket uses the count element as the bag-shaped ICON. * Never hide it via a global badge selector. Only desktop cart has custom * badge styling, inside the desktop media query below. */ body.dysh-enhanced .top-bar > .col-full > .top-bar-center { flex:0 1 auto; max-width:32%; } body.dysh-enhanced .top-bar > .col-full > .top-bar-right { flex:0 0 auto; width:auto; min-width:0; margin:0; align-items:center; } body.dysh-enhanced .top-bar > .col-full > .top-bar-right:not(.dysh-account-widget) { margin-left:auto; } body.dysh-enhanced .top-bar .widget_nav_menu.top-bar-right ul { white-space:nowrap; margin:0; padding:0; } body.dysh-enhanced .top-bar .widget_nav_menu.top-bar-right ul > li { margin:0 0 0 clamp(8px,1.2vw,22px); } body.dysh-enhanced .top-bar > .col-full > .dysh-account-widget { flex:0 0 auto; margin-left:0; } body.dysh-enhanced .dysh-account-links { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; } body.dysh-enhanced .dysh-account-separator { font-weight:400; color:#8a8a8a; } body.dysh-enhanced .dysh-account-link { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-weight:700; color:inherit; text-decoration:none; line-height:1.3; } body.dysh-enhanced .dysh-account-link .dysh-link-svg { width:19px; height:19px; flex:0 0 19px; stroke-width:2px; margin:0; } body.dysh-enhanced .dysh-account-link:hover { opacity:1; text-decoration:underline; text-underline-offset:3px; } /* 自定义的第二层右侧链接与账户为同一行；用户只需在右侧小工具放一个短代码。 */ body.dysh-enhanced .top-bar .dysh-topbar-right-links { display:flex; align-items:center; justify-content:flex-end; column-gap:clamp(12px,1.5vw,26px); width:max-content; max-width:100%; white-space:nowrap; } body.dysh-enhanced .top-bar .dysh-topbar-link-list { display:flex; align-items:center; justify-content:flex-end; column-gap:clamp(11px,1.3vw,23px); } body.dysh-enhanced .top-bar .dysh-topbar-navlink { color:inherit; font-weight:400; text-decoration:none; font-size:14px; line-height:1.4; display:inline-block; max-width:clamp(80px,11vw,165px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.dysh-enhanced .top-bar .dysh-topbar-navlink:hover, body.dysh-enhanced .top-bar .dysh-topbar-navlink:focus-visible, body.dysh-enhanced .top-bar .dysh-account-link:focus-visible { color:inherit; text-decoration:underline; text-underline-offset:3px; opacity:1; } body.dysh-enhanced .top-bar .dysh-topbar-more { position:relative; display:block; } body.dysh-enhanced .top-bar .dysh-topbar-more > summary { list-style:none; cursor:pointer; font-size:14px; } body.dysh-enhanced .top-bar .dysh-topbar-more > summary::-webkit-details-marker { display:none; } body.dysh-enhanced .top-bar .dysh-topbar-more > summary:hover { text-decoration:underline; text-underline-offset:3px; } body.dysh-enhanced .top-bar .dysh-topbar-more-list { position:absolute; top:100%; right:0; min-width:170px; z-index:110; display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid #e5e7eb; border-radius:5px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12); } body.dysh-enhanced .top-bar .dysh-topbar-more:not([open]) .dysh-topbar-more-list { display:none; } body.dysh-enhanced .top-bar .dysh-right-desktop-hidden { display:none; } /* Each slide is a complete, independently positioned icon + text unit. * First slide is visible before JS loads; CSS owns the overflow clipping. */ .dysh-rotator, .dysh-promo-rotator { position:relative; display:block; height:1.8em; min-width:0; width:100%; overflow:hidden; isolation:isolate; } .dysh-rotator-message[hidden], .dysh-promo-message[hidden] { display:none !important; } .dysh-rotator-message, .dysh-promo-message { box-sizing:border-box; display:flex; align-items:center; position:absolute; inset:0; min-width:0; overflow:hidden; white-space:nowrap; opacity:0; transform:translate3d(0,100%,0); transition:transform var(--dysh-roll-duration,500ms) ease-in-out, opacity var(--dysh-roll-duration,500ms) ease-in-out; pointer-events:none; } .dysh-promo-message { display:block; } .dysh-rotator-message.dysh-is-current, .dysh-promo-message.dysh-is-current { opacity:1; transform:translate3d(0,0,0); pointer-events:auto; } .dysh-rotator-message.dysh-is-leaving, .dysh-promo-message.dysh-is-leaving { opacity:0; transform:translate3d(0,-100%,0); } .dysh-topbar-notice { box-sizing:border-box; min-width:0; width:100%; height:32px; display:flex; align-items:center; font-size:15px; line-height:1.35; font-weight:400; } .dysh-topbar-rotator { flex:1 1 auto; min-width:0; width:100%; height:32px; } .dysh-topbar-slide { width:100%; } .dysh-topbar-slide .dysh-ticker-inner { display:inline-flex; align-items:center; justify-content:flex-start; gap:13px; min-width:0; max-width:100%; width:max-content; height:100%; margin:0; color:inherit; white-space:nowrap; text-decoration:none; } .dysh-topbar-slide .dysh-ticker-icon { display:inline-flex; flex:0 0 24px; align-items:center; justify-content:center; width:24px; height:24px; color:#27b6c8; } .dysh-topbar-slide .dysh-ticker-icon .dysh-link-svg { display:block; width:24px; height:24px; max-width:none; flex:none; color:inherit; margin:0 !important; } .dysh-topbar-slide .dysh-topbar-message-text { display:inline-block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; line-height:1.4; white-space:nowrap; } .dysh-topbar-slide .dysh-notice-icon-image { display:block; width:24px; height:24px; max-width:100%; flex:none; object-fit:contain; } .dysh-topbar-slide a { color:inherit; text-decoration:none; } .dysh-topbar-slide a:hover, .dysh-topbar-slide a:focus-visible { text-decoration:underline; text-underline-offset:3px; } .dysh-notice-configuration-hint { display:inline-block; color:#876c21; font-size:12px; font-weight:400; line-height:1.5; } .dysh-effect-fade .dysh-rotator-message { transform:none; } .dysh-effect-fade .dysh-rotator-message.dysh-is-current, .dysh-effect-fade .dysh-rotator-message.dysh-is-leaving { transform:none; } .dysh-effect-none .dysh-rotator-message { transition:none !important; transform:none !important; } /* Mobile-only quick links must be invisible outside the mobile drawer at ALL desktop widths. * Even if the menu is rendered in the shared primary menu, it must not affect its desktop height. */ body.dysh-enhanced #site-navigation ul.menu > li.dysh-mobile-menu-heading, body.dysh-enhanced #site-navigation ul.menu > li.dysh-mobile-menu-item, body.dysh-enhanced .col-full-nav .dysh-mobile-links { display:none !important; } /* 3 — Quick Links + the native Shoptimizer Basket follow ONE intrinsic-width * sizing convention. No fixed-width cells or horizontal padding. Adjacent * items are separated by margin-left; each icon sits above its centered text. */ #masthead .dysh-quick-nav { min-width:0; margin:0; padding:0; float:none; } #masthead .dysh-quick-nav .dysh-quick-menu { display:flex; align-items:center; justify-content:flex-end; gap:0; padding:0; margin:0; list-style:none; } #masthead .dysh-quick-nav .dysh-quick-menu > .dysh-menu-item { box-sizing:border-box; list-style:none; float:none; flex:0 0 auto; width:max-content; min-width:0; max-width:120px; border:0; padding:0; margin:0; } #masthead .dysh-quick-nav .dysh-quick-menu > .dysh-menu-item + .dysh-menu-item { margin-left:var(--dysh-icon-left-margin); } #masthead .dysh-quick-nav .dysh-link, #masthead .dysh-quick-nav .menu li:not(.ri) a.dysh-link { box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; width:max-content; max-width:120px; height:66px; min-height:66px; margin:0; padding:5px 0 !important; font-size:13px; font-weight:400; line-height:1.2; white-space:nowrap; color:#222; text-align:center; text-decoration:none; } #masthead .dysh-quick-nav .dysh-link:hover { opacity:.78; } #masthead .dysh-quick-nav .dysh-link-label { display:block; width:auto; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:center; } .dysh-link-svg, .dysh-icon-image { display:block; width:27px; height:27px; object-fit:contain; flex:0 0 auto; } /* More uses the same icon/label dimensions while closed. Dropdown links are * deliberate horizontal rows and are exempt from the top-level item spacing. */ #masthead .dysh-more-entry { position:relative; } #masthead .dysh-more { width:max-content; max-width:120px; } #masthead .dysh-more summary { cursor:pointer; box-sizing:border-box; list-style:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:max-content; max-width:120px; min-height:66px; gap:7px; margin:0; padding:5px 0; font-size:13px; line-height:1.2; text-align:center; } #masthead .dysh-more summary::-webkit-details-marker { display:none; } .dysh-more-dots { font-size:28px; width:27px; height:27px; text-align:center; line-height:22px; } #masthead .dysh-more-menu { position:absolute; right:0; top:100%; z-index:100; width:max-content; min-width:175px; max-width:260px; padding:8px; margin:0; border:1px solid #e7e7e7; border-radius:7px; background:#fff; box-shadow:0 9px 22px rgba(0,0,0,.12); } #masthead .dysh-more:not([open]) .dysh-more-menu { display:none; } #masthead .dysh-quick-nav .dysh-more-menu li:not(.ri) a.dysh-link { display:flex; flex-direction:row; align-items:center; gap:9px; justify-content:flex-start; width:100%; max-width:none; height:auto; min-height:40px; padding:8px !important; text-align:left; } #masthead .dysh-more-menu .dysh-link-svg, #masthead .dysh-more-menu .dysh-icon-image { width:20px; height:20px; } #masthead .dysh-more-menu .dysh-link-label { text-align:left; } /* Header-5 only: entire row measured as a single layout. No negative margins. */ @media (min-width:993px) { body.header-5.dysh-layout-active #masthead .main-header.col-full { box-sizing:border-box; display:grid; grid-template-columns:max-content minmax(170px,1fr) max-content max-content; align-items:center; align-content:center; column-gap:0; /* Exact symmetric padding overrides Kirki's two independent header paddings. */ padding:var(--dysh-header-pad,17px) 0 !important; height:auto; min-height:0; margin-inline:auto; } /* When quick links are all disabled, preserve a native Basket column. No empty Quick Links