/* ==========================================================================
   Brand layer over WoodMart (loaded on every page, after WoodMart's own CSS)
   Colours are the palette ROLES printed as --arham-<role> in <head> (inc/brand.php) from the client option:
   base = page, surface = footer and borders, primary = header band, buttons, links, text = type, accent = hairlines and seals only
   Button colours are owned by Theme Settings (btns_shop_* / btns_default_*), not by this file.
   WoodMart prints many part-stylesheets inside <body>, after <head> CSS — rules here that compete
   with them carry an extra `html body` for specificity instead of !important.
   ========================================================================== */

:root:root {
  --wd-main-bgcolor: var(--arham-base);
  --wd-text-color: var(--arham-text);
  --wd-title-color: var(--arham-text);
  --wd-link-color: var(--arham-primary);
  --wd-link-color-hover: var(--arham-primary);
  --wd-primary-color: var(--arham-primary);
  --wd-alternative-color: var(--arham-accent);
  --wd-form-brd-color: var(--arham-surface);
  --wd-form-brd-color-focus: var(--arham-primary);
  --wd-entities-title-color: var(--arham-text); /* product names on cards and the product page (WoodMart prints #333) */
  --wd-entities-title-color-hover: color-mix(in srgb, var(--arham-text) 65%, transparent);
}

/* paper grain over the base colour (desktop only): barely there, gives the page a printed feel. The noise is the mask and the colour is the
   palette's deep primary, so a client's palette tints it (no colour is baked into the image). */
@media (min-width: 769px) {
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .045;
    background-color: var(--arham-primary-dark, var(--arham-primary));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* Ivory is the 60 % base of the whole page */
html body,
html .wd-page-wrapper,
html .website-wrapper,
html .main-page-wrapper,
html .wd-page-content { background-color: var(--arham-base); }

/* Primary-colour header band with surface-colour type */
html body .whb-header .whb-general-header,
html body .whb-header .whb-main-header { background-color: var(--arham-primary); }
html body .whb-header .wd-nav > li > a,
html body .whb-header .wd-tools-element > a { color: var(--arham-surface); }
html body .whb-header .wd-nav > li > a:hover,
html body .whb-header .wd-tools-element > a:hover { color: var(--arham-base); }

/* The add-to-cart button keeps its Theme Settings colour; a gold hairline marks hover */
html body .single_add_to_cart_button:hover { box-shadow: inset 0 0 0 1px var(--arham-accent); }

/* Gold hairline as the only decorative accent */
.title.element-title::after,
.wd-section-title::after,
hr.arham-hairline { border-color: var(--arham-accent); }

/* Product cards: jewellery photographed on the base colour */
html body .wd-product .product-element-top { background: var(--arham-base); }
html body .wd-product .wd-entities-title,
html body .wd-product .wd-loop-prod-title,
html body .product-grid-item .wd-entities-title { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: .01em; }
/* The loop-builder block prints `.wd.wd .wd-<id> .price { font-size: .9em }` inside <body>; one more
   `.wd` (WoodMart's own specificity idiom) wins without !important. */
.wd.wd.wd .wd-product .price { font-size: 15px; color: var(--arham-text); }
.price, .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* Miniature certificate on every card: the metals row's card text + weight ("925 Sterling · 18.40 g").
   Muted type is the optional palette role text_soft (--arham-text-soft); a client without it keeps the neutral grey. */
.arham-card-purity {
  margin-top: 4px;
  text-align: inherit; /* printed inside the price block (arham_card_purity), so it follows whatever alignment the card's text has */
  font: 500 11px/1.3 var(--wd-text-font, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arham-text-soft, #6b6e73);
}
/* Inside the price block: the price block's 8px bottom margin used to be the gap between price and purity line when they were
   siblings; keep that gap, and drop the block's bottom margin so the card ends where it did. */
.wd-loop-prod-price > .arham-card-purity { margin-top: 8px; }
.wd-loop-prod-price:has(> .arham-card-purity) { margin-bottom: 0; }

/* WoodMart carousel headings ("New in silver", "Most loved", "You may also like") at the editorial scale. In brand.css, not sections.css:
   the product page's related-products carousel prints the same widget and sections.css is not loaded there. */
.elementor-widget-wd_products .wd-el-title,
.elementor-widget-wd_products .element-title,
.elementor-widget-wd_products .title-wrapper .title {
  font: 500 clamp(32px, 4vw, 56px)/1.02 var(--arham-font-display, Georgia, "Times New Roman", serif) !important;
  color: var(--arham-text);
  letter-spacing: -.005em;
}

/* Sale label: bronze, never red (red is reserved for festival campaigns) */
html body .product-label.onsale { background-color: var(--arham-primary); color: var(--arham-base); }

/* Category chips under the hero: bronze hairline instead of grey */
html body .wd-cats .wd-cat,
html body .wd-cat.cat-design-side { border-color: color-mix(in srgb, var(--arham-primary) 25%, transparent); }

/* Buttons over imagery: ivory with bronze type */
html body .wd-banner .btn,
html body .wd-carousel-item .btn { background-color: var(--arham-base); color: var(--arham-primary); letter-spacing: .08em; }

/* Footer: the warm section-alt colour (P1-6; the cold surface colour was the coldest band on a warm site) under a gold hairline; a client without
   the optional role section_alt gets the base colour. (WoodMart's grey footer links, breadcrumbs and blog meta are below 4.5:1 on a tinted surface:
   a client that defines the optional palette role text_soft gets them re-coloured by inc/brand.php; without it nothing changes.) */
html body .footer-container { background-color: var(--arham-section-alt, var(--arham-base)); border-top: 1px solid color-mix(in srgb, var(--arham-accent) 55%, transparent); color: var(--arham-text); }
html body .copyrights-wrapper { background-color: var(--arham-primary); color: var(--arham-surface); }

/* ---------- product page: WhatsApp enquiry, hallmark explainer, price breakup ---------- */
.arham-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  min-height: 44px;
  padding: 0 4px;
  font: 500 13px/1.2 var(--wd-text-font, sans-serif);
  letter-spacing: .06em;
  color: var(--arham-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--arham-accent) 60%, transparent);
}
.arham-wa:hover { color: var(--arham-text); border-bottom-color: var(--arham-primary); }
.arham-wa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.arham-wa svg path:last-child { fill: currentColor; stroke: none; }

