/* NatureTech PDP — v2 (Sprint 4).
   Source: design/v2/product/template.html style block.
   Removed global * + body resets (handled by tokens.css/main.css).
   PDP classes are .nt-* prefixed already, so no renaming was needed.
   Coexists with the older /assets/css/woocommerce.css; this file is
   enqueued AFTER woocommerce.css on PDPs so it wins where they overlap. */


/* ============================================
 NATURETECH PRODUCT PAGE STYLES
 Design tokens (must match site-wide palette):
 ============================================
 --nt-deep-purple    #2D1B4E
 --nt-deeper         #1E1236
 --nt-bright-purple  #6B3FA0
 --nt-forest         #2D6A4F
 --nt-deep-forest    #1E4D38
 --nt-gold           #E6B149
 --nt-deep-gold      #C4922A
 --nt-cream          #F7F3E9
 --nt-lavender       #F0EBF7
 --nt-canvas         #FAF9FC
 --nt-ink            #1A1628
============================================ */


.nt-product-page { max-width: 1920px; margin: 0 auto; padding: 0 24px; }

/* === BREADCRUMB === */
.nt-breadcrumb { padding: 18px 0; font-size: 13px; color: #777; }
.nt-breadcrumb a { color: #777; text-decoration: none; transition: color 0.15s; }
.nt-breadcrumb a:hover { color: #6B3FA0; text-decoration: underline; }
.nt-breadcrumb .sep { color: #C5C0CC; margin: 0 8px; }
.nt-breadcrumb .current { color: #1E1236; font-weight: 500; }

/* === PRODUCT HERO (gallery + buy panel) === */
.nt-product-hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
padding: 16px 0 48px;
border-bottom: 1px solid #F0EBF7;
}

/* Gallery */
.nt-gallery { display: flex; flex-direction: column; gap: 12px; }
.nt-gallery-main {
aspect-ratio: 1/1;
background: linear-gradient(135deg, #F7F3E9 0%, #F0EBF7 100%);
border-radius: 14px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.nt-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.nt-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.nt-gallery-thumb {
aspect-ratio: 1/1;
border-radius: 8px;
border: 1.5px solid transparent;
background: #F7F3E9;
cursor: pointer;
overflow: hidden;
transition: border-color 0.15s;
}
.nt-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nt-gallery-thumb:hover { border-color: #C5C0CC; }
.nt-gallery-thumb.active { border-color: #6B3FA0; }

/* Buy panel */
.nt-buy-panel { display: flex; flex-direction: column; gap: 22px; }
.nt-buy-title {
font-family: 'IBM Plex Sans Hebrew', sans-serif;
font-size: 28px;
font-weight: 500;
line-height: 1.3;
margin: 0;
color: #1E1236;
}

/* Short description block */
.nt-short-desc {
font-size: 15px;
color: #2D2438;
line-height: 1.85;
}
.nt-short-desc p { margin: 0 0 14px; }
.nt-short-desc p:last-child { margin-bottom: 0; }
.nt-short-desc strong { color: #1E1236; font-weight: 500; }
.nt-short-desc ul { margin: 0 0 14px; padding-right: 22px; }
.nt-short-desc ul li { margin-bottom: 6px; }

/* Dosage list (used inside short-desc when applicable) */
.nt-dosage-list {
background: linear-gradient(135deg, #F7F3E9 0%, #F0EBF7 100%);
border-radius: 10px;
padding: 16px 22px;
margin: 4px 0;
list-style: none;
}
.nt-dosage-list li {
padding: 6px 0;
font-size: 14px;
border-bottom: 1px solid rgba(30,18,54,0.07);
}
.nt-dosage-list li:last-child { border-bottom: none; }
.nt-dosage-list strong { color: #1E1236; font-weight: 500; margin-left: 8px; }

/* Fulfillment info */
.nt-fulfillment {
font-size: 13px;
color: #555059;
line-height: 2;
}
.nt-fulfillment .row { display: flex; align-items: center; gap: 8px; }
.nt-fulfillment svg { color: #6B3FA0; flex-shrink: 0; }

/* Price block */
.nt-price-block {
display: flex; align-items: baseline; gap: 12px;
padding: 18px 0;
border-top: 1px solid #F0EBF7;
border-bottom: 1px solid #F0EBF7;
}
.nt-price-current { font-family: 'IBM Plex Sans Hebrew', sans-serif; font-size: 34px; font-weight: 500; color: #1E1236; }
.nt-price-old { font-size: 18px; color: #999; text-decoration: line-through; }
.nt-price-tax { font-size: 13px; color: #999; }

/* Quantity + Add to cart */
.nt-buy-actions { display: flex; gap: 10px; align-items: stretch; }
.nt-qty {
display: flex; align-items: center;
border: 1.5px solid #D8D3C5;
border-radius: 999px;
overflow: hidden;
}
.nt-qty button {
width: 38px; height: 100%;
background: white; border: none;
font-size: 18px; cursor: pointer;
color: #1E1236; font-family: inherit;
}
.nt-qty button:hover { background: #F7F3E9; }
.nt-qty input {
width: 44px; border: none; text-align: center;
font-family: inherit; font-size: 14px; font-weight: 500;
color: #1E1236; background: transparent;
}
.nt-qty input:focus { outline: none; }
.nt-buy-actions .nt-add-to-cart,
button.nt-add-to-cart.single_add_to_cart_button {
flex: 1;
background: linear-gradient(135deg, #2D6A4F 0%, #6B3FA0 100%);
color: #fff;
border: none;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
padding: 14px 28px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow: 0 6px 18px rgba(45, 106, 79, 0.22);
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.nt-buy-actions .nt-add-to-cart:hover,
button.nt-add-to-cart.single_add_to_cart_button:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(45, 106, 79, 0.3);
color: #fff;
}
.nt-buy-actions .nt-add-to-cart:active,
button.nt-add-to-cart.single_add_to_cart_button:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(45, 106, 79, 0.22);
}
.nt-buy-actions .nt-add-to-cart svg,
button.nt-add-to-cart.single_add_to_cart_button svg {
display: block;
}
/* Loading: shimmer sweep across the button while WC processes the add. */
.nt-buy-actions .nt-add-to-cart.is-loading,
button.nt-add-to-cart.single_add_to_cart_button.is-loading {
opacity: 0.85;
pointer-events: none;
}
.nt-buy-actions .nt-add-to-cart.is-loading::after,
button.nt-add-to-cart.single_add_to_cart_button.is-loading::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
animation: ntAtcShine 1.1s linear infinite;
z-index: 1;
}
@keyframes ntAtcShine {
0%   { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Success: green pulse, no purple stop. */
.nt-buy-actions .nt-add-to-cart.is-success,
button.nt-add-to-cart.single_add_to_cart_button.is-success {
background: linear-gradient(135deg, #2D6A4F 0%, #1E4D38 100%);
animation: ntAtcPulse 0.5s ease;
}
@keyframes ntAtcPulse {
0%   { transform: scale(1); }
40%  { transform: scale(1.04); }
100% { transform: scale(1); }
}

/* Product meta (categories) */
.nt-product-meta {
font-size: 13px;
color: #777;
display: flex;
flex-direction: column;
gap: 6px;
}
.nt-product-meta .row { display: flex; gap: 8px; }
.nt-product-meta .row strong { color: #1E1236; font-weight: 500; min-width: 70px; }
.nt-product-meta a { color: #6B3FA0; text-decoration: none; }
.nt-product-meta a:hover { text-decoration: underline; }

/* === DESCRIPTION TAB === */
.nt-tabs-container { padding: 56px 0; border-bottom: 1px solid #F0EBF7; }
.nt-tab-nav {
display: flex;
gap: 0;
border-bottom: 1.5px solid #F0EBF7;
margin-bottom: 32px;
}
.nt-tab-nav button {
background: transparent;
border: none;
font-family: 'IBM Plex Sans Hebrew', sans-serif;
font-size: 15px;
font-weight: 500;
color: #777;
padding: 14px 0;
margin-left: 32px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1.5px;
transition: color 0.15s, border-color 0.15s;
}
.nt-tab-nav button.active { color: #1E1236; border-bottom-color: #6B3FA0; }
/* No max-width here — the description should occupy the same column as the
   hero (gallery + buy panel) above it. Plain-text descriptions still read OK
   at this width because the surrounding type stack is tight, and Elementor
   descriptions render correctly because elementor's own .e-con-boxed sets
   the readable inner cap. */
.nt-tab-content {
font-size: 15px;
line-height: 1.85;
color: #2D2438;
}
/* Force every Elementor descendant to stay within the tab body so banner
   images and full-width containers can't burst out into a phantom sidebar
   column on the right. */
.nt-tab-content img,
.nt-tab-content video,
.nt-tab-content iframe,
.nt-tab-content .elementor,
.nt-tab-content .elementor-element,
.nt-tab-content .elementor-widget-container { max-width: 100%; }
.nt-tab-content img { height: auto; }
.nt-tab-content h3 {
font-family: 'IBM Plex Sans Hebrew', sans-serif;
font-size: 18px;
font-weight: 500;
margin: 28px 0 12px;
color: #1E1236;
}
.nt-tab-content h3:first-child { margin-top: 0; }
.nt-tab-content p { margin: 0 0 14px; }
.nt-tab-content strong { color: #1E1236; font-weight: 500; }
.nt-tab-content ul.composition-list { list-style: none; padding: 0; margin: 0 0 16px; }
.nt-tab-content ul.composition-list li {
padding: 10px 0;
border-bottom: 1px solid #F0EBF7;
display: flex;
gap: 14px;
}
.nt-tab-content ul.composition-list li:last-child { border-bottom: none; }
.nt-tab-content ul.composition-list .label { color: #777; min-width: 160px; }
.nt-tab-content ul.composition-list .value { color: #1E1236; font-weight: 500; }

/* === UPSELLS / RELATED === */
.nt-upsells-section { padding: 56px 0; border-bottom: 1px solid #F0EBF7; }
.nt-section-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.18em;
color: #6B3FA0; margin-bottom: 8px;
text-transform: uppercase;
}
.nt-section-title {
font-family: 'IBM Plex Sans Hebrew', sans-serif;
font-size: 24px; font-weight: 500;
margin: 0 0 24px; color: #1E1236;
}
.nt-product-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nt-product-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.nt-product-card {
background: white; border-radius: 10px;
overflow: hidden; position: relative;
display: block; text-decoration: none; color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid #F0EBF7;
}
.nt-product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(30,18,54,0.1); }
.nt-product-card-image {
aspect-ratio: 1/1;
background: #F0EBF7;
position: relative;
}
.nt-product-card-image img { width: 100%; height: 100%; object-fit: cover; }
.nt-product-card-tag {
position: absolute; top: 10px; right: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px; letter-spacing: 0.14em;
padding: 4px 10px; border-radius: 999px;
font-weight: 500;
background: #6B3FA0; color: white;
}
.nt-product-card-tag.cat-systems { background: #2D6A4F; }
.nt-product-card-tag.cat-upgrades { background: #E6B149; color: #1E1236; }
.nt-product-card-badge {
position: absolute; top: 10px; left: 10px;
font-size: 11px; font-weight: 500;
padding: 4px 10px; border-radius: 999px;
background: #C4922A; color: white;
}
.nt-product-card-body { padding: 14px 16px 16px; }
.nt-product-card-title {
font-family: 'IBM Plex Sans Hebrew', sans-serif;
font-size: 14px; font-weight: 500;
margin: 0 0 3px; color: #1E1236; line-height: 1.3;
}
.nt-product-card-sub { font-size: 11px; color: #777; margin: 0 0 10px; min-height: 14px; }
.nt-product-card-price-line { display: flex; align-items: baseline; gap: 6px; }
.nt-product-card-price { font-size: 15px; font-weight: 500; color: #1E1236; }
.nt-product-card-price-old { font-size: 12px; color: #999; text-decoration: line-through; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
.nt-product-hero { grid-template-columns: 1fr; gap: 32px; }
.nt-product-card-grid,
.nt-product-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.nt-product-page { padding: 0 14px; }
.nt-buy-title { font-size: 22px; }
.nt-price-current { font-size: 28px; }
.nt-product-card-grid,
.nt-product-card-grid.cols-4 { grid-template-columns: 1fr; }
}