/*
Theme Name: Kyubi Ecommerce
Theme URI:
Description: Child theme for Kyubi.
Author:
Template: kyubi
Version: 1.0.0
Text Domain: kyubi-ecommerce
*/

/* ==========================
   Color Variables
========================== */
:root {
    --color-border: #e6e6e6;
    --color-bg-light: #fafaf5;
    --color-white: #fff;
    --color-brand-blue: #204ccf;
    --color-btn-blue: #3c78bd;
    --color-badge-red: #e53935;
    --color-text-dark: #403e3e;
    --color-delete-red: #dc2626;
    --color-btn-blue-hover: #2f5f96;
}

/* Center align the custom shop header */
.custom-shop-header {
    text-align: center;
    margin-top: 60px;
}

/* Shop page title styling */
.custom-shop-title {
    font-size: 64px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

/* Grade filter instructions block, shown above the Grade filter */
.shop-grade-intro {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: left;
    color: var(--color-text-dark);
    font-size: 16px;
    line-height: 1.6;
}

.shop-grade-intro p {
    margin: 0 0 20px;
}

.shop-grade-intro p:last-child {
    margin-bottom: 0;
}


/* Add vertical spacing around the main WooCommerce content area */
body.woocommerce div#primary,
body.woocommerce-cart div#primary,
body.woocommerce-checkout div#primary {
    margin: 70px auto;
}

/* Add spacing below the WooCommerce breadcrumb */
.woocommerce .woocommerce-breadcrumb {
    margin-bottom: 30px;
}

/* Grade filter: styled dropdown + "Filter" button, side by side.
   Shares the same max-width/centering as .shop-grade-intro so the filter
   row lines up under the intro text instead of sitting at the page's
   full-width left edge. */
.grade-filter-wrapper {
    display: flex;
    align-items: stretch;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto 40px;
}

.grade-filter-select {
    position: relative;
    min-width: 220px;
}

/* Custom dropdown arrow (replaces the native one) */
.grade-filter-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-text-dark);
    border-bottom: 2px solid var(--color-text-dark);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.grade-filter-select select#grade-filter {
    width: 100%;
    height: 100%;
    min-width: 220px;
    padding: 14px 40px 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.grade-filter-select select#grade-filter:focus {
    outline: none;
    border-color: var(--color-btn-blue);
}

.grade-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 140px;
    padding: 14px 22px;
    border: none;
    border-radius: 6px;
    background-color: var(--color-btn-blue);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.grade-filter-button:hover,
.grade-filter-button:focus {
    background-color: var(--color-btn-blue-hover);
}

.grade-filter-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.grade-filter-button-icon {
    font-size: 16px;
    line-height: 1;
}

/* Any notice shown inside the Grade filter results area - the "select a
   grade" prompt, WooCommerce's own "No products were found matching your
   selection." after filtering to an empty grade, etc. Overrides the
   parent theme's default `.woocommerce-info` / `.woocommerce-error`
   banner (solid color background, full-width table display) with a
   softer callout that lines up in the same column as the intro
   text/filter, so every notice in this area looks consistent. */
#shop-loop-results .woocommerce-info,
#shop-loop-results .woocommerce-error,
#shop-loop-results .woocommerce-message,
#shop-loop-results .woocommerce-no-products-found {
    display: block;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 20px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-dark);
    font-size: 15px;
    text-align: left;
    clear: none;
}

#shop-loop-results .woocommerce-info::before,
#shop-loop-results .woocommerce-error::before,
#shop-loop-results .woocommerce-message::before {
    content: none;
}

/* The "no products found" template wraps its own .woocommerce-info in a
   .woocommerce-no-products-found div - avoid double padding/border from
   both layers matching the rule above. */
#shop-loop-results .woocommerce-no-products-found .woocommerce-info {
    padding: 0;
    border: 0;
    background: none;
}

/*
 * The parent theme relies on `ul.products { display: table; }` to contain
 * its floated li.product grid items, which doesn't reliably size the list
 * to its floated children - the list collapses to ~0 height and whatever
 * comes after it (the footer) overlaps the products. Give the AJAX
 * results wrapper its own explicit clearfix so the products render with
 * correct height both on first load and after the Grade filter reloads it.
 */
