/* --- Single Product Refactor (Standard CSS) --- */
#site-logo {
    height: 3rem;
}

.gday-single-product-main {
    width: 100%;
    max-width: 80rem;
    /* max-w-7xl */
    margin: 0 auto;
    padding: 3rem 1rem;
    /* px-4 py-12 */
    background-color: #fff;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .gday-single-product-main {
        padding: 5rem 2rem;
        /* md:px-8 md:py-20 */
    }
}

@media (min-width: 1024px) {
    .gday-single-product-main {
        padding: 5rem 3rem;
        /* lg:px-12 */
    }
}

.gday-product-top-section {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 6rem;
    /* mb-24 */
}

@media (min-width: 768px) {
    .gday-product-top-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
        /* lg:gap-24 */
        align-items: start;
    }
}

.gday-product-summary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* space-y-6 equivalent approx */
    color: #374151;
    /* text-gray-700 */
}

/* Ensure inner elements in summary have spacing if needed, 
   though 'gap' on flex container handles direct children. 
   WooCommerce hooks output multiple elements. */
.gday-product-summary>* {
    margin-bottom: 1.5rem;
}

.gday-product-summary>*:last-child {
    margin-bottom: 0;
}

/* --- Single Product Layout --- */
/* RESET: Remove grid from main product container so tabs can flow to bottom */
.woocommerce div.product {
    display: block;
    /* Changed from grid/flex to block to let children stack */
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .woocommerce div.product {
        display: block;
        /* Ensure it stays block on desktop */
    }
}

/* Ensure inner grid for top section handles the 2-column layout */
/* (This is already handled by utility classes in content-single-product.php) */


/* --- Typography: Product Title --- */
.woocommerce div.product .product_title {
    font-family: 'Impact', sans-serif;
    font-size: 2.25rem;
    /* text-4xl */
    line-height: 1.25;
    color: #1c583f;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    /* tracking-wide */
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .woocommerce div.product .product_title {
        font-size: 3rem;
        /* md:text-5xl */
    }
}

/* --- Typography: Price --- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 700;
    color: #E87722;
    margin-bottom: 1.5rem;
    /* mb-6 */
}

@media (min-width: 768px) {

    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 1.875rem;
        /* md:text-3xl */
    }
}

/* --- Typography: Short Description --- */
.woocommerce-product-details__short-description {
    font-size: 0.925rem;
    /* Smaller font */
    font-weight: 300;
    /* Thinner weight */
    line-height: 1.6;
    color: #666;
    margin-bottom: 2rem;
}

/* --- Buttons: Add to Cart --- */
.woocommerce div.product form.cart .button {
    width: auto;
    /* Prevent full width if set */
    min-width: 160px;
    /* Reasonable min-width */
    padding: 0.75rem 2rem;
    /* Reduce padding (was likely larger) */
    border-radius: 9999px;
    /* Pill shape */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #1c583f;
    color: #fff;
    transition: all 0.3s ease;
}

.woocommerce div.product form.cart .button:hover {
    background-color: #E87722;
    /* Accent hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(28, 88, 63, 0.2);
}

/* --- Layout: Center Top Align --- */
/* Ensure the gallery and summary are vertically aligned nicely if needed, 
   but 'align-items: start' in the inner grid usually works best. 
   The user asked to "Center Top Section" horizontally, which is handled by mx-auto. 
   If they meant vertical alignment of content: */

/* Ensure Tabs are full width and spaced */
.woocommerce div.product .woocommerce-tabs {
    clear: both;
    width: 100%;
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid #eee;
}

/* Style Tabs to look premium */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    justify-content: center;
    border: none !important;
    margin: 0 0 2rem 0;
    padding: 0;
    list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none !important;
    background: transparent !important;
    margin: 0 1.5rem;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #999;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #1c583f;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1c583f;
}


