/* WordPress glue for the design stylesheet (site.css): things the static design never needed. */

/* WordPress prints width/height attributes on images; the design's images never had them.
   Low specificity, so every sized image rule in site.css still wins. */
img{height:auto}

/* Logged-in admin bar: keep the sticky header below it. */
.admin-bar header.site{top:32px}
@media (max-width:782px){.admin-bar header.site{top:46px}}
@media (max-width:600px){.admin-bar header.site{top:0}}

/* Form validation messages (also inside the homepage's classic layer, where classes get a k- prefix). */
.field .err,.k-field .k-err{display:block;margin-top:6px;font-size:12.5px;color:var(--red)}
.form>.err,.k-form>.k-err{grid-column:1/-1;padding:12px 14px;border-left:3px solid var(--red);background:#fbeeed;color:#7a1c16;font-size:14px}
.field input[aria-invalid=true],.k-field input[aria-invalid=true]{border-color:var(--red)}

/* WooCommerce notices that can appear on the quote page. */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);background:var(--card);font-size:14px}
.woocommerce-error{border-color:var(--red);color:var(--red)}
.woocommerce-message .button,.woocommerce-info .button{float:right;font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor}

/* The quote list fades while it refreshes. */
#quote{transition:opacity .2s}

/* Images and captions inside Journal articles and legal pages. */
.article img,.prose img{height:auto;margin:24px 0}
.article figure,.prose figure{margin:24px 0}
.article figcaption,.prose figcaption{font-size:13px;color:var(--muted)}
.wp-caption-text{font-size:13px;color:var(--muted)}
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{margin-left:auto;margin-right:auto}

/* Hero UI hidden when there is a single slide. */
.hs-ui[hidden]{display:none}

/* Screen-reader text from WordPress / WooCommerce. */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Mobile / tablet fixes (site.css stays as the design shipped it) ---------- */

/* .shop and .ph-grid share an element with .wrap, whose padding shorthand otherwise wipes their
   side padding on desktop (.shop, 961-1280 px) and their top padding on tablets/phones. */
