/* ==========================================================================
   Thanyh — Storefront pages in the flagship language (2026-10)
   Shop / category archives, product page, cart, checkout, search, account.
   Visual layer only: markup and WooCommerce behaviour are untouched.
   !important is used only where the legacy stylesheets already use it.
   ========================================================================== */

/* ------------------------------------------------------- shop hero (dark) */

.th-shop-hero {
    background:
        radial-gradient(45% 80% at 85% 0%, rgba(23, 105, 232, .32), transparent 70%),
        radial-gradient(40% 70% at 10% 100%, rgba(124, 176, 255, .14), transparent 70%),
        var(--f-ink);
    border-bottom: 0;
    color: var(--f-on-ink);
}

.th-shop-hero-glow {
    display: none;
}

.th-shop-hero h1 {
    color: #fff;
    font-family: var(--f-font-display);
    font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.3rem);
    font-weight: 800;
    line-height: var(--f-lh-display);
}

.th-shop-kicker {
    color: var(--f-blue-hi);
    font-weight: 700;
}

.th-shop-hero-description,
.th-shop-hero-description p {
    color: var(--f-on-ink-muted);
    line-height: var(--f-lh-body);
}

.th-shop-hero-meta span {
    border-color: var(--f-line-ink);
    background: rgba(255, 255, 255, .06);
    color: var(--f-on-ink-muted);
}

.th-shop-hero-meta b {
    color: #fff;
}

/* Category chips under the shop hero */
.th-shop-categories-head h2,
.th-shop-categories-head h3 {
    font-family: var(--f-font-display);
    font-weight: 700;
}

.th-shop-category-card {
    border-radius: var(--f-r);
    transition: transform var(--f-t1) var(--f-ease), border-color var(--f-t1), background-color var(--f-t1);
}

.th-shop-category-card:hover {
    transform: translateY(-3px);
    border-color: var(--f-blue);
}

/* Sorting + result count */
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
    min-height: 44px;
    padding-inline: 16px 36px;
    border: 1px solid var(--f-line);
    border-radius: 999px;
    background-color: var(--f-paper);
    font-family: var(--f-font);
    font-weight: 600;
}

.woocommerce-result-count {
    color: var(--f-muted);
    font-size: var(--f-fs-small);
}

/* ------------------------------------------------ product loop cards */

.woocommerce ul.products li.product {
    border: 1px solid var(--f-line);
    border-radius: var(--f-r-lg);
    background: var(--f-paper);
    overflow: hidden;
    transition: transform .5s var(--f-ease), border-color var(--f-t1);
}

.woocommerce ul.products li.product a img:not(.th-woo-riyal-symbol) {
    border-radius: 0;
    transition: transform .8s var(--f-ease);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--f-font);
    font-size: var(--f-fs-h3);
    font-weight: 700;
    line-height: 1.55;
    color: var(--f-text);
}