/* Description Content Styling (Prose-like) */
.woocommerce div.product .woocommerce-tabs .panel {
    max-width: 50rem;
    /* readable line length */
    margin: 0 auto;
    text-align: left;
    line-height: 1.8;
    color: #444;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    display: block;
    font-family: 'Impact', sans-serif;
    /* Keep theme identity */
    font-size: 1.75rem;
    font-weight: normal;
    color: #1c583f;
    margin-top: 2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.woocommerce div.product .woocommerce-tabs .panel h3 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.woocommerce div.product .woocommerce-tabs .panel p {
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.woocommerce div.product .woocommerce-tabs .panel ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.woocommerce div.product .woocommerce-tabs .panel li {
    margin-bottom: 0.5rem;
}

/* Hide the automatic 'Description' heading if desired? 
   No, user asked to see what they set. 
   Usually the first one is 'Description'. 
   If we want to hide specifically the one WC adds, it's often consistent.
   But forcing styles allows inline editor styles (e.g. bold/color) to pass through 
   as long as we don't use !important.
*/
.woocommerce div.product .woocommerce-tabs .panel strong {
    font-weight: 700;
    color: inherit;
}

.woocommerce div.product div.images img {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    width: 100%;
    height: auto;
    display: block;
}

/* --- Single Product Content --- */
.woocommerce div.product .product_title {
    font-family: 'Impact', 'Noto Sans TC', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    color: #1c583f;
    letter-spacing: 0.05em;
    font-size: 2.25rem !important;
    line-height: 1.2;
    margin-bottom: 1rem !important;
}

@media (min-width: 768px) {
    .woocommerce div.product .product_title {
        font-size: 2rem !important;
    }
}

/* Price */
.woocommerce div.product p.price {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;
    font-size: 1.5rem !important;
    color: #E87722 !important;
    /* Orange accent */
    margin-bottom: 2rem !important;
    display: block;
}

/* Meta Data (Categories, SKU) */
.woocommerce div.product .product_meta {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
    color: #888;
}

.woocommerce div.product .product_meta span {
    display: block;
    margin-bottom: 0.5rem;
}

.woocommerce div.product .product_meta a {
    color: #1c583f;
    font-weight: 500;
    text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
    color: #E87722;
}

/* --- Add to Cart Section --- */
.woocommerce div.product form.cart {
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Quantity Input */
.woocommerce .quantity .qty {
    width: 4rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1.1rem;
    color: #1c583f;
    font-weight: 600;
}

/* Add to Cart Button */
.woocommerce div.product button.button.alt,
.woocommerce div.product button.button {
    background-color: #1c583f !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 12px 36px !important;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    font-size: 1.1rem !important;
    transition: all 0.3s ease;
    border: 2px solid #1c583f !important;
    flex-grow: 1;
    max-width: 300px;
    text-align: center;
    cursor: pointer;
}

.woocommerce div.product button.button.alt:hover,
.woocommerce div.product button.button:hover {
    background-color: transparent !important;
    color: #1c583f !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(28, 88, 63, 0.2);
}

/* --- Related Products Section --- */
.woocommerce section.related.products {
    margin-top: 5rem;
    width: 100%;
    /* Force grid context removal if nested weirdly, though product div is grid now */
    grid-column: 1 / -1;
    /* Span full width if inside grid */
    border-top: 1px solid #f2efe9;
    padding-top: 4rem;
}

.woocommerce section.related.products h2 {
    font-family: 'Impact', 'Noto Sans TC', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    color: #1c583f;
    text-align: center;
    font-size: 2.5rem !important;
    margin-bottom: 3rem !important;
    position: relative;
    letter-spacing: 0.05em;
}

/* Decorative underline for h2 */
.woocommerce section.related.products h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #E87722;
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* Product Grid for Related & Archive */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
        /* 4 cols for related usually looks better */
        gap: 2rem !important;
    }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    /* Remove float clear fixes */
}

/* Product Card Styling */
.woocommerce ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
}

.woocommerce ul.products li.product img {
    border-radius: 12px;
    margin-bottom: 1rem !important;
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
    /* Square images */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Impact', 'Noto Sans TC', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.25rem !important;
    color: #1c583f;
    margin-bottom: 0.5rem !important;
    letter-spacing: 0.02em;
    padding: 0 0.5rem;
}

.woocommerce ul.products li.product .price {
    font-family: 'Noto Sans TC', sans-serif;
    color: #595757 !important;
    font-weight: 700;
    font-size: 1rem !important;
    display: block;
    margin-bottom: 1rem !important;
}

.woocommerce ul.products li.product .button {
    margin-top: auto;
    background-color: #fff !important;
    border: 1px solid #1c583f !important;
    color: #1c583f !important;
    border-radius: 9999px;
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s;
    display: inline-block;
    width: auto;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #1c583f !important;
    color: #fff !important;
}