#shop-loop-results::after {
    content: "";
    display: table;
    clear: both;
}

/* Hide Basket text */
.basket-menu .ubermenu-target-text {
    display: none !important;
}

/* Center the icon and set the positioning context for the badge */
.basket-menu .ubermenu-target {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Add Font Awesome icon */
.basket-menu .ubermenu-target::before {
    content: "\f07a";
    /* Shopping Cart/Basket */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
}

/* Style the cart item count badge */
.basket-menu .cart-count {
    position: absolute;
    top: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-badge-red);
    color: var(--color-white);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

.single-product .woocommerce-message:focus {
    outline: none;
    box-shadow: none;
}

/* Default: Hide cart icon */
.basket-menu {
    display: none !important;
}

/* Show only on WooCommerce pages */
body.post-type-archive-product .basket-menu,
body.tax-product_cat .basket-menu,
body.tax-product_tag .basket-menu,
body.single-product .basket-menu,
body.woocommerce-cart .basket-menu,
body.woocommerce-checkout .basket-menu {
    display: list-item !important;
}

.single-product .single_add_to_cart_button,
.single-product .view-cart-btn {
    line-height: 1.4 !important;
}

/* ==========================
   Grade Info (single product page)
========================== */

/* Grade is shown in the Product Add-Ons totals summary box (next to
   Student First Name / Last Name) - the field itself stays hidden so
   only that summary line is visible, not a separate input on the page. */
#wc-pao-addon-shop-grade {
    display: none;
}

/* ==========================
   Cart Notices (e.g. "Product removed. Undo?")
========================== */

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info {
    display: block;
    margin: 0 0 30px;
    padding: 16px 20px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-dark);
    font-size: 15px;
    text-align: left;
}

.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-info::before {
    content: none;
}

.woocommerce-cart .woocommerce-message a,
.woocommerce-cart .woocommerce-error a,
.woocommerce-cart .woocommerce-info a {
    color: var(--color-brand-blue);
    font-weight: 600;
    text-decoration: underline;
}

/* ==========================
   Checkout Error Notices - accessibility fix
   (parent theme leaves .woocommerce-error text color unset, so it falls
   back to the site's blue link/heading color on the red background,
   which fails contrast. Force white text/bullets instead. Covers both
   the billing field validation list and the Stripe card-errors box,
   since both render as a plain .woocommerce-error on this page.)
========================== */

.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-error li,
.woocommerce-checkout .woocommerce-error a {
    color: var(--color-white);
}

/* Space the Stripe card error notice away from the card icons/fields
   above it, on the checkout page only - the same markup (payment_method_stripe_cc
   > .woocommerce-NoticeGroup) also appears on My Account > Payment Methods
   and the order-pay page, where this spacing isn't needed. */
.woocommerce-checkout div.payment_method_stripe_cc > .woocommerce-NoticeGroup {
    margin: 10px 0px 0px 18px;
}

.woocommerce-checkout ul.wc_payment_methods.payment_methods.methods li.wc_payment_method {
    margin-bottom: 15px !important;
}

/* ==========================
   Cart Layout
========================== */

.woocommerce-cart .custom-ecommerce-cart {
    width: 68%;
    margin-right: 20px;
}

.woocommerce-cart .custom-cart-collaterals {
    width: 30%;
    border: 2px solid var(--color-border);
    padding: 20px;
    background: var(--color-bg-light);
    border-radius: 25px;
}


/* ==========================
   Cart Table
========================== */

.woocommerce-cart .custom-ecommerce-cart .shop_table {
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0 40px;
    margin-top: -40px;
}

