/* RJA Custom Craftworks storefront skin.
 *
 * Ron, 2026-09-20: "We can pretty much design all of this to exist on a mostly white storefront
 * page... lets get away from this App inside of a webpage look."
 *
 * The configurator's own design system is a dark maker's bench, and every colour in it is a token on
 * `.ck`. So the product page does not fight that stylesheet -- it re-grounds it: white paper, walnut
 * ink, brass kept for the one action per step because a brass button carries dark ink and still
 * reads as the brand on white. Nothing here restyles a component; it only moves the ground.
 */

:root{
  --rja-paper: #ffffff;
  --rja-paper-2: #faf8f5;
  --rja-line: #e4ded5;
  --rja-ink: #1b1613;
  --rja-ink-2: #5b5047;
  --rja-ink-3: #8a7d71;
  --rja-walnut: #735740;
  --rja-brass: #a9873f;
}

/* ---------- the configurator, re-grounded onto paper ---------- */
.rja-kc-product .ck{
  --ground: #ffffff;
  --raised: #faf8f5;
  --well: #f2eee8;
  --line: #e4ded5;
  --line-strong: #cbc1b4;
  --walnut: #735740;
  --walnut-deep: #402110;
  --brass: #a9873f;
  --brass-light: #d4b87a;   /* buttons keep brass; their ink is near-black, so contrast holds */
  --brass-hot: #c8a457;
  --text: #1b1613;
  --text-2: #5b5047;
  --text-3: #8a7d71;
  --warn: #8a5a00;
  --error: #a3341b;
}
/* The stage was a lamp-lit bench; on paper it becomes a plain product photo backdrop. */
.rja-kc-product .ck .ck-stage{
  background: linear-gradient(180deg, #ffffff 0%, #f4f1ec 100%);
  border: 1px solid var(--rja-line);
  border-radius: 14px;
}
.rja-kc-product .ck .ck-panel{ background: transparent; }

/* ---------- product page shell ---------- */
.rja-kc-product .site-content{ background: var(--rja-paper); }
.rja-kc-product div.product{ color: var(--rja-ink); }
.rja-kc-product .product_title{
  font-family: 'Alegreya', Georgia, serif;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
  line-height: 1.15; margin: 0 0 0.35rem;
}
/* The model is the artwork: it gets the FULL width a gallery plus summary would have had.
 * Woo floats `.summary` to about half the row next to a gallery; with no gallery that left half is
 * dead space, and Storefront's sidebar then takes a third of what is left. The configurator already
 * lays itself out as stage-beside-panel, so the job here is only to stop boxing it in. */
.rja-kc-hero{ margin: 0 0 2rem; }
/* Storefront ships `.single-product div.product .summary{width:52.94%;float:right}` -- the same
 * specificity as a plain `.rja-kc-product div.product .summary`, and its stylesheet loads later, so
 * an equal-weight rule silently loses. Adding the body class to the chain outranks it. */
.rja-kc-product.single-product div.product .summary{ width: 100%; float: none; margin: 0 0 2rem; }
.rja-kc-product.single-product div.product .woocommerce-product-gallery{ display: none; width: 0; }
.rja-kc-product.single-product div.product{ display: block; }
.rja-kc-product #secondary,
.rja-kc-shop #secondary{ display: none; }
.rja-kc-product #primary, .rja-kc-product .content-area,
.rja-kc-shop #primary, .rja-kc-shop .content-area{ width: 100%; float: none; margin: 0; }
.rja-kc-product .product .onsale{ display: none; }
/* Storefront's prev/next product thumbnails bleed off both edges of the viewport. */
.rja-kc-product .storefront-product-pagination{ display: none; }
.rja-kc-product .rja-kc-hero .ck-tool{ gap: clamp(1rem, 3vw, 2.5rem); }

/* ---------- spec tabs ----------
 * One defined region rather than four headings floating on the page: a warm tinted ground with a
 * hairline edge, the panel riding on it as raised paper, and the active tab lifting out of the
 * strip to meet that paper so the two read as a single folder. The lift is a real offset shadow,
 * not a halo, and the inactive tabs stay flat so the active one is the only thing standing up.
 */
.rja-kc-product .woocommerce-tabs{
  margin-top: 3rem; width: 100%; float: none; display: block;
  background: linear-gradient(180deg, #f7f3ed 0%, #f2ede5 100%);
  border: 1px solid var(--rja-line);
  border-radius: 16px;
  padding: 0.5rem 0.5rem 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85);
}
.rja-kc-product .woocommerce-tabs > ul.tabs,
.rja-kc-product .woocommerce-tabs > .woocommerce-Tabs-panel{ width: 100%; float: none; margin-left: 0; }

.rja-kc-product .woocommerce-tabs ul.tabs{
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  padding: 0 0.25rem; margin: 0; border-bottom: 0; list-style: none;
}
.rja-kc-product .woocommerce-tabs ul.tabs::before,
.rja-kc-product .woocommerce-tabs ul.tabs::after{ display: none; }
.rja-kc-product .woocommerce-tabs ul.tabs li{
  /* Storefront stacks these full-width, which wrapped five tabs onto three rows. */
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
  width: auto; flex: 0 0 auto; float: none; display: block;
}
.rja-kc-product .woocommerce-tabs ul.tabs li::before,
.rja-kc-product .woocommerce-tabs ul.tabs li::after{ display: none; }
.rja-kc-product .woocommerce-tabs ul.tabs li a{
  display: block; position: relative; top: 1px;
  padding: 0.72rem 1.15rem 0.78rem;
  font-family: 'Albert Sans', system-ui, sans-serif;
  font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.005em;
  color: var(--rja-ink-2); text-decoration: none;
  border-radius: 11px 11px 0 0;
  transition: color 140ms cubic-bezier(0.16,1,0.3,1), background-color 140ms cubic-bezier(0.16,1,0.3,1);
}
.rja-kc-product .woocommerce-tabs ul.tabs li a:hover{
  color: var(--rja-ink); background: rgb(255 255 255 / 0.55);
}
.rja-kc-product .woocommerce-tabs ul.tabs li.active a{
  color: var(--rja-ink); background: var(--rja-paper);
  box-shadow: 0 -2px 0 0 var(--rja-brass) inset, 0 -6px 14px -10px rgb(64 33 16 / 0.45);
}
/* The brass keyline reads as the tab's own edge, drawn on top rather than as a border. */
.rja-kc-product .woocommerce-tabs ul.tabs li.active a::after{
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--rja-brass); border-radius: 11px 11px 0 0;
}
/* Storefront's own a:focus outline (a violet ring) was winning here; match its specificity and
 * keep the ring on keyboard focus only, so a mouse click does not leave a box behind. */
