/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive
*/

/* ==========================================================================
   TaxGuru shop — design foundation
   --------------------------------------------------------------------------
   The subscription page was built with its own type scale and palette because
   the theme's defaults were fighting it: 14px body text in #777, five font
   families loaded, and the same Add to cart button drawn two different ways on
   two different pages. That page is the reference; this file takes its language
   and gives it to the whole shop.

   Loaded from the child theme at priority 1001, so it lands after Porto's own
   stylesheets and wins on equal specificity without needing !important
   everywhere. Anything not restyled here still falls back to Porto, which is
   the point of doing it in a child theme: nothing can break by omission.
   ========================================================================== */

:root {
	/* The subscription page's palette, now the shop's. */
	--tg-navy:      #10243a;
	--tg-blue:      #1267a5;
	--tg-blue-dark: #0d4e7e;
	--tg-blue-pale: #e9f4fc;
	--tg-ink:       #172b3d;
	--tg-muted:     #536579;
	--tg-line:      #dbe5ee;
	--tg-pale:      #f3f8fc;
	--tg-green:     #128252;
	--tg-radius:    10px;
	--tg-radius-sm: 7px;

	/* ----------------------------------------------------------------------
	   Porto's own tokens, repointed.

	   Porto is built on about a hundred CSS variables, and nearly every rule in
	   the theme reads from them. Changing the variables moves buttons, links,
	   prices, headings, badges and accents across the whole shop at once —
	   including components this file has never heard of. The alternative was
	   out-specifying Porto rule by rule, which is a fight that never finishes
	   and breaks on the next theme update.

	   The primary ramp is Porto's own naming: dark-N and light-N are shades of
	   the primary, used for hovers and borders, so they have to move together
	   or hover states end up the old cyan.
	   ---------------------------------------------------------------------- */
	--porto-primary-color:      #1267a5;
	--porto-primary-dark-5:     #10598f;
	--porto-primary-dark-10:    #0d4e7e;
	--porto-primary-dark-15:    #0b4269;
	--porto-primary-dark-20:    #093654;
	--porto-primary-light-5:    #1571b4;
	--porto-primary-light-7:    #167ac2;
	--porto-primary-light-10:   #1a86d1;

	--porto-body-color:         #172b3d;
	--porto-body-color-light-5: #2a4358;
	--porto-heading-color:      #10243a;
	--porto-color-dark:         #10243a;
	--porto-dark-color:         #10243a;
	--porto-color-price:        #10243a;

	--porto-input-bc:           #dbe5ee;

	/* Porto draws every hairline with these two greys (#e7e7e7). Pointing them
	   at the line colour makes table rules, card edges and the quantity stepper
	   agree with everything else, in one move. */
	--porto-gray-2:             #dbe5ee;
	--porto-gray-5:             #dbe5ee;

	/* the listing's Add to cart, which Porto draws white by default */
	--porto-shop-add-links-bg-color: #1267a5;
	--porto-shop-add-links-color:    #ffffff;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   Body was 14px in #777 — thin, and low contrast against white. 16px in
   --tg-ink is the readable floor, and the darker ink is what makes the page
   look "designed" more than any single other change.
   -------------------------------------------------------------------------- */
body,
body.porto-b {
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: var(--tg-ink);
}

p { color: var(--tg-muted); }

h1, h2, h3, h4, h5, h6,
.entry-title, .product_title, .woocommerce-loop-product__title {
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--tg-navy);
	line-height: 1.22;
}

h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -1px;  font-weight: 700; }
h2 { font-size: clamp(23px, 2.6vw, 30px); letter-spacing: -.5px; font-weight: 700; }
h3 { font-size: 20px; font-weight: 700; }
h4 { font-size: 17px; font-weight: 700; }

a        { color: var(--tg-blue); }
a:hover  { color: var(--tg-blue-dark); }

/* --------------------------------------------------------------------------
   BUTTONS
   One shape for one action. Before this, Add to cart was white-on-grey 12px in
   the listing and black uppercase 14px on the product page — the same button,
   drawn as two different things.
   -------------------------------------------------------------------------- */