.woocommerce-cart .custom-ecommerce-cart tr.woocommerce-cart-form__cart-item.cart_item {
    display: flex;
    align-items: stretch;
    margin-bottom: 20px;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table td {
    padding: 0 !important;
    border-top: 0 !important;
    vertical-align: top;
    background: var(--color-bg-light);
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td {
    border-top: 2px solid var(--color-border) !important;
    border-bottom: 2px solid var(--color-border);
    width: 100%;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td:first-child {
    border-left: 2px solid var(--color-border) !important;
    width: 200px;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td:last-child {
    border-right: 2px solid var(--color-border) !important;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr td:first-child {
    border-radius: 25px 0 0 25px;
}

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr td:last-child {
    border-radius: 0 25px 25px 0;
}

/* Continue Shopping Row */

.woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr.continue-shopping-button td {
    border: 0 !important;
    background: var(--color-white);
}


/* ==========================
   Product
========================== */

.woocommerce-cart .custom-ecommerce-cart img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    border-radius: 25px 0 0 25px;
    width: 200px;
    height: 100%;
    object-fit: cover;
    display: block;
}

.woocommerce-cart .custom-ecommerce-cart td.product-name {
    padding: 20px !important;
}

.woocommerce-cart .custom-ecommerce-cart .product-name a {
    color: var(--color-text-dark);
    font-size: 24px;
    line-height: 30px;
}

.woocommerce-cart .custom-ecommerce-cart .product-price .woocommerce-Price-amount.amount {
    display: block;
    margin-bottom: 20px;
    padding: 10px 0;
    color: var(--color-brand-blue);
    font-size: 24px;
    font-weight: 600;
}


/* ==========================
   Quantity
========================== */

.woocommerce-cart .custom-ecommerce-cart input.qty {
    width: 20% !important;
    padding: 8px 15px;
    border: 2px solid var(--color-border);
    border-radius: 43px;
    outline: none;
}

.woocommerce-cart .custom-ecommerce-cart .product-quantity {
    margin-top: 35px;
}


/* ==========================
   return to product
========================== */

.woocommerce-cart .custom-returns-to-products a.button.return-products-btn,
.woocommerce-cart .custom-cart-collaterals .checkout-button,
.order-details-return-to-shop a.button.return-products-btn {
    position: relative;
    padding: 20px 26px;
    background: var(--color-btn-blue);
    color: var(--color-white);
    border-radius: 5px;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
}

/* Thank you page + My Account "View order" page both render this via the
   shared order/order-details.php template. Displayed inline (not the
   cart's fixed 300px) since it sits above the order summary, not in a
   full-width cart layout. */
.order-details-return-to-shop {
    margin-bottom: 30px;
}

.order-details-return-to-shop a.button.return-products-btn {
    display: inline-block;
    padding-right: 56px;
}

/* Thank you page only: `.custom-order-confirmation-details` (thankyou.php)
   wraps the "Thank you..." message and, further down, the order details
   template - this button included. It doesn't exist on My Account >
   View Order, so this row layout can't affect that page. Put the
   message and button on one row, then force the order/customer detail
   sections onto their own full-width line below. */
.custom-order-confirmation-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.custom-order-confirmation-details .woocommerce-thankyou-order-received {
    margin: 0;
    text-align: left;
}

.custom-order-confirmation-details .order-details-return-to-shop {
    margin: 0;
}

.custom-order-confirmation-details .woocommerce-order-details,
.custom-order-confirmation-details .woocommerce-customer-details {
    flex: 1 0 100%;
}

.woocommerce-cart .custom-returns-to-products a.button.return-products-btn {
    width: 300px;
}



/* ==========================
   Buttons Icons
========================== */

.woocommerce-cart a.button.return-products-btn::after,
.woocommerce-cart .custom-cart-collaterals .checkout-button::after,
.order-details-return-to-shop a.button.return-products-btn::after {
    content: "\f178";
    position: absolute;
    right: 18px;
    margin-right: 8px;
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
}


/* ==========================
   Cart Totals
========================== */

.woocommerce-cart .custom-cart-collaterals .cart_totals h2 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
}

.woocommerce-cart .custom-cart-collaterals table.shop_table {
    border: 0px !important;
}

.woocommerce-cart .custom-cart-collaterals .shop_table th {
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 2.5em;
}

.woocommerce-cart .custom-cart-collaterals .shop_table td {
    border-top: 0 !important;
    font-size: 18px;
    line-height: 2.5em;
    padding: 4px 0px;
}

.woocommerce-cart .custom-cart-collaterals .shop_table td:last-child {
    text-align: right;
}

.woocommerce-cart .custom-cart-collaterals .checkout-button {
    width: 100%;
}


/* ==========================
   Variation Data
========================== */

.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt.variation-StudentFirstName,
.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt.variation-StudentLastName,
.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt.variation-StudentGrade,
.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt p {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.woocommerce-cart .custom-ecommerce-cart .variation-dd-item-data dt p {
    margin-left: 10px;
}

.woocommerce-cart .custom-cart-page {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.woocommerce-cart .custom-cart-page .product-quantity {
    position: relative;
}

.woocommerce-cart .custom-cart-page .product-name a.cart-item-delete-icon {
    color: var(--color-delete-red);
    font-size: 16px;
}

.woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
    position: absolute;
    top: 7px;
    left: 14%;
    cursor: pointer;
}

.woocommerce-cart .custom-cart-page .product-quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce-cart .custom-cart-page .product-quantity input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.woocommerce-cart .custom-cart-page .product-quantity input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/***cart empty css*/

.woocommerce-tabs.custom-product-desc h2.custom-product-desc-heading {
    margin-bottom: 0 !important;
    padding-top: 40px;
}



/***product category products****/

.tax-product_cat.woocommerce ul.products li.product a img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0;
    min-height: 90px;
    font-size: 18px;
}

.tax-product_cat.woocommerce ul.products li.product span.price {
    min-height: 30px;
    display: block;
}

/**single product css *****/
.single-product.woocommerce div.product div.images img {
    display: block;
    width: 100%;
    height: 480px;
    box-shadow: none;
    object-fit: cover;
}

.woocommerce.single-product div.product p.price {
    font-size: 20px;
    margin-top: 15px;
}

.single-product form.cart h2.wc-pao-addon-heading {
    font-size: 24px;
    margin-top: 10px;
    font-weight: 600;
}

.single-product form.cart .wc-pao-addon .wc-pao-addon-description {
    font-style: italic;
    margin-bottom: 10px;
}

.single-product form.cart .quantity {
    display: none;
}

.single-product .woocommerce-tabs .panel h2:first-of-type {
    font-size: 25px;
    font-weight: 600;
}

.single-product .wc-pao-addon .wc-pao-addon-wrap {
    margin-bottom: 10px;
}

/***cart page css returns to products***/
.custom-returns-to-products .return-to-products-wrapper {
    padding: 0 0 30px 8px;
}

.custom-returns-to-products .return-to-products-wrapper p.return-text {
    margin-bottom: 10px;
    font-size: 26px;
    line-height: 30px;
}

/***thanyou page design css*****/

.custom-order-confirmation-details p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.woocommerce .custom-order-confirmation-details table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table {
    border: 2px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-bg-light);
}

.woocommerce .custom-order-confirmation-details table.shop_table tr td:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td:last-child {
    text-align: right;
}

/* The "Subtotal" column header is a <th>, not a <td>, so the rule above
   doesn't reach it - without this it sits left-aligned while every value
   underneath it is right-aligned, making the column look off. */
.woocommerce .custom-order-confirmation-details table.shop_table thead th:last-child,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child {
    text-align: right;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td {
    padding: 10px 25px 0px 20px;
    border-top: 0px;
    vertical-align: top;
}

.woocommerce .custom-order-confirmation-details table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
    padding-left: 20px;
    padding-right: 25px;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr:last-child th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr:last-child th {
    padding-bottom: 20px;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr td ul.wc-item-meta,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td ul.wc-item-meta {
    list-style: none;
    margin-bottom: 0px;
    margin-top: 8px;
}

.woocommerce .custom-order-confirmation-details table.shop_table tr td ul li,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr td ul li {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Product Add-Ons meta (Student First/Last Name, Grade) shown under each
   line item - same markup/rule as the cart page's variation-dd-item-data,
   extended to the checkout review table so both look consistent. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt.variation-StudentFirstName,
.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt.variation-StudentLastName,
.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt.variation-StudentGrade,
.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt p {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--color-text-dark);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .variation-dd-item-data dt p {
    margin: 2px 0 8px;
    font-weight: 400;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
    border-top: 1px solid var(--color-border);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
    padding-top: 14px;
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
}

#order_review_heading {
    margin-bottom: 16px;
}

.custom-order-confirmation-details section.woocommerce-customer-details {
    background: var(--color-bg-light);
    padding: 20px;
    border-radius: 20px;
    border: 2px solid var(--color-border);
    margin-bottom: 25px;
}

.custom-order-confirmation-details h2.custom-order-summary-title,
.custom-order-confirmation-details .woocommerce-column__title,
.custom-order-confirmation-details h2.woocommerce-order-details__title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 32px;
}

.custom-order-confirmation-details h2.custom-order-summary-title {
    margin-bottom: 0;
}


/* Hidden by default. custom.js only adds "js-toggle-visible" once it has
   confirmed the ShiftNav toggle button (#shiftnav-toggle-main) is
   actually visible, so this always matches the toggle's own breakpoint -
   whatever a given network site has that configured as - instead of a
   fixed pixel width guess that can drift out of sync with it. */
.mobile-cart-icon {
    display: none;
}

/* ShiftNav active */

.header .mobile-cart-icon.js-toggle-visible .cart-count {
    position: absolute;
    top: -7px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-badge-red);
    color: var(--color-white);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/****payment options css*****/

/* Payment Methods Wrapper */
.woocommerce-checkout .wc_payment_methods {
    list-style: none;
    margin: 0 0px 0 0;
    padding: 0;
}


/* Individual Payment Method */
.woocommerce-checkout .wc_payment_methods .wc_payment_method {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 16px;
    background: var(--color-white);
    overflow: hidden;
    transition: border-color .2s ease;
}

/* Highlight the currently selected payment method */
.woocommerce-checkout .wc_payment_methods .wc_payment_method:has(> input:checked) {
    border-color: var(--color-btn-blue);
}

/* Label */
.woocommerce-checkout .wc_payment_methods .wc_payment_method>label {
    display: flex;
    align-items: center;
    padding: 18px 22px;
    padding-right: 60px;
    cursor: pointer;
    margin: 0;
    font-weight: 600;
}

/* Radio Button */
.woocommerce-checkout .wc_payment_methods .wc_payment_method input[type="radio"] {
    margin: 0;
    accent-color: var(--color-btn-blue);
    width: 18px;
    height: 18px;
}

/* Fixed offset from the top of the card, not top:50% - the card's total
   height grows a lot when its payment_box (card fields, wallet notice...)
   expands below the label for the selected method, and centering by
   percentage against that full height drags the radio down into the
   middle of the expanded content instead of staying next to the label. */
.woocommerce-checkout .wc_payment_methods .wc_payment_method>input[type="radio"] {
    position: absolute;
    top: 18px;
    right: 22px;
}

.woocommerce-checkout .wc_payment_methods li.wc_payment_method.payment_method_stripe_googlepay.wc-stripe-no-desc {
    margin-bottom: 20px !important;
}

/* Card Icons */
.woocommerce-checkout .wc-stripe-card-icons-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.woocommerce-checkout .wc-stripe-card-icon {
    height: 28px;
    width: auto;
}

/* Wallet Icons */
.woocommerce-checkout .payment_method_stripe_googlepay label img,
.woocommerce-checkout .payment_method_stripe_applepay label img {
    height: 36px;
    width: auto;
}

/* stripe card */
.woocommerce-checkout .wc-stripe_cc-container.wc-stripe-gateway-container {
    padding: 20px;
    padding-bottom: 0;
}

.woocommerce-checkout .wc-stripe-wallet-notice {
    border: 0px;
    padding: 20px;
    box-shadow: none;
}

/* The wallet notice repeats the same wallet icon (Google Pay/Apple Pay)
   already shown in the method's label right above it - drop the repeat
   so the icon only appears once per method. */
.woocommerce-checkout .wc-stripe-wallet-notice--mark {
    display: none;
}

/****order details - your order sections css***********/

/**place order button css***/

.woocommerce-checkout button#place_order {
    margin-bottom: 20px;
}

.woocommerce-checkout section.woocommerce-order-details td.custom-order-detail-items {
    font-size: 16px;
    font-weight: 600;
}

.woocommerce .custom-order-confirmation-details table.shop_table tfoot span.woocommerce-Price-amount.amount {
    font-weight: 600;
    font-size: 20px;
}

.woocommerce .custom-order-confirmation-details table.shop_table .order-item-separator td {
    border-bottom: 2px solid var(--color-border);
    padding: 5px 0;
}


/* Responsive*/

@media screen and (max-width: 959px) {
    body.admin-bar.woocommerce #shiftnav-toggle-main,
    body.admin-bar.woocommerce .shiftnav,
    body.admin-bar.woocommerce-page #shiftnav-toggle-main,
    body.admin-bar.woocommerce-page .shiftnav {
        top: 11px !important;
    }
}

@media (max-width:1024px) {

    .woocommerce main#main,
    .woocommerce-checkout .woocommerce {
        padding: 0 15px;
    }

    .woocommerce main#main .container-fluid {
        padding: 0 0px;
    }

    .woocommerce-checkout .container-fluid {
        padding: 0 15px;
    }
}

@media screen and (max-width:959px) {
    .header .header-btns {
        display: flex !important;
    }
    .header:not(.darkHeader) .header-btns #navbarMain {
        display: none !important;
    }
}

