/* ============================================================
   SYHL — HERITAGE DARK SKIN  (v1.1.0 · navy study)
   Restyles syhl-theme to the original Stewart York look:
   midnight-navy study backdrop (syhl-main-page-img), silver crest, brass accents.
   Loaded after style.css + woocommerce-custom.css. Remove this block
   to revert to the cream v1.0 skin.
   ============================================================ */
:root {
  --hd-bg-image:   url("../images/syhl-main-page-img.webp");
  --hd-bg-image:   image-set(url("../images/syhl-main-page-img.avif") type("image/avif"), url("../images/syhl-main-page-img.webp") type("image/webp"));
  --hd-ink:        #090e15;
  --hd-panel:      rgba(13, 20, 30, 0.82);
  --hd-panel-2:    rgba(17, 25, 37, 0.88);
  --hd-panel-solid:#111a26;
  --hd-line:       rgba(201, 168, 106, 0.24);
  --hd-line-soft:  rgba(205, 218, 235, 0.09);
  --hd-text:       #ebe8e2;
  --hd-text-soft:  rgba(235, 232, 226, 0.74);
  --hd-muted:      #9ea8b6;
  --hd-silver:     #cfd2d6;
  --hd-silver-dim: #9aa0a6;
}

/* ---------- Page backdrop ---------- */
html { background: var(--hd-ink); }
body {
  background-color: var(--hd-ink);
  background-image:
    linear-gradient(180deg, rgba(8,13,20,0.58) 0%, rgba(8,13,20,0.70) 45%, rgba(7,11,17,0.88) 100%),
    var(--hd-bg-image);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: var(--hd-text);
}
/* iOS Safari ignores fixed attachment — use a pinned layer instead */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg, rgba(8,13,20,0.60), rgba(7,11,17,0.88)),
      var(--hd-bg-image) center top / cover no-repeat;
  }
}

h1, h2, h3, h4, h5, h6 { color: var(--hd-text); }
p { color: var(--hd-text-soft); }
::selection { background: var(--gold); color: var(--charcoal); }

/* ---------- Buttons ---------- */
.btn-outline { color: var(--hd-text); border-color: rgba(235,232,226,0.45); }
.btn-outline:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }

/* ---------- Announcement bar ---------- */
.announcement-bar {
  background: rgba(6, 4, 3, 0.92);
  color: var(--gold-light);
  border-bottom: 1px solid var(--hd-line);
}

/* ---------- Header ---------- */
#masthead {
  background: rgba(12, 9, 6, 0.82);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--hd-line);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
