/* ==========================================================================
   PBSDEV / New Horizen Nursery — global stylesheet
   Rewritten for HTML5 semantics + modern CSS (custom properties, flexbox,
   grid). Class/ID names are preserved from the legacy stylesheet so the
   PHP templates didn't need a parallel full rewrite of every selector.
   ========================================================================== */

:root {
  /* ---- site chrome (current neutral scheme) ---- */
  --color-bg: #fff;
  --color-text: #333;
  --color-topbar-bg: var(--nhn-light-green);
  --color-topbar-text: var(--nhn-light);
  --color-navbar-bg: var(--nhn-light);
  --color-navbar-text: #666;
  --color-footer-bg: var(--nhn-blue);
  --color-footer-text: #fff;
  --color-login-bg: #f5f5f5;
  --color-login-text: #333;
  --color-link: #04944C;

  /* ---- New Horizen Nursery brand palette (ready to wire in) ---- */
  --nhn-yellow: #FEDB00;
  --nhn-blue: #10069F;
  --nhn-light-green: #92C83E;
  --nhn-light-green-dark25: color-mix(in srgb, var(--nhn-light-green) 75%, black);
  --nhn-fresh-lime: #93B742;
  --nhn-dark-green: #009639;
  --nhn-dark-600-green: #009639;
  --nhn-light: #ffffff;

  /* ---- legacy accent palette (still used across product/blog accents) ---- */
  --accent-putty: #9E9D7C;
  --accent-grape: #A8968A;
  --accent-error: #A30606;
  --accent-olive: #616420;
  --accent-forest: #2A7A3E;
  --accent-brown: #645311;
  --accent-gold: #A3881B;
  --accent-pink: #BA2567;
  --accent-cream: #FAF4DE;
  --accent-tan: #C8B986;
  --accent-mustard: #E3B506;
  --accent-skyblue: #7CBAF9;

  /* ---- greyscale ---- */
  --color-bg-muted: #cbd42017;
  --color-offwhite: #FAF9F6;
  --grey-100: #e5e5e5;
  --grey-200: #ddd;
  --grey-300: #ccc;
  --grey-500: #999;
  --grey-600: #888;
  --grey-700: #666;
  --black: #000;

  /* ---- structural tokens ---- */
  --topbar-height: 30px;
  --header-height: 86px;
  --header-total: calc(var(--topbar-height) + var(--header-height));
  --max-width: 1280px;
  --max-width-wide: 1280px;
  --radius: 5px;
  --font-body: 'Nunito Sans', sans-serif;
  --font-heading: 'Nunito', sans-serif;
}

/* ==========================================================================
   FONTS
   ========================================================================== */

@font-face {
  font-family: 'Nunito';
  src: url("../fonts/Nunito,Nunito_Sans/Nunito/Nunito-VariableFont_wght.ttf") format('truetype-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url("../fonts/Nunito,Nunito_Sans/Nunito/Nunito-Italic-VariableFont_wght.ttf") format('truetype-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url("../fonts/Nunito,Nunito_Sans/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format('truetype-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%; /* Nunito Sans is a variable font with a wdth axis - exposes it to font-stretch */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url("../fonts/Nunito,Nunito_Sans/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf") format('truetype-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   RESET / GLOBAL
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Browsers don't inherit the page font into form controls by default -
   without this, every select/input/button/textarea renders in the OS
   default font at a slightly-smaller default size instead of Century
   Gothic 16px, regardless of what body/html declare. */
button, input, select, textarea { font-family: inherit; font-size: inherit; }

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 400; color: var(--nhn-dark-green); }
h1 { font-weight: 800; }
h2 { font-weight: 700; }

hr { margin: 0; padding: 0; width: 100%; height: 8px; background-color: color-mix(in srgb, var(--accent-skyblue) 90%, transparent); border: 0; }

a { margin: 0; padding: 0; color: var(--color-link); text-decoration: none; }
a:hover { color: var(--nhn-light-green); text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

/* Inline SVG icons (Lucide UI icons + Simple Icons brand marks) - color
   follows `color` via currentColor. Default: fill the container's width,
   height auto-derived from the icon's (square) viewBox aspect ratio -
   same behavior as an <img>. Override per context where a fixed size
   is needed instead of a width-driven one. */
.pbs-icon { width: 100%; height: auto; display: block; }

.clearfix::after { content: ""; clear: both; display: table; }
.clear { clear: both; }
.pbs-spacer { margin: 10px 0; padding: 0; width: auto; height: auto; display: block; }

.pbs-float-left { float: left; }
.pbs-float-right { float: right; }
.pbs-float-center { margin: 0 auto; text-align: center; }

.pbs-curved-corner { background-color: var(--accent-cream); border: 1px solid var(--color-bg); color: var(--color-bg); border-radius: 10px; }
.pbs-box-shadow { box-shadow: 6px 6px 6px var(--grey-300); }
.caption { margin: 0; padding: 6px 0 0; font-style: italic; color: var(--accent-brown); text-align: left; }

.pbs-site-favicon { margin: -20px 0 20px; }
.pbs-site-favicon img { margin: 0 auto; width: 64px; filter: grayscale(10%) opacity(90%); }

.pbs-italic { font-style: italic; }

a.transparent { text-decoration: none; }
a.transparent:hover { opacity: 0.5; text-decoration: none; }

.error-msg { color: var(--accent-error); }
.noscroll { overflow: hidden; }

/* ==========================================================================
   HEADER (top bar + navbar)
   ========================================================================== */

#pbs-topbar {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 991;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 0 30px;
  color: var(--color-topbar-text);
  background: var(--color-topbar-bg);
}

#pbs-topbar > .clear { display: none; }

.pbs-contactbar-email a { color: var(--color-topbar-text); text-decoration: none; }
.pbs-contactbar-email a:hover { color: var(--nhn-blue); }
.pbs-contactbar-number { }
.pbs-contactbar-account a { color: var(--color-topbar-text); text-decoration: none; }
.pbs-contactbar-account a:hover { color: var(--nhn-blue); }

.pbs-header-social-media { display: flex; gap: 10px; }
.pbs-header-facebook, .pbs-header-twitter, .pbs-header-instagram, .pbs-header-youtube { width: 20px; }
.pbs-header-facebook a, .pbs-header-twitter a, .pbs-header-instagram a, .pbs-header-youtube a { display: block; text-decoration: none; color: inherit; }
.pbs-header-facebook a:hover, .pbs-header-twitter a:hover, .pbs-header-instagram a:hover, .pbs-header-youtube a:hover { color: var(--nhn-blue); }
.pbs-header-facebook a:hover, .pbs-header-twitter a:hover, .pbs-header-instagram a:hover, .pbs-header-youtube a:hover { opacity: 0.5; }
.pbs-header-facebook img, .pbs-header-twitter img, .pbs-header-instagram img, .pbs-header-youtube img { width: 100%; }

#pbs-navbar {
  position: fixed;
  top: var(--topbar-height); right: 0; left: 0;
  z-index: 990;
  width: 100%;
  height: var(--header-height);
  background: var(--color-navbar-bg);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--grey-600) 15%, transparent);
  box-sizing: border-box;
  --notch-w: 174px;
  --notch-r: 18px;
  --notch-depth: 51px;
}

/* iPhone-style notch cut into the bottom edge of the navbar, centered,
   sized to the Order Online button + 10px padding either side. The
   rectangular body is page-bg colored (creating the "cutout" look) with
   rounded outer-bottom corners; the two small corner pieces on either
   side use a radial-gradient to fake the smooth concave curve where the
   cutout meets the navbar's flat bottom edge. */
#pbs-navbar-notch {
  position: absolute;
  left: 50%; bottom: calc(-1 * (var(--notch-depth) - var(--notch-r)));
  transform: translateX(-50%);
  width: var(--notch-w);
  height: var(--notch-depth);
  background: var(--color-bg);
  border-radius: 0 0 var(--notch-r) var(--notch-r);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--grey-600) 15%, transparent);
  z-index: 989;
}
#pbs-navbar-notch::before,
#pbs-navbar-notch::after {
  content: '';
  position: absolute;
  top: 0;
  width: var(--notch-r);
  height: var(--notch-r);
}
#pbs-navbar-notch::before {
  left: calc(-1 * var(--notch-r));
  background: radial-gradient(circle at top left, transparent var(--notch-r), var(--color-navbar-bg) calc(var(--notch-r) + 0.5px));
}
#pbs-navbar-notch::after {
  right: calc(-1 * var(--notch-r));
  background: radial-gradient(circle at top right, transparent var(--notch-r), var(--color-navbar-bg) calc(var(--notch-r) + 0.5px));
}

#pbs-navbar-inner {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  box-sizing: border-box;
}

#pbs-logo { width: 260px; flex: 0 0 auto; margin: 4px 0 4px 20px; align-self: center; justify-self: start; z-index:999; }
#pbs-logo img { width: 100%; display: block; }

#pbs-navbar-right { display: flex; align-items: center; justify-content: flex-end; justify-self: end; height: 100%; margin: 0 20px 0 0; }

/* ==========================================================================
   USER LOGIN / CART (in navbar)
   ========================================================================== */

/* The markup nests several nothing-but-a-wrapper divs (plus leftover
   .clear spacers from the old float layout) between the header and the
   actual login/cart content - collapse them out of the box model so
   #pbs-products-login-wrapper's flex centering applies directly. */
#pbs-products-login-wrapper { display: flex; align-items: center; flex: 0 0 auto; z-index: 991; }
.pbs-order-online-btn {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  width: var(--notch-w); height: var(--notch-depth);
  display: flex; align-items: center; justify-content: center;
  padding: 0; color: var(--nhn-blue); background-color: var(--nhn-yellow);
  border-radius: 0 0 var(--notch-r) var(--notch-r);
  text-decoration: none; text-transform: uppercase; font-size: 16px; font-weight: 700;
  z-index: 992;
}
.pbs-order-online-btn:hover { background-color: var(--nhn-blue); color: var(--nhn-yellow); }
#pbs-products-login,
.pbs-products-login-text,
#pbs-login,
.pbs-login-text { display: contents; }

.pbs-login-text ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 4px; }
.pbs-login-text li a {
  padding: 0 10px;
  color: var(--nhn-dark-green);
  font-weight: 400;
  text-decoration: none;
  line-height: 20px;
  font-size: 16px;
}
.pbs-login-text li a:hover { color: var(--nhn-blue); text-decoration: none; }
.pbs-login-text li:last-child .pbs-cart { padding-right: 0; }

.pbs-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 20px;
  padding: 2px 10px;
  height: 35px;
  border: none;
  border-radius: 20px;
  background-color: var(--color-bg);
  color: var(--nhn-dark-green);
  cursor: pointer;
}
.pbs-cart:hover { color: var(--nhn-blue); }
.pbs-cart:hover .pbs-cart-qty { color: var(--nhn-blue); }
.pbs-cart .pbs-icon { width: 20px; height: 20px; }
.pbs-cart-qty { color: var(--nhn-dark-green); }

/* ==========================================================================
   NAVBAR (nav links + mobile toggle)
   ========================================================================== */

.pbs-topnav { margin: 0; padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.pbs-topnav ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pbs-topnav li { margin: 0; padding: 0; }
.pbs-topnav li h2 { display: inline; }
.pbs-topnav li h2 a {
  padding: 0 15px;
  font-size: 16px;
  color: var(--nhn-dark-green);
  font-weight: 400;
  text-decoration: none;
  line-height: 36px;
}
.pbs-topnav li h2 a:hover { color: var(--nhn-blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--nhn-blue); }
.pbs-topnav li:last-child h2 a { padding-right: 0; }
.pbs-topnav li.pbs-nav-active h2 a { color: var(--nhn-blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--nhn-blue); }

/* Dropdown submenus - desktop: hover/focus reveals an absolutely-positioned panel under the parent
   link. Small CSS-triangle caret (no icon asset) next to any top-level link that has children. */
.pbs-topnav li { position: relative; }
.pbs-dropdown-caret {
  display: inline-block; margin-left: 5px; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  vertical-align: middle; transition: transform 0.15s ease;
}
.pbs-topnav li.pbs-has-dropdown:hover .pbs-dropdown-caret,
.pbs-topnav li.pbs-has-dropdown:focus-within .pbs-dropdown-caret { transform: rotate(180deg); }
/* .pbs-submenu is itself a <ul> nested inside .pbs-topnav, so any ".pbs-topnav ul"-style rule
   elsewhere (there are several, including a homepage-hero-specific one further down the file with
   its own display:flex) would win on specificity/source order and leave the dropdown visibly open
   by default. Qualified by the nav's own ID (#pbs-topnav) instead of chasing class specificity
   context by context - an ID beats any number of classes, so this wins unconditionally regardless
   of what else targets ".pbs-topnav ul" now or in future. */
#pbs-topnav .pbs-submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 1000;
  margin: 0; padding: 8px 0; min-width: 200px; list-style: none;
  background: var(--color-bg); box-shadow: 0 4px 16px color-mix(in srgb, var(--grey-600) 20%, transparent);
  border-radius: var(--radius);
}
#pbs-topnav li.pbs-has-dropdown:hover .pbs-submenu,
#pbs-topnav li.pbs-has-dropdown:focus-within .pbs-submenu { display: block; }
.pbs-submenu li { margin: 0; padding: 0; }
.pbs-submenu li a {
  display: block; padding: 10px 20px; font-size: 15px; font-weight: 400; line-height: 1.4;
  color: var(--nhn-light-green-dark25); text-decoration: none; white-space: nowrap;
}
.pbs-submenu li a:hover { color: var(--nhn-blue); background: color-mix(in srgb, var(--nhn-blue) 6%, transparent); }
.pbs-submenu li.pbs-nav-active a { color: var(--nhn-blue); font-weight: 700; }
/* Homepage hero nav uses corporate blue for its links (not the sitewide default) - match it here too. */
.pbs-header-hp .pbs-submenu li a { color: var(--nhn-blue); }