@media screen and (max-width:767px) {
    .header:not(.darkHeader) .header-btns {
        width: auto !important;
        position: absolute;
        top: 50%;
        right: 61px;
        transform: translateY(-50%);
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .woocommerce.darkHeader-down #shiftnav-toggle-main {
        top: 11px !important;
    }
}

@media  (max-width:767px) {
    .header .mobile-cart-icon.js-toggle-visible {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 44px;
        margin-left: 7px;
        color: var(--color-white);
        text-decoration: none;
        background: var(--color-brand-blue);
        border-radius: 3px;
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .header .mobile-cart-icon.js-toggle-visible {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 44px;
        margin-left: 7px;
        color: var(--color-white);
        text-decoration: none;
        background: var(--color-brand-blue);
        border-radius: 3px;
        top: 20px;
    }
}

@media (min-width:768px) and (max-width:1024px) {

    .woocommerce-cart .custom-cart-page{
        padding: 0 15px;
    }
    .woocommerce-cart .custom-ecommerce-cart td.product-name {
        padding: 13px !important;
    }

    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 21% !important;
    }

    /***post type product category products***/

    .tax-product_cat .grade-filter-wrapper {
        margin-top: 0;
    }

    .tax-product_cat.woocommerce ul.products li.product a img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .tax-product_cat.woocommerce ul.products li.product .button {
        font-weight: 500;
    }

    .tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 18px;
        line-height: 24px;
    }

    /***single product tab css***/

    .woocommerce.single-product div.product .product_title {
        font-size: 24px;
        line-height: 34px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    /*** return to products css****/
    .custom-returns-to-products {
        padding: 0 12px;
    }

}