/*
 * Named classes only — no bare `button` element selector.
 *
 * The first version of this used button:not(...):not(...):not(...), and every
 * :not() adds its argument's weight, so the rule ended up heavier than a
 * component's own class and quietly restyled the subscription page's button.
 * A foundation has to be easy to override or nothing built on top of it can
 * hold its own shape.
 */
.button,
.btn,
input[type="submit"],
.add-links .add_to_cart_button,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.woocommerce-Button {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	border-radius: var(--tg-radius-sm);
	border: 1px solid transparent;
	padding: 11px 20px;
	line-height: 1.3;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.button,
.btn-primary,
input[type="submit"],
.add-links .add_to_cart_button,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button {
	background-color: var(--tg-blue);
	border-color: var(--tg-blue);
	color: #fff;
}

.button:hover,
.btn-primary:hover,
input[type="submit"]:hover,
.add-links .add_to_cart_button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
	background-color: var(--tg-blue-dark);
	border-color: var(--tg-blue-dark);
	color: #fff;
}

/* the one that takes the money reads heavier than the ones that do not */
.single_add_to_cart_button,
.checkout-button {
	background-color: var(--tg-navy);
	border-color: var(--tg-navy);
	font-size: 15px;
	padding: 13px 26px;
}
.single_add_to_cart_button:hover,
.checkout-button:hover {
	background-color: var(--tg-blue);
	border-color: var(--tg-blue);
}

/* quiet actions: outline, not another solid block */
.button.wc-backward,
.woocommerce-message .button,
.woocommerce-info .button {
	background-color: #fff;
	border-color: var(--tg-line);
	color: var(--tg-navy);
}
.button.wc-backward:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background-color: var(--tg-pale);
	border-color: var(--tg-blue);
	color: var(--tg-blue);
}

/* --------------------------------------------------------------------------
   FORMS
   Square 42px boxes with a hairline border; matched to the buttons so a form
   reads as one control set rather than parts from two kits.
   -------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"], input[type="date"],
select, textarea, .select2-container .select2-selection--single {
	font-family: inherit;
	font-size: 15px;
	color: var(--tg-ink);
	background-color: #fff;
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius-sm);
	padding: 10px 13px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
	border-color: var(--tg-blue);
	box-shadow: 0 0 0 3px rgba(18, 103, 165, .13);
	outline: none;
}

label { color: var(--tg-navy); font-weight: 500; }

/* --------------------------------------------------------------------------
   PRICES AND STOCK
   -------------------------------------------------------------------------- */
.price,
.woocommerce-Price-amount {
	color: var(--tg-navy);
	font-weight: 700;
}
.price del,
.price del .woocommerce-Price-amount {
	color: var(--tg-muted);
	font-weight: 400;
}
.price ins { text-decoration: none; }
.stock.in-stock { color: var(--tg-green); }

/* --------------------------------------------------------------------------
   NOTICES
   Woo's default notices are a grey bar with a coloured left edge; these read as
   information rather than as chrome.
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--tg-radius);
	border: 1px solid var(--tg-line);
	background-color: var(--tg-pale);
	color: var(--tg-ink);
	font-size: 15px;
}
.woocommerce-message { border-left: 4px solid var(--tg-green); }
.woocommerce-info    { border-left: 4px solid var(--tg-blue); }
.woocommerce-error   { border-left: 4px solid #c0392b; background-color: #fdf3f2; }

/* --------------------------------------------------------------------------
   TABLES (cart, order details, account)
   -------------------------------------------------------------------------- */