.woocommerce ul.products li.product .price {
    color: var(--f-text);
    font-family: var(--f-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.woocommerce ul.products li.product .price del {
    color: var(--f-muted);
    font-size: .8em;
    font-weight: 500;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

.woocommerce ul.products li.product .button {
    border-radius: 999px;
    background: var(--f-ink);
    color: #fff;
    font-family: var(--f-font);
    font-weight: 700;
    transition: background-color var(--f-t1), transform var(--f-t1) var(--f-ease);
}

.woocommerce ul.products li.product .button:hover {
    background: var(--f-blue);
    color: #fff;
}

.woocommerce ul.products li.product .button:active {
    transform: scale(.97);
}

.woocommerce ul.products li.product.outofstock a img:not(.th-woo-riyal-symbol) {
    opacity: .55;
    filter: grayscale(.6);
}

@media (hover: hover) {
    .woocommerce ul.products li.product:hover {
        transform: translateY(-6px);
        border-color: #d3dae7;
    }

    .woocommerce ul.products li.product:hover a img:not(.th-woo-riyal-symbol) {
        transform: scale(1.04);
    }
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    border: 1px solid var(--f-line);
    border-radius: 50%;
    font-weight: 700;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    border-color: var(--f-ink);
    background: var(--f-ink);
    color: #fff;
}

/* -------------------------------------------------------- product page */

.single-product .product_title {
    font-family: var(--f-font-display) !important;
    font-size: clamp(28px, 3.05vw, 41px);
    font-weight: 700 !important;
    line-height: var(--f-lh-title) !important;
    text-wrap: balance;
}

@media (max-width: 980px) {
    .single-product .product_title { font-size: 29px; }
}

@media (max-width: 767px) {
    .single-product .product_title { font-size: 24px; }
}

@media (max-width: 390px) {
    .single-product .product_title { font-size: 21px; }
}

.single-product .summary .price,
.single-product .th-product-hero .price,
.single-product .th-product-hero .price .th-price-unit {
    color: var(--f-text) !important;
    font-family: var(--f-font-display);
    font-weight: 700;
}

.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery img {
    border-radius: var(--f-r-lg);
}

.single-product .th-product-summary-label {
    border-radius: 999px;
}

.single-product .quantity .qty {
    min-height: 52px;
    border: 1px solid var(--f-line);
    border-radius: 999px;
    font-family: var(--f-font-display);
    font-weight: 700;
    text-align: center;
}

.single-product button.single_add_to_cart_button {
    min-height: 54px;
    border-radius: 999px !important;
    background: var(--f-ink) !important;
    color: #fff !important;
    font-family: var(--f-font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    transition: background-color var(--f-t1), transform var(--f-t1) var(--f-ease);
}

.single-product button.single_add_to_cart_button:hover {
    background: #1b2640 !important;
}

/* "Buy now" is the shortest path → primary brand colour. */
.single-product .th-buy-now {
    min-height: 54px;
    border-radius: 999px !important;
    background: var(--f-blue) !important;
    border-color: var(--f-blue) !important;
    color: #fff !important;
    font-family: var(--f-font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    transition: background-color var(--f-t1), transform var(--f-t1) var(--f-ease);
}

.single-product .th-buy-now:hover {
    background: var(--f-blue-deep) !important;
}

.single-product button.single_add_to_cart_button:active,
.single-product .th-buy-now:active {
    transform: scale(.98);
}

/* Tabs, reviews, FAQ */
.single-product .woocommerce-tabs h2,
.single-product .th-tab-review-heading h2,
.single-product .th-tab-review-heading h3,
.single-product .th-product-faq-head h2,
.single-product .related > h2,
.single-product .th-customer-review-form-head h3 {
    font-family: var(--f-font-display);
    font-weight: 700;
}

.single-product .th-tab-review-card,
.single-product .th-product-faq-item {
    border-radius: var(--f-r);
}

.single-product .woocommerce-product-details__short-description {
    line-height: var(--f-lh-body);
}

/* ---------------------------------------------------------- cart page */

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.th-woo-page > h1,
.woocommerce-cart h1,
.woocommerce-checkout h1 {
    font-family: var(--f-font-display);
    font-weight: 800;
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
    font-family: var(--f-font-display);
    font-weight: 700;
}

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
    border-radius: var(--f-r);
    overflow: hidden;
}

.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
    font-family: var(--f-font-display);
    font-weight: 800;
}

.woocommerce a.checkout-button,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    min-height: 56px;
    border-radius: 999px;
    background: var(--f-blue);
    color: #fff;
    font-family: var(--f-font);
    font-size: 1.05rem;
    font-weight: 700;
    transition: background-color var(--f-t1), transform var(--f-t1) var(--f-ease);
}

.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
    background: var(--f-blue-deep);
    color: #fff;
}

.woocommerce a.checkout-button:active,
.woocommerce #place_order:active {
    transform: scale(.98);
}

/* Forms */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .input-text,
.woocommerce .coupon .input-text {
    min-height: 50px;
    border: 1px solid var(--f-line);
    border-radius: 14px;
    background: var(--f-paper);
    font-family: var(--f-font);
    transition: border-color var(--f-t1), box-shadow var(--f-t1);
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce .coupon .input-text:focus {
    border-color: var(--f-blue);
    box-shadow: 0 0 0 4px rgba(23, 105, 232, .12);
    outline: none;
}

.woocommerce form .form-row label {
    font-weight: 600;
}

/* Empty / notice states */
.woocommerce .cart-empty,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    border-radius: var(--f-r);
}

.woocommerce .cart-empty {
    font-family: var(--f-font-display);
    font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
    font-weight: 700;
}

.woocommerce .return-to-shop .button {
    min-height: 52px;
    padding-inline: 28px;
    border-radius: 999px;
    background: var(--f-blue);
    color: #fff;
}

/* Purchase steps (cart/checkout) in the new language */
.th-x-steps li {
    font-family: var(--f-font);
}

.th-x-step-dot {
    font-family: var(--f-font-display);
}

/* Search results */
.search .page-title,
.search h1 {
    font-family: var(--f-font-display);
    font-weight: 800;
}

/* ----------------------------------------------- shared hero background */

/* Page-level wrappers become transparent so the shared hero background shows.
   Cards, the product panel, tabs, forms and the checkout panel keep their surfaces. */
.th-shop-categories,
.th-shop-shell,
.single-product .th-woo-page,
.woocommerce-cart .th-commerce-page,
.woocommerce-checkout .th-commerce-page {
    background: transparent;
    border-bottom-color: transparent;
}

/* Text that sits directly on the page background */
.th-shop-categories-head span {
    color: var(--f-blue-hi);
}

.th-shop-categories-head h2,
.th-shop-products-head h2,
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
    color: #fff;
}

.th-shop-categories-head > a,
.th-shop-products-head p,
.woocommerce-result-count,
.single-product .thanyh-breadcrumb,
.single-product .thanyh-breadcrumb a {
    color: var(--f-on-ink-muted);
}

.woocommerce nav.woocommerce-pagination ul li a {
    border-color: var(--f-line-ink);
    color: var(--f-on-ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    border-color: #fff;
    background: #fff;
    color: var(--f-ink);
}

/* Cart: same white panel the checkout container already uses, for readability. */
.woocommerce-cart .th-commerce-container {
    padding: clamp(16px, 3vw, 32px);
    border: 1px solid var(--th-border);
    border-radius: 16px;
    background: #fff;
}