/* Silver heritage crest replaces the square JPG logo */
.site-logo img,
.footer-brand img {
  content: url("../images/syhl-crest.webp");
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.site-logo img { height: 76px; }
.primary-nav > li > a { color: var(--hd-text); }
.primary-nav > li > a:hover { color: var(--gold-light); }
.header-actions a, .header-actions button { color: var(--hd-text); }
.header-actions a:hover, .header-actions button:hover { color: var(--gold-light); }
.header-actions .cart-btn {
  background: transparent; border: 1px solid var(--gold) !important; color: var(--gold-light) !important;
}
.header-actions .cart-btn:hover { background: var(--gold); color: var(--charcoal) !important; }
.cart-count { color: var(--charcoal); }
.mobile-menu-toggle span { background: var(--hd-text); }
.dropdown-menu { background: rgba(12,18,27,0.97); }
.search-bar { background: rgba(8,13,20,0.97); border-bottom: 1px solid var(--hd-line); }
.mobile-nav-overlay {
  background: linear-gradient(rgba(8,13,20,0.93), rgba(8,13,20,0.97)), var(--hd-bg-image) center / cover;
}

/* ---------- Hero / strips ---------- */
.site-hero { background: transparent; }
.site-hero__grid { opacity: 0.5; }
.disclaimer-strip { background: rgba(7,11,17,0.72); border-bottom: 1px solid var(--hd-line-soft); }
.disclaimer-strip p { color: rgba(235,232,226,0.55); }

/* ---------- Category tabs ---------- */
.category-tabs {
  background: rgba(12,18,27,0.70);
  border-bottom: 1px solid var(--hd-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.category-tabs a, .category-tabs button { color: var(--hd-muted); }
.category-tabs a:hover, .category-tabs a.active,
.category-tabs button:hover, .category-tabs button.active { color: var(--hd-text); border-bottom-color: var(--gold); }

/* ---------- Shop: sidebar & toolbar ---------- */
.filter-sidebar {
  background: var(--hd-panel);
  border: 1px solid var(--hd-line-soft);
}
.filter-sidebar__header, .filter-group, .products-toolbar { border-color: var(--hd-line-soft); }
.filter-sidebar__header, .results-count, .filter-option .count,
.filter-group__title .toggle-icon, .price-inputs span, .rating-bar .val { color: var(--hd-muted); }
.filter-group__title, .filter-option, .rating-bar label { color: var(--hd-text-soft); }
.filter-group__title:hover { color: var(--gold-light); }
.note-tag { border-color: var(--hd-line); color: var(--hd-text-soft); }
.filter-apply { background: var(--gold); color: var(--charcoal); }
.filter-apply:hover { background: var(--gold-light); }
.filter-clear { color: var(--hd-muted); border-color: var(--hd-line); }
.filter-clear:hover { color: var(--hd-text); border-color: var(--hd-text); }
.view-btn { border-color: var(--hd-line); color: var(--hd-muted); }
.view-btn.active { border-color: var(--gold); color: var(--gold-light); }
.no-products-found, .woocommerce-no-products-found { color: var(--hd-text-soft); }

/* ---------- Form controls (global dark) ---------- */
.price-inputs input,
.sort-select, .woocommerce-ordering select,
.form-group input, .form-group select, .form-group textarea,
.newsletter-form input,
.quantity .qty,
.woocommerce .input-text,
.woocommerce .select2-container .select2-selection--single,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background-color: rgba(7,11,17,0.65) !important;
  border-color: var(--hd-line) !important;
  color: var(--hd-text) !important;
}
.sort-select, .woocommerce-ordering select, .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b8975a'/%3E%3C/svg%3E") !important;
}
input::placeholder, textarea::placeholder { color: rgba(235,232,226,0.35); }
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { color: var(--hd-text); }
.select2-dropdown { background: var(--hd-panel-solid); color: var(--hd-text); border-color: var(--hd-line); }
.form-group label, .checkbox-label { color: var(--hd-text-soft); }
.form-section-label, .sell-form-wrap .form-sub { color: var(--hd-muted); border-color: var(--hd-line-soft); }
.upload-area { background: rgba(7,11,17,0.55) !important; border-color: var(--hd-line) !important; }
.upload-area:hover { background: rgba(184,151,90,0.10) !important; }
.upload-area p, .upload-area .upload-icon { color: var(--hd-muted); }

/* ---------- Product cards ---------- */
.product-card, ul.products li.product {
  background: var(--hd-panel-2);
  border: 1px solid var(--hd-line-soft);
}
.product-card:hover, ul.products li.product:hover {
  border-color: var(--hd-line);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}
.product-card__img, .woocommerce-product-gallery, .product-main-img { background: #efebe4; }
.product-card__info, ul.products li.product .woocommerce-loop-product__title { border-top-color: var(--hd-line-soft); }
.product-card__name, ul.products li.product .woocommerce-loop-product__title,
.product-card__price, ul.products li.product .price,
.product-price-display, .spec-value { color: var(--hd-text) !important; }
.product-card__sub, .product-card__price-orig, del, .frag-rating-label,
.product-details .product-sub, .spec-label, .product-share span { color: var(--hd-muted); }
.product-tag { border-color: var(--hd-line); color: var(--hd-muted); }
.frag-dot { background: rgba(235,232,226,0.15); }
.wishlist-btn { background: rgba(10,15,23,0.85); border-color: var(--hd-line); color: var(--hd-text-soft); }
.add-to-cart-btn, .button.add_to_cart_button { background: transparent; border: 1px solid var(--gold) !important; color: var(--gold-light) !important; }
.add-to-cart-btn:hover, .button.add_to_cart_button:hover { background: var(--gold); color: var(--charcoal) !important; }

/* ---------- Single product ---------- */
.product-desc, .woocommerce div.product .woocommerce-product-details__short-description { color: var(--hd-text-soft); }
.spec-row { border-bottom-color: var(--hd-line-soft); }
.product-thumb { border-color: var(--hd-line-soft); }
.product-disclaimer { background: rgba(7,11,17,0.6); color: var(--hd-muted); }
.share-btn { border-color: var(--hd-line); color: var(--hd-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border-color: var(--hd-line-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--hd-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hd-text); }
.woocommerce div.product .woocommerce-tabs .panel { color: var(--hd-text-soft); }

/* ---------- Content sections ---------- */
.auth-section, .sell-hero, .sell-why, .sourcing-visual { background: rgba(7,11,17,0.72); }
.sourcing-section, .sell-process { background: rgba(15,23,34,0.62); }
.sourcing-text p, .sourcing-list li { color: var(--hd-text-soft); border-color: var(--hd-line-soft); }
.sell-cat-card { background: var(--hd-panel-2) !important; border-color: var(--hd-line-soft) !important; }
.sell-cat-card h3 { color: var(--hd-text); }
.sell-cat-card p { color: var(--hd-muted); }
.sell-cat-card .cat-link { border-color: var(--gold); color: var(--gold-light); }
.sell-cat-card::before { background: rgba(184,151,90,0.14); }
.process-step { background: var(--hd-panel-2); border-color: var(--hd-line-soft); }
.process-step p { color: var(--hd-muted); }
.step-num { color: rgba(184,151,90,0.35); }

/* Generic page content (About, policy pages, etc.) */
.entry-content, .page-content { color: var(--hd-text-soft); }
.entry-content a, .page-content a { color: var(--gold-light); }

/* ---------- Newsletter ---------- */
.newsletter-section { background: rgba(12,18,27,0.78); border-top: 1px solid var(--hd-line); }
.newsletter-section p { color: var(--hd-muted); }
.newsletter-form button { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.newsletter-form button:hover { background: var(--gold-light); border-color: var(--gold-light); }
.social-links a { color: var(--hd-text-soft); border-color: var(--hd-line); }

/* ---------- Footer ---------- */
#colophon { background: rgba(5,8,13,0.94); border-top: 1px solid var(--hd-line); }
.footer-brand img { height: 96px !important; width: auto; }
.footer-legal { background: rgba(4,6,10,0.96); }
.footer-bottom { background: #04070b; }

/* ---------- WooCommerce: cart, checkout, account ---------- */
.woocommerce table.shop_table { border-color: var(--hd-line-soft); color: var(--hd-text-soft); }
.woocommerce table.shop_table th { color: var(--hd-muted); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th,
.woocommerce-orders-table td, .woocommerce-orders-table th { border-color: var(--hd-line-soft) !important; }
.shop_table.cart .product-name a,
table.shop_table .order-total .amount,
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, #order_review_heading { color: var(--hd-text); }
.woocommerce #payment, .woocommerce-checkout-payment { background: var(--hd-panel-2) !important; border-color: var(--hd-line-soft) !important; color: var(--hd-text-soft); }
.woocommerce #payment div.payment_box { background: rgba(7,11,17,0.7); color: var(--hd-text-soft); }
.woocommerce #payment div.payment_box::before { border-bottom-color: rgba(7,11,17,0.7); }
.woocommerce-order-overview li { background: var(--hd-panel-2); border-color: var(--hd-line-soft); }
.woocommerce-MyAccount-navigation ul { border-color: var(--hd-line-soft); }
.woocommerce-MyAccount-navigation ul li a { color: var(--hd-text-soft); }
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover { background: rgba(184,151,90,0.08); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--hd-panel-2) !important; color: var(--hd-text-soft) !important;
}
.woocommerce-message .button, .woocommerce-info .button { background: var(--gold) !important; color: var(--charcoal) !important; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span { border-color: var(--hd-line) !important; color: var(--hd-text-soft); }
.woocommerce-pagination ul li span.current { background: var(--gold) !important; color: var(--charcoal) !important; border-color: var(--gold) !important; }
.woocommerce form .form-row label { color: var(--hd-text-soft); }
.woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a { color: var(--hd-muted) !important; }

/* Block-based cart/checkout (WooCommerce blocks) */
.wc-block-components-panel, .wc-block-components-totals-wrapper,
.wc-block-cart, .wc-block-checkout { color: var(--hd-text-soft); }
.wc-block-components-text-input input, .wc-block-components-combobox input,
.wc-blocks-components-select__select {
  background: rgba(7,11,17,0.65) !important; color: var(--hd-text) !important; border-color: var(--hd-line) !important;
}
.wc-block-components-text-input label { color: var(--hd-muted) !important; }

/* ---------- Toast ---------- */
.syhl-toast { background: rgba(10,15,23,0.96); color: var(--hd-text); }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .site-logo img { height: 60px; }
  body { background-position: 40% top; }
}

/* ---------- JEWELRY ADDITIONS (2026-09-10) ---------- */
.sell-categories { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .sell-categories { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .sell-categories { grid-template-columns: 1fr; } }
.category-tabs--sub { background: rgba(10,15,23,0.55); border-bottom: 1px solid var(--hd-line-soft); }
.category-tabs--sub a { padding-top: 12px; padding-bottom: 12px; font-size: 9px; }
.jewelry-item .dropdown-menu .dropdown-menu__header + a { margin-top: 2px; }
.jewelry-item .dropdown-menu .dropdown-menu__header:not(:first-child) { margin-top: 8px; border-top: 1px solid var(--hd-line-soft); padding-top: 12px; }
.mobile-nav-links a.mobile-sub-link { padding: 9px 0 9px 18px; font-size: 11px; letter-spacing: 1.5px; color: var(--hd-text-soft); border-bottom-color: rgba(255,255,255,0.04); }

/* ---------- CONTACT PAGE + FORM MESSAGES (2026-09-10) ---------- */
.page-template-page-contact main > div[style*="grid"] { gap: 1px !important; margin-bottom: 72px !important; }
.page-template-page-contact main > div[style*="grid"] > div { background: var(--hd-panel-2) !important; border: 1px solid var(--hd-line-soft); }
.page-template-page-contact main > div[style*="grid"] > div:first-child { background: rgba(7,11,17,0.82) !important; }
.page-template-page-contact main > div[style*="grid"] h2 { color: var(--hd-text) !important; }
.page-template-page-contact main > div[style*="grid"] > div:first-child h2 { color: var(--gold-light) !important; }
.page-template-page-contact main > div[style*="grid"] p { color: var(--hd-text-soft) !important; }
#cfMsg, #sellFormMsg { background: rgba(7,11,17,0.75) !important; color: var(--hd-text) !important; }
@media (max-width: 768px) {
  .page-template-page-contact main > div[style*="grid"] { grid-template-columns: 1fr !important; }
  .page-template-page-contact main > div[style*="grid"] > div { padding: 40px 24px !important; }
}


/* ---------- Category filter / search / sort sidebar (v1.1.3) ---------- */
.syhl-filters { position: sticky; top: 110px; background: var(--hd-panel); border: 1px solid var(--hd-line-soft); padding: 24px 22px; backdrop-filter: blur(6px); max-height: calc(100vh - 130px); overflow-y: auto; }
.syhl-filters__toggle { display: none; }
.syhl-filters__header { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--hd-muted); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hd-line-soft); }
.syhl-fg { border-bottom: 1px solid var(--hd-line-soft); padding: 14px 0; }
.syhl-fg:last-of-type { border-bottom: 0; }
.syhl-fg__title { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--hd-text-soft); text-align: left; }
button.syhl-fg__title::after { content: "+"; color: var(--hd-muted); font-size: 14px; }
.syhl-fg[data-open] > button.syhl-fg__title::after { content: "−"; }
.syhl-fg__title:hover { color: var(--gold-light); }
.syhl-fg__n { margin-left: auto; margin-right: 8px; background: var(--gold); color: var(--charcoal); font-size: 10px; letter-spacing: 0; padding: 1px 6px; border-radius: 8px; }
.syhl-fg__body { display: none; margin-top: 12px; flex-direction: column; gap: 8px; }
.syhl-fg[data-open] .syhl-fg__body { display: flex; }
.syhl-fg--search .syhl-fg__title { cursor: default; margin-bottom: 10px; }
.syhl-filters input[type=search], .syhl-filters input[type=number], .syhl-filters select { width: 100%; background: rgba(9,14,21,.6); border: 1px solid var(--hd-line); color: var(--hd-text); padding: 10px 12px; font: inherit; font-size: 13px; border-radius: 0; }
.syhl-filters input:focus, .syhl-filters select:focus { outline: none; border-color: var(--gold); }
.syhl-price { flex-direction: row !important; align-items: center; }
.syhl-price span { color: var(--hd-muted); font-size: 12px; }
.syhl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.syhl-tags .note-tag { background: transparent; cursor: pointer; font-size: 11px; padding: 5px 10px; border: 1px solid var(--hd-line); color: var(--hd-text-soft); }
.syhl-tags .note-tag.active { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.syhl-filters .filter-apply { width: 100%; margin-top: 18px; border: 0; padding: 13px; cursor: pointer; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.syhl-filters .syhl-clear { display: block; text-align: center; margin-top: 10px; padding: 11px; border: 1px solid var(--hd-line); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; }
.syhl-filters__badge { display: inline-block; margin-left: 8px; background: var(--gold); color: var(--charcoal); font-size: 10px; padding: 1px 7px; border-radius: 8px; }
.shop-layout > .filter-sidebar { display: none; }
@media (max-width: 900px) {
  .syhl-filters { position: static; max-height: none; padding: 0; background: transparent; border: 0; backdrop-filter: none; }
  .syhl-filters__toggle { display: flex; justify-content: center; align-items: center; width: 100%; padding: 13px; background: var(--hd-panel); border: 1px solid var(--hd-line); color: var(--hd-text); font: inherit; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
  .syhl-filters__form { display: none; margin-top: 10px; background: var(--hd-panel-solid); border: 1px solid var(--hd-line-soft); padding: 18px; }
  .syhl-filters.is-open .syhl-filters__form { display: block; }
  .syhl-filters__header { display: none; }
}

/* WooCommerce loop wrapper sits inside #productGrid - let cards join the theme grid */
#productGrid > ul.products { display: contents !important; }
#productGrid > ul.products::before, #productGrid > ul.products::after { display: none !important; content: none !important; }


/* ---------- Compact product tiles: 5 per row (v1.2.0) ---------- */
.product-grid, ul.products, .product-grid[style] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; }
.product-grid.list-view { grid-template-columns: 1fr !important; }
.product-card__info, ul.products li.product .woocommerce-loop-product__title { padding: 10px 12px 12px !important; }
.product-card__brand { font-size: 8px !important; letter-spacing: 1.8px !important; margin-bottom: 3px !important; }
.product-card__name, ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; line-height: 1.3 !important; margin-bottom: 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__sub { font-size: 10px !important; margin-bottom: 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card__price, ul.products li.product .price { font-size: 14px !important; }
.product-card__price-orig { font-size: 10px !important; }
.product-card__price-row { flex-wrap: wrap; gap: 6px !important; align-items: center !important; }
.product-card .add-to-cart-btn { font-size: 8px !important; letter-spacing: 1.2px !important; padding: 6px 8px !important; }
.product-card .badge { top: 8px !important; left: 8px !important; font-size: 7px !important; padding: 3px 6px !important; }
.product-card .wishlist-btn { width: 26px !important; height: 26px !important; top: 8px !important; right: 8px !important; font-size: 12px !important; }
.product-card .frag-ratings, .product-card .product-tags { display: none !important; }
@media (max-width: 1200px) { .product-grid, ul.products, .product-grid[style] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 900px)  { .product-grid, ul.products, .product-grid[style] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 600px)  { .product-grid, ul.products, .product-grid[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }

/* ---------- Contact details block ---------- */
.syhl-contact-block { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.syhl-contact-block__row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.syhl-contact-block__icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.syhl-contact-block__label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 4px; }
.syhl-contact-block__value, .syhl-contact-block__value a { font-size: 15px; color: var(--hd-text, #ebe8e2); text-decoration: none; line-height: 1.7; }
.syhl-contact-block__value a:hover { color: var(--gold-light); }
.syhl-footer-contact { font-size: 12px; color: var(--hd-muted); line-height: 1.8; margin-top: 14px; }
.syhl-footer-contact a { color: var(--hd-text-soft); text-decoration: none; }

/* ---------- The Journal ---------- */
.syhl-journal__hero { padding: 72px 48px 40px !important; }
.syhl-journal__desc { max-width: 640px; margin: 0 auto; color: var(--hd-text-soft); }
.syhl-journal__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 24px 32px; }
.syhl-journal__cats a { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--hd-text-soft); border: 1px solid var(--hd-line); padding: 8px 14px; text-decoration: none; }
.syhl-journal__cats a:hover, .syhl-journal__cats a.active { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.syhl-journal__wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px 80px; }
.syhl-journal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.syhl-jcard { background: var(--hd-panel-2); border: 1px solid var(--hd-line-soft); transition: border-color .3s, transform .3s; }
.syhl-jcard:hover { border-color: var(--hd-line); transform: translateY(-2px); }
.syhl-jcard__img { display: block; aspect-ratio: 16/10; overflow: hidden; background: #111a26; }
.syhl-jcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.syhl-jcard__ph { display: flex; height: 100%; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 32px; letter-spacing: 6px; color: var(--gold); opacity: .5; }
.syhl-jcard__body { padding: 18px 20px 22px; }
.syhl-jcard__cat { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); }
.syhl-jcard__title { font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.3; margin: 8px 0 10px; }
.syhl-jcard__title a { color: var(--hd-text); text-decoration: none; }
.syhl-jcard__title a:hover { color: var(--gold-light); }
.syhl-jcard__excerpt { font-size: 13px; line-height: 1.7; color: var(--hd-text-soft); margin-bottom: 12px; }
.syhl-jcard__meta { font-size: 10px; letter-spacing: 1px; color: var(--hd-muted); }
.syhl-journal__pager { margin-top: 40px; text-align: center; }
.syhl-journal__pager .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 2px; border: 1px solid var(--hd-line); color: var(--hd-text-soft); text-decoration: none; font-size: 12px; }
.syhl-journal__pager .page-numbers.current { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.syhl-journal__empty { text-align: center; color: var(--hd-muted); padding: 40px 0; }
@media (max-width: 900px) { .syhl-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .syhl-journal__grid { grid-template-columns: 1fr; } .syhl-journal__wrap { padding: 0 16px 60px; } }

/* ---------- Comments & product reviews ---------- */
.syhl-comments, .syhl-reviews { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--hd-line-soft); }
.syhl-comments__title, .syhl-reviews .woocommerce-Reviews-title { font-family: var(--font-serif); font-weight: 300; font-size: 26px; color: var(--hd-text); margin-bottom: 24px; }
.syhl-comments__list, .syhl-reviews .commentlist { list-style: none; margin: 0 0 32px; padding: 0; }
.syhl-comments__list .comment, .syhl-reviews .commentlist li { background: var(--hd-panel); border: 1px solid var(--hd-line-soft); padding: 18px 20px; margin-bottom: 14px; }
.syhl-comments__list .children { list-style: none; margin: 14px 0 0 24px; padding: 0; }
.syhl-comments__list .comment-author, .syhl-comments__list .comment-meta, .syhl-comments__list .comment-meta a { font-size: 11px; color: var(--hd-muted); text-decoration: none; }
.syhl-comments__list .comment-author .fn { color: var(--gold-light); font-style: normal; font-size: 13px; }
.syhl-comments__list .avatar, .syhl-reviews .avatar { border-radius: 50%; float: left; margin-right: 12px; }
.syhl-comments__list .comment-content, .syhl-reviews .description { color: var(--hd-text-soft); font-size: 14px; line-height: 1.8; clear: both; padding-top: 8px; }
.syhl-comments__list .reply a { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.syhl-comments__reply, .syhl-reviews .comment-reply-title { font-family: var(--font-serif); font-weight: 300; font-size: 22px; color: var(--hd-text); display: block; margin-bottom: 8px; }
.syhl-comments__note, .syhl-reviews .comment-notes { font-size: 11px; color: var(--hd-muted); margin-bottom: 18px; }
.syhl-comments label, .syhl-reviews label { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hd-text-soft); margin-bottom: 6px; }
.syhl-comments input[type=text], .syhl-comments input[type=email], .syhl-comments input[type=url], .syhl-comments textarea,
.syhl-reviews input[type=text], .syhl-reviews input[type=email], .syhl-reviews textarea, .syhl-reviews select { width: 100%; background: rgba(9,14,21,.6); border: 1px solid var(--hd-line); color: var(--hd-text); padding: 11px 12px; font: inherit; font-size: 14px; margin-bottom: 14px; }
.syhl-comments .comment-form-cookies-consent label, .syhl-reviews .comment-form-cookies-consent label { display: inline; text-transform: none; letter-spacing: 0; }
.syhl-comments .form-submit input, .syhl-reviews .form-submit input { background: var(--gold); color: var(--charcoal); border: 0; padding: 13px 26px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.syhl-reviews .star-rating, .syhl-reviews p.stars a { color: var(--gold); }
.syhl-reviews .woocommerce-review__verified { color: var(--gold-light); font-style: normal; font-size: 10px; letter-spacing: 1px; }
.syhl-reviews .woocommerce-noreviews, .syhl-reviews .woocommerce-verification-required { color: var(--hd-muted); font-size: 13px; }


/* ============================================================
   HOME EDITORIAL v1 (2026-09-15)
   The front page is the editorial layout in index.php. These rules
   dress the category tiles and the curated row for the dark skin.
   ============================================================ */

/* ---------- Category tiles ---------- */
.home .cat-tiles,
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 268px));
  justify-content: center;
  gap: 16px;
  border: 0;
}
.cat-tile {
  background: var(--hd-panel) !important;
  border: 1px solid var(--hd-line) !important;
  color: var(--hd-text) !important;
  border-radius: 2px;
  padding: 34px 18px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cat-tile:hover {
  background: var(--hd-panel-2) !important;
  border-color: rgba(201, 168, 106, 0.55) !important;
  transform: translateY(-3px);
}
.cat-tile__icon {
  color: var(--gold, #c9a86a);
  line-height: 0;
  display: block;
  opacity: .9;
}
.cat-tile:hover .cat-tile__icon { opacity: 1; }
.cat-tile__name {
  color: var(--hd-text) !important;
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.cat-tile__sub {
  color: var(--hd-muted) !important;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cat-tile__count {
  color: var(--gold, #c9a86a) !important;
  font-size: .72rem;
  letter-spacing: .1em;
}

/* ---------- Curated row on the home page ----------
   The shop archive runs 5 compact tiles per row; the home page shows
   four larger ones so the section reads as a selection, not a catalogue. */
.home .featured-products .product-grid,
.front-page .featured-products .product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch;
}
.home .featured-products .product-card,
.front-page .featured-products .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.home .featured-products .product-card__media,
.home .featured-products .product-card a > img,
.home .featured-products .product-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}
@media (max-width: 1024px) {
  .home .featured-products .product-grid,
  .front-page .featured-products .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .home .featured-products .product-grid,
  .front-page .featured-products .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-tile { padding: 24px 12px 20px; }
}

/* ---------- Promise pillars: drop the emoji, use a hairline rule ---------- */
.auth-pillar .icon {
  font-size: 0;
  line-height: 0;
  display: block;
  margin: 0 auto 14px;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #c9a86a), transparent);
}

/* Keep the tile row centred and at a sane width when only a couple of
   categories currently hold stock. */
.cat-tiles.cat-tiles {
  grid-template-columns: repeat(auto-fit, minmax(190px, 268px)) !important;
  justify-content: center !important;
}


/* ============================================================
   READABILITY PASS v1 (2026-09-15)
   Two jobs:
   1. Lift every low-contrast run of text to at least 4.5:1 (3:1 for
      large text) against the surface it actually sits on.
   2. Give the cart and checkout their own flat surface, off the
      photographic backdrop, so a customer entering payment details
      reads crisp text on a solid panel.
   ============================================================ */

:root {
  --hd-ink-flat:   #0c121b;   /* flat ground for transactional pages */
  --hd-surface:    #141c28;   /* panel for cart / checkout */
  --hd-surface-2:  #1a2330;   /* raised panel: summary, fields */
  --hd-field:      #0e151f;   /* form input ground */
  --hd-text-quiet: #a7aeb9;   /* smallest print: 7:1 on the dark ground */
  --hd-text-mid:   #c2c8d1;   /* secondary text and links */
}

/* ---------- 1. Footer small print and legal text ----------
   These were white at 0.22–0.40 alpha, landing between 1.8:1 and 2.4:1. */
.footer-legal p,
.footer-legal__text,
.footer-legal__block p,
.footer-legal__block li {
  color: var(--hd-text-quiet) !important;
}
.footer-legal__block h5,
.footer-legal strong,
.footer-legal__block strong {
  color: #d5dae1 !important;
}
.footer-main .footer-col a,
.footer-bottom-links a,
.footer-bottom a {
  color: var(--hd-text-mid) !important;
}
.footer-main .footer-col a:hover,
.footer-bottom-links a:hover,
.footer-bottom a:hover {
  color: var(--gold-light, #dcc48d) !important;
}
.footer-main .footer-col p,
.footer-brand p,
.footer-bottom p,
.site-footer p {
  color: var(--hd-text-quiet) !important;
}

/* ---------- Navigation dropdown sub-labels ---------- */
.dm-sub,
.primary-nav .dm-sub {
  color: var(--hd-text-quiet) !important;
}

/* ---------- Announcement bar and disclaimer strip ---------- */
.disclaimer-strip,
.disclaimer-strip p,
.disclaimer-strip span {
  color: #c6ccd4 !important;
}

/* ---------- 'How we source' step numerals (gold at 0.35 alpha) ---------- */
.step-num,
.source-num {
  color: rgba(201, 168, 106, 0.85) !important;
}

/* ---------- Legacy cream-theme page templates ----------
   These templates carry inline color:var(--charcoal) on their headings,
   which is near-black and unreadable on the dark skin. Inline styles
   only yield to !important. */
body[class*="page-template-page-legal-disclaimers"] #main h1,
body[class*="page-template-page-legal-disclaimers"] #main h2,
body[class*="page-template-page-legal-disclaimers"] #main h3,
body[class*="page-template-page-legal-disclaimers"] #main h4,
body[class*="page-template-page-privacy-policy"] #main h1,
body[class*="page-template-page-privacy-policy"] #main h2,
body[class*="page-template-page-privacy-policy"] #main h3,
body[class*="page-template-page-privacy-policy"] #main h4 {
  color: var(--hd-text) !important;
}
body[class*="page-template-page-legal-disclaimers"] #main p,
body[class*="page-template-page-legal-disclaimers"] #main li,
body[class*="page-template-page-privacy-policy"] #main p,
body[class*="page-template-page-privacy-policy"] #main li {
  color: var(--hd-text-soft) !important;
}

/* ============================================================
   2. CART & CHECKOUT — flat ground, solid panels, legible fields
   ============================================================ */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
  background-image: none !important;
  background-color: var(--hd-ink-flat) !important;
}
body.woocommerce-cart::before,
body.woocommerce-checkout::before,
body.woocommerce-account::before {
  display: none !important;
}

/* The two columns become real panels rather than text on a photograph. */
.wc-block-checkout__main,
.wc-block-cart__main,
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar,
.woocommerce-account .woocommerce {
  background: var(--hd-surface);
  border: 1px solid var(--hd-line);
  border-radius: 3px;
  padding: 28px 28px 32px;
}
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar {
  background: var(--hd-surface-2);
}

/* Text inside the transactional panels */
.wc-block-checkout,
.wc-block-cart,
.wc-block-checkout p,
.wc-block-cart p,
.wc-block-components-checkout-step__description,
.wc-block-components-order-summary-item__description,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
  color: var(--hd-text-mid) !important;
}
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__main h2,
.wc-block-components-order-summary__title,
.wc-block-components-product-name {
  color: var(--hd-text) !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount,
.wc-block-components-product-price {
  color: var(--hd-text) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: #f2efe9 !important;
}

/* Form fields: solid ground, light ink, a border you can see, gold focus */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select select,
.wc-block-components-combobox input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
#main input[type="text"],
#main input[type="email"],
#main input[type="tel"],
#main input[type="password"],
#main input[type="search"],
#main select,
#main textarea {
  background-color: var(--hd-field) !important;
  color: #f0ede7 !important;
  border: 1px solid rgba(205, 218, 235, 0.30) !important;
  border-radius: 2px;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.woocommerce form .form-row input.input-text:focus,
#main input:focus,
#main select:focus,
#main textarea:focus {
  border-color: var(--gold, #c9a86a) !important;
  outline: 2px solid rgba(201, 168, 106, 0.35);
  outline-offset: 1px;
}
.wc-block-components-text-input label,
.wc-block-components-select__label,
.wc-block-components-checkbox__label,
.woocommerce form .form-row label,
#main label {
  color: var(--hd-text-mid) !important;
}
.wc-block-components-text-input.is-active label {
  color: var(--hd-text-quiet) !important;
}
::placeholder { color: #8d96a3 !important; opacity: 1; }

/* Notices, validation and helper text need to be readable too */
.wc-block-components-validation-error,
.woocommerce-error,
.woocommerce-error li {
  color: #ff9d8a !important;
}
.wc-block-components-notice-banner,
.woocommerce-info,
.woocommerce-message {
  background: var(--hd-surface-2) !important;
  color: var(--hd-text) !important;
  border-color: var(--hd-line) !important;
}
.wc-block-components-notice-banner *,
.woocommerce-info *,
.woocommerce-message * { color: inherit !important; }

/* Panel separators */
.wc-block-components-checkout-step,
.wc-block-cart-items__row,
.wc-block-components-order-summary-item {
  border-color: rgba(205, 218, 235, 0.14) !important;
}

@media (max-width: 782px) {
  .wc-block-checkout__main,
  .wc-block-cart__main,
  .wc-block-checkout__sidebar,
  .wc-block-cart__sidebar,
  .woocommerce-account .woocommerce { padding: 18px 16px 22px; }
}


/* ---------- CHECKOUT SUMMARY FIT ----------
   The panel padding squeezed the order-summary column until product
   names wrapped one word per line. Trim the padding, cap the thumbnail
   and let the name have the room. */
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar { padding: 20px 18px 24px; }
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img { width: 48px !important; max-width: 48px !important; }
.wc-block-components-order-summary-item__description { padding-left: 10px; }
.wc-block-components-order-summary-item__total-price { white-space: nowrap; }
.wc-block-components-product-name { line-height: 1.35; }
@media (min-width: 1100px) {
  .wc-block-checkout__sidebar, .wc-block-cart__sidebar { min-width: 340px; }
}


/* ---------- PILLAR BODY TEXT ----------
   Pillar copy sat at 3.8:1 over the panel; lift it past 4.5:1. */
.auth-pillar p,
.auth-pillars p,
.source-item p,
.sourcing-list li {
  color: #b9c0ca !important;
}


/* ---------- AUTHENTICATION PAGE CARDS ----------
   The step cards carry inline background:var(--white) from the original
   cream theme, so cream text landed on a white card at 1.2:1. Rebinding
   the variables inside this template turns every such card into a dark
   panel without touching the inline markup. */
body[class*="page-template-page-authentication"] #main {
  --white: #141c28;
  --off-white: #141c28;
  --cream: #141c28;
  --light-gray: rgba(205, 218, 235, 0.16);
}


/* ---------- AUTHENTICATION PAGE TEXT ----------
   With the cards rebound to dark, the headings that were written for a
   light band (inline color:var(--charcoal)) need light ink to match. */
body[class*="page-template-page-authentication"] #main h1,
body[class*="page-template-page-authentication"] #main h2,
body[class*="page-template-page-authentication"] #main h3,
body[class*="page-template-page-authentication"] #main h4 {
  color: var(--hd-text) !important;
}
body[class*="page-template-page-authentication"] #main p,
body[class*="page-template-page-authentication"] #main li {
  color: #b9c0ca !important;
}