/* NDC Creations: product pages in the new homepage look (Leslie, 21 Oct 2026).
   Part of the "NDC Creations" child theme; loads on product pages only.
   Part 1 styles the new product descriptions (div.ndc-pd, written by the Copywriter).
   Part 2 restyles the standard WooCommerce product page parts: title, price, basket button, tabs.
   Part 3 is layout A (Leslie's pick, 21 Oct): the description in one centred reading column, highlights two
   a row and the example photos in a neat grid of equal frames.
   Hands off (Leslie, 21 Oct): nothing here touches the customise options (colour/font choices, the engraving
   box and its live preview) or the main product photos the live preview draws on. Fonts and colours are set
   on named parts only, never on the whole page, so nothing leaks into those options.
   The Christmas line (p.ndc-seasonal) keeps the festive Christmas look on purpose.
   Colours: wine #74332F, body #7C3834, coral #B44A45, rose buttons #D59789 with #5E2420 text,
   peach pills #FAE0D8 / #8C2D2A, page #FEF8F4. Fonts: Playfair Display, Public Sans, Outfit. */

/* ---------- Part 1: the product description ---------- */
.ndc-pd { font-family:'Public Sans',sans-serif; color:#7C3834; font-size:1rem; line-height:1.7; max-width:760px; }
.ndc-pd > * + * { margin-top:1.1rem; }
.ndc-pd h3 { font-family:'Playfair Display',Georgia,serif; font-weight:600; color:#74332F !important; font-size:1.35rem; line-height:1.25; margin:2rem 0 .7rem; }
.ndc-pd-opener { font-family:'Playfair Display',Georgia,serif; font-style:italic; color:#B44A45; font-size:1.3rem; line-height:1.45; }
.ndc-pd ul, .ndc-pd ol { margin-left:0; padding-left:0; list-style:none; }
.ndc-pd-highlights { display:grid; gap:.6rem; }
.ndc-pd-highlights li { position:relative; padding:.85rem 1rem .85rem 2.6rem; background:#FEF2EC; border:1px solid #F2C9BD; border-radius:1rem; }
.ndc-pd-highlights li::before { content:''; position:absolute; left:1rem; top:1.25rem; width:.7rem; height:.7rem; border-radius:50%; background:#D59789; box-shadow:0 0 0 3px #FAE0D8; }
.ndc-pd-highlights strong { color:#74332F; font-weight:600; }
.ndc-pd-ideas { display:flex; flex-wrap:wrap; gap:.5rem; }
.ndc-pd-ideas li { padding:.45rem .95rem; border-radius:999px; background:#FAE0D8; border:1px solid #F2C9BD; color:#8C2D2A; font-family:'Outfit',sans-serif; font-weight:500; font-size:.9rem; line-height:1.2; }
.ndc-pd-specs { width:100%; border-collapse:separate; border-spacing:0; border:1px solid #E0B2A2; border-radius:1rem; overflow:hidden; background:#fff; margin:0; }
.ndc-pd-specs th, .ndc-pd-specs td { padding:.75rem 1rem; text-align:left; vertical-align:top; border:0; border-bottom:1px solid #F2DDD5; font-size:.95rem; }
.ndc-pd-specs tr:last-child th, .ndc-pd-specs tr:last-child td { border-bottom:0; }
.ndc-pd-specs th { width:34%; background:#FEF2EC; color:#74332F; font-family:'Outfit',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.ndc-pd-specs td { color:#7C3834; }
.ndc-pd-steps { counter-reset:ndc-step; display:grid; gap:.7rem; }
.ndc-pd-steps li { counter-increment:ndc-step; position:relative; padding-left:2.8rem; min-height:2rem; }
.ndc-pd-steps li::before { content:counter(ndc-step); position:absolute; left:0; top:-.1rem; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; background:#74332F; color:#FEF8F4; font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:1rem; }
.ndc-pd-contact { padding:1rem 1.1rem; border-left:3px solid #D59789; background:#FEF8F4; border-radius:0 1rem 1rem 0; }
.ndc-pd-delivery { font-size:.95rem; }
.ndc-pd-note { font-size:.85rem; color:#8C5F55; font-style:italic; }
.ndc-pd-lovely { padding-top:1rem; border-top:1px dashed #E0B2A2; }
.ndc-pd-lovely strong { font-family:'Outfit',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:#8C2D2A; margin-right:.35rem; }

/* The Christmas line keeps the festive look of the Christmas page. */
.ndc-seasonal { position:relative; margin-top:1.6rem !important; padding:2.6rem 1.4rem 1.4rem; text-align:center; border-radius:1.5rem;
  background:radial-gradient(circle at 15% 20%, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle at 80% 30%, rgba(255,255,255,.8) 0 2px, transparent 3px),
             radial-gradient(circle at 60% 85%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px), linear-gradient(160deg, #FEF2EC 0%, #F7D9CF 55%, #EFC2B5 100%);
  border:1px solid #E8B4A6; box-shadow:0 10px 30px rgba(116,51,47,.12); color:#5E2420; font-size:.95rem; line-height:1.65; }
.ndc-seasonal::before { content:'\2726  Christmas  \2726'; position:absolute; top:.9rem; left:50%; transform:translateX(-50%); padding:.35rem .9rem; border-radius:999px;
  background:#FAE0D8; border:1px solid #F2C9BD; color:#8C2D2A; font:600 11px/1 'Outfit',sans-serif; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.ndc-seasonal strong { display:block; margin:.6rem 0 .35rem; font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.35rem; line-height:1.3;
  background:linear-gradient(100deg, #74332F, #B44A45 45%, #C98A6E 70%, #74332F); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Part 2: the WooCommerce product page (title, price, basket button, tabs) ---------- */
body.single-product { background:#FEF8F4; }
/* The theme sets its own black heading colour, so the colour needs !important to win (Leslie, 21 Oct 23:03). */
.single-product div.product .product_title, .single-product div.product h1.product_title.entry-title { font-family:'Playfair Display',Georgia,serif; font-weight:700; color:#74332F !important; font-size:clamp(1.7rem, 3.5vw, 2.5rem); line-height:1.15; letter-spacing:-.01em; }
.single-product div.product .summary > p.price, .single-product div.product .summary > span.price { color:#74332F; font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:1.6rem; }
.single-product div.product .summary > p.price del { color:#8C5F55; opacity:.7; font-size:.75em; }
.single-product div.product .summary > p.price ins { color:#B44A45; text-decoration:none; }
.single-product div.product .woocommerce-product-details__short-description { color:#7C3834; font-family:'Public Sans',sans-serif; line-height:1.7; }
.single-product div.product form.cart .single_add_to_cart_button {
  background:#D59789 !important; color:#5E2420 !important; border:0 !important; border-radius:999px !important; padding:.95rem 2rem !important;
  font-family:'Outfit',sans-serif !important; font-weight:600 !important; font-size:.9rem !important; letter-spacing:.12em; text-transform:uppercase; transition:background .25s, color .25s; }
.single-product div.product form.cart .single_add_to_cart_button:hover { background:#B44A45 !important; color:#FEF8F4 !important; }
.single-product div.product .woocommerce-tabs { clear:both; margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid #F2DDD5; }
.single-product div.product .woocommerce-tabs ul.tabs { border:0; padding:0; margin:0 auto 1.6rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.single-product div.product .woocommerce-tabs ul.tabs::before, .single-product div.product .woocommerce-tabs ul.tabs li::before, .single-product div.product .woocommerce-tabs ul.tabs li::after { display:none; }
.single-product div.product .woocommerce-tabs ul.tabs li { margin:0; padding:0; border:1px solid #E0B2A2; border-radius:999px; background:#FEF2EC; }
.single-product div.product .woocommerce-tabs ul.tabs li a { padding:.55rem 1.1rem; color:#7C3834; font-family:'Outfit',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.single-product div.product .woocommerce-tabs ul.tabs li.active { background:#74332F; border-color:#74332F; }
.single-product div.product .woocommerce-tabs ul.tabs li.active a { color:#FEF8F4; }
.single-product div.product .woocommerce-tabs .panel > h2:first-child { display:none; } /* the tab already says "Description" */
.single-product .product_meta { font-size:.85rem; color:#8C5F55; }
.single-product .product_meta a { color:#B44A45; }
.single-product .related.products > h2, .single-product .upsells.products > h2 { font-family:'Playfair Display',Georgia,serif; color:#74332F !important; font-weight:600; }
.single-product ul.products li.product .woocommerce-loop-product__title { font-family:'Playfair Display',Georgia,serif; color:#74332F !important; font-weight:600; }
.single-product ul.products li.product .price { color:#74332F; }
.single-product ul.products li.product .button { background:#D59789; color:#5E2420; border-radius:999px; font-family:'Outfit',sans-serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.75rem; }
.single-product .woocommerce-breadcrumb { color:#8C5F55; font-size:.8rem; }
.single-product .woocommerce-breadcrumb a { color:#B44A45; }

/* The customise box's "Free Laser Engraving" badge (Leslie, 21 Oct: never say free engraving). The website chat
   widget also uses a class called ndc-badge and its red, top-right style was landing on this badge, which is why
   it showed as a red bar above the title. Only this one badge is hidden; the rest of the customise box is untouched. */
#ndc-live-engraver-root .ndc-trigger-badge-row .ndc-badge { display:none !important; }
/* On products with a colour choice, picking a colour shows the stock line, which the theme floats at full width.
   The customise box then got squeezed beside it into a big blank box. This only moves the box below that line;
   its look is unchanged (Leslie, 21 Oct). */
.single-product .single_variation_wrap #ndc-live-engraver-root { clear:both; }
/* The theme's sticky basket bar at the bottom of the screen. Once a colour is picked it fills with the stock line,
   quantity and basket button and runs off the right edge, so the basket button can't be seen. Its form also has
   no engraving box, so it can't carry the customer's wording. Hidden on product pages; the basket button by the
   customise box is unchanged (Leslie, 21 Oct). Delete this rule to bring the bar back. */
.single-product .sticky-addToCart { display:none !important; }

/* ---------- Part 3: layout A, the description ---------- */
/* One calm reading column, centred under the photos and options. */
.single-product div.product .woocommerce-tabs .panel { max-width:760px; margin-left:auto; margin-right:auto; }
.ndc-pd-highlights { grid-template-columns:repeat(2, minmax(0, 1fr)); }
/* Example photos: every photo whole (no cropping) in the same size frame, 3 a row, 2 on phones.
   The font chart gets its own larger frame underneath so the font names stay readable. */
.ndc-pd .ndc-pd-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:.4rem; }
.ndc-pd .ndc-pd-gallery img {
  display:block; box-sizing:border-box; width:calc((100% - 1.5rem) / 3); min-width:0; max-width:100%; height:auto; aspect-ratio:4 / 5; object-fit:contain; margin:0;
  background:#fff; border:1px solid #F2DDD5; border-radius:1rem; box-shadow:0 4px 14px rgba(116,51,47,.06); transition:transform .25s, box-shadow .25s; }
.ndc-pd .ndc-pd-gallery img:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(116,51,47,.12); }
.ndc-pd .ndc-pd-gallery img[alt^="Font styles"] { width:min(100%, 26rem); margin-top:.5rem; }
/* Descriptions not yet rewritten: keep any photo inside the column, with soft corners. */
.single-product .woocommerce-Tabs-panel--description img { max-width:100%; height:auto; border-radius:1rem; }

@media (max-width:600px) {
  .ndc-pd-specs th { width:40%; }
  .ndc-pd-opener { font-size:1.15rem; }
  .ndc-pd-highlights { grid-template-columns:minmax(0, 1fr); }
  .ndc-pd .ndc-pd-gallery { gap:.6rem; }
  .ndc-pd .ndc-pd-gallery img { width:calc((100% - .6rem) / 2); }
  .ndc-pd .ndc-pd-gallery img[alt^="Font styles"] { width:100%; }
  .single-product div.product .woocommerce-tabs { margin-top:2rem; padding-top:1.5rem; }
}