.shop_table {
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.shop_table thead th {
	background-color: var(--tg-pale);
	color: var(--tg-navy);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .3px;
}

/* ==========================================================================
   PRODUCT PAGE
   --------------------------------------------------------------------------
   The buy column arrived in this order: title, rating, price, HSN/SKU/category,
   then the form that actually sells the thing. The catalogue numbers sat
   between the price and the button — filing details wedged into the middle of
   a purchase. Flex order moves them below, without touching a template.
   ========================================================================== */
.single-product .summary {
	display: flex;
	flex-direction: column;
}
.single-product .summary > .product_meta  { order: 5; }
.single-product .summary > .product-share { order: 6; }

.single-product .summary > .product_title {
	font-size: clamp(22px, 2.2vw, 28px);
	margin-bottom: 8px;
}

.single-product .summary > .price {
	font-size: 26px;
	font-weight: 700;
	color: var(--tg-navy);
	margin: 6px 0 14px;
}
.single-product .summary > .price .woocommerce-Price-amount { font-size: inherit; }

/* The buy box: one bordered block holding the choice and the button, so the
   decision and the action are visibly the same object. */
.single-product .summary > .variations_form,
.single-product .summary > form.cart {
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	background: var(--tg-pale);
	padding: 18px 18px 16px;
	margin-bottom: 18px;
}

.single-product .variations th.label label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--tg-muted);
}
.single-product .variations td.value select { width: 100%; }

.single-product .single_variation_wrap .woocommerce-variation-price {
	font-size: 22px;
	font-weight: 700;
	color: var(--tg-navy);
	margin-bottom: 10px;
}

.single-product .single_add_to_cart_button { width: 100%; justify-content: center; }

/* Reassurance under the button, printed by the child theme's functions.php. */
.tg-buy-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.tg-buy-trust span {
	font-size: 12px;
	color: #36536b;
	background: #fff;
	border: 1px solid var(--tg-line);
	padding: 6px 10px;
	border-radius: var(--tg-radius-sm);
}

/* Catalogue detail, now below the purchase and weighted like reference. */
.single-product .summary > .product_meta {
	font-size: 13px;
	color: var(--tg-muted);
	border-top: 1px solid var(--tg-line);
	padding-top: 14px;
	margin-top: 4px;
}
.single-product .summary > .product_meta a { color: var(--tg-blue); }

/* Tabs */
.single-product .woocommerce-tabs .tabs li a {
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tg-muted);
}
.single-product .woocommerce-tabs .tabs li.active a,
.single-product .woocommerce-tabs .tabs li a:hover { color: var(--tg-navy); }
.single-product .woocommerce-tabs .tab-content { font-size: 15px; }

@media (max-width: 767px) {
	.single-product .summary > .price { font-size: 23px; }
	.single-product .summary > .variations_form,
	.single-product .summary > form.cart { padding: 15px; }
}

/* ==========================================================================
   CART AND CHECKOUT
   --------------------------------------------------------------------------
   The two pages where money is actually lost. The aim here is not decoration:
   it is that at every point the reader can see what they are buying, what it
   costs, and what the next button does.
   ========================================================================== */

/* ---- the Shopping Cart / Checkout / Order Complete strip ---- */
.woo-page-header .breadcrumb li a {
	font-size: 15px;
	font-weight: 700;
	color: var(--tg-muted);
}
.woo-page-header .breadcrumb li.current a { color: var(--tg-navy); }

/* ---- cart items ---- */
.woocommerce-cart-form .shop_table td { padding: 18px 12px; vertical-align: middle; }
.woocommerce-cart-form .product-name a {
	color: var(--tg-navy);
	font-weight: 500;
}
.woocommerce-cart-form .product-thumbnail img {
	border-radius: var(--tg-radius-sm);
	border: 1px solid var(--tg-line);
}
.woocommerce-cart-form .product-subtotal { color: var(--tg-navy); font-weight: 700; }

/* the quantity stepper reads as one control, not three loose parts */
.quantity { display: inline-flex; align-items: stretch; }
/* Porto qualifies these with .buttons_added, so we match it — a plain
   .quantity .minus loses and the stepper stays square. */