#pbs-nav-bun { display: none; }
#pbs-nav-bun a { color: inherit; }
#pbs-nav-bun .pbs-icon { width: 32px; height: 32px; }
.pbs-topnav-close { display: none; }

/* ==========================================================================
   HOMEPAGE HP2 - alternative full-bleed-hero header (includes/header-hp.php)
   Preview only for now at /?hp2=1 - NOT the live homepage. See DEV_NOTES.md.
   ========================================================================== */

/* Topbar - corporate blue background, white text/icons for contrast. */
#pbs-topbar.pbs-topbar-hp { background: var(--nhn-blue); box-shadow: none; color: #fff; }
.pbs-topbar-hp .pbs-contactbar-email a,
.pbs-topbar-hp .pbs-contactbar-number,
.pbs-topbar-hp .pbs-contactbar-account a { color: #fff; }

#pbs-hp-hero-full { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.pbs-hp-hero-full-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* White gradient overlay over the hero image, above the image but below the logo/nav -
   80% opaque at the top, fading to fully transparent by the 40% mark */
.pbs-hp-hero-full-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 50%); z-index: 1; }

/* Logo + nav sit inside the hero itself (not the fixed site-wide navbar), stacked, high up
   (above head-height in the photo, per feedback), and scroll away with the hero - deliberately
   not position:fixed. Fixed px, not a % + px mix - a %-based top scales with viewport HEIGHT, so on
   a shorter/laptop screen the same rule put this behind the topbar even though it looked fine on a
   tall 24" monitor. A flat px value behaves the same on any screen height.
   top anchors the block's TOP edge directly (translateX only, no Y-centering) - previously this used
   translate(-50%,-50%) to center the block around top:120px, which meant the block's on-screen
   position depended on its own rendered HEIGHT. That silently broke at the mobile breakpoint: hiding
   the nav <ul> shrank the block's total height, which shifted the centered midpoint and pushed the
   logo down. Anchoring the top edge directly makes the position independent of content height. */
.pbs-hp-hero-overlay {
  position: absolute; top: calc(var(--topbar-height) + 13.33px); left: 50%; transform: translateX(-50%);
  width: 100%; box-sizing: border-box; padding: 0 20px;
  display: flex; flex-direction: column; align-items: center; gap: 13.33px;
  text-align: center; z-index: 2;
}
/* Matches the site's 1280px content max-width. line-height:0 kills the default inline-image
   whitespace gap below the logo, so the flex `gap` above is the ONLY thing controlling logo-to-line
   spacing - needed to make that distance equal to the topbar-to-logo distance above it. */
.pbs-hp-hero-logo { align-self: stretch; width: 100%; max-width: var(--max-width); margin: 0 auto; text-align: left; line-height: 0; }
.pbs-hp-hero-logo img { width: auto; height: 90px; display: inline-block; }
/* Stretched to the same 1280px cap as the logo above it, links pushed to the far left/right edges
   via space-between - so the row starts and ends flush with the logo's own edges, matching the
   yellow border-top's own width. */
.pbs-header-hp .pbs-topnav { align-self: stretch; width: 100%; max-width: var(--max-width); margin: 0 auto; border-top: 4px solid var(--nhn-yellow); padding-top: 0; }
.pbs-header-hp .pbs-topnav ul { width: 100%; justify-content: space-between; gap: 0; }
/* padding bumped 15px -> 25px each side - eats into the space-between gaps, making them ~20px
   smaller each, while the first/last links stay flush with the container edges */
.pbs-header-hp .pbs-topnav li h2 a { padding: 0 35px; color: var(--nhn-blue); font-size: 18px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
/* The shorthand above unintentionally re-adds the site-wide .pbs-topnav li:last-child override's
   padding-right:0 (same CSS specificity, this rule just comes later) - so the first/last links kept
   35px of dead space, staying inset even though the row itself spans edge-to-edge. Overriding here
   explicitly so the visible text is actually flush with the container edges. */
.pbs-header-hp .pbs-topnav li:first-child h2 a { padding-left: 0; }
.pbs-header-hp .pbs-topnav li:last-child h2 a { padding-right: 0; }
.pbs-header-hp .pbs-topnav li h2 a:hover,
.pbs-header-hp .pbs-topnav li.pbs-nav-active h2 a { color: var(--nhn-yellow); text-decoration-color: var(--nhn-yellow); }
.pbs-header-hp #pbs-nav-bun { color: #fff; }

/* Large yellow/blue "Order Online" button, centered horizontally, 30% up from the bottom of the
   hero image - a separate call-to-action from the site-wide notch button in the fixed navbar. */
.pbs-hp-hero-order-btn {
  position: absolute; left: 50%; bottom: 25%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 22px 56px; background-color: var(--nhn-yellow); color: var(--nhn-blue);
  border-radius: 50px; text-decoration: none; text-transform: uppercase;
  font-size: 24px; font-weight: 700; letter-spacing: 1.5px; white-space: nowrap;
  z-index: 2;
}
.pbs-hp-hero-order-btn:hover { background-color: var(--nhn-blue); color: var(--nhn-yellow); }

/* Login/Register/Cart - same top-right spot as #pbs-navbar-right on every other page (right:20px,
   vertically centered in the header-height band right below the topbar), just floating over the
   hero instead of sitting on a solid navbar bar. position:absolute (not fixed) - anchored inside
   #pbs-hp-hero-full like the logo/nav, so it scrolls away with the hero instead of staying pinned
   once you scroll past it. */
.pbs-hp-hero-login {
  position: absolute; top: var(--topbar-height); right: 30px; height: var(--header-height);
  display: flex; align-items: center; z-index: 993;
}
/* Green + bold, not white - this corner sits under the strongest part of the white hero-image
   gradient overlay, where white text becomes near-invisible (white-on-white). The cart's own icon/
   text already stayed visible thanks to its solid white pill background, but bolded here too so
   all three (Login/Register/Cart) match. */
.pbs-hp-hero-login .pbs-login-text li a { color: var(--nhn-dark-green); font-weight: 700; }
.pbs-hp-hero-login .pbs-login-text li a:hover { color: var(--nhn-blue); }
.pbs-hp-hero-login .pbs-cart { font-weight: 700; background-color: transparent; }
.pbs-hp-hero-login .pbs-cart-qty { color: var(--nhn-dark-green); }

/* #pbs-hp-wrapper (shared id with the live homepage template) normally has margin-top:
   var(--header-total) to clear the fixed navbar bar - this template has no such bar, the hero
   itself fills the opening viewport, so cancel that margin only when it directly follows the
   new hero header. */
header:has(#pbs-hp-hero-full) + #pbs-hp-wrapper { margin-top: 0; }

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

#pbs-hp-wrapper { margin: var(--header-total) 0 0; padding: 0 0 100px; clear: both; position: relative; z-index: 1; }

/* --- HP product categories grid --- */
.pbs-hp-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1%;
  margin: 40px 0;
  padding: 20px 10px;
  background-color: color-mix(in srgb, var(--accent-olive) 20%, transparent);
  z-index: 2;
}
.pbs-products-cat-box { background-color: var(--color-bg); }
.pbs-products-cat-box a { text-decoration: none; }
.pbs-products-cat-box a:hover { opacity: 0.5; text-decoration: none; }
.pbs-products-cat-box-img img { width: 100%; border-radius: 12px; }
.pbs-products-cat-box-text { padding: 0 20px; text-align: center; }
.pbs-products-cat-box-text h2, .pbs-products-cat-box-text h2 a { color: var(--nhn-blue); font-size: 28px; font-weight: 200; }
.pbs-products-cat-box-text h2 a:hover { color: var(--accent-grape); text-decoration: none; }
.pbs-products-cat-box-btn { margin: 20px auto; }

/* --- HP text blocks --- */
.pbs-hp-text { margin: 0 auto; padding: 20px; text-align: left; }
.pbs-hp-text h1, .pbs-hp-text h2, .pbs-hp-text h3, .pbs-hp-text h4, .pbs-hp-text h5, .pbs-hp-text h6 {
  color: var(--nhn-light-green); font-size: 20px; font-weight: 400; line-height: 28px; text-align: left; text-transform: none; display: block;
}
.pbs-hp-text p { margin: 0; padding: 10px 0; text-align: left; }
.pbs-hp-text ol { margin: 10px 0 0 50px; padding: 0; }
.pbs-hp-text ul { margin: 10px 0 0; padding: 0; }
.pbs-hp-text ul li { list-style: none; margin: 10px 0 0; }

.pbs-hp-read-more { margin: 60px auto; display: inline-block; }
.pbs-hp-read-more a { padding: 15px 10px; color: var(--color-bg); text-transform: uppercase; background: var(--nhn-dark-green); text-decoration: none; text-align: center; }
.pbs-hp-read-more a:hover { background: var(--nhn-blue); }

/* --- HP Hero (Section 1) --- */
#pbs-hp-hero { margin: 0; line-height: 0; position: relative; }
#pbs-hp-hero img { width: 100%; display: block; }
.pbs-hp-hero-title {
  position: absolute; right: 40px; bottom: 40px; margin: 0;
  color: #fff; font-size: clamp(24px, 4vw, 44px); font-weight: 400; text-align: right;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* --- HP centered text sections (Sections 2, 3, 5) --- */
/* Shared "scroll-cue card" look for Welcome and Wholesale Plants: rounded top corners + a shallow
   "V" notch cut into the top-center edge, hinting at scroll-down. The notch is an inline SVG mask
   stretched to the box's exact size (preserveAspectRatio="none" so it isn't letterboxed), rather
   than a separate icon layered on top - this actually cuts the image behind it through, which a
   drawn-on-top chevron icon wouldn't. The notch is a genuine transparent HOLE (evenodd fill-rule
   punching it out of the white shape) rather than a solid black shape - a black fill only works
   under luminance-based masking, but Chromium defaults `mask-image` on a plain image URL (as
   opposed to an SVG <mask> element reference) to ALPHA masking, under which solid black is still
   fully opaque and cuts nothing. A real alpha=0 hole cuts correctly either way. */
#pbs-hp-welcome, #pbs-hp-explore, #pbs-hp-contract-growing, #pbs-hp-support {
  background:#fff; border-radius: 24px 24px 0 0; position: relative; z-index: 1;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IndoaXRlIiBkPSJNMCwwIEgxMDAgVjEwMCBIMCBaIE00NSwwIEw1NSwwIEw1MCw3IFoiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IndoaXRlIiBkPSJNMCwwIEgxMDAgVjEwMCBIMCBaIE00NSwwIEw1NSwwIEw1MCw3IFoiLz48L3N2Zz4=");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: top center; mask-position: top center;
}
#pbs-hp-welcome { margin: -50px auto 0 auto; padding-top: 10px; display:block; }
/* Slight overlap onto the divider image above each - shallower than Welcome's -50px overlap onto
   the hero, since the ask was "slightly overlaying", not the same pull. */
#pbs-hp-explore, #pbs-hp-contract-growing, #pbs-hp-support { margin: -30px auto 0 auto; padding-top: 10px; }
.pbs-hp-text-center { margin: 0 auto; padding: 60px 20px 0; max-width: var(--max-width); text-align: center; }
.pbs-hp-text-center h2, .pbs-hp-text-center h3 { margin: 0 0 20px; color: var(--nhn-dark-green); font-size: 28px; font-weight: 400; text-align: center; }
.pbs-hp-welcome-text, .pbs-hp-explore-text, .pbs-hp-contract-growing-text, .pbs-hp-support-text { max-width: 800px; margin: 0 auto; color: var(--color-text); text-align: center; }
.pbs-hp-contract-growing-text p, .pbs-hp-support-text p { margin: 0; padding: 0 0 10px; text-align: center; }
/* Welcome and Wholesale Plants intros justified (per request) - Contract Growing/Support stay centered. */
.pbs-hp-welcome-text, .pbs-hp-explore-text { text-align: justify; }
.pbs-hp-welcome-text p, .pbs-hp-explore-text p { margin: 0; padding: 0 0 10px; text-align: justify; }

/* --- HP Boxes section (Section 2b) - background image set via CMS, inline style in template --- */
#pbs-hp-boxes {
  height:500px; max-height:500px; margin: 40px 0 0; padding: 60px 20px; background-color: var(--color-offwhite);
  background-size: cover; background-position: center;
}
#pbs-hp-boxes .pbs-feature-card { background-color: var(--nhn-light-green); }
#pbs-hp-boxes .pbs-feature-card h3 { color: #fff; }
#pbs-hp-boxes .pbs-feature-card p { color: #fff; }
#pbs-hp-boxes .pbs-feature-card:hover { background-color: #fff; }
#pbs-hp-boxes .pbs-feature-card:hover h3 { color: var(--nhn-dark-green); }
#pbs-hp-boxes .pbs-feature-card:hover p { color: var(--color-text); }