.rja-kc-product .woocommerce-tabs ul.tabs li a:focus{ outline: none; }
.rja-kc-product .woocommerce-tabs ul.tabs li a:focus-visible{
  outline: 2px solid var(--rja-brass); outline-offset: -3px; border-radius: 11px 11px 0 0;
}

/* Panels are open by default so the content is readable with no JS; tabs.js narrows that to one
 * once it has taken over (.rja-kc-tabs-ready). Never hide a panel unless something can reopen it. */
.rja-kc-product .woocommerce-Tabs-panel{
  display: block; margin: 0; padding: 1.75rem clamp(1rem, 2.5vw, 2rem) 1.85rem;
  background: var(--rja-paper);
  border: 1px solid var(--rja-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(64 33 16 / 0.05), 0 10px 24px -18px rgb(64 33 16 / 0.5);
}
.rja-kc-product .woocommerce-tabs.rja-kc-tabs-ready .woocommerce-Tabs-panel{ display: none; }
.rja-kc-product .woocommerce-tabs.rja-kc-tabs-ready .woocommerce-Tabs-panel.is-open{ display: block; }
.rja-kc-product .woocommerce-Tabs-panel > h2{ display: none; }
.rja-kc-product .woocommerce-Tabs-panel > :first-child{ margin-top: 0; }
.rja-kc-product .woocommerce-Tabs-panel > :last-child{ margin-bottom: 0; }
.rja-kc-product .woocommerce-Tabs-panel p{ max-width: 68ch; }

.rja-kc-spec-table{ width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.rja-kc-spec-table th,
.rja-kc-spec-table td{
  text-align: left; padding: 0.72rem 0; border-bottom: 1px solid var(--rja-line);
  font-size: 0.95rem; vertical-align: baseline;
}
.rja-kc-spec-table tr:last-child th,
.rja-kc-spec-table tr:last-child td{ border-bottom: 0; }
.rja-kc-spec-table th{ width: 34%; font-weight: 600; color: var(--rja-ink-2); }
.rja-kc-spec-table td{ color: var(--rja-ink); font-variant-numeric: tabular-nums; }
.rja-kc-in{ color: var(--rja-ink-3); }

/* The browser's own surfaces belong to the design too. */
.rja-kc-product ::selection{ background: rgb(169 135 63 / 0.22); color: var(--rja-ink); }

@media (max-width: 600px){
  .rja-kc-product .woocommerce-tabs{ padding: 0.4rem 0.4rem 0; border-radius: 14px; }
  .rja-kc-product .woocommerce-tabs ul.tabs{ gap: 0.15rem; }
  .rja-kc-product .woocommerce-tabs ul.tabs li a{ padding: 0.6rem 0.8rem 0.66rem; font-size: 0.875rem; }
}

/* ---------- Size & fit ----------
 * Three headed blocks, each one drawing from the design's own geometry: the traced outline at the
 * same scale as a credit card, the part edge-on against a stack of quarters, and the ring detail.
 * The diagrams are mm-unit SVGs, so nothing here needs to know a design's proportions in advance.
 */
.rja-kc-size{ display: grid; gap: 2rem; }
.rja-kc-size-block > h3{
  font-family: 'Alegreya', Georgia, serif;
  font-size: 1.1rem; font-weight: 600; line-height: 1.2;
  margin: 0 0 0.85rem; color: var(--rja-ink);
}
.rja-kc-fig{ margin: 0 0 0.9rem; }
.rja-kc-diagram{
  width: 100%; max-width: 36rem; height: auto; display: block;
  overflow: visible;
}
.rja-kc-diagram-edge{ max-width: 30rem; }
.rja-kc-diagram-ring{ max-width: 9rem; }
.rja-kc-figcap{ font-size: 0.85rem; color: var(--rja-ink-3); margin-top: 0.35rem; font-style: italic; }

.rja-kc-diagram .rja-kc-card rect{ fill: #f1ece4; stroke: var(--rja-line); stroke-width: 0.5; }
.rja-kc-diagram .rja-kc-card text{ font-size: 3.4px; fill: var(--rja-ink-3); letter-spacing: 0.02em; }
.rja-kc-diagram .rja-kc-part rect,
.rja-kc-diagram .rja-kc-part path,
.rja-kc-diagram .rja-kc-fallback{ fill: rgb(115 87 64 / 0.16); stroke: var(--rja-walnut); stroke-width: 0.55; }
.rja-kc-diagram .rja-kc-hole{ fill: var(--rja-paper); stroke: var(--rja-walnut); stroke-width: 0.45; }
.rja-kc-diagram .rja-kc-coins rect{ fill: #e8e2d6; stroke: var(--rja-ink-3); stroke-width: 0.18; }
.rja-kc-diagram .rja-kc-coins text{ font-size: 3.2px; fill: var(--rja-ink-3); }
.rja-kc-diagram .rja-kc-ring circle{ fill: none; stroke: var(--rja-ink-2); stroke-width: 0.7; }
.rja-kc-diagram .rja-kc-dim line{ stroke: var(--rja-ink-3); stroke-width: 0.3; }
.rja-kc-diagram .rja-kc-dim text{
  font-size: 3.6px; fill: var(--rja-ink-2); font-weight: 600; font-variant-numeric: tabular-nums;
}
.rja-kc-diagram .rja-kc-scale-note{ font-size: 2.4px; fill: var(--rja-ink-3); font-style: italic; }

.rja-kc-size-note{ font-size: 0.95rem; line-height: 1.55; color: var(--rja-ink-2); max-width: 56ch; margin: 0; }

/* ---------- shop grid ---------- */
.rja-kc-shop ul.products li.product{ text-align: left; }
.rja-kc-shop ul.products li.product .woocommerce-loop-product__title{
  font-family: 'Alegreya', Georgia, serif; font-size: 1.05rem; line-height: 1.25;
}
.rja-kc-shop ul.products li.product .rja-kc-thumb{
  display: block; aspect-ratio: 1; width: 100%; object-fit: contain;
  background: linear-gradient(180deg, #ffffff 0%, #f4f1ec 100%);
  border: 1px solid var(--rja-line); border-radius: 12px; margin-bottom: 0.7rem;
}

/* Storefront's woocommerce.css floats the summary right at 52.9%; the configurator is the whole width. */
body.ks.single-product div.product .summary,
body.ks.single-product div.product .entry-summary{ float: none; width: 100%; margin: 0; }