.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
	background: #fff;
	border: 1px solid var(--tg-line);
	color: var(--tg-navy);
	width: 34px;
	cursor: pointer;
}
/*
 * Scoped through .cart-table because theme_shop.css sets the radius at
 * .shop_table.cart-table .quantity .minus, which outweighs a plain
 * .quantity .minus.
 *
 * border-*-width, not the border-right/left shorthand: the shorthand also
 * resets the colour to currentcolor, which painted a navy line down the middle
 * of the stepper.
 */
.shop_table.cart-table .quantity.buttons_added .minus,
.quantity.buttons_added .minus {
	border-radius: var(--tg-radius-sm) 0 0 var(--tg-radius-sm);
	border-right-width: 0;
}
.shop_table.cart-table .quantity.buttons_added .plus,
.quantity.buttons_added .plus {
	border-radius: 0 var(--tg-radius-sm) var(--tg-radius-sm) 0;
	border-left-width: 0;
}
.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover { background: var(--tg-blue-pale); color: var(--tg-blue); }
.quantity.buttons_added input.qty {
	border-radius: 0;
	border-left: 1px solid var(--tg-line);
	border-right: 1px solid var(--tg-line);
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
}

/* ---- coupon ---- */
.woocommerce-cart-form .coupon input.input-text { min-width: 180px; }

/* ---- totals: the number people are deciding on ---- */
.cart_totals,
.woocommerce-checkout-review-order {
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	background: #fff;
	padding: 20px;
}
.cart_totals h2,
.woocommerce-checkout-review-order h3,
#order_review_heading {
	font-size: 17px;
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 14px;
}
.cart_totals .shop_table,
.woocommerce-checkout-review-order .shop_table {
	border: 0;
	border-radius: 0;
}
.cart_totals .shop_table th,
.woocommerce-checkout-review-order .shop_table th {
	background: transparent;
	color: var(--tg-muted);
	font-weight: 500;
	font-size: 14px;
}
.cart_totals .order-total th,
.woocommerce-checkout-review-order .order-total th { color: var(--tg-navy); font-weight: 700; }
.cart_totals .order-total td,
.woocommerce-checkout-review-order .order-total td {
	font-size: 22px;
	font-weight: 700;
	color: var(--tg-navy);
}

/* ---- the two buttons that move the order forward ---- */
.btn-v-dark,
#place_order,
.wc-proceed-to-checkout .button {
	background-color: var(--tg-navy) !important;
	border-color: var(--tg-navy) !important;
	color: #fff !important;
	border-radius: var(--tg-radius-sm) !important;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
.btn-v-dark:hover,
#place_order:hover,
.wc-proceed-to-checkout .button:hover {
	background-color: var(--tg-blue) !important;
	border-color: var(--tg-blue) !important;
}
/* Porto sets these two with its own !important, so matching it is the only way
   to win without rewriting the template. Kept to exactly these two buttons. */

/* ---- checkout form ---- */
.woocommerce-checkout h3,
.woocommerce-billing-fields > h3 { font-size: 20px; margin-bottom: 16px; }
.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout .form-row label { font-size: 14px; margin-bottom: 6px; display: inline-block; }
.woocommerce-checkout .required { color: #c0392b; text-decoration: none; border: 0; }

/* the "returning customer" / "have a coupon" bars */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--tg-pale);
	border: 1px solid var(--tg-line);
	border-left: 4px solid var(--tg-blue);
	font-size: 14px;
	padding: 12px 16px;
}

/* ---- payment methods ---- */
#payment { background: transparent; border-radius: 0; }
#payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 14px;
}
#payment ul.payment_methods li.wc_payment_method {
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius-sm);
	padding: 12px 14px;
	margin-bottom: 9px;
	background: #fff;
	transition: border-color .15s ease, background-color .15s ease;
}
#payment ul.payment_methods li.wc_payment_method:hover { border-color: var(--tg-blue); }
#payment ul.payment_methods li.wc_payment_method label {
	font-weight: 500;
	color: var(--tg-navy);
	margin: 0;
	cursor: pointer;
}
#payment ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--tg-blue);
	background: var(--tg-blue-pale);
	box-shadow: inset 0 0 0 1px var(--tg-blue);
}
#payment div.payment_box {
	background: var(--tg-pale);
	border-radius: var(--tg-radius-sm);
	font-size: 14px;
	color: var(--tg-muted);
}
#payment div.payment_box::before { display: none; }

