/* product_page.css
 * Styling for product_page.php. Pulled into its own file so the .php
 * file reads as markup + business logic, not a wall of CSS.
 *
 * The promo badge's colours/padding/border-radius are NOT hardcoded here —
 * they're injected by product_page.php into a small inline <style>
 * block generated from constants.php, so the on-page badge always
 * matches the SVG hover popup without values being kept in sync by hand.
 * See the .promo-section / .promo-line / .promo-number rules that
 * product_page.php adds inline.
 */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Ubuntu',Arial,sans-serif;background:var(--page-bg, #f8f9fa);padding:20px}
.container{max-width:1100px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.1);padding:150px 20px 20px}
.product-grid{display:flex;gap:40px;flex-wrap:wrap}
.product-left{flex:1.25;min-width:300px}
.product-right{flex:1;min-width:300px}
.product-left .product-title{font-size:28px;font-weight:700;color:var(--text-dark, #222);margin-bottom:4px}
.product-left .product-rating{color:#f5a623;font-size:14px;margin-bottom:8px}
.product-left .product-short-desc{font-size:15px;color:#555;line-height:1.6;margin-bottom:16px}
.product-left .product-image img{width:100%;height:auto;border-radius:8px;background:var(--image-placeholder-bg, #f0f0f0)}
.product-right .price-promo-row{display:flex;align-items:center;gap:20px;margin-bottom:16px;flex-wrap:wrap}
/* price-box + promo-badge stacked together so promo-section (the image)
   has the FULL stack's height to center against via price-promo-row's
   align-items:center — without this wrapper, align-items:center only
   ever saw price-box (promo-badge sat below the row entirely, outside
   the flex context), so the image centered against the price alone and
   ignored the promo-line hanging underneath it. */
.product-right .price-info-col{display:flex;flex-direction:column}
/* Groups price/promo/swatches/stock into one visual block with a subtle
   shadow — everything above the add-to-basket row. Padding+radius here
   so the shadow doesn't hug the text edge-to-edge. */
.price-stock-box{box-shadow:0 1px 6px rgba(0,0,0,0.08);border-radius:8px;padding:20px;margin-bottom:10px}
.product-right .price-box{display:flex;flex-direction:column}
/* was-price + product-price now share one line (baseline-aligned), same
   pattern as product_grid.css's .price-line — equiv-price stays on its
   own line below, inside .price-box but outside .price-line. */
.product-right .price-line{display:flex;align-items:baseline;gap:8px}
.product-right .was-price{font-size:20px;color:var(--text-dark, #222);text-decoration:line-through}
.product-right .product-price{font-size:34px;font-weight:700;color:var(--text-dark, #222)}
.product-right .product-price.on-sale{color:var(--brand-red, #DC1F1D)}
.product-right .equiv-price{font-size:16px;color:#666;margin-bottom:6px}
.product-right .promo-section{display:flex;align-items:center;gap:10px}
.product-right .promo-section img{max-height:55px;max-width:110px}
/* Promo badge (text only) now sits in its OWN row directly under the
   price box, left-justified, before the attribute/swatch groups — no
   longer nested inside .promo-section alongside the promo image
   (2026-08-28). display:inline-flex (not flex) keeps it shrink-to-content
   now that it's a block-level child of .product-right rather than a flex
   ITEM inside .promo-section — without this it would stretch full width
   and the coloured background would span the whole column. */
.product-right .promo-badge{align-self:flex-start;}
/* Colour, padding, border-radius, and number size for .promo-badge,
   .promo-line, and .promo-number are added inline by product_page.php
   from constants.php's PROMO_* constants — see that file for the values.
   Font-size/line-height below are the exact same numbers
   product_grid.css uses for its own .promo-badge .promo-line, so the two
   pages' badges match (2026-08-25 feedback: the product page's badge was
   noticeably bigger than the grid's). line-height is a FIXED px value,
   not a unitless ratio, for the same reason product_grid.css's identical
   rule is — see that file's own comment for the full explanation. */
.product-right .promo-badge .promo-line{font-size:15px;font-weight:600;white-space:nowrap;line-height:20px;margin:0}

.attribute-group{margin-bottom:20px}
.attribute-label{font-weight:400;font-size:14px;color:#888;display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.selected-value{font-weight:400;color:#555;margin-left:4px;font-size:15px;text-transform:none}
/* Swatch appearance (round + rectangular, all states) now lives in the
   shared swatch.css, sized via --swatch-size — see that file's header
   comment. The actual value is injected inline by product_page.php from
   PRODUCT_PAGE_SWATCH_ICON_SIZE (constants.php), not hardcoded here —
   see that constant's own comment for why. */
.stock-info{font-size:18px;color:#555;margin:8px 0}
.stock-info .in-stock{color:#000;font-weight:700}
.stock-info .out-of-stock{color:var(--brand-red, #DC1F1D);font-weight:600}
.add-to-cart-row{display:flex;gap:12px;align-items:center;margin:16px 0 12px;flex-wrap:wrap}
.quantity-input{width:70px;padding:10px 12px;margin-top:10px;margin-bottom:10px;border:1px solid var(--border-grey, #d1d5db);border-radius:6px;font-size:16px;text-align:center}
.btn-add-to-cart{background:var(--brand-red, #DC1F1D);color:#fff;margin-top:10px;margin-bottom:10px;border:0;padding:10px 32px;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-add-to-cart:hover{background:var(--brand-red-hover, #C84444);color:#000}
/* Out-of-stock state — same darker red as the grid card's single CTA
   button (.btn-view-product.out-of-stock in product_grid.css), and
   actually disabled here (unlike the grid's version, which stays
   clickable to navigate through) since this button's only job on this
   page is to add the CURRENTLY SELECTED variant to the basket — there's
   nothing useful for it to do while that variant has no stock. Toggled
   by product_swatches.js's updateProductInfo() on every swatch change;
   set here from PHP too, for the correct state on first render. */
.btn-add-to-cart.out-of-stock, .btn-add-to-cart:disabled{
    background:var(--brand-red-dark, #7A0D0D);
    cursor:not-allowed;
}
.btn-add-to-cart.out-of-stock:hover, .btn-add-to-cart:disabled:hover{
    background:var(--brand-red-dark, #7A0D0D);
    color:#fff;
}
.stock-detail{font-size:13px;color:#666;margin:2px 0}

/* Accordion */
.accordion{margin-top:20px;border-top:1px solid var(--card-border-grey, #e5e7eb);box-shadow:0 1px 6px rgba(0,0,0,0.08);border-radius:8px;padding:0 4px}
.accordion-section{border-bottom:1px solid var(--card-border-grey, #e5e7eb)}
.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:16px 4px 10px 4px;font-size:17px;font-weight:700;color:var(--text-dark, #222);cursor:pointer;text-align:left;font-family:inherit}
.accordion-chevron{transition:transform .2s;font-size:20px;color:#666}
.accordion-header.open .accordion-chevron{transform:rotate(180deg)}
.accordion-panel{display:none;padding:0 4px 16px;font-size:13px;color:#555;line-height:1.4}
.accordion-panel.open{display:block}
.read-more-link{display:inline-block;margin-top:4px;color:var(--link-blue, #0073aa);text-decoration:underline;font-size:14px}
.full-description{margin-top:12px}

.additional-info-table{width:100%;border-collapse:collapse;font-size:14px}
.additional-info-table th,.additional-info-table td{text-align:left;padding:2px 12px 5px 0;border:0;line-height:1.1}
.additional-info-table th{width:95px;color:#777;font-weight:400}
.additional-info-table td{color:var(--text-dark, #222);font-weight:400;font-style:normal}

@media (max-width:768px){
    .product-grid{flex-direction:column;gap:20px}
    .container{padding:40px 20px 20px}
    .product-right .price-promo-row{flex-wrap:wrap}
}