.shop{padding-left:32px;padding-right:32px}
.page-hero:not(.compact) .ph-grid{padding-top:44px}
@media(max-width:960px){
  .shop{padding:40px 24px 72px}
  .page-hero:not(.compact) .ph-grid{padding-top:36px}
}
@media(max-width:640px){
  .shop{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}

/* Hero dots: same 2px line, but a 24px-tall tap target. */
.hs-dots button{height:24px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat}

/* Page-hero facts line: when it wraps, the separator ends a line instead of starting one. */
.ph-meta span+span:before{content:none}
.ph-meta span:not(:last-child):after{content:"·";margin:0 14px;color:var(--accent)}

/* Page behind the open mobile drawer does not scroll. */
html.locked{overflow:hidden}

@media(max-width:640px){
  /* 16px stops iOS Safari zooming in when a field is focused. */
  .field input,.field select,.field textarea,.qty input,.side .s-search input,.toolbar select,
  .classic .k-field input,.classic .k-field select,.classic .k-field textarea{font-size:16px}
  /* Quote list: bigger tap targets for - / + and Clear list. */
  .qrow .qty button,.qrow .qty input{min-height:40px}
  #clear{padding-top:10px}
}

/* Search overlay: results scroll when they run past the screen; the close button stays put. */
.search-ov{overflow-y:auto;overscroll-behavior:contain;background:rgb(247,243,238)}
.search-ov .close{position:fixed}

/* Projects filter and product tabs: one row that scrolls sideways if it does not fit,
   instead of wrapping one tab onto its own line. Auto margins keep .lg centred when it fits. */
@media(max-width:640px){
  [data-tabs].tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  [data-tabs].tabs::-webkit-scrollbar{display:none}
  /* .more is set by site.js while tabs are hidden off the right edge: fade that edge as a hint. */
  [data-tabs].tabs.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  [data-tabs].tabs{gap:18px}
  [data-tabs].tabs button{flex:none;white-space:nowrap}
  .tabs.lg{gap:16px;justify-content:flex-start}
  .tabs.lg button:first-child{margin-left:auto}
  .tabs.lg button:last-child{margin-right:auto}

  /* Product prev / next: two ends of one line; "Back to products" is already in the breadcrumb. */
  .pd-top .pn{flex:1 0 100%;justify-content:space-between;gap:16px}
  .pd-top .pn a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
  .pd-top .pn a:not([title]){display:none}

  /* Toast: full width above the WhatsApp button, not a narrow column in the middle. */
  .toast{left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateY(20px);max-width:none;justify-content:space-between}
  .toast.show{transform:none}
}

/* Keep the floating WhatsApp button off the footer's last line. */
@media(max-width:960px){.classic footer.k-site{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}}

/* Homepage numbers on tablets: five stats as 3 + 2 left an empty sixth cell. With five, the
   bottom two share the row; the last one keeps its top border. */
@media(min-width:641px) and (max-width:900px){
  .classic .k-stats{grid-template-columns:repeat(6,1fr)}
  .classic .k-stats>div{grid-column:span 2}
  .classic .k-stats>div:nth-child(4):nth-last-child(2),.classic .k-stats>div:nth-child(5):last-child{grid-column:span 3}
  .classic .k-stats>div:nth-child(4):nth-last-child(2){border-right:1px solid rgba(239,231,218,.2)}
  .classic .k-stats>div:nth-child(n+4):last-child{border-top:1px solid rgba(239,231,218,.2)}
}

/* ---------- Mobile UI polish ---------- */

/* Drawer, search and lightbox sit above the logged-in admin bar (z-index 99999), which otherwise
   covers the drawer's logo and close button. The drawer's header stays put while its menu scrolls,
   and scrolling the menu never hands off to the page behind. */
.admin-bar .drawer,.admin-bar .search-ov,.admin-bar .lb{z-index:100000}
.drawer .panel{overscroll-behavior:contain}
.drawer .panel-h{position:sticky;top:0;z-index:1;background:var(--bg);margin:-20px 0 4px;padding:20px 0 12px;border-bottom:1px solid var(--line)}

/* Product cards: "Add to quote" is a small outlined button in the brand colour, filled once the
   piece is in the list, so it reads as an action rather than a caption. */
.prod .qlink{color:var(--brand);border:1px solid var(--brand);padding:9px 16px;transition:background .2s,color .2s}
.prod .qlink:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.prod .qlink.in{background:var(--brand);color:#fff}
@media(max-width:640px){.prod .qlink{padding:9px 12px;letter-spacing:.16em}}

/* Shop sidebar search: live results drop down under the field. */
.side .s-search{position:relative}
.s-sugg{position:absolute;left:0;right:0;top:calc(100% + 1px);z-index:20;background:var(--bg);border:1px solid var(--line);border-top:0;box-shadow:0 12px 24px rgba(31,27,22,.08);max-height:min(360px,60vh);overflow-y:auto;overscroll-behavior:contain}
.s-sugg[hidden]{display:none}
.s-sugg a{display:flex;gap:12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.s-sugg a:hover,.s-sugg a:focus{background:var(--sand)}
.s-sugg img,.s-sugg .ill{width:40px;height:40px;object-fit:cover;flex:none}
.s-sugg small{font-size:11.5px}
.s-sugg p{padding:12px;font-size:13px}
.s-sugg .all{display:block;width:100%;text-align:left;padding:11px 12px;font-family:var(--display);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* Product page: the name reads as a title (sentence case, like the cards) rather than tracked caps,
   and the line under it is body text, not a muted caption. */
.pd h1{text-transform:none;letter-spacing:.02em;line-height:1.3}
.pd .short{color:var(--ink-2);font-size:15.5px;line-height:1.6}
#ptabs{padding-bottom:72px}
.pane-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

@media(max-width:640px){
  /* The breadcrumb stops at the category: the product name is the heading right below. */
  .pd-top{padding:18px 0 14px}
  .pd-top .bc-cur{display:none}
  .gal .main .zoom{display:none}
  .pd{gap:28px;padding-bottom:40px}
  .pd h1{font-size:22px;margin:10px 0 10px}
  .dims{margin:20px 0 22px;padding:18px 0}
  /* Quantity + Add to quote on one row, catalogue button full width below. */
  .buy .btn-line{flex-basis:100%}
  .assure{margin-top:22px}
  .ptabs .tabs{margin:18px 0 20px}
  #ptabs{padding-bottom:16px}
  /* Enquiry tab: both buttons the same full width, stacked. */
  .pane-acts{flex-direction:column}
  .pane-acts .btn{width:100%}
}