@media (max-width: 767px) {
	.cart_totals, .woocommerce-checkout-review-order { padding: 16px; }
	.cart_totals .order-total td,
	.woocommerce-checkout-review-order .order-total td { font-size: 20px; }
}

/* ==========================================================================
   CATEGORY / SHOP LISTING
   --------------------------------------------------------------------------
   Six products to a row left each one 142px wide on a 1440px screen: covers
   the size of a stamp, and titles cut to "Guide to Insol…". Four gives about
   213px, which is enough to recognise a book and read most of its name.

   This is done in CSS rather than through a setting because Porto decides the
   archive's column count in several overlapping places — a term meta, a theme
   option, a WooCommerce loop property and a $porto_woocommerce_loop global that
   other components also write to — and it emits two parallel class systems
   (ccols-* and pwidth-*). Changing shop-product-cols did move /shop/ to four,
   but product category archives kept coming out at six, and the page is not
   cached: it renders that way. One rule that targets the rendered result is
   honest about what is actually being controlled here.

   Only the widest breakpoint is touched. Porto's own lg/md/sm/mobile steps are
   already sensible (4/4/3/2) and are left alone.
   ========================================================================== */
@media (min-width: 1200px) {
	.archive ul.products.has-ccols.ccols-xl-6 > .product,
	.post-type-archive-product ul.products.has-ccols.ccols-xl-6 > .product {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* ---- the cards themselves ---- */
ul.products .product-loop-title,
ul.products .woocommerce-loop-product__title {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--tg-navy);
}
ul.products .category-list,
ul.products .category-list a {
	font-size: 11px;
	letter-spacing: .4px;
	color: var(--tg-muted);
}
ul.products .product-image img { border-radius: var(--tg-radius-sm); }
ul.products .price { font-size: 16px; }

/* toolbar above the grid */
.woocommerce-ordering select,
.woocommerce-ordering .porto-view-switcher { font-size: 14px; }

/* ==========================================================================
   HOMEPAGE
   --------------------------------------------------------------------------
   The page has four product rows. Three of them are four-up at 285px a card;
   the first was six-up at 190px. Nothing justified the difference — it just
   made the top of the page look like a different site from the rest of it.
   ========================================================================== */
@media (min-width: 1200px) {
	.home ul.products.has-ccols.ccols-xl-6 > .product {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* The section headings — "Best Seller", "GST Books", "Income Tax Books" — are
   already real H2s, and they sit white on a blue band (#007dff) the client set
   in Elementor. No colour is set here on purpose: a navy rule would have been
   navy text on a blue band the moment Elementor's inline colour changed. The
   band's blue differs from the site's (#1267a5); that is a content decision in
   Elementor, not something to overwrite from a stylesheet. */

/* ==========================================================================
   MY ACCOUNT, SEARCH, ORDER RECEIVED
   --------------------------------------------------------------------------
   The pages a customer meets after paying, and the ones they land on when
   something has gone wrong. They were inheriting raw WooCommerce defaults.
   ========================================================================== */

/* ---- login / register ---- */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	background: #fff;
	padding: 24px;
}
/*
 * Porto hangs Bootstrap gutter utilities on these forms (pe-0, pr-lg-4), and
 * Bootstrap utilities carry !important — so the right padding collapsed to 0
 * and the fields sat against the card's own border. Those utilities were doing
 * column-gutter work; now that the form is a card, that space belongs inside
 * it. Matched with !important because nothing else beats a Bootstrap utility,
 * and kept to these three selectors.
 */
.woocommerce-form-login.pe-0,
.woocommerce-form-register.pe-0,
.woocommerce-ResetPassword.pe-0 { padding-right: 24px !important; }
.woocommerce-form-login.ps-0,
.woocommerce-form-register.ps-0,
.woocommerce-ResetPassword.ps-0 { padding-left: 24px !important; }

.woocommerce-form-login .woocommerce-form-login__rememberme { font-size: 14px; }
.woocommerce-form-login .lost_password a { color: var(--tg-blue); font-size: 14px; }

/* ---- account dashboard ---- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	overflow: hidden;
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--tg-line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	color: var(--tg-ink);
	font-weight: 500;
	font-size: 15px;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--tg-pale); color: var(--tg-blue); }
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--tg-blue-pale);
	color: var(--tg-navy);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--tg-blue);
}

.woocommerce-MyAccount-content { font-size: 15px; }
.woocommerce-orders-table__cell-order-number a { color: var(--tg-blue); font-weight: 700; }

/* order status reads as a state, not as body text */
.woocommerce-orders-table__cell-order-status {
	font-size: 13px;
	font-weight: 700;
	color: var(--tg-navy);
}

/* ---- order received / thank you ---- */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-size: 19px;
	font-weight: 700;
	color: var(--tg-green);
	border: 1px solid var(--tg-line);
	border-left: 4px solid var(--tg-green);
	border-radius: var(--tg-radius);
	background: #f2faf6;
	padding: 16px 20px;
}
.woocommerce-order ul.woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0;
	padding: 0;
	border: 0;
}
.woocommerce-order ul.woocommerce-order-overview li {
	flex: 1 1 160px;
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius-sm);
	padding: 12px 14px;
	margin: 0;
	font-size: 13px;
	color: var(--tg-muted);
	text-transform: none;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	color: var(--tg-navy);
}

/* ---- search results ---- */
.search-results .page-title,
.search-no-results .page-title { color: var(--tg-navy); }
.search-results article,
.search .post { border-bottom: 1px solid var(--tg-line); padding-bottom: 18px; margin-bottom: 18px; }

/* ---- 404 ---- */
.error404 .page-not-found h1,
.error404 .page-not-found h2 { color: var(--tg-navy); }

@media (max-width: 767px) {
	.woocommerce-form-login,
	.woocommerce-form-register,
	.woocommerce-ResetPassword { padding: 18px; }
}

/* Visually hidden, still announced by screen readers. Used for the front
   page's h1 — see functions.php. Not display:none, which would take it out of
   the accessibility tree as well as off the screen. */
.tg-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   NAVIGATION — closer to taxguru.in
   --------------------------------------------------------------------------
   The main site's nav is sentence case. Porto's is uppercase, set through
   --porto-menu-text-transform, so this is the whole change: no selector war,
   and the dropdown menus follow the same variable.
   ========================================================================== */
:root { --porto-menu-text-transform: none; }

/* ---- the menu bar, now a row of its own (see header/header_11.php) ---- */
.tg-menu-bar {
	background: #0e3a66;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.tg-menu-bar .container { position: relative; }
.tg-menu-bar #main-menu { float: none; display: block; }
.tg-menu-bar .main-menu { float: none; display: flex; flex-wrap: wrap; }
#header .tg-menu-bar .main-menu > li.menu-item > a {
	color: #fff;
	height: auto;
	padding: 13px 14px;
	line-height: 1.4;
}
#header .tg-menu-bar .main-menu > li.menu-item:hover > a,
#header .tg-menu-bar .main-menu > li.menu-item.active > a {
	background: #1267a5;
	color: #fff;
}
@media (max-width: 991px) {
	/* the phone uses Porto's own off-canvas menu, so the bar is dead weight */
	.tg-menu-bar { display: none; }
}