/* --- HP divider background bands (Contract Growing / Support, Sections 5 & 7) - plain full-width
   image bands between text cards, same visual role as the Boxes band above but no card content of
   their own; the following card's negative top margin pulls up to overlap the bottom of this. */
.pbs-hp-divider-bg {
  height: 400px; max-height: 400px; margin: 40px 0 0; background-color: var(--color-offwhite);
  background-size: cover; background-position: center;
}

/* --- HP category grid (Section 4) - full browser width, fixed 4-across (was auto-fit at a
   220px minimum, which packed in 5+ columns on wide screens) --- */
.pbs-hp-cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin: 40px 0 0; padding: 0 20px 100px;
}
.pbs-hp-cat-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; display: block; text-decoration: none; }
.pbs-hp-cat-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbs-hp-cat-tile-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 16px; text-align: center; color: var(--color-bg);
  background: linear-gradient(to top, color-mix(in srgb, var(--nhn-dark-green) 85%, transparent) 0%, transparent 100%);
}
.pbs-hp-cat-tile-title { font-size: 18px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; }
.pbs-hp-cat-tile-desc { font-size: 14px; }

/* ==========================================================================
   CONTENT PAGES (generic)
   ========================================================================== */

#pbs-pages-wrapper { margin: calc(var(--header-total) + 40px) 0 50px; padding: 0 0 100px; z-index: 1; }
#pbs-pages-wrapper form { margin: 0; padding: 0 0 100px; height: 100%; }

.pbs-page-width { margin: 0 auto; padding: 0 0 100px; max-width: var(--max-width); position: relative; z-index: 1; }
.pbs-full-width { margin: 0 auto; position: relative; z-index: 1; }

.pbs-pages-text { padding: 30px 20px; z-index: 1; }
.pbs-pages-text h1 { margin: 0 0 30px; color: var(--nhn-dark-green); font-size: 24px; text-align: center; display: block; }
/* Secondary headings within content pages now use h2 (not h3) - see DEV_NOTES.md. Same visual
   treatment h3 used to carry (24px, left-aligned) rather than the old 36px/centered page-subtitle
   look, which had exactly one real usage sitewide (admin-shipping-south-africa) and read fine as an
   ordinary left-aligned subheading once switched. */
.pbs-pages-text h2, .pbs-pages-text h3, .pbs-pages-text h4, .pbs-pages-text h5, .pbs-pages-text h6 { color: var(--nhn-dark-green); font-size: 24px; line-height: 24px; display: block; text-align: left; }
.pbs-pages-text p { margin: 0; padding: 2px 0 18px; text-align: left; }
.pbs-pages-text ul { margin: 10px 0 0 40px; padding: 0; list-style: square; }
.pbs-pages-text ol { margin: 10px 0 0 50px; padding: 0; }

/* Generic "page has a background photo" treatment - driven by the sections.backgroundImage CMS
   field (templates/page-template.php renders the .pbs-pages-bg div only when one is set), not
   hardcoded per body-id. Full-bleed edge-to-edge (like the homepage hero), starting right below the
   fixed navbar and running the full height of the page content - achieved by breaking the bg layer
   out to 100vw via the standard "full-bleed inside a centered container" trick (left:50%;
   width:100vw; translateX(-50%)).
   #pbs-pages-wrapper normally has margin-top: calc(header-total + 40px) and margin-bottom: 50px -
   margin sits OUTSIDE the element's box, so a child positioned relative to that box can never reach
   into it (see the DEV_NOTES.md gotcha) - stripped here so the wrapper, and the image with it, runs
   flush from the navbar to the footer whenever a background is present. */
#pbs-pages-wrapper.pbs-pages-wrapper-has-bg { position: relative; margin-top: var(--header-total); margin-bottom: 0; }
.pbs-pages-bg {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  z-index: -1;
}
.pbs-pages-wrapper-has-bg .pbs-pages-text { padding-top: 80px; padding-bottom: 60px; }

/* Generic hero box + CTA button - template-rendered (templates/page-template.php), driven entirely
   by CMS fields (backgroundImage triggers the box + heading from sectionName; ctaLabel/ctaLink
   trigger the button). Replaces the old per-page .pbs-contract-growing-hero-box/.pbs-wholesale-
   hero-box duplication - a full content retype in the CMS can no longer lose the box, heading, or
   button, only the free-text body copy inside it. See DEV_NOTES.md. */
.pbs-page-hero-box {
  max-width: 800px; margin: 0 auto 30px; padding: 30px 40px;
  background-color: rgba(255, 255, 255, 0.85); border-radius: 20px; text-align: left;
}
/* Beats the sitewide .pbs-pages-text h1 (same specificity: one class + one type) on source order -
   kept after it in the file for that reason, not just style. */
.pbs-page-hero-box h1 { margin: 0 0 2px; text-align: left; color: var(--nhn-blue); text-transform: uppercase; }
.pbs-page-hero-subtitle { margin: 0 0 10px; font-size: 18px; color: var(--color-text); }
.pbs-page-hero-box h2 { font-size: 22px; }
/* Robust against content edits - targets whichever heading/paragraph follows a list, rather than a
   specific heading's text, so a margin like this survives a future content rewrite. */
.pbs-page-hero-box ul + h2,
.pbs-page-hero-box ul + p { margin-top: 20px; }
.pbs-page-cta { padding: 10px 0 0; text-align: center; }
.pbs-page-cta-btn {
  display: inline-block; padding: 12px 32px;
  background-color: var(--nhn-yellow); color: var(--nhn-blue);
  border-radius: 20px; text-decoration: none; text-transform: uppercase; font-weight: 700;
}
.pbs-page-cta-btn:hover { background-color: var(--nhn-blue); color: var(--nhn-yellow); }

/* 404 "Page Not Found" message (includes/page-engine.php builds this markup) */
.pbs-404-message { text-align: center; }
.pbs-404-message h1 { margin-top: 50px; font-size: 28px; }
.pbs-404-message p { text-align: center; font-size: 18px; }
.pbs-404-btn {
  display: inline-block; margin-top: 50px; padding: 12px 32px;
  background-color: var(--nhn-blue); color: var(--nhn-yellow);
  border-radius: 20px; text-decoration: none; text-transform: uppercase; font-weight: 700;
}
.pbs-404-btn:hover { background-color: var(--nhn-yellow); color: var(--nhn-blue); }

.pbs-pages-text ol li { list-style: decimal; margin: 10px 0 0 20px; }
.pbs-pages-text iframe { margin: 0 auto; width: 96%; min-height: 37vh; max-height: 100vh; display: block; }

.pbs-page-title-icon { margin: 0 auto 50px; width: 300px; text-align: center; }
.pbs-page-title-icon img { margin: 0 auto; width: 300px; }

