/**
 * Porto — TrustedTech · visual skin
 * ---------------------------------------------------------------------------
 * This is the file that makes Porto look like the TrustedTech design.
 *
 * GOVERNING PRINCIPLE: change paint, not layout.
 *
 * Every rule here targets colour, typography, borders, radius and shadow.
 * Almost nothing touches display, position, float or width. That is deliberate
 * — Porto's layout is built on Bootstrap and its own grid, and rewriting layout
 * from a child theme against markup I cannot read is how you get a storefront
 * that collapses on one breakpoint nobody tested. Restyling paint is safe:
 * worst case a selector misses and you keep Porto's own look for that element.
 *
 * Everything is scoped under `.ttp-skin`, the body class set when the skin is
 * anything other than "off". That scoping also buys a specificity step over
 * Porto's base rules, so most of this wins without !important.
 *
 * !important appears only where Porto writes the same property from its theme
 * options panel as inline CSS, which no amount of selector specificity can
 * beat. Those spots are marked.
 *
 * Switch the whole file off in Appearance → Customise → TrustedTech → Skin.
 *
 * CONTENTS
 *   1. Typography
 *   2. Buttons
 *   3. Section headings
 *   4. Product cards
 *   5. Prices and badges
 *   6. Single product
 *   7. Header
 *   8. Footer
 *   9. Forms
 *  10. Cart, checkout, account
 *  11. Carousels, tabs, pagination
 *  12. Imported page-builder content
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   1. TYPOGRAPHY
   ========================================================================== */

.ttp-skin body,
body.ttp-skin {
	font-family: var(--ttp-font-body, system-ui, sans-serif);
	color: var(--ttp-body-text, #475569);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ttp-skin h1,
.ttp-skin h2,
.ttp-skin h3,
.ttp-skin h4,
.ttp-skin h5,
.ttp-skin h6,
.ttp-skin .h1,
.ttp-skin .h2,
.ttp-skin .h3,
.ttp-skin .h4,
.ttp-skin .product-name,
.ttp-skin .product_title,
.ttp-skin .widget-title,
.ttp-skin .section-title {
	font-family: var(--ttp-font-heading, system-ui, sans-serif);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.15;
	text-wrap: balance;
}

/*
 * Heading colour is deliberately split out and wrapped in :where(), which
 * contributes zero specificity — the rule lands at 0-1-0 instead of 0-1-1.
 *
 * Without that, `.ttp-skin h1` outranks a section's own `.tt-hero__title`
 * regardless of load order, and every light-on-dark heading renders in the
 * dark ink colour: invisible on the navy hero and band. A default colour
 * should be the easiest thing in the stylesheet to override, not one of the
 * hardest.
 */
.ttp-skin :where(h1, h2, h3, h4, h5, h6, .product_title, .widget-title, .section-title) {
	color: var(--ttp-ink, #0b1220);
}

.ttp-skin h1, .ttp-skin .h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); }
.ttp-skin h2, .ttp-skin .h2 { font-size: clamp(1.625rem, 2.4vw + 1rem, 2.25rem); }
.ttp-skin h3, .ttp-skin .h3 { font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem); line-height: 1.25; }
.ttp-skin h4, .ttp-skin .h4 { font-size: 1.15rem; line-height: 1.3; }

.ttp-skin p { line-height: 1.65; }

/*
 * Link colour is wrapped in :where() for the same reason heading colour is —
 * `.ttp-skin a` lands at 0-1-1 and silently outranks any 0-1-0 component class
 * applied to an anchor. Buttons are anchors, so every .tt-btn in the designed
 * sections was rendering with link blue instead of its own colour: white text
 * on the hero's white button, invisible.
 *
 * :where() contributes nothing, so this sits at 0-1-0 and a component class can
 * simply state its own colour and win.
 */