/* The header-main search: Porto ships it collapsed because its stock layout
   expects the top-strip copy to be the visible one. With that copy gone, this
   is the search, so it gets a real width on the right of the logo row. */
/* Porto hides this copy with `#header .header-main .searchform-popup` — an id
   selector, so a class-only rule of any length loses to it. The id has to be in
   ours too. Porto hides it because its stock layout expects the top strip to
   carry the search; that copy is gone from the template above, so this is now
   the only search and it should be seen. */
@media (min-width: 992px) {
	#header .header-main .header-right .searchform-popup {
		display: inline-block;
		width: 360px;
		max-width: 38vw;
		margin-left: auto;
	}
	#header .header-main .header-right .searchform-popup .search-toggle { display: none; }
	#header .header-main .header-right .searchform-popup form.searchform { width: 100%; }
	/*
	 * Porto lays this row out as a table, not flex — .header-right is a
	 * table-cell, so display:flex here simply lost and the search sat against
	 * the top of the row, 13px above the logo's centre line. Centring in a
	 * table-cell is vertical-align, and the field has to be inline-block for
	 * that to reach it.
	 */
	#header .header-main .header-right { vertical-align: middle; text-align: right; }
	#header .header-main .header-right .searchform-popup {
		vertical-align: middle;
		display: inline-block;
	}

	/* Made to look like a control rather than an outline: a real border, a
	   field tall enough to aim at, and a filled button so the action is
	   obvious. It was a faint box with a grey magnifier and read as decoration. */
	#header .header-main .searchform-popup .searchform {
		display: block;
		/* Blue, and 2px, so the box reads as the thing you type into rather
		   than as a hairline somebody forgot to remove. */
		border: 2px solid var(--tg-blue);
		border-radius: var(--tg-radius-sm);
		background: #fff;
		overflow: hidden;
		transition: box-shadow .15s ease;
	}
	#header .header-main .searchform-popup .searchform:focus-within {
		box-shadow: 0 0 0 3px rgba(18, 103, 165, .18);
	}

	/*
	 * Porto's inner wrapper sizes itself to its contents, so the button stopped
	 * 113px short of the form's right edge with dead space after it. Making the
	 * wrapper a full-width flex row puts the field on the stretch and the
	 * button hard against the end, which is where a search button belongs.
	 */
	#header .header-main .searchform-popup .searchform .searchform-fields {
		display: flex;
		align-items: stretch;
		width: 100%;
	}
	#header .header-main .searchform-popup .searchform .searchform-fields > span.text {
		flex: 1 1 auto;
		min-width: 0;
		display: block;
	}
	#header .header-main .searchform-popup .searchform .searchform-fields > span.text input { width: 100%; }
	#header .header-main .searchform-popup .searchform .searchform-fields > .button-wrap {
		flex: 0 0 auto;
		display: block;
	}
	#header .header-main .searchform-popup .searchform input[type="text"],
	#header .header-main .searchform-popup .searchform input[name="s"] {
		flex: 1 1 auto;
		height: 42px;
		border: 0;
		border-radius: 0;
		padding: 0 14px;
		font-size: 14px;
		color: var(--tg-ink);
		background: transparent;
		box-shadow: none;
	}
	#header .header-main .searchform-popup .searchform input::placeholder { color: var(--tg-muted); }
	#header .header-main .searchform-popup .searchform button,
	#header .header-main .searchform-popup .searchform .btn,
	#header .header-main .searchform-popup .searchform [type="submit"] {
		flex: 0 0 auto;
		width: 46px;
		height: 42px;
		border: 0;
		border-radius: 0;
		background: var(--tg-blue);
		color: #fff;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#header .header-main .searchform-popup .searchform button:hover,
	#header .header-main .searchform-popup .searchform [type="submit"]:hover { background: var(--tg-blue-dark); }
	#header .header-main .searchform-popup .searchform button i,
	#header .header-main .searchform-popup .searchform [type="submit"] i { color: #fff; font-size: 15px; }
	/* the category dropdown the advanced layout adds, if present */
	#header .header-main .searchform-popup .searchform select {
		border: 0;
		border-right: 1px solid var(--tg-line);
		border-radius: 0;
		height: 42px;
		font-size: 13px;
		background: #fff;
	}
}