/* --- Feature grid (Services / Why Choose Us cards) --- */
.pbs-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
  margin: 30px auto 0; max-width: var(--max-width);
}
.pbs-feature-card {
  padding: 30px 24px; text-align: center; background-color: var(--color-offwhite);
  border-radius: 6px; display: block; text-decoration: none; transition: background-color 0.2s ease;
}
.pbs-feature-card:hover { background-color: #fff; }
.pbs-feature-card:hover h3 { color: var(--nhn-dark-green); }
.pbs-feature-card-icon { margin: 0 auto 16px; width: 48px; height: 48px; color: var(--nhn-dark-green); }
.pbs-feature-card h3 { margin: 0; color: var(--nhn-dark-green); font-size: 20px; text-align: center; transition: color 0.2s ease; }
.pbs-feature-card p { padding: 10px 0 0; color: var(--color-text); text-align: center; }
.pbs-feature-card-btn {
  margin-top: 16px; padding: 8px 20px; display: inline-block; color: var(--color-bg);
  background-color: var(--nhn-dark-green); border-radius: 6px; text-decoration: none;
  text-transform: uppercase; font-size: 13px; transition: background-color 0.2s ease;
}
.pbs-feature-card-btn:hover { background-color: var(--nhn-blue); }

/* --- ADMIN-TEMPLATE STATIC PAGES (payments/shipping/terms/etc) --- */
#pbs-admin-wrapper { margin: var(--header-total) 0 50px; padding: 0 0 100px; z-index: 1; }
.pbs-admin-wide { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; }
#pbs-admin-left { width: 20%; float: left; z-index: 1; }
#pbs-admin-right { width: 80%; float: left; z-index: 1; }
#pbs-admin { margin: 0 auto; max-width: var(--max-width); z-index: 1; }
.pbs-admin-text { padding: 30px 20px; z-index: 1; }
.pbs-admin-text h1 { color: var(--nhn-dark-green); font-size: 24px; text-align: center; display: block; }
.pbs-admin-text h2 { color: var(--nhn-dark-green); font-size: 36px; text-align: center; display: block; }
.pbs-admin-text h3 { margin: 10px 0 6px; color: var(--nhn-blue); font-size: 24px; line-height: 24px; display: block; text-align: left; }
.pbs-admin-text p { margin: 0; padding: 2px 0 18px; text-align: left; }
.pbs-admin-text ul, .pbs-admin-text li { list-style: none; margin: 10px 0 0 20px; padding: 0; }
.pbs-admin-text ol { margin: 10px 0 0 50px; padding: 0; }
.pbs-admin-text ol li { list-style: decimal; margin: 10px 0 0 20px; }
.pbs-admin-text iframe { margin: 0 auto; width: 96%; min-height: 37vh; max-height: 100vh; display: block; }

/* --- TEAM --- */
.pbs-team-box { padding: 0 0 20px; display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.pbs-team-box img { max-width: 260px; }

/* ==========================================================================
   PRODUCTS
   ========================================================================== */

#pbs-products-wrapper { display: flex; flex-wrap: wrap; margin: calc(var(--header-total) + 40px) 0 20px; padding: 0 0 20px; clear: both; z-index: 1; }
#pbs-top { flex: 0 0 100%; }

.pbs-products-narrow { margin: 0 auto; padding: 0 0 100px; max-width: 768px; position: relative; z-index: 1; }
.pbs-products-medium { margin: 0 auto; padding: 0 0 100px; max-width: var(--max-width); position: relative; z-index: 1; }
.pbs-products-wide { margin: 0 auto; position: relative; z-index: 1; }

/* --- Search / filter row --- */
.pbs-products-query, .pbs-products-filters, .pbs-products-sort-makers, .pbs-products-currencies, .pbs-products-perpage {
  display: flex; flex-direction: column; gap: 6px;
}
.pbs-products-query label, .pbs-products-filters label, .pbs-products-sort-makers label, .pbs-products-currencies label {
  color: var(--accent-olive);
}
.pbs-currencies-select, .pbs-search-input, .pbs-filters-select, .pbs-artists-select, .pbs-perpage-select {
  padding: 4px 10px; height: 50px; color: var(--accent-putty); border: 1px solid color-mix(in srgb, var(--accent-putty) 40%, transparent);
}
.pbs-search-btn { padding: 4px; height: 50px; color: var(--color-bg); cursor: pointer; background-color: var(--accent-putty); border: 1px solid color-mix(in srgb, var(--accent-putty) 40%, transparent); }
.pbs-products-alert { grid-column: 1 / -1; margin: 0; padding: 50px 0 0; color: var(--nhn-light-green); clear: both; }

/* --- Toolbar (type + sort selects, top right, compact) --- */
.pbs-products-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin: 40px 0 30px; }
.pbs-products-toolbar .pbs-products-filters,
.pbs-products-toolbar .pbs-products-sort-makers,
.pbs-products-toolbar .pbs-products-perpage { flex-direction: row; align-items: center; gap: 6px; }
.pbs-products-toolbar label { color: var(--grey-700); }
.pbs-products-toolbar .pbs-filters-select,
.pbs-products-toolbar .pbs-artists-select,
.pbs-products-toolbar .pbs-perpage-select { padding: 4px 10px; height: 31px; line-height: 1; font-size: 14px; color: var(--grey-700); border-radius: 6px; appearance: none; -webkit-appearance: none; background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center / 14px; padding-right: 28px; }

.pbs-products-pagination { margin: 0 0 0 auto; padding: 4px 10px; height: 31px; line-height: 1; width: fit-content; border: 1px solid var(--grey-200); border-radius: 6px; font-size: 14px; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pbs-products-toolbar .pbs-products-pagination { margin-left: 0; }
.pbs-products-pagination a { padding: 2px 8px; font-size: 14px; color: var(--color-bg); background: var(--accent-putty); font-weight: 200; text-decoration: none; }
.pbs-products-pagination span { font-size: 14px; }
.pbs-products-pagination a:hover { background: color-mix(in srgb, var(--accent-putty) 50%, transparent); }

.pbs-products-view-toggle { display: flex; gap: 4px; }
.pbs-view-toggle-btn {
  padding: 6px; width: 31px; height: 31px; color: var(--grey-600); cursor: pointer;
  background-color: var(--color-bg); border: 1px solid var(--grey-200); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.pbs-view-toggle-btn .pbs-icon { width: 16px; height: 16px; }
.pbs-view-toggle-btn:hover { color: var(--nhn-dark-green); }
.pbs-view-toggle-active { color: var(--color-bg); background-color: var(--nhn-dark-green); border-color: var(--nhn-dark-green); }

/* --- Products layout: sidebar + grid --- */
#pbs-products-left { flex: 0 0 280px; align-self: flex-start; height: calc(100vh - var(--header-total)); position: sticky; top: var(--header-total); left: 0; z-index: 1; }
.pbs-products-cat-text { margin: 15px 20px; padding: 18px; font-size: 14px; background-color: #f5f5f5; border-radius: 6px; text-align: left; }
.pbs-products-cat-text h2 { color: var(--nhn-dark-green); font-size: 24px; font-weight: 200; text-transform: uppercase; }
.pbs-products-cat-text ul { margin: 0; padding: 0; list-style: none; }
.pbs-products-cat-text li { margin: 4px 0; padding: 6px 0 12px; border-bottom: 1px solid var(--grey-100); }
.pbs-products-cat-text li:last-child { border-bottom: 0; }
.pbs-products-cat-text li:nth-child(1), .pbs-products-cat-text li:nth-child(2) { border-bottom: 0; }
.pbs-products-cat-text li:nth-child(3) { margin-top: -20px; }
.pbs-products-cat-text li a { color: var(--color-link); text-decoration: none; display: flex; justify-content: space-between; align-items: center; }
.pbs-products-cat-text li a:hover { color: var(--nhn-light-green); }
#cat-show-all { font-weight: 700; }
#cat-show-all::after { content: '\25B8'; }
.pbs-cat-count { color: inherit; }
.pbs-active-cat { color: var(--nhn-light-green); display: flex; justify-content: space-between; align-items: center; }

#pbs-products-right { flex: 1 1 auto; min-width: 0; z-index: 1; }

.pbs-products-listing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
  column-gap: 2%;
  row-gap: 40px;
}
.pbs-products-box { position: relative; }
.pbs-products-box > a { position: relative; display: block; }
.pbs-products-box img { width: 100%; margin-bottom: 5px; display: block; border-radius: 12px; }

/* --- List view --- */
.pbs-products-list { display: flex; flex-direction: column; }
.pbs-products-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 20.7%) minmax(0, 17%) minmax(0, 12%) minmax(0, 1fr) minmax(0, 10%) minmax(0, 8%);
  align-items: center; gap: 12px;
  padding: 4px 12px;
}
.pbs-products-row:not(.pbs-products-row-header) { border-top: 1px solid var(--grey-100); }
.pbs-products-row-header + .pbs-products-row { border-top: 0; }
.pbs-products-row-header { margin-top: 20px; padding: 5px 10px; color: #000; font-weight: 700; background-color: #f5f5f5; }
.pbs-products-row-header .pbs-products-row-name { font-weight: 700; }
.pbs-products-row-header .pbs-products-row-name a { color: #000; }
.pbs-products-row-header .pbs-products-row-image { width: auto; height: auto; }
.pbs-products-row-header .pbs-products-row-price { font-weight: 700; }
.pbs-products-row-header .pbs-products-row-cat,
.pbs-products-row-header .pbs-products-row-type,
.pbs-products-row-header .pbs-products-row-price { color: #000; }
.pbs-products-row-sort-link { color: inherit; text-decoration: none; }
.pbs-products-row-sort-link:hover { color: var(--nhn-light-green); }
.pbs-products-row-image { width: 60px; height: 60px; overflow: hidden; border-radius: 6px; display: block; }
.pbs-products-row-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbs-products-row-name { min-width: 0; font-weight: 400; }
.pbs-products-row-name a { color: var(--nhn-dark-green); text-decoration: none; }
.pbs-products-row-name a:hover { color: var(--accent-olive); }
.pbs-products-row-cat { min-width: 0; color: #000; }
.pbs-products-row-type { min-width: 0; color: #000; }
.pbs-products-row-sizes { min-width: 0; display: flex; flex-wrap: wrap; align-content: center; gap: 4px; }
.pbs-products-row-size-item { padding: 2px 6px; font-size: 12px; color: var(--grey-500); background-color: var(--grey-100); border-radius: var(--radius); }
.pbs-products-row-size-instock { color: var(--color-bg); background-color: var(--nhn-light-green); font-weight: 700; }
.pbs-products-row-price { min-width: 0; color: #000; font-weight: 400; white-space: nowrap; }
.pbs-products-row-order-btn {
  justify-self: start; padding: 6px 16px; color: var(--color-bg); background-color: var(--nhn-dark-green);
  border-radius: 6px; text-decoration: none; text-transform: uppercase; font-size: 14px;
}
.pbs-products-row-order-btn:hover { background-color: var(--nhn-light-green); color: var(--color-bg); }

.pbs-product-img-icon { position: absolute; top: 20px; right: 20px; width: 84px; z-index: 3; }
.pbs-product-img-icon img { width: 100%; }

.pbs-products-text { padding: 0 20px 0; font-size: 14px; color: var(--accent-brown); font-weight: 200; text-align: left; }
.pbs-products-code { display: none; }
.pbs-products-category { margin: 8px 0 4px; padding: 0; color: #999; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.pbs-products-title { margin: 4px 0; font-size: 15px; color: #333; font-weight: 600; text-align: center; }
.pbs-products-title a { font-weight: 600; color: #333; text-decoration: none; }
.pbs-products-title a:hover { color: var(--nhn-light-green); text-decoration: none; }
.pbs-products-summary { padding: 7px 20px 0 10px; text-align: center; }

.pbs-products-price { margin: 4px 0; text-align: center; color: #333; font-size: 14px; font-weight: 400; }

.pbs-products-quantity { padding: 22px 0 0 20px; }
.pbs-products-qty-input { padding: 4px; width: 40px; border: 1px solid var(--grey-200); }

.pbs-products-details { margin: 10px auto; display: block; text-align: center; }
.pbs-products-details a { padding: 5px 0; color: var(--accent-pink); font-weight: 200; text-transform: uppercase; text-decoration: none; display: block; }
.pbs-products-details a:hover { color: var(--accent-forest); text-decoration: none; }

.pbs-input-products { margin: 50px 20px 0 0; padding: 8px 16px; color: var(--color-bg); background-color: var(--accent-grape); border: 1px solid var(--accent-putty); float: left; }

/* --- Product detail page --- */
#pbs-products-wrapper > form { flex: 1 1 100%; }
#pbs-prod-detail { display: flex; flex-wrap: wrap; gap: 4%; margin: 40px auto 0; padding: 0 0 30px; max-width: var(--max-width); }

.pbs-prod-img-row { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.pbs-prod-img-thumbs { padding: 0; }
.pbs-prod-img-thumbs img { opacity: 1; cursor: pointer; border-radius: 12px; }
.pbs-prod-img-thumbs img:hover { opacity: 0.7; }

.pbs-prod-img-large { grid-column: 2; grid-row: 1; position: relative; }
.pbs-prod-img-expand-btn { margin: 0; padding: 0; width: 100%; border: 0; background: none; cursor: zoom-in; display: block; }
.pbs-prod-img-expand-btn img { width: 100%; border-radius: 12px; }

/* Native product-image lightbox (replaces the old Fancybox dependency) */
#pbs-image-dialog { max-width: 90vw; max-height: 90vh; border: 0; border-radius: var(--radius); padding: 0; }
#pbs-image-dialog::backdrop { background: color-mix(in srgb, var(--black) 75%, transparent); }
#pbs-image-dialog-img { display: block; max-width: 90vw; max-height: 90vh; }
.pbs-image-dialog-close {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-bg) 80%, transparent); color: var(--color-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pbs-image-dialog-close .pbs-icon { width: 18px; height: 18px; }

/* Native gallery lightbox (multi-image, arrows + title caption - mirrors the dialog above).
   No solid card behind the image - the dialog itself is transparent, the backdrop is a translucent
   white (not black), and the title sits in a gradient overlay on the image's own bottom edge rather
   than a separate solid caption bar underneath it. */
#pbs-gallery-lightbox {
  position: relative; max-width: 90vw; max-height: 90vh; width: 800px; border: 0; border-radius: var(--radius);
  padding: 0; background: transparent; flex-direction: column; align-items: center; justify-content: center;
}
#pbs-gallery-lightbox[open] { display: flex; }
#pbs-gallery-lightbox::backdrop { background: color-mix(in srgb, #fff 92%, transparent); }
/* Shrink-wraps to the image's actual rendered size (not the dialog's fixed 800px) so the caption
   overlay below matches the image's real width instead of stretching wider than it on short
   viewports where max-height, not width, ends up being the binding constraint on the image */
#pbs-gallery-lightbox-media { position: relative; display: inline-flex; max-width: 100%; max-height: 90vh; }
#pbs-gallery-lightbox-img { display: block; max-width: 100%; max-height: 90vh; object-fit: contain; background: transparent; border-radius: 15px; }
#pbs-gallery-lightbox-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 20px 14px;
  min-height: 20px; color: #fff; font-size: 15px; font-stretch: 75%; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  border-radius: 0 0 15px 15px; pointer-events: none;
}
.pbs-gallery-lightbox-prev, .pbs-gallery-lightbox-next {
  border: 0; border-radius: 50%; background: var(--nhn-light-green); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
/* Arrows sit off the image entirely - fixed to the browser viewport, vertically centered, 50px
   from the left/right edge of the window (not the modal), same 50px offset the close button uses */
.pbs-gallery-lightbox-prev, .pbs-gallery-lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 20px; }
.pbs-gallery-lightbox-prev { left: 50px; }
.pbs-gallery-lightbox-next { right: 50px; }

.pbs-prod-img { flex: 1 1 58%; display: grid; grid-template-columns: 70px 1fr; gap: 10px; }
.pbs-prod-img img { width: 100%; }

.pbs-prod-desc { flex: 1 1 38%; text-align: left; }
.pbs-prod-text { padding: 0; }
.pbs-prod-text p { margin: 0; padding: 10px 0; }
.pbs-prod-text h1 { color: var(--nhn-dark-green); font-size: 24px; font-weight: 400; line-height: 42px; display: inline; }
.pbs-prod-text h2, .pbs-prod-text h3 { color: var(--nhn-dark-green); font-size: 18px; font-weight: 200; display: inline; }

.pbs-prod-row { margin: 8px 0; display: block; }
.pbs-prod-title { color: var(--accent-gold); font-weight: 200; }
.pbs-prod-category { margin: 0 0 10px; }
.pbs-prod-code { margin: 0 0 30px; }
.pbs-prod-artist-name { display: none; color: var(--accent-olive); cursor: pointer; clear: both; }

.pbs-prod-sizes-title { margin: 30px 0 10px; line-height: 20px; }
.pbs-prod-sizes { display: none; margin: 0 0 30px; line-height: 20px; float: left; }
.pbs-prod-size-unit { margin-top: 10px; clear: both; }
.pbs-prod-unit-btns { padding: 4px 8px; color: var(--color-bg); background-color: var(--accent-grape); cursor: pointer; text-transform: uppercase; border: 1px solid var(--accent-putty); float: left; }

.pbs-prod-sizes-available { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; clear: both; }
.pbs-prod-size-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 2px solid transparent; border-radius: var(--radius); }
.pbs-prod-size-instock { background-color: var(--nhn-light-green); border-color: var(--nhn-light-green); color: var(--color-bg); }
.pbs-prod-size-outofstock { color: var(--grey-500); background-color: var(--grey-100); }
.pbs-prod-size-label { flex: 1 1 auto; }
.pbs-prod-size-price { flex: 0 0 auto; font-weight: 700; }
.pbs-prod-size-qty { flex: 0 0 auto; width: 110px; padding: 4px 8px; background-color: var(--color-bg); text-align: center; border: 1px solid var(--grey-200); border-radius: var(--radius); }
.pbs-prod-size-qty:disabled { color: var(--grey-500); background-color: var(--grey-100); cursor: not-allowed; }

.pbs-prod-input-qty { padding: 8px 16px; border: 1px solid var(--grey-200); }
.pbs-prod-submit-btns { margin-bottom: 40px; }
.pbs-prod-cart-btn, .pbs-prod-view-btn, .pbs-prod-back {
  margin: 10px 20px 0 0; cursor: pointer; float: left;
}
.pbs-prod-cart-btn, .pbs-prod-view-btn, .pbs-prod-back a {
  padding: 8px 16px; text-transform: uppercase;
  border: 1px solid var(--accent-putty); border-radius: 6px;
  font-size: inherit; font-family: inherit; line-height: normal;
}
.pbs-prod-cart-btn { color: var(--color-bg); background-color: var(--nhn-dark-green); border-color: var(--nhn-dark-green); }
.pbs-prod-view-btn { color: var(--nhn-dark-green); background-color: var(--color-bg); border-color: var(--nhn-dark-green); }

.pbs-prod-back { margin-right: 0; padding: 0; }
.pbs-prod-back a {
  color: var(--color-bg); background-color: var(--nhn-light-green); border-color: var(--nhn-light-green);
  text-decoration: none; display: block;
}
.pbs-prod-back a:hover { background-color: var(--nhn-dark-green); }

.pbs-prod-social-media { float: left; clear: both; }

.pbs-prod-desc-text p { margin: 0; padding: 10px 0; }
.pbs-prod-desc-text h2, .pbs-prod-desc-text h3 { color: var(--nhn-dark-green); font-size: 18px; font-weight: 200; display: inline; }

.pbs-prod-recs { display: block; margin-top: 60px; width: 100%; }
.pbs-prod-recs-title { grid-column: 1 / -1; margin: 20px 0 10px; padding: 10px 0 10px 30px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 400; text-align: left; }
.pbs-prod-recs-area {
  margin: 0 auto; padding-bottom: 20px; max-width: var(--max-width-wide); text-align: center; border-top: 1px solid var(--nhn-light-green);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
}
.pbs-prod-recs-box { position: relative; }
.pbs-prod-recs-box img { width: 100%; border-radius: 12px; }

/* --- Expanding image overlay --- */
#imgtext { position: absolute; bottom: 15px; left: 15px; color: var(--color-bg); }
.closebtn { position: absolute; top: 10px; right: 15px; color: var(--color-bg); cursor: pointer; }

/* --- Custom profile modal (artist/maker bio popup — not a Bootstrap modal) --- */
.modal-overlay { position: fixed; inset: 0; background-color: color-mix(in srgb, var(--black) 60%, transparent); z-index: 10000; }
.modal-area {
  margin: 0 auto; padding: 30px; width: 60%; max-width: 720px;
  background-color: var(--color-bg); position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 90vh; overflow: auto;
  z-index: 10001; border-radius: var(--radius);
}
.modal-area iframe { width: 100%; height: 98vh; border: 0; }
.modal-area img { margin: 0 20px 10px 0; width: 30%; float: left; }
.modal-area #profile-name { padding-bottom: 20px; }

/* --- Products order form --- */
#pbs-order-form-wrapper { margin: calc(var(--header-total) + 40px) 0 50px; padding: 0 0 100px; clear: both; z-index: 1; }
.pbs-order-form-currencies label { color: var(--accent-olive); }
.pbs-order-form-narrow { margin: 0 auto; padding: 0 0 100px; max-width: 768px; position: relative; z-index: 1; }
.pbs-order-form-medium { margin: 0 auto; padding: 0 10px 100px; max-width: var(--max-width); position: relative; z-index: 1; }
.pbs-order-form-wide { margin: 0 auto; position: relative; z-index: 1; }

#pbs-order-form { margin: 0 auto; max-width: var(--max-width-wide); border: 1px solid color-mix(in srgb, var(--accent-putty) 20%, transparent); border-radius: 6px; }
.pbs-order-form-row { width: 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: center; }
#pbs-order-form .pbs-order-form-row, #pbs-user-order-confirm-products .pbs-order-form-row { margin: 0 4px; padding: 4px 12px; border-bottom: 1px solid color-mix(in srgb, var(--grey-200) 50%, white); }
#pbs-order-form .pbs-order-form-row:has(+ .pbs-order-form-total-row), #pbs-user-order-confirm-products .pbs-order-form-row:has(+ .pbs-order-form-total-row) { border-bottom: 0; }
#pbs-order-form .pbs-order-form-total-row { border-bottom: 0; }
.pbs-order-form-text { margin: 5px; padding: 30px; }
.pbs-order-form-text h1 { margin: 0 0 30px; color: var(--nhn-dark-green); font-size: 24px; text-align: center; display: block; }
.pbs-order-form-text p { margin: 0; padding: 10px 0; }

.pbs-order-form-image { flex: 0 0 3.75%; }
.pbs-order-form-image img { width: 100%; }
.pbs-order-form-id { flex: 0 0 12%; text-align: center; }
.pbs-order-form-name { flex: 1 1 28%; }
.pbs-order-form-size { flex: 0 0 12%; text-align: center; }
.pbs-order-form-price { flex: 0 0 10%; text-align: center; }
.pbs-order-form-qty { flex: 0 0 110px; text-align: right; }
.pbs-order-form-qty-input { width: 90px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent-putty) 20%, transparent); border-radius: 6px; -moz-appearance: textfield; appearance: textfield; }
.pbs-order-form-qty-input::-webkit-inner-spin-button,
.pbs-order-form-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pbs-order-form-remove { margin-left: 8px; flex: 0 0 19px; }
.pbs-order-form-remove-btn {
  padding: 0; width: 19px; height: 19px; font-size: 10px; line-height: 1;
  color: var(--color-bg); cursor: pointer; background-color: var(--nhn-light-green);
  border: 1px solid var(--nhn-light-green); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.pbs-order-form-unit-total { flex: 0 0 13%; font-weight: 400; text-align: right; margin-left: auto; }
.pbs-order-form-total-title { flex: 1 1 85%; font-weight: 600; text-align: right; }
.pbs-order-form-grand-total { flex: 0 0 15%; font-weight: 600; text-align: right; }

/* products-order-form page: currency selector still hidden (single ZAR pricing) */
#pbs-order-form-wrapper .pbs-order-form-currencies { display: none; }

.pbs-order-form-row:has(.pbs-order-form-no-orders) { flex-direction: column; justify-content: center; text-align: center; }
.pbs-order-form-no-orders { margin: 0 auto; padding: 1%; width: 60%; border: 1px solid color-mix(in srgb, var(--accent-putty) 20%, transparent); border-radius: 6px; }

.pbs-order-form-btns { margin: 20px auto; padding: 10px 20px; display: flex; justify-content: center; align-items: center; gap: 2%; }

a.pbs-order-form-login-btn, a.pbs-order-form-continue-btn, a.pbs-place-order-btn, a.pbs-order-form-back-link-btn {
  margin: 0 1%; padding: 10px 20px; color: var(--color-bg); background-color: var(--accent-grape);
  cursor: pointer; border: 1px solid var(--accent-putty); border-radius: 6px; display: inline-block; text-align: center;
  white-space: nowrap; flex: 0 0 auto;
}
a.pbs-order-form-continue-btn, a.pbs-place-order-btn { background-color: var(--nhn-dark-green); border-color: var(--nhn-dark-green); }
a.pbs-order-form-login-btn, a.pbs-order-form-back-link-btn { background-color: var(--nhn-light-green); border-color: var(--nhn-light-green); }
a.pbs-order-form-login-btn, a.pbs-order-form-continue-btn, a.pbs-place-order-btn, a.pbs-order-form-back-link-btn { font-weight: 700; }
a.pbs-order-form-continue-btn:hover, a.pbs-order-form-login-btn:hover, a.pbs-place-order-btn:hover, a.pbs-order-form-back-link-btn:hover { color: var(--black); }

.pbs-order-form-back { margin: 50px auto 0; text-align: center; }
.pbs-order-form-back-btn { padding: 4px 8px; width: 80px; height: 36px; color: var(--color-bg); cursor: pointer; background-color: var(--nhn-light-green); border: 1px solid var(--nhn-light-green); border-radius: 6px; font-weight: 700; }
.pbs-order-form-back-btn:hover { color: var(--black); }

.pbs-input-requests { padding: 10px; width: 100%; min-height: 100px; color: var(--color-text); border: 1px solid color-mix(in srgb, var(--accent-putty) 20%, transparent); }
.pbs-user-note { margin-top: -30px; font-style: normal; color: var(--color-text); text-align: center; }

.pbs-products-order-form-thanks, .pbs-products-order-form-no-orders { margin: 40px auto 30px; padding: 20px; width: 40%; text-align: center; border: 1px solid var(--grey-200); border-radius: 6px; }

/* ==========================================================================
   USER ACCOUNT (login / register / profile / orders)
   ========================================================================== */

#pbs-user-wrapper { margin: calc(var(--header-total) + 40px) 0 100px; z-index: 1; }
/* Pages with a sidebar (My Account subpages) use a balanced 3-column grid with an invisible
   spacer column matching the sidebar's width, so content centers on the true page center
   instead of just the right column's center (which would sit skewed right of true center). */
#pbs-user-wrapper:has(#pbs-user-left) { display: grid; grid-template-columns: 20% 1fr 20%; }
#pbs-user-left { width: auto; float: left; grid-column: 1; z-index: 1; }
#pbs-user-right { width: auto; float: left; grid-column: 2; z-index: 1; }

.pbs-user-narrow { margin: 20px auto; padding: 0 0 100px; max-width: 768px; position: relative; z-index: 1; }
.pbs-user-medium { margin: 20px auto; padding: 0 0 100px; max-width: var(--max-width); position: relative; z-index: 1; }
.pbs-user-wide { margin: 20px auto; position: relative; z-index: 1; }

.pbs-user-title { padding-bottom: 30px; color: var(--nhn-dark-green); font-size: 24px; text-align: center; display: block; }
.pbs-user-row { width: 100%; text-align: left; display: block; }
.pbs-user-text { padding: 30px; }
.pbs-user-text h1 { color: var(--nhn-dark-green); font-size: 24px; text-align: center; display: block; }
.pbs-user-text h2 { padding-left: 40px; color: var(--nhn-blue); font-size: 36px; text-align: left; display: block; }
.pbs-user-text h3 { color: var(--nhn-blue); font-size: 24px; line-height: 24px; display: block; text-align: left; }
.pbs-user-text p { margin: 0; padding: 10px 0; text-align: left; }
#pbs-user-order-confirm-delivery-address p { margin: 0; padding: 0; line-height: normal; }
#pbs-user-order-confirm-delivery-address .pbs-user-title,
#pbs-user-order-confirm-requests .pbs-user-title { font-size: 20px; }
.pbs-user-text ul, .pbs-user-text li { list-style: none; margin: 10px 0 0 20px; padding: 0; }
.pbs-user-text ol { margin: 10px 0 0 50px; padding: 0; }
.pbs-user-text ol li { list-style: decimal; margin: 10px 0 0 20px; }
.pbs-user-text iframe { margin: 0 auto; width: 96%; min-height: 37vh; max-height: 100vh; display: block; }

.pbs-user-btns { margin: 4px auto; padding: 10px 20px; color: var(--color-bg); background-color: var(--nhn-dark-green); border: 0; border-radius: 6px; text-align: center; font-weight: 700; display: block; clear: both; cursor: pointer; }
.pbs-user-btns:hover { background-color: var(--nhn-light-green); }
.pbs-user-admin-btns { margin: 10px auto; padding: 10px 20px; color: var(--accent-grape); background-color: color-mix(in srgb, var(--accent-grape) 20%, transparent); text-align: center; display: block; clear: both; }

.pbs-user-login-btns, .pbs-user-register-btns, .pbs-user-confirm-btns,
.pbs-email-new-btns, .pbs-user-email-otp, .pbs-email-otp-btns, .pbs-user-password-btns, .pbs-user-profile-btns {
  margin: 0 auto; padding: 30px 0 50px; width: 180px; text-align: center; display: block; clear: both;
}
.pbs-user-login-btns { padding: 0; width: auto; }
#pbs-user-reset .pbs-user-login-btns { margin-top: 10px; }

.pbs-user-msg { padding: 10px 0; color: var(--accent-error); text-align: center; display: block; clear: both; }
.pbs-user-msg-verify { color: var(--color-text); text-align: left; }
.pbs-user-msg-verify-link { color: var(--nhn-dark-green); }
.pbs-user-password-info { font-style: italic; }

#pbs-user-addresses-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.pbs-user-address-card { padding: 16px 20px; border: 1px solid var(--grey-200); border-radius: var(--radius); }
.pbs-user-address-default { border-color: var(--nhn-light-green); }
.pbs-user-address-label { margin-bottom: 8px; font-size: 16px; font-weight: 700; color: #999; }
.pbs-user-address-default .pbs-user-address-label { color: var(--nhn-light-green); }
.pbs-user-address-default-badge { margin-left: 8px; padding: 2px 8px; color: var(--color-bg); background-color: var(--nhn-light-green); border-radius: var(--radius); font-size: 12px; font-weight: 400; }
.pbs-user-address-text { margin-bottom: 12px; line-height: 22px; }
.pbs-user-address-actions { display: flex; gap: 16px; }
.pbs-user-address-actions a { color: var(--nhn-dark-green); text-decoration: none; }
.pbs-user-address-actions a:hover { color: var(--nhn-light-green); }
.pbs-user-address-link-btn { padding: 0; color: var(--nhn-dark-green); background: none; border: 0; cursor: pointer; font-size: inherit; font-family: inherit; text-decoration: none; }
.pbs-user-address-link-btn:hover { color: var(--nhn-light-green); }

#pbs-user-address-picker { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.pbs-user-address-option { display: block; padding: 10px 14px; border: 1px solid var(--grey-200); border-radius: var(--radius); cursor: pointer; }
.pbs-user-address-option:has(input:checked) { border-color: var(--nhn-light-green); background-color: color-mix(in srgb, var(--nhn-light-green) 8%, transparent); }
.pbs-user-address-option input { margin-right: 8px; }

#pbs-user-orders-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.pbs-user-order-card { padding: 16px 20px; border: 1px solid var(--grey-200); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pbs-user-order-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pbs-user-order-id { font-weight: 700; color: var(--nhn-light-green); }
.pbs-user-order-date, .pbs-user-order-items { color: var(--grey-700); }
.pbs-user-order-total { font-weight: 700; }
.pbs-user-order-actions a { color: var(--nhn-dark-green); text-decoration: none; }
.pbs-user-order-actions a:hover { color: var(--nhn-light-green); }

#pbs-user-dashboard-last-order { margin-top: 10px; }
#pbs-user-order-view-items { margin: 20px 0; }
#pbs-user-order-view-address { margin: 20px 0; }

#pbs-user-delivery { width: 48%; float: left; box-sizing: border-box; }
.pbs-user-delivery-title { padding: 1%; text-align: center; text-transform: uppercase; }
.pbs-user-delivery-left, .pbs-user-delivery-right { margin: 5px 0 10px; display: block; text-align: left; }

.pbs-textarea-user, .pbs-select-user, .pbs-input-user, .pbs-input-checkbox-user, select {
  margin: 0; padding: 0.75%; width: 98%; height: 38px; border: 1px solid var(--grey-200); border-radius: 6px; display: block;
}
.pbs-input-user:disabled { color: var(--grey-500); background-color: var(--grey-100); cursor: not-allowed; }
.pbs-input-user-mobile { margin: 0 0 10px 2%; padding: 0.75%; width: 78%; height: 38px; border: 1px solid var(--grey-200); border-radius: 6px; float: left; }

/* Country-code prefix box injected by the ccpicker plugin - its own
   stylesheet hardcodes height:50px, so override to match the input fields. */
.cc-picker { height: 38px; padding: 8px 6px 0 6px; border-radius: 6px; }

/* --- Login / register boxes --- */
#pbs-user-login, #pbs-user-reg, #pbs-user-reg-thanks, #pbs-user-reg-verify, #pbs-user-reset {
  color: var(--color-login-text);
  background-color: var(--color-login-bg);
  border-radius: 6px;
  display: block;
}
/* Register PICKER page only (user/register/index.php) - no grey card background, per feedback.
   The retail form (retail.php) and the wholesale application page both also use #pbs-user-reg /
   the shared login-card look and keep their grey background - only the picker is different. */
#pbs-user-reg.pbs-register-picker { background-color: transparent; margin-top: calc(var(--header-total) + 40px); }
#pbs-user-login { margin: calc(var(--header-total) + 90px) auto; padding: 20px; max-width: 480px; }
#pbs-user-reset { margin: calc(var(--header-total) + 90px) auto; padding: 20px; max-width: 480px; }
#pbs-user-reg { margin: calc(var(--header-total) + 90px) auto; padding: 20px; max-width: var(--max-width); }
#pbs-user-reg-thanks, #pbs-user-reg-verify { margin: calc(var(--header-total) + 40px) auto; padding: 20px; max-width: 480px; }

.pbs-thank-you-next-box { margin: 20px 0 20px -20px; padding: 20px 20px 30px; color: var(--color-login-text); background-color: var(--color-login-bg); border-radius: 6px; }
.pbs-thank-you-next-box ol { margin-left: 20px; }

.pbs-user-login-title { padding: 1%; color: var(--nhn-dark-green); font-size: 24px; font-weight: 400; text-align: center; }
.pbs-user-login-left, .pbs-user-login-right { margin: 5px 0; display: block; text-align: left; }
.pbs-user-login-sent-mail { text-align: center; }
.pbs-user-login-eye { margin-top: -34px; margin-right: 20px; width: 18px; height: 18px; float: right; z-index: 10; cursor: pointer; }
.pbs-user-login-eye .pbs-icon-eye-off { display: none; }

/* --- Profile --- */
#pbs-user-profile { margin: 0 auto 30px; padding: 20px; max-width: var(--max-width); }
#pbs-user-profile-update-details { width: 48%; float: left; margin-right: 4%; box-sizing: border-box; }
#pbs-user-profile-update-delivery { width: 48%; float: left; box-sizing: border-box; }
#pbs-user-profile-details-error { width: 46%; float: left; }
#pbs-user-password, #pbs-user-email { margin: 0 auto 30px; padding: 20px; max-width: 480px; display: block; }
.pbs-user-current-email { padding: 0.75%; width: 98%; height: 38px; box-sizing: border-box; color: color-mix(in srgb, var(--grey-700) 60%, transparent); background-color: var(--color-bg); border: 1px solid var(--grey-200); border-radius: 6px; display: block; }
.pbs-user-current-email-text { display: flex; align-items: center; height: 100%; }

.pbs-user-profile-left-text, .pbs-user-profile-right-text { padding: 30px; }
.pbs-user-profile-left-text h1, .pbs-user-profile-right-text h1 { color: var(--nhn-dark-green); font-size: 24px; text-align: center; display: block; }
.pbs-user-profile-left-text h2, .pbs-user-profile-right-text h2 { padding-left: 40px; color: var(--nhn-blue); font-size: 36px; text-align: left; display: block; }
.pbs-user-profile-left-text h3, .pbs-user-profile-right-text h3 { color: var(--nhn-blue); font-size: 24px; line-height: 24px; display: block; text-align: left; }
.pbs-user-profile-left-text p, .pbs-user-profile-right-text p { margin: 0; padding: 10px 0; text-align: left; }
.pbs-user-profile-left-text ul, .pbs-user-profile-right-text ul { margin: 10px 0 0 20px; padding: 0; list-style: none; }
.pbs-user-profile-left-text ol, .pbs-user-profile-right-text ol { margin: 10px 0 0 50px; padding: 0; }
.pbs-user-profile-left-text iframe, .pbs-user-profile-right-text iframe { margin: 0 auto; width: 96%; min-height: 37vh; max-height: 100vh; display: block; }

.pbs-my-account-nav { margin: 0; padding: 0; list-style: none; }
.pbs-my-account-nav li { margin: 4px 0; padding: 6px 0 12px; border-bottom: 1px solid var(--grey-100); }
.pbs-my-account-nav li:last-child { padding-bottom: 0; border-bottom: 0; }
.pbs-my-account-nav li a { color: var(--nhn-dark-green); text-decoration: none; display: flex; justify-content: space-between; align-items: center; }
.pbs-my-account-nav li a:hover { color: var(--nhn-light-green); }
.pbs-my-account-nav li.pbs-nav-active a { color: var(--nhn-light-green); font-weight: 700; }
.pbs-my-account-nav li.pbs-nav-active a::after { content: '\25B8'; margin-left: 8px; }
.pbs-my-account-nav-dashboard { text-transform: uppercase; }

#pbs-user-left .pbs-user-profile-left-text { margin: 15px 20px; padding: 18px 18px 38px; font-size: 14px; background-color: #f5f5f5; border-radius: 6px; text-align: left; box-sizing: border-box; }

/* --- My Account dashboard --- */
#pbs-user-dashboard { margin: 30px auto; padding: 20px; max-width: var(--max-width); width: 100%; box-sizing: border-box; }
.pbs-user-dashboard-welcome { margin-bottom: 30px; text-align: center; }
#pbs-user-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pbs-user-dashboard-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 50px 20px; border: 1px solid var(--grey-200); border-radius: var(--radius);
  color: var(--nhn-dark-green); text-decoration: none; text-align: center;
  font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;
}
.pbs-user-dashboard-tile .pbs-icon { width: 40px; height: 40px; }
.pbs-user-dashboard-tile:hover { border-color: var(--nhn-light-green); color: var(--nhn-light-green); }

/* --- Register - account type picker (user/register/index.php) --- */
.pbs-register-choice-intro { margin: 0 0 30px; text-align: center; color: var(--color-text); }
.pbs-register-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; max-width: 700px; margin: 0 auto; }
.pbs-register-choice-card {
  display: block; padding: 40px 24px; text-align: center; color: inherit; text-decoration: none;
  border: 1px solid var(--grey-200); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s;
}
.pbs-register-choice-card:hover { border-color: var(--nhn-light-green); box-shadow: 0 4px 16px color-mix(in srgb, var(--grey-600) 15%, transparent); text-decoration: none; }
.pbs-register-choice-icon { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--nhn-dark-green); }
.pbs-register-choice-icon .pbs-icon { width: 100%; height: 100%; }
.pbs-register-choice-title { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--nhn-dark-green); }
.pbs-register-choice-desc { font-size: 14px; color: var(--grey-600); line-height: 1.5; }
.pbs-register-choice-btn {
  display: inline-block; margin-top: 20px; padding: 10px 24px;
  color: #fff; background-color: var(--nhn-dark-green); border-radius: var(--radius);
  font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.pbs-register-choice-card:hover .pbs-register-choice-btn { background-color: var(--nhn-light-green); }

/* --- Register - retail minimum-order notice (user/register/retail.php) --- */
.pbs-register-minimum-notice { width: fit-content; margin: 0 auto 20px; padding: 6px 12px; border: 1px solid var(--nhn-yellow); border-radius: 6px; background-color: var(--nhn-yellow); color: var(--nhn-blue); font-size: 16px; font-weight: 700; text-align: center; }

/* --- Personal details form --- */
#pbs-user-details { width: 48%; float: left; margin-right: 4%; box-sizing: border-box; }
.pbs-user-details-title { padding: 1%; text-align: center; text-transform: uppercase; }
.pbs-user-details-left, .pbs-user-details-right { margin: 5px 0 10px; display: block; text-align: left; }
.pbs-user-mobile-left, .pbs-user-mobile-right { margin: 5px 0 10px; width: 40%; display: block; text-align: left; float: left; }
.pbs-user-mobile-right { width: 60%; }

/* --- Wholesale application form (/apply-to-become-a-wholesale-client) --- */
.pbs-user-login-title.pbs-apply-title { color: var(--nhn-blue); }
.pbs-apply-intro { margin: 0 0 20px; text-align: center; }
.pbs-apply-section-title { margin: 30px 0 14px; padding: 8px 14px; color: var(--nhn-blue); background-color: var(--nhn-yellow); font-weight: 700; text-transform: uppercase; border-radius: 4px; }
.pbs-apply-section-title:first-of-type { margin-top: 0; }
.pbs-apply-row { display: flex; flex-wrap: wrap; gap: 0 4%; }
.pbs-apply-field { flex: 1 1 280px; margin: 5px 0 10px; text-align: left; }
.pbs-apply-field label { display: block; margin-bottom: 4px; }
.pbs-apply-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px; margin: 6px 0 16px; }
.pbs-apply-checkbox-grid label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.pbs-apply-checkbox-grid input { width: auto; margin: 0; }
.pbs-apply-notice { margin: 10px 0 20px; padding: 16px 20px; border-left: 4px solid var(--nhn-light-green); border-radius: 6px; }
.pbs-apply-notice strong { display: block; margin-bottom: 6px; color: var(--nhn-dark-green); }
.pbs-apply-declaration { margin: 10px 0 20px; display: flex; align-items: flex-start; gap: 10px; }
.pbs-apply-declaration input { margin-top: 4px; width: auto; }

/* --- Order confirm / thanks --- */
#pbs-user-order-confirm { margin: 50px auto 0; padding: 0 0 100px; max-width: var(--max-width); position: relative; z-index: 1; }
#pbs-user-order-confirm-products { margin: 0 auto; padding: 30px; max-width: var(--max-width); border: 1px solid color-mix(in srgb, var(--accent-putty) 20%, transparent); }
#pbs-user-order-confirm-delivery-address, #pbs-user-order-confirm-requests { width: 50%; float: left; }
#pbs-user-order-thanks-box { margin: 0 auto; max-width: var(--max-width-wide); border: 1px solid color-mix(in srgb, var(--accent-putty) 20%, transparent); }

#pbs-user-form { margin: 0 auto; max-width: var(--max-width-wide); border: 1px solid color-mix(in srgb, var(--accent-putty) 20%, transparent); }

/* ==========================================================================
   GALLERY (front-end, 2026-08-17 rebuild)
   ========================================================================== */

#pbs-gallery-wrapper { margin: calc(var(--header-total) + 40px) 0 100px; }
#pbs-gallery { margin: 0 auto; max-width: var(--max-width); }

.pbs-gallery-breadcrumb { margin: 0 0 20px; font-size: 13px; color: var(--grey-700); }
.pbs-gallery-breadcrumb a { color: var(--color-link); text-decoration: none; }
.pbs-gallery-breadcrumb a:hover { color: var(--nhn-light-green); }

/* padding-top (not margin) so it can't collapse away into #pbs-gallery-wrapper's own top margin -
   matches the ~30px gap other content pages get naturally, and is real enough space to clear the
   centered "ORDER ONLINE" notch that hangs below the header (see DEV_NOTES) */
.pbs-gallery-title { margin: 0 0 30px; padding-top: 30px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 600; text-align: center; }
.pbs-gallery-description { margin: 0 0 30px; color: var(--color-text); text-align: center; }

.pbs-gallery-empty { margin: 40px 0; padding: 40px 0; color: var(--grey-700); text-align: center; }

/* Subcategory tiles + top-level overview tiles share the same look. Flexbox + justify-content:center
   (not CSS Grid auto-fill) deliberately - auto-fill reserves empty trailing tracks sized to fill the
   row even when there aren't enough items, which pins a short row to the left instead of centering
   it (see DEV_NOTES). Flexbox only ever lays out real items, so wrap+center behaves correctly at any
   item count. */
.pbs-gallery-subcats,
.pbs-gallery-overview {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 40px 2%; margin: 0 0 40px;
}
.pbs-gallery-subcat-tile,
.pbs-gallery-overview-tile { flex: 0 1 182px; max-width: 240px; color: inherit; text-decoration: none; display: block; }
.pbs-gallery-subcat-tile img,
.pbs-gallery-overview-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 5px; display: block; border-radius: 12px; }
.pbs-gallery-subcat-tile span,
.pbs-gallery-overview-title { margin: 4px 0; font-size: 15px; color: #333; font-weight: 600; text-align: center; display: block; }
.pbs-gallery-subcat-tile:hover span,
.pbs-gallery-overview-tile:hover .pbs-gallery-overview-title { color: var(--nhn-light-green); }
.pbs-gallery-overview-count { margin: 2px 0 0; font-size: 12px; color: var(--grey-500); text-align: center; display: block; }

.pbs-gallery-view-toggle { display: flex; justify-content: center; gap: 4px; margin: 0 0 20px; }
.pbs-gallery-view-toggle a {
  padding: 6px 14px; font-size: 14px; color: var(--grey-600); text-decoration: none;
  background-color: var(--color-bg); border: 1px solid var(--grey-200); border-radius: 6px;
}
.pbs-gallery-view-toggle a:hover { color: var(--nhn-dark-green); }
.pbs-gallery-view-toggle a.active { color: var(--color-bg); background-color: var(--nhn-dark-green); border-color: var(--nhn-dark-green); }

.pbs-gallery-item { display: block; }
.pbs-gallery-item img { width: 100%; display: block; border-radius: 12px; }

/* Flexbox + justify-content:center, not Grid auto-fill - same reasoning as .pbs-gallery-overview
   above (auto-fill pins a short row to the left instead of centering it). */
.pbs-gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.pbs-gallery-grid .pbs-gallery-item { flex: 0 1 182px; max-width: 260px; }

.pbs-gallery-masonry { column-count: 4; column-gap: 2%; }
.pbs-gallery-masonry .pbs-gallery-item { margin-bottom: 20px; break-inside: avoid; }

.pbs-gallery-slider { display: flex; gap: 20px; padding: 0 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.pbs-gallery-slider .pbs-gallery-item { flex: 0 0 260px; scroll-snap-align: start; }

/* ==========================================================================
   BLOG
   ========================================================================== */

#pbs-blog-wrapper { margin: calc(var(--header-total) + 40px) 0 100px; }
#pbs-blog { margin: 0 auto; max-width: var(--max-width); }

.pbs-blog-title-text { padding: 10px 1%; text-align: center; }
.pbs-blog-title-text h1 { margin: 0 auto 20px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 600; text-align: center; display: block; }

.pbs-blog-text { padding: 10px 1%; text-align: justify; }
.pbs-blog-text h1 { margin: 0 auto 30px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 600; text-align: center; display: block; }
.pbs-blog-text h4 { margin: 0 0 20px; color: var(--accent-forest); font-size: 32px; display: inline; text-align: left; }
.pbs-blog-text p { margin: 0; padding: 0 0 15px; text-align: justify; }
.pbs-blog-text ul { margin: 10px 0 0 30px; padding: 0; list-style: square; text-align: left; }
.pbs-blog-text li { margin: 10px 0 0 20px; padding: 0; text-align: left; }
.pbs-blog-text ol { margin: 10px 0 0; padding: 0; }

.pbs-blog-listing { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2%; }
.pbs-blog-snippet { background-color: var(--color-bg); text-align: center; position: relative; min-height: 300px; }
.pbs-blog-snippet-text { padding: 10px 1%; text-align: center; }
.pbs-blog-snippet-thumb img { width: 100%; }

.pbs-blog-title { color: color-mix(in srgb, var(--accent-mustard) 80%, transparent); font-weight: 500; text-align: center; display: block; }
.pbs-blog-title h1 { color: var(--nhn-dark-green); font-size: 24px; font-weight: 500; line-height: 42px; text-align: center; display: block; }
.pbs-blog-title h2 { color: var(--nhn-blue); font-size: 22px; font-weight: 500; text-align: center; display: inline; }
.pbs-blog-title h2 a { margin-bottom: 10px; color: var(--nhn-blue); font-size: 26px; font-weight: 500; text-decoration: none; }
.pbs-blog-title h2 a:hover { color: var(--accent-olive); text-decoration: none; }

.pbs-blog-author, .pbs-blog-date { font-style: italic; text-align: center; }
.pbs-blog-date { margin-bottom: 30px; }

.pbs-blog-read-more { margin: 0 auto; text-align: center; }
.pbs-blog-read-more a { padding: 10px 20px; color: var(--color-bg); background-color: var(--accent-putty); font-weight: 500; text-decoration: none; text-transform: uppercase; }
.pbs-blog-read-more a:hover { color: var(--accent-olive); background-color: var(--color-bg); border: 1px solid var(--accent-tan); text-decoration: none; }

.pbs-blog-to-home { text-align: right; float: right; }
.pbs-blog-pagination-top, .pbs-blog-pagination-base { margin: 20px 40px 20px 0; color: var(--grey-500); text-align: right; display: block; clear: both; }

.pbs-blog-fullwidth { max-width: 100%; }
.pbs-blog-half { width: 49%; }
.pbs-blog-third { width: 32%; float: left; }
.pbs-blog-quarter, .pbs-blog-left { width: 25%; float: left; }
.pbs-auto-left { float: left; }
.pbs-blog-right { width: 25%; float: right; }

/* ==========================================================================
   NEWS - own copy of BLOG's rules, deliberately duplicated (not shared) so
   each can be restyled independently. Currently identical to BLOG on purpose.
   ========================================================================== */

#pbs-news-wrapper { margin: calc(var(--header-total) + 40px) 0 100px; }
#pbs-news { margin: 0 auto; max-width: var(--max-width); }

.pbs-news-title-text { padding: 10px 1%; text-align: center; }
.pbs-news-title-text h1 { margin: 0 auto 20px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 600; text-align: center; display: block; }

.pbs-news-text { padding: 10px 1%; text-align: justify; }
.pbs-news-text h1 { margin: 0 auto 30px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 600; text-align: center; display: block; }
.pbs-news-text h4 { margin: 0 0 20px; color: var(--accent-forest); font-size: 32px; display: inline; text-align: left; }
.pbs-news-text p { margin: 0; padding: 0 0 15px; text-align: justify; }
.pbs-news-text ul { margin: 10px 0 0 30px; padding: 0; list-style: square; text-align: left; }
.pbs-news-text li { margin: 10px 0 0 20px; padding: 0; text-align: left; }
.pbs-news-text ol { margin: 10px 0 0; padding: 0; }

.pbs-news-listing { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2%; }
.pbs-news-snippet { background-color: var(--color-bg); text-align: center; position: relative; min-height: 460px; }
.pbs-news-snippet-text { padding: 10px 1%; text-align: center; }
.pbs-news-snippet-thumb img { width: 100%; }

.pbs-news-title { color: color-mix(in srgb, var(--accent-mustard) 80%, transparent); font-weight: 500; text-align: center; display: block; }
.pbs-news-title h1 { color: var(--nhn-dark-green); font-size: 24px; font-weight: 500; line-height: 42px; text-align: center; display: block; }
.pbs-news-title h2 { color: var(--nhn-blue); font-size: 22px; font-weight: 500; text-align: center; display: inline; }
.pbs-news-title h2 a { margin-bottom: 10px; color: var(--nhn-blue); font-size: 26px; font-weight: 500; text-decoration: none; }
.pbs-news-title h2 a:hover { color: var(--accent-olive); text-decoration: none; }

.pbs-news-author, .pbs-news-date { font-style: italic; text-align: center; }
.pbs-news-date { margin-bottom: 30px; }

.pbs-news-read-more { margin: 0 auto; text-align: center; }
.pbs-news-read-more a { padding: 10px 20px; color: var(--color-bg); background-color: var(--accent-putty); font-weight: 500; text-decoration: none; text-transform: uppercase; }
.pbs-news-read-more a:hover { color: var(--accent-olive); background-color: var(--color-bg); border: 1px solid var(--accent-tan); text-decoration: none; }

.pbs-news-to-home { text-align: right; float: right; }
.pbs-news-pagination-top, .pbs-news-pagination-base { margin: 20px 40px 20px 0; color: var(--grey-500); text-align: right; display: block; clear: both; }

/* ==========================================================================
   ARTICLES SNIPPET/TITLE STYLING - own copy of BLOG's rules, deliberately
   duplicated (not shared) so each can be restyled independently. Currently
   identical to BLOG on purpose - Articles previously had no styling at all.
   ========================================================================== */

/* Listing Heading - matches the standard page heading (.pbs-pages-text h1) used on every other
   content page, so Articles' listing heading looks consistent with the rest of the site. */
.pbs-articles-text h1 { margin: 60px 0 0 0; color: var(--nhn-dark-green); font-size: 24px; font-weight: 800; text-align: left; display: block; }

/* Grid listing style */
.pbs-articles-listing { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 50px 40px; }
.pbs-articles-snippet { background-color: var(--color-bg); text-align: left; position: relative; }
.pbs-articles-snippet-text { padding: 10px 0; text-align: left; }
.pbs-articles-snippet-thumb img { width: 100%; }

/* List listing style - image (if shown) to the left, text to the right */
.pbs-articles-list { display: flex; flex-direction: column; gap: 30px; }
.pbs-articles-list-item { display: flex; gap: 20px; align-items: flex-start; text-align: left; }
.pbs-articles-list-item-thumb { flex: 0 0 117px; }
.pbs-articles-list-item-thumb a { display: block; line-height: 0; }
.pbs-articles-list-item-thumb img { width: 117px; height: auto; display: block; }
.pbs-articles-list-item-content { flex: 1; }

.pbs-articles-title { color: var(--nhn-dark-green); font-size: 24px; font-weight: 700; text-align: left; display: block; }
.pbs-articles-title h1 { margin: 60px 0 4px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 800; line-height: 1.3; text-align: left; display: block; }
.pbs-articles-title h2 { margin: 0; color: var(--nhn-dark-green); font-size: 18px; font-weight: 700; line-height: 1.3; text-align: left; display: block; }
.pbs-articles-title h2 a { color: var(--nhn-dark-green); font-size: 18px; font-weight: 700; text-decoration: none; }
.pbs-articles-title h2 a:hover { color: var(--nhn-blue); text-decoration: none; }

/* Author/Date - styled independently for the single full-article page vs. the listing/list-item
   snippets, on purpose, so one can be restyled without affecting the other. */
.pbs-articles-single-author, .pbs-articles-single-date { display: block; text-align: left; color: var(--grey-600); font-style: normal; font-size: 14px; }
.pbs-articles-single-author { margin-top: 8px; }
.pbs-articles-single-date { margin-bottom: 20px; }

.pbs-articles-list-author, .pbs-articles-list-date { display: inline; text-align: left; color: var(--grey-600); font-style: normal; font-size: 13px; }
.pbs-articles-list-date { margin-bottom: 0; }

.pbs-articles-read-more { margin: 15px 0 0; text-align: left; }
.pbs-articles-read-more a { display: inline-block; padding: 10px 20px; color: var(--nhn-blue); background-color: var(--nhn-yellow); font-weight: 700; font-size: 14px; text-decoration: none; text-transform: none; border-radius: var(--cms-radius-md, 6px); }
.pbs-articles-read-more a:hover { color: var(--nhn-yellow); background-color: var(--nhn-blue); text-decoration: none; }

.pbs-articles-back { margin: 15px 0 0; text-align: right; }
.pbs-articles-back a { display: inline-block; padding: 10px 20px; color: var(--nhn-blue); background-color: var(--nhn-yellow); font-weight: 700; font-size: 14px; text-decoration: none; text-transform: none; border-radius: var(--cms-radius-md, 6px); }
.pbs-articles-back a:hover { color: var(--nhn-yellow); background-color: var(--nhn-blue); text-decoration: none; }

/* List style specific overrides - excerpt left-aligned, button smaller and right-aligned */
.pbs-articles-list-item .pbs-articles-snippet-text { text-align: left; padding: 0; }
.pbs-articles-list-item .pbs-articles-read-more { text-align: right; }
.pbs-articles-list-item .pbs-articles-read-more a { padding: 6px 14px; font-size: 12px; }

.pbs-articles-to-home { text-align: right; float: right; }
.pbs-articles-pagination-top, .pbs-articles-pagination-base { margin: 20px 40px 20px 0; color: var(--grey-500); text-align: right; display: block; clear: both; }

/* ==========================================================================
   CONTENT LAYOUT (shared by Blog/News/Articles - main article/listing column
   plus an optional Categories + Sidebar Text column)
   ========================================================================== */

.pbs-content-layout { display: flex; align-items: flex-start; }
.pbs-content-main { width: 1000px; box-sizing: border-box; padding-right: 40px; }
.pbs-content-main.pbs-content-main-full { width: 1000px; margin: 0 auto; padding-right: 0; }
.pbs-content-sidebar { width: 280px; box-sizing: border-box; }

.pbs-cat-widget-title { margin: 0 0 15px; font-size: 20px; font-weight: 600; color: var(--nhn-dark-green); }
.pbs-cat-sidebar-text { margin: 0 0 25px; text-align: left; }

.pbs-cat-item { border-bottom: 1px solid var(--grey-200); }
.pbs-cat-toggle { display: none; }
.pbs-cat-label { cursor: pointer; display: block; margin: 0; padding: 10px 24px 10px 0; font-weight: 600; position: relative; color: var(--nhn-blue); }
.pbs-cat-label:after { content: "+"; position: absolute; right: 4px; top: 10px; font-weight: 700; }
.pbs-cat-toggle:checked + .pbs-cat-label:after { content: "\2212"; }
.pbs-cat-posts { display: none; list-style: none; margin: 0 0 12px; padding: 0; }
.pbs-cat-toggle:checked ~ .pbs-cat-posts { display: block; }
.pbs-cat-posts li { margin: 0 0 8px; padding-left: 4px; }
.pbs-cat-posts a { text-decoration: none; color: var(--nhn-blue); }
.pbs-cat-posts a:hover { color: var(--accent-olive); }

/* ==========================================================================
   ARTICLES
   ========================================================================== */

#pbs-articles-wrapper { max-width: 1280px; margin: 0 auto; padding: calc(var(--header-total) + 10px) 20px 100px; box-sizing: border-box; }

/* ==========================================================================
   CONTACT
   ========================================================================== */

#pbs-contact-wrapper { margin: calc(var(--header-total) + 40px) 0 50px; padding: 30px 0 50px; z-index: 1; }
.pbs-contact-medium { margin: 0 auto; max-width: var(--max-width); position: relative; z-index: 1; }

.pbs-contact-heading { margin: 0 0 15px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 300; text-align: center; display: block; }

.pbs-contact-columns { display: flex; flex-wrap: wrap; gap: 20px; }
.pbs-contact-columns #pbs-left, .pbs-contact-columns #pbs-right { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
#pbs-contact-image { width: 98%; float: left; }
#pbs-contact-image img { width: 90%; }

.pbs-contact-row { display: block; }
.pbs-contact-left { width: 21%; float: left; font-weight: 700; }
.pbs-contact-right { width: 79%; float: left; }

.pbs-contact-text { padding: 10px 20px 30px; color: var(--accent-putty); font-weight: 300; z-index: 1; text-align: left; }
.pbs-contact-text h1 { margin: 0 0 30px; color: var(--nhn-dark-green); font-size: 24px; font-weight: 300; text-align: left; display: block; }
.pbs-contact-text h2 { margin: 0 0 30px; color: var(--nhn-blue); font-size: 36px; font-weight: 300; text-align: left; display: block; }
.pbs-contact-text p { margin: 0; padding: 10px 0; }

.pbs-contact-details { margin-top: 20px; }
.pbs-contact-details-row { padding: 6px 0; }
.pbs-contact-details-row a { color: var(--nhn-blue); text-decoration: none; }
.pbs-contact-details-row a:hover { text-decoration: underline; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

#pbs-footer-wrapper {
  background-color: var(--color-footer-bg); color: var(--color-footer-text); clear: both; padding-bottom: 30px; position: relative; z-index: 2;
  /*background-image: url("/images/new-horizen-nursery-bg-02.jpg"); background-size: cover; background-position: center;*/
}
#pbs-footer-medium { margin: 0 auto; max-width: var(--max-width); display: flex; flex-wrap: wrap; }

.pbs-footer-col { flex: 1 1 25%; padding: 0 10px; }
.pbs-footer-text { padding: 20px 10px; color: var(--color-footer-text); font-weight: 200; text-align: left; }
.pbs-footer-text h6 { color: var(--nhn-yellow); font-size: 24px; line-height: 46px; font-weight: 500; display: block; }
.pbs-footer-text a { color: var(--nhn-light); text-decoration: none; }
.pbs-footer-text a:hover { color: var(--nhn-yellow); text-decoration: none; }
.pbs-footer-text p { margin: 0; padding: 5px 0; }
.pbs-footer-text img { margin: 0 auto; padding: 10px 0; width: 45px; display: block; }

.pbs-footer-contact { padding: 10px 0; clear: both; }
.pbs-footer-contact-left { width: 80px; font-weight: 500; float: left; text-align: left; color: var(--nhn-light); }
.pbs-footer-contact-right { padding-left: 10px; width: 150px; float: left; color: var(--nhn-light); }
.pbs-footer-contact-right a { color: var(--nhn-light); text-align: left; text-decoration: none; }
.pbs-footer-contact-right a:hover { color: var(--nhn-yellow); }

.pbs-footer-social-media { display: flex; gap: 10px; padding: 10px 0; clear: both; }
.pbs-social-icon { width: 29px; color: var(--nhn-light); }
.pbs-social-icon a { text-decoration: none; display: block; color: inherit; }
.pbs-social-icon a:hover { color: var(--nhn-yellow); }

#pbs-footer-copyright { margin: 50px auto 0; color: var(--nhn-light); text-align: center; display: block; }
/* The source PNG is solid white on transparent, so it's used purely as a shape mask here (not drawn
   as an image) - this recolors it to the corporate yellow via background-color rather than needing a
   separately-exported yellow PNG, and stays correct automatically if --nhn-yellow ever changes. */
.pbs-footer-logo-mark {
	margin: 0 auto 10px;
	width: 59px;
	height: 58px;
	display: block;
	background-color: var(--nhn-yellow);
	-webkit-mask-image: url(../images/new-horizen-nursery-logo.png);
	mask-image: url(../images/new-horizen-nursery-logo.png);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ==========================================================================
   RESPONSIVE (mobile-first, consolidated from ~24 legacy breakpoints down to 3)
   ========================================================================== */

@media (max-width: 992px) {
  #pbs-nav-bun { display: block; position: absolute; left: 50%; top: 32px; transform: translate(-50%, -50%); z-index: 999; }
  #pbs-nav-bun img { width: 32px; }
  /* Shrinks with the viewport so the fixed 260px logo never runs under the page-centered hamburger. */
  #pbs-logo { width: clamp(120px, 30vw, 260px); }

  /* Homepage hero header: the bun is fully decoupled from the logo-to-line spacing now - it floats
     independently (position:absolute, page-centered, fixed 90px from the top OF THE HERO) rather
     than being centered inside that gap. Its containing block is .pbs-hp-hero-overlay (the nearest
     positioned ancestor), which itself already sits calc(var(--topbar-height) + 13.33px) = 43.33px
     down from the hero top - so `top` here is written as `90px minus that same offset`, keeping the
     bun's actual on-screen position 90px from the hero top regardless of that offset, rather than
     90px further down from wherever the overlay happens to start. The logo keeps a constant height
     (90px) and constant top margin (the overlay's own fixed `top` anchor, unaffected by this
     breakpoint) - the base 13.33px flex `gap` (same value used for the equalized desktop spacing)
     now applies directly between the logo and the yellow line with nothing in between, giving a
     small constant bottom margin below the logo regardless of the bun. */
  .pbs-header-hp #pbs-nav-bun {
    position: absolute; top: calc(75px - var(--topbar-height) - 13.33px); left: 50%; transform: translateX(-50%); margin: 0;
    color: var(--nhn-blue);
  }

  /* .pbs-topnav toggles between className "pbs-topnav" and "pbs-topnav responsive"
     via the vanilla myFunction() handler in footer.php - no "open" class involved. */
  .pbs-topnav ul { display: none; }
  .pbs-topnav.responsive {
    position: absolute;
    inset: var(--header-total) 0 auto 0;
    background: var(--color-navbar-bg);
    text-align: center;
    z-index: 9999;
  }
  .pbs-topnav.responsive ul { display: flex; flex-direction: column; padding: 12px 0; }
  .pbs-topnav.responsive li h2 a { display: block; padding: 10px 0; }

  /* Dropdowns on touch: hover doesn't exist, and the mobile menu is already one long vertical list,
     so submenus are simply always expanded and indented under their parent rather than needing a
     tap-to-open accordion - no extra JS, and the item counts here are small enough that this reads
     fine rather than overwhelming. */
  /* Matches "#pbs-topnav .pbs-submenu" (ID) from the desktop rule above - a plain ".pbs-submenu" or
     even a two-class selector here would lose to that always-active ID rule and stay hidden on
     mobile too. */
  #pbs-topnav .pbs-submenu {
    display: block; position: static; margin: 0; padding-left: 16px; min-width: 0; box-shadow: none;
    background: none; border-radius: 0;
  }
  .pbs-submenu li a { padding: 8px 0; font-size: 14px; }
  .pbs-dropdown-caret { display: none; }

  /* Homepage hero header: the generic dropdown above assumes .pbs-topnav's containing block is the
     page/viewport (a fixed sitewide navbar) - here it's actually .pbs-hp-hero-overlay, a smaller,
     horizontally-centered box, so `inset: var(--header-total) 0 auto 0` computed relative to that
     instead and rendered broken/misplaced (menu items overlapping the logo, a stray white box
     floating mid-hero). Full-screen takeover instead, with a 20px margin on every side of the
     actual viewport. Absolutely positioned children measure left/right/top against the CONTAINING
     BLOCK'S OWN BORDER-BOX edges (padding is inside that box, it does not shift the origin) - so
     `left`/`right` can be set directly (the overlay's box already spans the full viewport width);
     only `top` needs adjusting, since the overlay's box starts 43.33px down from the real viewport
     top, so top is written as "20px minus that offset" to land the panel's real edge 20px from the
     true viewport top regardless of where its containing block happens to sit.
     Always rendered (not display:none) so opacity is transitionable - toggled by the .responsive
     class exactly like the generic rule above, just via opacity/pointer-events instead of a hard
     display flip, for a real (and slow/deliberate) ease-in instead of an instant snap. */
  .pbs-header-hp .pbs-topnav {
    position: absolute;
    top: calc(20px - var(--topbar-height) - 13.33px); left: 20px; right: 20px; bottom: auto;
    width: auto; max-width: none; margin: 0;
    height: calc(100vh - 40px);
    background: rgba(255, 255, 255, 0.95);
    opacity: 0; pointer-events: none;
    transition: opacity 0.7s ease-in;
    display: flex; align-items: center; justify-content: center;
  }
  .pbs-header-hp .pbs-topnav.responsive { opacity: 1; pointer-events: auto; }
  .pbs-header-hp .pbs-topnav ul { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 100%; max-height: 100%; overflow-y: auto; }
  .pbs-header-hp .pbs-topnav li h2 a { padding: 0; }
  .pbs-header-hp .pbs-submenu li a { color: var(--nhn-blue); text-align: center; }
  /* Close (X) button, top-right of the fullscreen panel - hidden everywhere else (base rule further
     down), only shown here since this is the only nav that has no other way to dismiss itself: the
     bun that opens it sits BEHIND the panel once open (panel z-index 9999 vs bun's 999), so without
     this there was no way to close the menu at all. */
  .pbs-header-hp .pbs-topnav-close {
    display: block; position: absolute; top: 20px; right: 20px;
    padding: 0; border: 0; background: none; color: var(--nhn-blue); cursor: pointer; z-index: 1;
  }
  .pbs-header-hp .pbs-topnav-close .pbs-icon { width: 28px; height: 28px; }
  /* Login/Register/Cart (.pbs-hp-hero-login, z-index:993) sat outside .pbs-hp-hero-overlay's own
     stacking context - since the overlay establishes a stacking context (it has z-index:2), the
     topnav's z-index:9999 is trapped INSIDE it and only matters when compared to the overlay's own
     siblings using the overlay's z-index (2), which loses to login's 993. Bumping the overlay's own
     z-index above login's fixes it without touching the login button (which needs to stay above the
     hero image/nav on every other page). */
  .pbs-header-hp .pbs-hp-hero-overlay { z-index: 995; }

  .pbs-products-listing { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  .pbs-gallery-subcats, .pbs-gallery-overview, .pbs-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .pbs-gallery-masonry { column-count: 3; }

  .pbs-hp-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  #pbs-products-left { position: static; flex-basis: 100%; width: 100%; height: auto; padding-top: 0; }
  #pbs-products-right { flex-basis: 100%; margin-left: 0; width: 100%; }

  .pbs-contact-columns #pbs-left, .pbs-contact-columns #pbs-right { flex: 0 0 100%; max-width: 100%; }
  #pbs-user-wrapper:has(#pbs-user-left) { display: block; }
  #pbs-user-left, #pbs-user-right { width: 100%; float: none; }
  #pbs-admin-left, #pbs-admin-right { width: 100%; float: none; text-align: left; }
  #pbs-user-details, #pbs-user-delivery, #pbs-user-profile-update-details, #pbs-user-profile-update-delivery { width: 100%; float: none; }
}

@media (max-width: 480px) {
  /* Topbar: email + phone don't fit beside the icons/My Account in the fixed 30px bar at phone
     widths (they wrapped and spilled into the header below) - drop them, keep icons + My Account. */
  .pbs-contactbar-email, .pbs-contactbar-number { display: none; }
  #pbs-topbar { gap: 12px; padding: 0 16px; }

  /* Regular pages: Login/Register don't fit beside the logo + centered hamburger in the one-row
     navbar - keep just the cart (always the list's last item). */
  #pbs-navbar-right .pbs-login-text li:not(:last-child) { display: none; }
  #pbs-navbar-right { margin-right: 8px; }

  /* Homepage hero: logo (left) and Login/Register/Cart (right) share the top row, the hamburger
     sits centered on its own row underneath. */
  .pbs-hp-hero-logo img { height: 48px; }
  .pbs-hp-hero-login { right: 12px; top: calc(var(--topbar-height) + 13.33px); height: 48px; }
  .pbs-header-hp #pbs-nav-bun { top: calc(48px + 13.33px); }

  .pbs-hp-cat-grid { grid-template-columns: repeat(2, 1fr); }

  .pbs-carousel { height: 60vh; }
  .pbs-hp-slide-1-title { line-height: 48px; }
  .pbs-hp-slide-1-byline-1, .pbs-hp-slide-1-byline-2, .pbs-hp-slide-1-byline-3 { }

  .pbs-hp-masterpiece-collection-left, .pbs-hp-masterpiece-collection-right { flex: 1 1 100%; }

  .pbs-footer-col { flex: 1 1 100%; text-align: center; }
  #pbs-footer-medium { padding: 0 20px; }

  .pbs-products-listing { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  .pbs-gallery-subcats, .pbs-gallery-overview, .pbs-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pbs-gallery-masonry { column-count: 2; }
  .pbs-gallery-slider .pbs-gallery-item { flex-basis: 200px; }

  .pbs-prod-img-row { flex-direction: column; }
  .pbs-prod-img-large, .pbs-prod-img, .pbs-prod-desc { flex: 1 1 100%; }

  .modal-area { width: 92%; padding: 20px; }
  .modal-area img { width: 40%; }
}