.ttp-skin :where(a) {
	color: var(--ttp-primary, #1d4ed8);
	transition: color 0.15s ease;
}

.ttp-skin :where(a):hover { color: var(--ttp-primary-hover, #1a45be); }

.ttp-skin ::selection {
	background: rgb(var(--ttp-primary-rgb, 29 78 216) / 0.18);
	color: var(--ttp-ink, #0b1220);
}

/* Keyboard focus. Porto suppresses outlines in places; an accessible store
   needs them back. */
.ttp-skin :focus-visible {
	outline: 2px solid var(--ttp-primary, #1d4ed8);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   2. BUTTONS
   ========================================================================== */

/*
 * Porto sets button colours from its options panel as inline CSS, so these
 * need !important on the paint properties. Geometry does not.
 */
.ttp-skin .btn,
.ttp-skin .button,
.ttp-skin button.button,
.ttp-skin input[type="submit"],
.ttp-skin .woocommerce a.button,
.ttp-skin .add_to_cart_button,
.ttp-skin .single_add_to_cart_button,
.ttp-skin .checkout-button,
.ttp-skin #place_order {
	font-family: var(--ttp-font-heading, inherit);
	font-weight: 650;
	letter-spacing: 0.01em;
	border-radius: 8px;
	border-width: 1px;
	text-transform: none;
	transition: background-color 0.15s ease, color 0.15s ease,
		box-shadow 0.24s ease, transform 0.15s ease;
}

.ttp-skin .btn-primary,
.ttp-skin .single_add_to_cart_button,
.ttp-skin .checkout-button,
.ttp-skin #place_order,
.ttp-skin .woocommerce a.button.alt,
.ttp-skin button.button.alt {
	background-color: var(--ttp-primary, #1d4ed8) !important;
	border-color: var(--ttp-primary, #1d4ed8) !important;
	color: #fff !important;
}

.ttp-skin .btn-primary:hover,
.ttp-skin .single_add_to_cart_button:hover,
.ttp-skin .checkout-button:hover,
.ttp-skin #place_order:hover,
.ttp-skin .woocommerce a.button.alt:hover,
.ttp-skin button.button.alt:hover {
	background-color: var(--ttp-primary-hover, #1a45be) !important;
	border-color: var(--ttp-primary-hover, #1a45be) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgb(var(--ttp-primary-rgb, 29 78 216) / 0.28);
	transform: translateY(-1px);
}

.ttp-skin .btn-primary:active,
.ttp-skin .single_add_to_cart_button:active { transform: translateY(0); box-shadow: none; }

/* Secondary / outline */
.ttp-skin .btn-outline-primary,
.ttp-skin .btn-default,
.ttp-skin .btn-secondary {
	background-color: transparent !important;
	border-color: var(--ttp-border-strong, #cbd5e1) !important;
	color: var(--ttp-ink, #0b1220) !important;
}

.ttp-skin .btn-outline-primary:hover,
.ttp-skin .btn-default:hover,
.ttp-skin .btn-secondary:hover {
	background-color: var(--ttp-primary-soft, #edf1fc) !important;
	border-color: var(--ttp-primary, #1d4ed8) !important;
	color: var(--ttp-primary, #1d4ed8) !important;
}

@media (prefers-reduced-motion: reduce) {
	.ttp-skin .btn,
	.ttp-skin .button,
	.ttp-skin .single_add_to_cart_button { transition: none; transform: none; }
}

/* ==========================================================================
   3. SECTION HEADINGS
   ========================================================================== */

/*
 * The TrustedTech pattern is a left-aligned block: a small uppercase eyebrow in
 * the brand colour above a large tight headline. Porto centres most section
 * titles and adds decorative rules.
 *
 * Realigning is one of the few layout changes worth making, because the
 * centred-title-with-underline look is the single biggest visual tell that a
 * site is running a stock theme demo.
 */
.ttp-skin .section-title,
.ttp-skin .porto-u-heading .porto-u-title,
.ttp-skin .elementor-widget-heading .elementor-heading-title {
	letter-spacing: -0.022em;
}

/* Strip Porto's decorative underline beneath section titles. */
.ttp-skin .section-title::after,
.ttp-skin .porto-u-heading::after {
	display: none;
}

/* An eyebrow you can add above any heading:
   <span class="ttp-eyebrow">Handpicked</span> */
.ttp-skin .ttp-eyebrow {
	display: inline-block;
	margin-bottom: 6px;
	font-family: var(--ttp-font-heading, inherit);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ttp-primary, #1d4ed8);
}

/* ==========================================================================
   4. PRODUCT CARDS
   ========================================================================== */

/*
 * Porto's default card sits on a grey plate with rounded corners. The
 * TrustedTech card is a white surface that lifts on hover, with the image on a
 * clean white plate so product cut-outs read properly.
 */
.ttp-skin ul.products li.product,
.ttp-skin .products .product-inner {
	background: #fff;
	border-radius: 14px;
}

.ttp-skin .product-image,
.ttp-skin .product-images,
.ttp-skin ul.products li.product a img {
	background: #fff;
	border-radius: 12px 12px 0 0;
}

/* Product title: two lines maximum so every card in a row is the same height,
   which is what makes a grid look deliberate rather than ragged. */
.ttp-skin .product-name,
.ttp-skin .woocommerce-loop-product__title,
.ttp-skin .product-loop-title {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--ttp-ink, #0b1220);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.ttp-skin .product-name:hover,
.ttp-skin .woocommerce-loop-product__title:hover { color: var(--ttp-primary, #1d4ed8); }

/* Category eyebrow above the title, where Porto renders one. */
.ttp-skin .product-loop-category,
.ttp-skin .category-list {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ttp-muted, #94a3b8);
}

/* Add-to-cart on cards: full-width tinted button, filling on hover. */
.ttp-skin ul.products li.product .add_to_cart_button,
.ttp-skin ul.products li.product .product_type_variable,
.ttp-skin ul.products li.product .product_type_simple {
	background-color: var(--ttp-primary-soft, #edf1fc) !important;
	border-color: transparent !important;
	color: var(--ttp-primary, #1d4ed8) !important;
	font-size: 0.78rem;
	font-weight: 700;
}

.ttp-skin ul.products li.product .add_to_cart_button:hover,
.ttp-skin ul.products li.product .product_type_variable:hover,
.ttp-skin ul.products li.product .product_type_simple:hover {
	background-color: var(--ttp-primary, #1d4ed8) !important;
	color: #fff !important;
}

/* Star ratings in the brand's deal colour — amber reads as a rating, blue
   does not. */
.ttp-skin .star-rating span::before,
.ttp-skin .star-rating::before,
.ttp-skin .comment-form-rating .stars a {
	color: var(--ttp-deal, #f59e0b);
}

/* ==========================================================================
   5. PRICES AND BADGES
   ========================================================================== */

.ttp-skin .price,
.ttp-skin .product .price {
	font-family: var(--ttp-font-heading, inherit);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--ttp-ink, #0b1220);
	font-variant-numeric: tabular-nums;
}

.ttp-skin .price del,
.ttp-skin .price del .amount {
	color: var(--ttp-muted, #94a3b8);
	font-weight: 500;
	opacity: 0.9;
}

.ttp-skin .price ins,
.ttp-skin .price ins .amount {
	color: var(--ttp-danger, #dc2626);
	text-decoration: none;
	background: none;
}

/* Discount badge. Porto positions .onsale itself — only the paint changes. */
.ttp-skin .onsale,
.ttp-skin .product-label,
.ttp-skin .product-label-sale {
	background-color: var(--ttp-deal, #f59e0b) !important;
	color: #1a1206 !important;
	border-radius: 5px;
	font-family: var(--ttp-font-heading, inherit);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* "New" / "Hot" labels take the accent rather than competing with the deal
   colour, so a discount always reads as the more urgent of the two. */
.ttp-skin .product-label-new,
.ttp-skin .product-label-hot {
	background-color: var(--ttp-accent-soft, #e6f8fb) !important;
	color: #0e7490 !important;
	border-radius: 5px;
	font-weight: 800;
}

/* ==========================================================================
   6. SINGLE PRODUCT
   ========================================================================== */

.ttp-skin .product_title {
	font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem);
	line-height: 1.15;
}

.ttp-skin .summary .price,
.ttp-skin .entry-summary .price {
	font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem);
	line-height: 1.1;
}

.ttp-skin .summary .price del { font-size: 0.62em; }

/* Quantity input */
.ttp-skin .quantity input.qty,
.ttp-skin .quantity .minus,
.ttp-skin .quantity .plus {
	border-color: var(--ttp-border-strong, #cbd5e1);
	color: var(--ttp-ink, #0b1220);
	font-weight: 700;
}

/* Product tabs — flat underline instead of Porto's boxed tabs. */
.ttp-skin .woocommerce-tabs .nav-tabs,
.ttp-skin .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--ttp-border, #e2e8f0);
}

.ttp-skin .woocommerce-tabs .nav-tabs .nav-link,
.ttp-skin .woocommerce-tabs ul.tabs li a {
	font-family: var(--ttp-font-heading, inherit);
	font-weight: 650;
	color: var(--ttp-muted, #64748b);
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
}

.ttp-skin .woocommerce-tabs .nav-tabs .nav-link:hover,
.ttp-skin .woocommerce-tabs ul.tabs li a:hover { color: var(--ttp-primary, #1d4ed8); }

.ttp-skin .woocommerce-tabs .nav-tabs .active .nav-link,
.ttp-skin .woocommerce-tabs ul.tabs li.active a {
	color: var(--ttp-primary, #1d4ed8);
	border-bottom-color: var(--ttp-primary, #1d4ed8);
	background: none;
}

/* Attribute / specification table */
.ttp-skin .shop_attributes {
	border: 1px solid var(--ttp-border, #e2e8f0);
	border-radius: 10px;
	overflow: hidden;
}

.ttp-skin .shop_attributes th {
	background: var(--ttp-canvas, #f6f8fb);
	color: var(--ttp-ink, #0b1220);
	font-weight: 650;
}

/* ==========================================================================
   7. HEADER
   ========================================================================== */

.ttp-skin #header .header-top,
.ttp-skin #header .header-bottom {
	background-color: var(--ttp-dark, #101c3d) !important;
	color: rgb(255 255 255 / 0.82);
	border: 0;
}

.ttp-skin #header .header-top a,
.ttp-skin #header .header-bottom a { color: rgb(255 255 255 / 0.82); }
.ttp-skin #header .header-top a:hover,
.ttp-skin #header .header-bottom a:hover { color: #fff; }

.ttp-skin #header .header-main {
	background-color: #fff;
	border-bottom: 1px solid var(--ttp-border, #e2e8f0);
}

/* Main menu */
.ttp-skin #header .main-menu > li > a,
.ttp-skin .menu-item > a {
	font-family: var(--ttp-font-heading, inherit);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.ttp-skin #header .main-menu > li:hover > a,
.ttp-skin #header .main-menu > li.active > a { color: var(--ttp-primary, #1d4ed8); }

/* Search field — pill, matching the TrustedTech header. */
.ttp-skin .searchform,
.ttp-skin .searchform input.search-field,
.ttp-skin .header-search-wrapper .searchform {
	border-radius: 999px;
}

.ttp-skin .searchform input.search-field {
	border-color: var(--ttp-border, #e2e8f0);
	background: var(--ttp-canvas, #f6f8fb);
}

.ttp-skin .searchform input.search-field:focus {
	border-color: var(--ttp-primary, #1d4ed8);
	background: #fff;
	box-shadow: 0 0 0 4px rgb(var(--ttp-primary-rgb, 29 78 216) / 0.12);
}

.ttp-skin .searchform .btn,
.ttp-skin .searchform button {
	border-radius: 999px;
	background-color: var(--ttp-primary, #1d4ed8) !important;
	color: #fff !important;
}

/* Cart count bubble in the deal colour, so it reads as a live notification. */
.ttp-skin .cart-head .cart-items,
.ttp-skin .cart-count,
.ttp-skin .wishlist-count {
	background-color: var(--ttp-deal, #f59e0b) !important;
	color: #1a1206 !important;
	font-weight: 800;
}

/* --------------------------------------------------------------------------
 * 7b. MOBILE HEADER
 *
 * Porto's mobile header puts a full-width search bar above a row holding the
 * logo, social icons and the menu toggle. The ORDER of those elements is a
 * Porto theme-option, not CSS, so it isn't changed here — reordering a flex
 * container whose markup I can't read is exactly the kind of layout surgery
 * that breaks at one breakpoint nobody tests.
 *
 * What is fixed here is everything that made it look unfinished: a logo
 * shrunk by Porto's default height cap, a hard blue square for the toggle, a
 * square search button, and no breathing room between any of it.
 *
 * Selectors are hedged — several plausible Porto class names per rule — because
 * the mobile header markup varies by Porto skin. Extra selectors that match
 * nothing cost nothing.
 * ----------------------------------------------------------------------- */

/* Logo. Porto caps logo height from its options panel as inline CSS, so the
   size has to be forced. */
.ttp-skin #header .logo img,
.ttp-skin .header-main .logo img,
.ttp-skin .header-wrapper .logo img,
.ttp-skin .logo img {
	max-height: 50px !important;
	height: auto !important;
	width: auto !important;
	max-width: 190px;
	object-fit: contain;
}

@media (max-width: 991px) {
	.ttp-skin #header .logo img,
	.ttp-skin .header-main .logo img,
	.ttp-skin .logo img {
		max-height: 42px !important;
		max-width: 150px;
	}

	/* Porto's mobile logo column is often width-constrained. */
	.ttp-skin #header .logo,
	.ttp-skin .header-main .logo {
		max-width: none;
		margin-inline-end: auto;
	}
}

/* Menu toggle. A saturated square reads as an unstyled control; make it a
   quiet icon button that only picks up colour on interaction.

   NO `display` here, and certainly not `display: inline-flex !important`,
   which is what this rule used to carry. Porto hides the burger on desktop by
   setting display: none on it; an !important display overrode that and forced
   the button to show at every width. The burger appearing on a 1080px desktop
   looked like Porto's mobile breakpoint being set high — it was this rule.

   Porto owns whether the button is visible. This owns only how it looks. The
   gated rule below restores the flex centring where the button is actually in
   use, without ever forcing it into view. */
.ttp-skin .mobile-toggle,
.ttp-skin .mobile-menu-toggle,
.ttp-skin #header .mobile-toggle,
.ttp-skin .menu-toggle,
.ttp-skin .porto-mobile-menu-toggle {
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent !important;
	color: var(--ttp-ink, #0b1220) !important;
	border: 0 !important;
	border-radius: 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Flex centring only where Porto is actually showing the button.
 *
 * .ttp-mobile-header is set by inc/header-toggle.php from the button's own
 * computed display. That is only safe because the rule above no longer forces
 * a display — if it did, the script would read the value this stylesheet had
 * just imposed and the class would always be on, which is exactly the loop
 * that hid the bug.
 */
.ttp-skin.ttp-mobile-header .mobile-toggle,
.ttp-skin.ttp-mobile-header .mobile-menu-toggle,
.ttp-skin.ttp-mobile-header #header .mobile-toggle,
.ttp-skin.ttp-mobile-header .menu-toggle {
	display: inline-flex;
}

.ttp-skin .mobile-toggle:hover,
.ttp-skin .mobile-toggle:focus,
.ttp-skin .mobile-menu-toggle:hover,
.ttp-skin .menu-toggle:hover {
	background: var(--ttp-primary-soft, #edf1fc) !important;
	color: var(--ttp-primary, #1d4ed8) !important;
}

.ttp-skin .mobile-toggle i,
.ttp-skin .mobile-menu-toggle i,
.ttp-skin .menu-toggle i { font-size: 20px; line-height: 1; }

/* Search. Porto's default is a square field with a hard-edged submit block;
   the TrustedTech header uses a single soft pill. */
.ttp-skin .searchform,
.ttp-skin .header-search-wrapper .searchform,
.ttp-skin .searchform-fields {
	position: relative;
	border-radius: 999px;
	overflow: hidden;
	border: 0;
	background: transparent;
}

.ttp-skin .searchform input.search-field,
.ttp-skin .searchform input[type="text"],
.ttp-skin .searchform input[type="search"] {
	height: 44px;
	padding: 0 52px 0 18px;
	border-radius: 999px !important;
	border: 1px solid var(--ttp-border, #e2e8f0) !important;
	background: var(--ttp-canvas, #f6f8fb) !important;
	color: var(--ttp-ink, #0b1220);
	font-size: 15px;
	box-shadow: none;
}

.ttp-skin .searchform input.search-field:focus {
	border-color: var(--ttp-primary, #1d4ed8) !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgb(var(--ttp-primary-rgb, 29 78 216) / 0.12);
}

/* The submit control becomes a circle tucked inside the pill. */
.ttp-skin .searchform button,
.ttp-skin .searchform .btn,
.ttp-skin .searchform input[type="submit"],
.ttp-skin .searchform .search-toggle {
	position: absolute;
	top: 50%;
	inset-inline-end: 4px;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	min-width: 0;
	padding: 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--ttp-primary, #1d4ed8) !important;
	color: #fff !important;
	font-size: 15px;
	line-height: 1;
}

.ttp-skin .searchform button:hover,
.ttp-skin .searchform .btn:hover {
	background: var(--ttp-primary-hover, #1a45be) !important;
}

/* The search strip itself: white plate, real padding, hairline separator. */
@media (max-width: 991px) {
	.ttp-skin #header .header-top,
	.ttp-skin #header .header-bottom {
		background-color: #fff !important;
		border-bottom: 1px solid var(--ttp-border, #e2e8f0);
		padding-block: 10px;
	}

	.ttp-skin #header .header-top a,
	.ttp-skin #header .header-bottom a { color: var(--ttp-ink, #0b1220); }

	.ttp-skin #header .header-main {
		padding-block: 10px;
		border-bottom: 1px solid var(--ttp-border, #e2e8f0);
	}

	/* Social icons in the header are decoration competing with navigation.
	   Mute them so the logo and the menu toggle lead. */
	.ttp-skin #header .share-links a {
		width: 32px;
		height: 32px;
		background: transparent !important;
		color: var(--ttp-muted, #94a3b8) !important;
		border: 0 !important;
	}

	.ttp-skin #header .share-links a:hover { color: var(--ttp-primary, #1d4ed8) !important; }

	/* Cart / account icons in the mobile header. */
	.ttp-skin #header .cart-head,
	.ttp-skin #header .my-account,
	.ttp-skin #header .wishlist { color: var(--ttp-ink, #0b1220); }
}

/* Page title bar under the header. */
.ttp-skin .page-top,
.ttp-skin .page-header {
	background-color: var(--ttp-canvas, #f6f8fb) !important;
	border-bottom: 1px solid var(--ttp-border, #e2e8f0);
	border-top: 0;
}

.ttp-skin .page-top .page-title,
.ttp-skin .page-header h1 {
	color: var(--ttp-ink, #0b1220);
	font-weight: 700;
}

.ttp-skin .breadcrumb,
.ttp-skin .breadcrumbs { font-size: 0.78rem; color: var(--ttp-muted, #94a3b8); }
.ttp-skin .breadcrumb a,
.ttp-skin .breadcrumbs a { color: var(--ttp-muted, #64748b); }
.ttp-skin .breadcrumb a:hover { color: var(--ttp-primary, #1d4ed8); }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

/*
 * Deep navy footer, matching the TrustedTech design. Porto's default is a
 * near-black grey which reads as unbranded.
 */
.ttp-skin #footer,
.ttp-skin .footer,
.ttp-skin #footer .footer-main,
.ttp-skin #footer .footer-middle {
	background-color: var(--ttp-dark, #101c3d) !important;
	color: rgb(255 255 255 / 0.68);
	border-top: 0;
}

.ttp-skin #footer a { color: rgb(255 255 255 / 0.68); }
.ttp-skin #footer a:hover { color: #fff; }

.ttp-skin #footer .widget-title,
.ttp-skin #footer h1,
.ttp-skin #footer h2,
.ttp-skin #footer h3,
.ttp-skin #footer h4,
.ttp-skin #footer h5 {
	color: #fff !important;
	font-family: var(--ttp-font-heading, inherit);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ttp-skin #footer .footer-bottom {
	background-color: var(--ttp-dark, #101c3d) !important;
	border-top: 1px solid rgb(255 255 255 / 0.1);
	color: rgb(255 255 255 / 0.55);
	font-size: 0.78rem;
}

/* Social icons in the footer */
.ttp-skin #footer .share-links a {
	background: rgb(255 255 255 / 0.08) !important;
	color: #fff !important;
	border-radius: 999px;
	border: 0;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.ttp-skin #footer .share-links a:hover {
	background: var(--ttp-primary, #1d4ed8) !important;
	transform: translateY(-2px);
}

/* Payment badges sit on the navy footer, so they need a light plate. */
.ttp-skin #footer .ttp-payments__item,
.ttp-skin .footer .ttp-payments__item {
	background: rgb(255 255 255 / 0.92);
	border-color: transparent;
	color: var(--ttp-dark, #101c3d);
}

.ttp-skin body > .ttp-payments-bar {
	background: var(--ttp-dark, #101c3d);
	border-top: 1px solid rgb(255 255 255 / 0.1);
}

.ttp-skin body > .ttp-payments-bar .ttp-payments__item {
	background: rgb(255 255 255 / 0.92);
	border-color: transparent;
	color: var(--ttp-dark, #101c3d);
}

/* ==========================================================================
   9. FORMS
   ========================================================================== */

.ttp-skin input[type="text"],
.ttp-skin input[type="email"],
.ttp-skin input[type="tel"],
.ttp-skin input[type="url"],
.ttp-skin input[type="password"],
.ttp-skin input[type="number"],
.ttp-skin input[type="search"],
.ttp-skin select,
.ttp-skin textarea,
.ttp-skin .form-control {
	border-radius: 8px;
	border-color: var(--ttp-border-strong, #cbd5e1);
	color: var(--ttp-ink, #0b1220);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ttp-skin input:focus,
.ttp-skin select:focus,
.ttp-skin textarea:focus,
.ttp-skin .form-control:focus {
	border-color: var(--ttp-primary, #1d4ed8);
	box-shadow: 0 0 0 3px rgb(var(--ttp-primary-rgb, 29 78 216) / 0.16);
	outline: none;
}

.ttp-skin ::placeholder { color: var(--ttp-muted, #94a3b8); opacity: 1; }

/* ==========================================================================
   10. CART, CHECKOUT, ACCOUNT
   ========================================================================== */

.ttp-skin .cart_totals,
.ttp-skin .woocommerce-checkout-review-order,
.ttp-skin .woocommerce-MyAccount-content,
.ttp-skin .woocommerce-billing-fields,
.ttp-skin .woocommerce-shipping-fields {
	background: #fff;
	border: 1px solid var(--ttp-border, #e2e8f0);
	border-radius: 14px;
	padding: 22px;
}

.ttp-skin .shop_table th {
	background: var(--ttp-canvas, #f6f8fb);
	color: var(--ttp-muted, #64748b);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ttp-skin .shop_table td { border-color: var(--ttp-border, #e2e8f0); }

.ttp-skin .order-total th,
.ttp-skin .order-total td {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--ttp-ink, #0b1220);
}

/* WooCommerce notices */
.ttp-skin .woocommerce-message,
.ttp-skin .woocommerce-info,
.ttp-skin .woocommerce-error {
	border-radius: 10px;
	border-inline-start: 3px solid;
	font-size: 0.9rem;
}

.ttp-skin .woocommerce-message {
	background: var(--ttp-success-soft, #e6f6f1) !important;
	border-color: var(--ttp-success, #059669) !important;
	color: #065f46 !important;
}

.ttp-skin .woocommerce-info {
	background: var(--ttp-primary-soft, #edf1fc) !important;
	border-color: var(--ttp-primary, #1d4ed8) !important;
	color: var(--ttp-dark, #101c3d) !important;
}

.ttp-skin .woocommerce-error {
	background: var(--ttp-danger-soft, #fdecec) !important;
	border-color: var(--ttp-danger, #dc2626) !important;
	color: #991b1b !important;
}

/* Account navigation */
.ttp-skin .woocommerce-MyAccount-navigation li.is-active a,
.ttp-skin .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	background: var(--ttp-primary, #1d4ed8);
	color: #fff;
	border-radius: 8px;
}

/* ==========================================================================
   11. CAROUSELS, TABS, PAGINATION
   ========================================================================== */

/*
 * Carousel controls.
 *
 * Porto 7.7 uses Swiper — the Owl Carousel selectors that were here first
 * matched nothing at all, confirmed by the diagnostics page. The live Swiper
 * rules are in porto-overrides.css, which loads last.
 *
 * Owl selectors are kept only as a fallback for older Porto builds, where they
 * do still apply.
 */
.ttp-skin .owl-nav button,
.ttp-skin .owl-prev,
.ttp-skin .owl-next {
	background: #fff !important;
	color: var(--ttp-ink, #0b1220) !important;
	border: 1px solid var(--ttp-border, #e2e8f0) !important;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgb(var(--ttp-ink-rgb, 11 18 32) / 0.08);
}

.ttp-skin .owl-nav button:hover,
.ttp-skin .owl-prev:hover,
.ttp-skin .owl-next:hover {
	background: var(--ttp-primary, #1d4ed8) !important;
	color: #fff !important;
	border-color: var(--ttp-primary, #1d4ed8) !important;
}

.ttp-skin .owl-dot span,
.ttp-skin .owl-dots .owl-dot span { background: var(--ttp-border-strong, #cbd5e1) !important; }
.ttp-skin .owl-dot.active span { background: var(--ttp-primary, #1d4ed8) !important; }

/* Filter pills, as used by Porto's tabbed product blocks. */
.ttp-skin .nav-pills .nav-link,
.ttp-skin .porto-products-filter a {
	border-radius: 999px;
	font-family: var(--ttp-font-heading, inherit);
	font-weight: 650;
	font-size: 0.8rem;
	color: var(--ttp-muted, #64748b);
	background: transparent;
	border: 1px solid var(--ttp-border, #e2e8f0);
}

.ttp-skin .nav-pills .nav-link.active,
.ttp-skin .porto-products-filter a.active {
	background: var(--ttp-primary, #1d4ed8) !important;
	border-color: var(--ttp-primary, #1d4ed8) !important;
	color: #fff !important;
}

/* Pagination */
.ttp-skin .page-numbers,
.ttp-skin .pagination .page-link {
	border-radius: 8px;
	border-color: var(--ttp-border, #e2e8f0);
	color: var(--ttp-ink, #0b1220);
	font-weight: 650;
}

.ttp-skin .page-numbers.current,
.ttp-skin .pagination .active .page-link {
	background: var(--ttp-primary, #1d4ed8) !important;
	border-color: var(--ttp-primary, #1d4ed8) !important;
	color: #fff !important;
}

/* Sidebar widgets */
.ttp-skin .sidebar .widget,
.ttp-skin .sidebar-content .widget {
	background: #fff;
	border: 1px solid var(--ttp-border, #e2e8f0);
	border-radius: 12px;
	padding: 18px;
}

.ttp-skin .sidebar .widget-title {
	font-size: 0.95rem;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--ttp-border, #e2e8f0);
}

/* ==========================================================================
   12. IMPORTED PAGE-BUILDER CONTENT
   ========================================================================== */

/*
 * Template kits routinely set a desktop font size with no mobile override, so a
 * headline overshoots the viewport and forces the whole page to scroll
 * sideways. No font-size override here — Elementor writes per-element rules
 * this file cannot reliably beat, and guessing a cap would override sizing that
 * was chosen deliberately. Breaking long words is enough to stop the overflow.
 */
.ttp-skin .elementor-heading-title,
.ttp-skin .elementor-widget-text-editor,
.ttp-skin .porto-block h1,
.ttp-skin .porto-block h2 {
	overflow-wrap: break-word;
	/* Kits sometimes ship nowrap on a display heading, which is never right on
	   a phone — it's the usual reason a banner headline runs off both edges.
	   Allowing it to wrap is safe; it can't shrink text that was sized
	   deliberately. */
	white-space: normal;
}

/*
 * NO overflow clipping on the body — deliberately. Second copy of this note,
 * because the rule was removed from sections.css and this one survived, which
 * meant the bug did too.
 *
 * `.ttp-skin` is a BODY class, so `.ttp-skin { overflow-x: hidden }` clips the
 * body. That reads as harmless insurance against sideways scroll. It is not:
 *
 *   - Setting one axis to a non-`visible` value forces the OTHER axis to
 *     compute to `auto`. So `overflow-x: hidden` silently makes the body a
 *     scroll container in both directions.
 *   - Porto's off-canvas mobile menu lives in the body and is positioned
 *     against it. Once the body clips, the drawer is clipped to it too — so
 *     with the page scrolled down, the top of the menu renders above the
 *     visible box and is cut off. That is exactly the reported symptom.
 *
 * If horizontal overflow ever does appear, find and fix the element causing
 * it. Clipping the body hides the cause and breaks the menu.
 */

/* Countdown blocks */
.ttp-skin .porto-countdown .countdown-amount,
.ttp-skin .countdown-amount {
	font-family: var(--ttp-font-heading, inherit);
	font-weight: 800;
	color: var(--ttp-ink, #0b1220);
	font-variant-numeric: tabular-nums;
}

.ttp-skin .porto-countdown .countdown-period,
.ttp-skin .countdown-period {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ttp-muted, #94a3b8);
}

/* ==========================================================================
   BRAND-ONLY MODE
   With skin_level = "brand", keep colour and type but hand layout-ish
   decisions back to Porto.
   ========================================================================== */

.ttp-skin-brand ul.products li.product,
.ttp-skin-brand .products .product-inner {
	background: initial;
	border-radius: initial;
}

.ttp-skin-brand .product-name,
.ttp-skin-brand .woocommerce-loop-product__title {
	-webkit-line-clamp: initial;
	line-clamp: initial;
	overflow: visible;
	display: block;
}

.ttp-skin-brand .cart_totals,
.ttp-skin-brand .woocommerce-checkout-review-order,
.ttp-skin-brand .sidebar .widget {
	background: initial;
	border: 0;
	border-radius: initial;
	padding: initial;
}