/**
 * WooCommerce adjustments for the xniux theme.
 *
 * This stylesheet adjusts logo sizing, margins and layout for WooCommerce pages
 * and applies gradient backgrounds and colours to better match the xniux aesthetic.
 */

/* Reduce header and footer logo size on WooCommerce pages */
body.woocommerce #site-header img,
body.woocommerce-page #site-header img {
    height: 2rem;
    width: auto;
}
@media (min-width: 768px) {
    body.woocommerce #site-header img,
    body.woocommerce-page #site-header img {
        height: 2.5rem;
    }
}
body.woocommerce #site-footer img,
body.woocommerce-page #site-footer img {
    height: 2rem;
    width: auto;
}

/* Center and constrain WooCommerce content */
body.woocommerce div#primary,
body.woocommerce-page div#primary,
body.woocommerce main,
body.woocommerce-page main {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Provide top padding on WooCommerce pages to prevent the fixed header from overlapping content.  The header height on mobile is ~4.5rem and slightly larger on desktop, so adjust accordingly. */
body.woocommerce,
body.woocommerce-page {
    padding-top: 4.5rem;
}
@media (min-width: 768px) {
    body.woocommerce,
    body.woocommerce-page {
        padding-top: 6rem;
    }
}

/* Remove product meta (date, author) if inherited from blog template – not used when using woocommerce.php but kept as fallback */
.single-product .posted_on,
.single-product .byline,
.single-product .date,
.single-product .author,
.single-product .meta {
    display: none !important;
}

/* Hide default WooCommerce share buttons (if provided by plugins) */
.single-product .share,
.single-product .share-buttons,
.single-product .product_meta .share {
    display: none !important;
}

/* Adjust WooCommerce buttons to match gradient theme */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-image: linear-gradient(to right, var(--xniux-primary, #059669), var(--xniux-secondary, #06b6d4));
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Subtle drop shadow to lift the button slightly off the page */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    transform: scale(1.05);
    /* Simulate the glowing effect used on the homepage CTA button */
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.3), 0 4px 6px -4px rgba(6, 182, 212, 0.2);
}

/* Remove default borders and backgrounds from WooCommerce forms and containers */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
    margin: 0 0 1rem 0;
}
.woocommerce input,
.woocommerce textarea,
.woocommerce select {
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    width: 100%;
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
    border-color: var(--xniux-primary, #059669);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 179, 126, 0.2);
}

/* Style notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.woocommerce-error {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}
.woocommerce-message {
    background-color: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}
.woocommerce-info {
    background-color: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

/* Utility classes to align forms in checkout */
.woocommerce form.checkout .form-row-first,
.woocommerce form.checkout .form-row-last {
    width: 100%;
}
@media (min-width: 640px) {
    .woocommerce form.checkout .form-row-first,
    .woocommerce form.checkout .form-row-last {
        width: 48%;
        float: left;
    }
    .woocommerce form.checkout .form-row-last {
        float: right;
    }
}

/* Clear floats after form rows */
.woocommerce form.checkout:after {
    content: '';
    display: table;
    clear: both;
}

/* Stylise account navigation */
.woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce-MyAccount-navigation li {
    margin-bottom: 0.5rem;
}
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #374151;
    background-color: #f3f4f6;
    transition: background-color 0.2s ease;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    background-image: linear-gradient(to right, var(--xniux-primary, #059669), var(--xniux-secondary, #06b6d4));
    color: #fff;
}

/* Adjust cart table design */
.woocommerce-cart table.shop_table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.woocommerce-cart table.shop_table thead th {
    text-align: left;
    font-weight: 700;
    color: #374151;
}
.woocommerce-cart table.shop_table tbody td {
    color: #4b5563;
}

/* Remove default WooCommerce breadcrumb background */
.woocommerce-breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

/*
 * Global background for WooCommerce pages
 *
 * Apply the same gradient background used in the product detail wrapper to the entire
 * body of WooCommerce pages.  This eliminates white gaps between the header,
 * content and footer.  The gradient matches Tailwind's from-green-50 to cyan-50.
 */
body.woocommerce,
body.woocommerce-page {
    background-image: linear-gradient(to bottom right, #f0fdf4, #ecfeff);
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
}

/* Container styling for cart and checkout pages
 *
 * Limit the width of the cart and checkout content, add padding, soft background
 * and rounded corners for a polished layout on large screens while remaining
 * responsive.  The semi‑transparent white background allows the gradient to
 * subtly show through.
 */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
    /* Further narrow the container on larger screens to provide
       comfortable margins.  A max width of 45rem (approx 720px) keeps
       the content centred and prevents it from spanning the full
       viewport width. */
    max-width: 45rem; /* approx 720px */
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 640px) {
    body.woocommerce-cart .woocommerce,
    body.woocommerce-checkout .woocommerce {
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

/* Remove any borders from WooCommerce tables on cart/checkout */
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table {
    border: none;
}

/* Gradient buttons for cart and checkout actions */
body.woocommerce-cart a.checkout-button,
body.woocommerce-cart button.checkout-button,
body.woocommerce-checkout input#place_order,
body.woocommerce-checkout button#place_order,
body.woocommerce-checkout input[type="submit"],
body.woocommerce-checkout button[type="submit"] {
    background-image: linear-gradient(to right, var(--xniux-primary, #059669), var(--xniux-secondary, #06b6d4));
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
body.woocommerce-cart a.checkout-button:hover,
body.woocommerce-cart button.checkout-button:hover,
body.woocommerce-checkout input#place_order:hover,
body.woocommerce-checkout button#place_order:hover,
body.woocommerce-checkout input[type="submit"]:hover,
body.woocommerce-checkout button[type="submit"]:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.3), 0 4px 6px -4px rgba(6, 182, 212, 0.2);
}

/* Ensure long product names and descriptions wrap and display fully */
body.woocommerce .product-name {
    white-space: normal !important;
    overflow: visible !important;
}

/* Increase product thumbnail size in cart */
body.woocommerce-cart table.shop_table .product-thumbnail img {
    width: 100px;
    height: auto;
}

/* Ensure appended cart item short descriptions wrap normally and display all text */
body.woocommerce-cart .cart-item-short-description,
body.woocommerce-checkout .cart-item-short-description {
    white-space: normal !important;
    overflow: visible !important;
    display: block;
    color: #4b5563;
    font-size: 0.875rem; /* 14px */
    line-height: 1.5rem; /* 24px */
    margin-top: 0.25rem;
}

/*
 * Typography for product descriptions
 *
 * WooCommerce product descriptions are not wrapped in the Tailwind `prose` class,
 * so headings and paragraphs may inherit the same font size.  These rules
 * assign sizes and margins to heading elements inside the tab panels to
 * mirror the typography of the blog posts.  Adjust sizes to match the
 * original theme: h1 largest, h2 slightly smaller, etc.
 */
.woocommerce .woocommerce-Tabs-panel h1 {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.woocommerce .woocommerce-Tabs-panel h2 {
    font-size: 1.875rem; /* 30px */
    line-height: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    margin-top: 1.25rem;
}
.woocommerce .woocommerce-Tabs-panel h3 {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-top: 1rem;
}
.woocommerce .woocommerce-Tabs-panel h4 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
}
.woocommerce .woocommerce-Tabs-panel h5 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.woocommerce .woocommerce-Tabs-panel h6 {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    margin-top: 0.5rem;
}
.woocommerce .woocommerce-Tabs-panel p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #374151; /* gray-700 */
}

/* === xniux 8.9.7 WooCommerce fixes (Cart ID:437, Checkout ID:414) === */

/* Narrow container and padding */
.page-id-437 .woocommerce, .page-id-414 .woocommerce,
body.woocommerce-cart .woocommerce, body.woocommerce-checkout .woocommerce{
  max-width:45rem; margin-left:auto; margin-right:auto;
  padding:2rem 1.25rem; background:rgba(255,255,255,.6);
  border-radius:16px; box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* Bigger thumbnails */
.page-id-437 table.cart img, .page-id-414 table.shop_table img,
.woocommerce-cart table.shop_table .product-thumbnail img,
.woocommerce-checkout table.shop_table .product-thumbnail img{
  width:120px; height:auto;
}

/* Full short description */
.page-id-437 .product-name *, .page-id-414 .product-name *{
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
}
.cart-item-short-description{margin-top:.25rem; font-size:.95rem; opacity:.9}

/* Gradient CTA buttons like footer 'Start Now' */
.page-id-437 a.checkout-button, .page-id-437 button.checkout-button,
.page-id-414 #place_order, .page-id-414 button#place_order,
.woocommerce a.button.checkout-button, .woocommerce button.button.alt,
.woocommerce #payment #place_order{
  background-image:linear-gradient(to right,var(--xniux-primary,#059669),var(--xniux-secondary,#06b6d4));
  color:#fff;border:none;border-radius:.75rem;padding:.9rem 1.25rem;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 8px 18px rgba(6,182,212,.25);
}
.woocommerce a.button.checkout-button:hover, .woocommerce button.button.alt:hover,
.woocommerce #payment #place_order:hover{transform:translateY(-1px) scale(1.02);
  box-shadow:0 12px 24px rgba(6,182,212,.35); opacity:.95}



/* xniux 8.9.8 header cart badge + dropdown */
.header .cart-item { position: relative; }
.header-cart-count{
  background-image: linear-gradient(to right, var(--xniux-primary,#059669), var(--xniux-secondary,#06b6d4));
  color:#fff; font-weight:700; font-size:.75rem; line-height:1rem;
  padding:.2rem .45rem; border-radius:9999px; min-width:1.1rem; text-align:center;
  box-shadow:0 6px 14px rgba(6,182,212,.25);
}
#xniux-mini-cart{ opacity:0; pointer-events:none; }
#xniux-mini-cart.open{ opacity:1; pointer-events:auto; animation:xniuxFadeSlide .18s ease-out; }
@keyframes xniuxFadeSlide{ from{ opacity:0; transform:translateY(-6px) scale(0.98);} to{ opacity:1; transform:translateY(0) scale(1);} }