/*
 * The sticky state. Porto pins .main-menu-wrap to the top on scroll and repaints
 * it from mainmenu-wrap-bg-color-sticky — which was empty, so it came out white.
 * The navy bar vanished mid-scroll and only the active item's blue box was left
 * floating on the page.
 *
 * The setting is now navy too; this rule is the guard, written with #header so
 * it can actually outweigh `#header.sticky-header .main-menu-wrap`.
 */
#header.sticky-header .main-menu-wrap.tg-menu-bar,
.fixed-header #header.sticky-header .main-menu-wrap.tg-menu-bar {
	background: #0e3a66;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
#header.sticky-header .main-menu-wrap.tg-menu-bar .main-menu > li.menu-item > a { color: #fff; }

/* ==========================================================================
   SIDEBAR PRODUCT WIDGETS
   --------------------------------------------------------------------------
   shop-sidebar-base.css paints every link inside the sidebar with
   `.woocommerce-page .sidebar-content ul li a { color: var(--porto-body-color) }`,
   which is heavier than a plain .add_to_cart_button — so the Add to cart and
   Select options buttons in the Best Selling widget kept the body colour on a
   blue background.

   This got worse, not better, when the palette moved: --porto-body-color used
   to be #777 (grey on blue, poor) and is now #172b3d (navy on blue, unreadable).
   A token change is only as safe as the rules reading it.
   ========================================================================== */