/* Showcase mode (inc/showcase.php): how to buy while online ordering is closed. Quiet, on the surface colour, with the gold hairline. */
.arham-showcase-note {
  margin: 0 0 18px;
  padding: 12px 16px;
  font: 400 15px/1.5 var(--wd-text-font, sans-serif);
  color: var(--arham-text);
  background: var(--arham-surface, transparent);
  border-left: 2px solid var(--arham-accent);
}
.single-product .arham-showcase-note { margin-top: 8px; }
.arham-showcase-note--shop { max-width: var(--wd-container-w, 1222px); margin: 0 auto 24px; }
.arham-cert-explain { margin: 8px 0 0; font-size: 13px; }
.arham-breakup { margin: 12px 0 4px; border-top: 1px solid color-mix(in srgb, var(--arham-accent) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--arham-accent) 45%, transparent); }
.arham-breakup summary { cursor: pointer; padding: 10px 0; font: 500 12px/1.3 var(--wd-text-font, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--arham-primary); list-style: none; }
.arham-breakup summary::-webkit-details-marker { display: none; }
.arham-breakup summary::after { content: "+"; float: right; font-weight: 400; }
.arham-breakup[open] summary::after { content: "–"; }
.arham-breakup table { width: 100%; margin: 0 0 8px; border: 0; }
.arham-breakup th, .arham-breakup td { padding: 6px 0; border: 0; border-bottom: 1px dotted color-mix(in srgb, var(--arham-text) 20%, transparent); font-size: 14px; text-align: left; font-weight: 400; }
.arham-breakup td { text-align: right; font-variant-numeric: tabular-nums; }
.arham-breakup p { margin: 4px 0 10px; font-size: 12px; color: var(--arham-text-soft, #6b6e73); }

/* ---------- checkout: gift options ---------- */
.arham-gift { margin-top: 28px; padding: 22px 24px; background: var(--arham-email-body, var(--arham-base)); border: 1px solid color-mix(in srgb, var(--arham-accent) 45%, transparent); }
.arham-gift h3 { margin: 0 0 12px; }
.arham-gift textarea { min-height: 84px; }
.arham-gift-summary { margin: 24px 0; padding: 18px 22px; background: var(--arham-email-body, var(--arham-base)); border-left: 2px solid var(--arham-accent); }

/* ---------------------------------------------------------------- accessibility (axe audit, 8 Oct 2026) */
/* Price-breakup labels carry units ("4.90 g", "₹11,500/g"): WoodMart capitalises table headings, which
   turned "g" into "G". Keep the label exactly as written. */
html body .arham-breakup th { text-transform: none; letter-spacing: normal; }
/* Struck-through regular price next to a sale price: WoodMart's #9e9e9e is 2.4:1 on the base colour. */
html body .price del, html body .price del .amount { color: var(--arham-text-soft, var(--arham-text)); opacity: 1; }
/* Links inside running text must not rely on colour alone (WCAG 1.4.1). Buttons are excluded. */
.arham-section p a:not(.arham-btn), .arham-prose__body p a:not(.arham-btn), .arham-showroom p a:not(.arham-btn) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* WooCommerce's "(optional)" in checkout labels is #bbb (1.7:1). */
html body .woocommerce form .form-row .optional, html body label .optional { color: var(--arham-text-soft, var(--arham-text)); }
/* The footer's WhatsApp link sits in running text and was told apart by colour only (WCAG 1.4.1). */
html body .footer-container p a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* WoodMart's checkout step labels (Shopping cart → Checkout → Order complete) are #727374 on the base colour (4.2:1). */
html body .wd-checkout-steps li:not(.step-active), html body .wd-checkout-steps li:not(.step-active) > a { opacity: 1; }
html body .wd-checkout-steps li:not(.step-active) > a > span, html body .wd-checkout-steps li:not(.step-active) > span { color: var(--arham-text-soft, var(--arham-text)); opacity: 1; }

/* ---------------------------------------------------------------- phase 1 of the UI/UX audit (docs/17) */

/* P0-4 · Required marks and validation: bronze, never red (the base colour of WoodMart's .required is #e01020).
   Errors are told apart by more than colour: an icon before the message and a 2px field border. */
html body .required { color: var(--arham-primary); }
html body .wd-compare-actions .wd-compare-remove-cat { background-color: var(--arham-primary-dark, var(--arham-primary)); }
html body :is(.checkout-inline-error-message, .wpcf7-not-valid-tip, .woocommerce-input-wrapper .error, .wc-block-components-validation-error) {
  display: flex; align-items: flex-start; gap: .4em;
  color: var(--arham-primary-dark, var(--arham-primary)); font-weight: 500;
}
html body :is(.checkout-inline-error-message, .wpcf7-not-valid-tip, .wc-block-components-validation-error)::before {
  content: ""; flex: none; width: 1.05em; height: 1.05em; margin-top: .12em; background: currentColor;
  -webkit-mask: var(--arham-alert-icon) center / contain no-repeat; mask: var(--arham-alert-icon) center / contain no-repeat;
}
html body :is(.woocommerce-invalid, .woocommerce-invalid-required-field) :is(input.input-text, textarea, select, .select2-selection),
html body :is(input, textarea, select).wpcf7-not-valid {
  border-color: var(--arham-primary-dark, var(--arham-primary)); box-shadow: 0 0 0 1px var(--arham-primary-dark, var(--arham-primary));
}
html body .woocommerce form .form-row:is(.woocommerce-invalid, .woocommerce-invalid-required-field) :is(label, label a, .woocommerce-terms-and-conditions-checkbox-text, .woocommerce-terms-and-conditions-link) { color: var(--arham-primary-dark, var(--arham-primary)); }
/* WooCommerce also paints a validated field green; the brand has no green. */
html body .woocommerce-validated :is(input.input-text, textarea, select, .select2-selection) { border-color: var(--wd-form-brd-color); }
/* Notice banner for validation errors ("Billing First name is a required field."): WoodMart paints it gold with white text (about 2:1). */
html body .woocommerce-error { background-color: var(--arham-primary-dark, var(--arham-primary)); color: var(--arham-base); }
:root { --arham-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6.2M12 16.7v.1'/%3E%3C/svg%3E"); }

html body .wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam) div.wpcf7-response-output { background-color: var(--arham-primary-dark, var(--arham-primary)); color: var(--arham-base); }

/* P1-3 · Mobile: at most one fixed bar. No back-to-top button; on a product page the bottom toolbar steps aside while WoodMart's
   sticky add-to-cart bar is showing (it then sits at the very bottom, and the page's end padding is just its own height). */
@media (max-width: 768px) {
  html body .scrollToTop { display: none; }
  html body:has(.wd-sticky-btn.wd-sticky-btn-shown) .wd-toolbar { display: none; }
  html body.sticky-toolbar-on .wd-sticky-btn { bottom: 0; }
  html body.sticky-toolbar-on.wd-sticky-btn-on-mb:has(.wd-sticky-btn.wd-sticky-btn-shown) { padding-bottom: var(--wd-sticky-btn-height); }
}

/* P1-4 · Reading sizes and weights */
body.single-post :is(.wd-single-post-content, article .entry-content, article .wd-entry-content) :is(p, li) { font-size: 17px; line-height: 1.7; }
html body :is(.wd-single-short-desc, .woocommerce-product-details__short-description) { font-size: 16px; }
html body .single_add_to_cart_button { font-weight: 500; letter-spacing: .08em; }
html body h1.product_title { font-weight: 400; color: var(--arham-text); }

/* P1-10 · Mobile product page: the wishlist heart shares the row with the WhatsApp line (as on desktop) instead of wrapping to a row of its own */
@media (max-width: 768px) {
  .e-con:has(> .wd-single-add-cart):has(> .wd-single-wishlist-btn) { flex-wrap: nowrap; }
}

/* P1-12 · Keyboard focus: a 2px bronze ring with an offset on everything interactive (mouse users get no ring: :focus-visible only).
   WoodMart draws its own ring from the --wd-otl-* variables with !important (links, buttons, checkboxes, tabindex=0), so those
   are set here; the elements it leaves out (text fields, selects, textareas, summary) get the same ring below.
   On the dark bronze surfaces (header band, copyright band, showroom card) the ring is the ivory base colour; light dropdowns inside the header go back to bronze. */
:root:root { --wd-otl-width: 2px; --wd-otl-style: solid; --wd-otl-color: var(--arham-primary); --wd-otl-offset: 3px; }
html body :is(.whb-header, .copyrights-wrapper, .arham-showroom__card, .arham-marquee) { --wd-otl-color: var(--arham-base); }
html body .whb-header :is(.wd-dropdown, .wd-search-form, .wd-search-full-screen) { --wd-otl-color: var(--arham-primary); }
html body :is(input:not([type=submit], [type=checkbox], [type=button], [type=file]), select, textarea, summary):focus-visible {
  outline: var(--wd-otl-width) var(--wd-otl-style) var(--wd-otl-color); outline-offset: var(--wd-otl-offset);
}

/* ---------------------------------------------------------------- phase 2 of the UI/UX audit (docs/17) */

/* P1-2 · Product gallery, desktop grid (WoodMart "thumbs bottom column": a 2-column grid of full photographs).
   The first photograph spans the full width and the rest flow in two columns; an odd one left over spans the full width too, so no
   photograph is ever orphaned in a half-empty row. Every photograph fills a 4:5 frame on the photo background colour with
   object-fit: contain, so nothing is cropped. The full-width frame is capped at one screen height: at 1000 px wide a 4:5 frame
   would be 1250 px tall, taller than the window, and the 700 px source photographs would be stretched past their size.
   The mobile and tablet carousels (WoodMart's own) are untouched. */
@media (min-width: 1025px) {
  html body .woocommerce-product-gallery.thumbs-grid-bottom_column .wd-gallery-images .wd-carousel-wrap > .wd-carousel-item:first-child,
  html body .woocommerce-product-gallery.thumbs-grid-bottom_column .wd-gallery-images .wd-carousel-wrap > .wd-carousel-item:last-child:nth-child(even) { grid-column: 1 / -1; }
  html body .woocommerce-product-gallery.thumbs-grid-bottom_column .wd-gallery-images .woocommerce-product-gallery__image {
    aspect-ratio: 4 / 5;
    background: var(--arham-base);
  }
  html body .woocommerce-product-gallery.thumbs-grid-bottom_column .wd-gallery-images .wd-carousel-item:is(:first-child, :last-child:nth-child(even)) .woocommerce-product-gallery__image {
    max-height: calc(100vh - 120px);
    max-height: calc(100svh - 120px);
  }
  html body .woocommerce-product-gallery.thumbs-grid-bottom_column .wd-gallery-images .woocommerce-product-gallery__image > a { display: block; width: 100%; height: 100%; }
  html body .woocommerce-product-gallery.thumbs-grid-bottom_column .wd-gallery-images .woocommerce-product-gallery__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
}

/* P1-8 · Shop, category and search pages: the category bar is one row of text pills (every category in WooCommerce's order, a leading "All"),
   the current one in the primary colour; on a phone it is one line that scrolls sideways. No thumbnails, no counts. */
html body .wd-nav-product-cat-wrap .wd-nav-product-cat {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; padding: 2px 2px 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html body .wd-nav-product-cat-wrap .wd-nav-product-cat::-webkit-scrollbar { display: none; }
html body .wd-nav-product-cat-wrap .wd-nav-product-cat > li { flex: none; margin: 0; padding: 0; }
html body .wd-nav-product-cat-wrap .category-nav-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: nowrap;
  font: 500 13px/1 var(--wd-text-font, sans-serif); letter-spacing: .02em; text-transform: none;
  color: var(--arham-text); background: transparent; border: 1px solid color-mix(in srgb, var(--arham-primary) 28%, transparent);
  transition: background-color .3s, color .3s, border-color .3s;
}
html body .wd-nav-product-cat-wrap .category-nav-link::before,
html body .wd-nav-product-cat-wrap .category-nav-link::after,
html body .wd-nav-product-cat-wrap .nav-link-count { display: none; }
html body .wd-nav-product-cat-wrap .category-nav-link:hover { border-color: var(--arham-primary); color: var(--arham-primary); }
html body .wd-nav-product-cat-wrap li:is(.wd-active, .current-cat) > .category-nav-link,
html body.post-type-archive-product:not(.tax-product_cat) .wd-nav-product-cat-wrap .shop-all-link > .category-nav-link {
  background: var(--arham-primary); border-color: var(--arham-primary); color: var(--arham-base);
}

/* P1-5 · Journal: editorial cards. Image, then a quiet line (date · reading time), the title and a short dek; no avatar, share, comment count,
   category chip or "continue reading" (switched off in the blog-archive layout, build step 80). The same line heads an article ([arham_post_meta]). */
html body .blog-post-loop.blog-design-meta-image .wd-post-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--arham-section-alt, var(--arham-surface)); }
html body .blog-post-loop.blog-design-meta-image .wd-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .blog-post-loop .wd-post-content { padding-top: 18px; text-align: left; }
html body .blog-post-loop .wd-post-entry-meta { margin: 0 0 10px; }
html body .blog-post-loop .wd-post-entry-meta .wd-post-date,
.arham-post-meta { margin: 0; font: 500 11px/1.4 var(--wd-text-font, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--arham-text-soft, var(--arham-text)); }
.arham-post-meta { text-align: center; }
.arham-post-meta__sep { margin: 0 .7em; }
html body .blog-post-loop .wd-post-title { margin: 0 0 12px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.15; }
html body .blog-post-loop .wd-post-title a { color: var(--arham-text); }
html body .blog-post-loop .wd-post-title a:hover { color: var(--arham-primary); }
html body .blog-post-loop .wd-post-excerpt {
  font-size: 15px; line-height: 1.6; color: var(--arham-text-soft, var(--arham-text));
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* A journal article's body headings are h2 (the title is the h1), set at the size and weight WoodMart gives an h3 so the page looks as before (inc/journal.php). */
html body h2.arham-sub-heading { font-size: 22px; line-height: 1.4; font-weight: 600; margin-bottom: 20px; }

/* P1-6 · Footer: the one contact line under the blurb sits close to it and reads as part of it */
html body .footer-container .arham-footer-contact { margin-top: -6px; }