/* --- Archive Sidebar (If Present) --- */
.woocommerce-container aside {
    padding-right: 2rem;
}

.woocommerce .widget-title {
    font-family: 'Impact', 'Noto Sans TC', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    color: #1c583f;
    text-transform: uppercase;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #E87722;
    display: inline-block;
}

.woocommerce ul.product-categories {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce ul.product-categories li {
    margin-bottom: 0.5rem !important;
}

.woocommerce ul.product-categories li a {
    display: block;
    padding: 0.75rem 1rem;
    background-color: #f9fafb;
    border-radius: 8px;
    color: #595757;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.woocommerce ul.product-categories li a:hover,
.woocommerce ul.product-categories li.current-cat>a {
    color: #1c583f;
}

/* --- Notices & Messages (Logo Override) --- */
/* Remove default font icon and overlapping, use Logo */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    font-family: inherit !important;
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 1.25rem;
    /* Adjust based on padding */
    left: 1.5rem;
    width: 24px;
    height: 24px;
    background-image: url('/wp-content/uploads/2026/01/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Ensure container has space for the absolute icon */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding-left: 4.5rem !important;
    /* Make room for the icon */
    position: relative;
    list-style: none !important;
    /* For error ul */
}

/* Hide the SVG I added in the template if it doubles up with ::before */
.woocommerce-notices-wrapper .woocommerce-info>div:first-child,
.woocommerce-notices-wrapper .woocommerce-message>div:first-child,
.woocommerce-notices-wrapper .woocommerce-error>div:first-child {
    /* If the template implementation wrapped the SVG in a div */
    display: none !important;
}

/* Also target raw SVG if direct child */
.woocommerce-notices-wrapper .woocommerce-info>svg,
.woocommerce-notices-wrapper .woocommerce-message>svg,
.woocommerce-notices-wrapper .woocommerce-error .woocommerce-error-icon-wrapper {
    display: none !important;
}

/* --- Cart Page Styling --- */

/* Fix missing font-impact class */
.font-impact {
    font-family: 'Impact', 'Noto Sans TC', sans-serif !important;
    font-weight: 500 !important;
    /* User requested reduced weight */
    letter-spacing: 0.05em;
}

/* Force Remove Icon Color (Override WC default red) */
.woocommerce a.remove {
    color: #9ca3af !important;
    font-size: 1em;
    /* text-gray-400 */
    font-weight: 400 !important;
    /* Not bold */
    border: 1px solid #e5e7eb !important;
    /* Optional: circle border if needed, or remove */
    border-radius: 50% !important;
    background: transparent !important;
    line-height: 1 !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.woocommerce a.remove:hover {
    color: #E87722 !important;
    /* Orange accent */
    border-color: #E87722 !important;
    background: transparent !important;
}

/* Cart Table Overrides */
.woocommerce table.shop_table th {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    color: #1c583f;
    text-transform: uppercase;
}

.woocommerce table.shop_table td {
    font-family: 'Noto Sans TC', sans-serif;
}

.woocommerce table.shop_table a {
    text-decoration: none;
}

/* Ensure cart totals don't overlap */
.cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
}

/* Cart Totals Table */
.cart_totals table.shop_table {
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
    padding: 1rem 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Proceed to Checkout Button */
.wc-proceed-to-checkout .checkout-button {
    background-color: #1c583f !important;
    color: #fff !important;
    border-radius: 9999px !important;
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
    background-color: #164632 !important;
    /* Darker green */
    transform: translateY(-1px);
}

.gday-accountmenu {
    height: 100%;
}

/* My Account Navigation Active State */
.woocommerce-MyAccount-navigation ul li.is-active a {
    font-weight: 700 !important;
    color: #1c583f !important;
    position: relative;
}

.woocommerce-MyAccount-navigation ul li.is-active a::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.2em;
    background-color: #E87722;
    border-radius: 2px;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
    float: right;
    width: 100%;
    clear: none;
}

.woocommerce div.product div.summary {
    margin-bottom: 2em;
}

.product-gallery-wrapper {
    padding: 10%;
    display: flex;
    justify-content: center;
}

.woocommerce div.product div.images.woocommerce-product-gallery {
    position: relative;
    box-shadow: none;
    border: none;
    width: 80%;
}