@media (min-width:768px) and (max-width:915px) {
    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 34% !important;
    }

    .tax-product_cat .grade-filter-wrapper {
        margin-top: 40px;
    }

    .woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
        left: 22%;
    }

    .woocommerce-cart .custom-ecommerce-cart img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
        height: 100%;
    }

    .woocommerce-cart .custom-cart-collaterals .checkout-button {
        padding: 20px 14px;
        font-size: 15px;
    }

    .woocommerce-cart .custom-cart-collaterals .checkout-button::after {
        margin-right: -6px;
    }


}

@media (max-width:820px) {
    .tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 19px;
        line-height: 24px;
    }

    .tax-product_cat .grade-filter-wrapper {
        margin-top: 40px;
    }

}


@media (min-width:768px) and (max-width:819px) {
    .tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 17px;
        line-height: 24px;
    }

    .tax-product_cat .grade-filter-wrapper {
        margin-top: 40px;
    }
}

@media (max-width:767px) {
    .tax-product_cat .grade-filter-wrapper {
        margin-top: 40px;
    }

    .woocommerce-cart .container-fluid {
        padding: 0 0px;
    }

    .custom-returns-to-products .return-to-products-wrapper {
        padding-left: 0;
    }

    .woocommerce-cart .custom-cart-page {
        display: block;
    }

    .woocommerce-cart .custom-ecommerce-cart tr.woocommerce-cart-form__cart-item.cart_item {
        display: block;
        margin-bottom: 20px;
    }

    .woocommerce-cart .custom-ecommerce-cart img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
        border-radius: 25px 25px 0 0;
        width: 100%;
        height: 250px;
        border-top: 2px solid var(--color-border);
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr td:first-child {
        border-right: 2px solid var(--color-border) !important;
        border-radius: 25px 25px 0 0;
        width: 100%;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td:last-child {
        border-left: 2px solid var(--color-border) !important;
        border-radius: 0 0px 25px 25px !important;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table.cart tr td {
        border-top: 0px solid var(--color-border) !important;
    }

    .woocommerce-cart .custom-cart-collaterals {
        width: 100%;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table tr.woocommerce-cart-form__cart-item td:before,
    .woocommerce-cart .custom-cart-page table.shop_table_responsive tr.cart-subtotal td::before {
        display: none;
    }

    .woocommerce-cart .custom-cart-page table.shop_table_responsive tr.cart-subtotal {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .woocommerce-cart .custom-cart-page table.shop_table_responsive tr td {
        text-align: left;
    }

    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 35% !important;
    }

    .woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
        left: 25%;
    }

    .woocommerce-cart .custom-ecommerce-cart {
        width: 100%;
        margin-right: 0;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table {
        border-spacing: 0 20px;
    }

    .woocommerce-cart .custom-ecommerce-cart .shop_table.cart tbody tr.continue-shopping-button td:first-child {
        border-right: 0px !important;
        border-left: 0px !important;
    }


    /***post type product category products***/

    .tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
        display: block;
        min-height: auto;
        padding-bottom: 15px;
    }

    /*** single product css******/

    .woocommerce.single-product #content div.product div.summary,
    .woocommerce.single-product div.product div.summary,
    .woocommerce-page.single-product #content div.product div.summary,
    .woocommerce-page.single-product div.product div.summary {
        float: left;
        width: 100%;
    }

    .woocommerce.single-product div.product .product_title {
        margin-top: 15px;
        font-size: 28px;
        line-height: 34px;
    }

    .woocommerce.single-product #content div.product div.images,
    .woocommerce.single-product div.product div.images,
    .woocommerce-page.single-product #content div.product div.images,
    .woocommerce-page.single-product div.product div.images {
        width: 100%;
    }

    .woocommerce.single-product div.product div.images img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .woocommerce.single-product p.price {
        font-size: 24px;
        margin-top: 18px;
    }

    .woocommerce.single-product .wc-pao-addon-heading {
        margin: 15px 0 0;
        font-size: 24px;
        text-align: left;
        font-weight: 600;
    }

    .woocommerce.single-product .wc-pao-addon {
        padding: 0 2px;
        margin-bottom: 10px;
    }

    .woocommerce.single-product .woocommerce-tabs .panel h2:first-of-type {
        font-size: 25px;
        text-align: left;
        padding-top: 10px;
    }

    .woocommerce.single-product .woocommerce-Tabs-panel--description p {
        line-height: 28px;
    }


    /***return to product button css*****/
    .custom-returns-to-products .return-to-products-wrapper p.return-text {
        font-size: 22px;
    }

    .custom-returns-to-products .return-to-products-wrapper {
        margin-bottom: 10px;
    }

    /***cart page remove space from list of products css***/
    .woocommerce-cart .woocommerce-cart-form table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents {
        margin-bottom: 0;
    }


    body.woocommerce-checkout #content {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .custom-order-confirmation-details p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
        font-size: 20px;
    }

    .custom-order-confirmation-details h2.woocommerce-order-details__title {
        text-align: left;
        font-size: 18px;
    }

    .woocommerce .custom-order-confirmation-details table.shop_table tr td ul li {
        display: block;
    }

}

/* Common styles */
@media (max-width: 540px) {

    /* Stack the Grade select above the Filter button on small screens */
    .tax-product_cat .grade-filter-wrapper {
        flex-direction: column;
    }

    .tax-product_cat .grade-filter-select,
    .tax-product_cat .grade-filter-select select#grade-filter,
    .tax-product_cat .grade-filter-button {
        width: 100%;
        min-width: 0;
    }

    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 22% !important;
    }

    .woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
        left: 15%;
    }
}

@media (max-width: 430px) {
    .woocommerce-cart .custom-ecommerce-cart input.qty {
        width: 36% !important;
    }

    .woocommerce-cart .custom-cart-page .product-quantity .cart-item-removed-icon {
        left: 26%;
    }
}