.woocommerce-page .sidebar-content ul li a.button,
.woocommerce-page .sidebar-content ul li a.add_to_cart_button,
.sidebar .product_list_widget a.button,
.sidebar .add-links a.button {
	color: #fff;
}
.woocommerce-page .sidebar-content ul li a.button:hover,
.woocommerce-page .sidebar-content ul li a.add_to_cart_button:hover {
	color: #fff;
}

/* the price filter's own button is a secondary action, so it reads as one */
.sidebar .price_slider_amount .button,
.widget_price_filter .button {
	background: #fff;
	border: 1px solid var(--tg-line);
	color: var(--tg-navy);
	font-size: 13px;
	padding: 8px 18px;
}
.sidebar .price_slider_amount .button:hover,
.widget_price_filter .button:hover {
	background: var(--tg-pale);
	border-color: var(--tg-blue);
	color: var(--tg-blue);
}

/* the widget's product titles and prices, so the column reads as a list rather
   than a second catalogue */
.sidebar .product_list_widget .product-loop-title,
.sidebar .product-col .product-loop-title { font-size: 13px; line-height: 1.35; }
.sidebar .product-col .price { font-size: 14px; }

/* ==========================================================================
   CONTRAST — the greys Porto left behind
   --------------------------------------------------------------------------
   Found by measuring, not by eye: a sweep of every button, link, label and cell
   on the shop against its own background. Four places were under 4.5:1, which
   is where text starts being hard work for anyone with less than perfect sight
   — and on a screen in daylight, that is most people.
   ========================================================================== */

/* "( There are no reviews yet. )" — #999 on white, 2.8:1 */
.woocommerce-product-rating .woocommerce-review-link,
.woocommerce-product-rating .woocommerce-write-review-link,
.woocommerce-review-link { color: var(--tg-muted); }

/* Inactive product tabs — #818692 on white, 3.6:1. The tab is the <li> itself,
   and Porto sets it at `.woocommerce-tabs .resp-tabs-list li`, so the class has
   to be hung on the li to get past it. */
/* only-product.css sets this colour with !important, so specificity cannot
   reach it — this is one of the few places in the file that has to answer in
   kind. Scoped to the tab labels and nothing else. */
.woocommerce-tabs .resp-tabs-list li.resp-tab-item,
.woocommerce-tabs .tabs li a { color: var(--tg-muted) !important; }
.woocommerce-tabs .resp-tabs-list li.resp-tab-item.resp-tab-active,
.woocommerce-tabs .resp-tabs-list li.resp-tab-item:hover { color: var(--tg-navy) !important; }

/* the breadcrumb strip: #777 on a near-black bar, 4:1 */
.page-top .breadcrumb,
.page-top .breadcrumb li,
.page-top .breadcrumb li a,
.page-top .breadcrumb li.active { color: #c2cedd; }
.page-top .breadcrumb li a:hover { color: #fff; }