/**
 * EcommPaaS Porto Theme — Core Stylesheet
 *
 * Porto-quality responsive Magento 2 theme.
 * CSS custom properties for dynamic theming via admin panel.
 *
 * Class prefix: pt- (porto theme)
 * Breakpoints: 480 / 768 / 992 / 1200
 */

/* ===================================================================
   PORTO-FONT-01 — Icon and decorative font imports
   Simple-Line-Icons and Font Awesome are loaded via <link> tags in
   Magento_Theme/layout/default_head_blocks.xml for parallel loading
   and CSP compliance. Only Shadows Into Light (decorative, low-priority)
   remains as an @import here.
   =================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap");

/* ===================================================================
   1. CSS Variables & Design Tokens
   =================================================================== */

:root {
    /* Primary palette */
    --pt-primary: #08c;
    --pt-primary-dark: #0073aa;
    --pt-primary-light: #39f;
    --pt-secondary: #ff5b5b;
    --pt-secondary-dark: #e04848;

    /* Neutrals */
    --pt-text: #777777;
    --pt-text-dark: #222529;
    --pt-text-light: #999999;
    --pt-heading: #222529;
    --pt-bg: #ffffff;
    --pt-bg-light: #f4f4f4;
    --pt-bg-dark: #222529;
    --pt-border: #e7e7e7;
    --pt-border-light: #eeeeee;

    /* Status colors */
    /* PORTO-COLOR-03: was #a8c513 (Luma lime) — Porto Demo 1 uses primary blue for success/CTA. */
    --pt-success: #0088cc;
    --pt-danger: #ff5b5b;
    --pt-warning: #ffc107;
    --pt-info: #08c;
    --pt-hot: #ff6600;

    /* Shadows */
    --pt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --pt-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    --pt-shadow-lg: 0 5px 20px rgba(0, 0, 0, 0.12);

    /* Borders & Radius */
    --pt-radius: 0px;
    --pt-radius-sm: 2px;
    --pt-transition: 0.3s ease;

    /* Typography */
    --pt-font: Poppins;
    --pt-font-heading: Poppins;
    --pt-font-size: 14px;
    --pt-line-height: 1.8;

    /* Layout */
    --pt-container: 1200px;
    --pt-container-wide: 1600px;
    --pt-gutter: 20px;
    --pt-sidebar-width: 280px;

    /* Header heights */
    --pt-topbar-height: 36px;
    --pt-header-height: 80px;
    --pt-nav-height: 45px;
}

/* ===================================================================
   2. Reset Overrides (Magento/blank defaults)
   =================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--pt-font);
    font-size: var(--pt-font-size);
    color: var(--pt-text);
    line-height: var(--pt-line-height);
    background: var(--pt-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

a {
    color: var(--pt-primary);
    text-decoration: none;
    transition: color var(--pt-transition);
}

a:hover,
a:focus {
    color: var(--pt-primary-dark);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Restore list styles for CMS/WYSIWYG content areas */
.pt-content ul { list-style: disc; padding-left: 20px; margin-bottom: 15px; }
.pt-content ol { list-style: decimal; padding-left: 20px; margin-bottom: 15px; }

p {
    margin-top: 0;
    margin-bottom: 15px;
}

button,
input,
select,
textarea {
    font-family: var(--pt-font);
    font-size: var(--pt-font-size);
}

/* ===================================================================
   3. Typography Scale
   =================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pt-font-heading);
    color: var(--pt-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 15px;
}

h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

h3 {
    font-size: 20px;
    font-weight: 600;
}

h4 {
    font-size: 18px;
    font-weight: 600;
}

h5 {
    font-size: 16px;
    font-weight: 600;
}

h6 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-text-lg {
    font-size: 18px;
}

.pt-text-sm {
    font-size: 12px;
}

.pt-text-xs {
    font-size: 11px;
}

.pt-text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-text-bold {
    font-weight: 700;
}

.pt-text-semibold {
    font-weight: 600;
}

.pt-text-light {
    font-weight: 300;
}

/* ===================================================================
   4. Grid System — 12 columns
   =================================================================== */

.pt-container {
    width: 100%;
    max-width: var(--pt-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pt-gutter);
    padding-right: var(--pt-gutter);
}

.pt-container--wide {
    max-width: var(--pt-container-wide);
}

.pt-container--fluid {
    max-width: none;
}

.pt-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--pt-gutter) / -2);
    margin-right: calc(var(--pt-gutter) / -2);
}

.pt-row--no-gutter {
    margin-left: 0;
    margin-right: 0;
}

.pt-row--no-gutter > [class*="pt-col"] {
    padding-left: 0;
    padding-right: 0;
}

.pt-row--center {
    justify-content: center;
}

.pt-row--between {
    justify-content: space-between;
}

.pt-row--middle {
    align-items: center;
}

[class*="pt-col"] {
    padding-left: calc(var(--pt-gutter) / 2);
    padding-right: calc(var(--pt-gutter) / 2);
    width: 100%;
    flex-shrink: 0;
    max-width: 100%;
}

.pt-col-1 { width: 8.333333%; }
.pt-col-2 { width: 16.666667%; }
.pt-col-3 { width: 25%; }
.pt-col-4 { width: 33.333333%; }
.pt-col-5 { width: 41.666667%; }
.pt-col-6 { width: 50%; }
.pt-col-7 { width: 58.333333%; }
.pt-col-8 { width: 66.666667%; }
.pt-col-9 { width: 75%; }
.pt-col-10 { width: 83.333333%; }
.pt-col-11 { width: 91.666667%; }
.pt-col-12 { width: 100%; }

/* SM breakpoint (>= 480px) */
@media (min-width: 480px) {
    .pt-col-sm-1 { width: 8.333333%; }
    .pt-col-sm-2 { width: 16.666667%; }
    .pt-col-sm-3 { width: 25%; }
    .pt-col-sm-4 { width: 33.333333%; }
    .pt-col-sm-5 { width: 41.666667%; }
    .pt-col-sm-6 { width: 50%; }
    .pt-col-sm-7 { width: 58.333333%; }
    .pt-col-sm-8 { width: 66.666667%; }
    .pt-col-sm-9 { width: 75%; }
    .pt-col-sm-10 { width: 83.333333%; }
    .pt-col-sm-11 { width: 91.666667%; }
    .pt-col-sm-12 { width: 100%; }
}

/* MD breakpoint (>= 768px) */
@media (min-width: 768px) {
    .pt-col-md-1 { width: 8.333333%; }
    .pt-col-md-2 { width: 16.666667%; }
    .pt-col-md-3 { width: 25%; }
    .pt-col-md-4 { width: 33.333333%; }
    .pt-col-md-5 { width: 41.666667%; }
    .pt-col-md-6 { width: 50%; }
    .pt-col-md-7 { width: 58.333333%; }
    .pt-col-md-8 { width: 66.666667%; }
    .pt-col-md-9 { width: 75%; }
    .pt-col-md-10 { width: 83.333333%; }
    .pt-col-md-11 { width: 91.666667%; }
    .pt-col-md-12 { width: 100%; }
}

/* LG breakpoint (>= 992px) */
@media (min-width: 992px) {
    .pt-col-lg-1 { width: 8.333333%; }
    .pt-col-lg-2 { width: 16.666667%; }
    .pt-col-lg-3 { width: 25%; }
    .pt-col-lg-4 { width: 33.333333%; }
    .pt-col-lg-5 { width: 41.666667%; }
    .pt-col-lg-6 { width: 50%; }
    .pt-col-lg-7 { width: 58.333333%; }
    .pt-col-lg-8 { width: 66.666667%; }
    .pt-col-lg-9 { width: 75%; }
    .pt-col-lg-10 { width: 83.333333%; }
    .pt-col-lg-11 { width: 91.666667%; }
    .pt-col-lg-12 { width: 100%; }
}

/* XL breakpoint (>= 1200px) */
@media (min-width: 1200px) {
    .pt-col-xl-1 { width: 8.333333%; }
    .pt-col-xl-2 { width: 16.666667%; }
    .pt-col-xl-3 { width: 25%; }
    .pt-col-xl-4 { width: 33.333333%; }
    .pt-col-xl-5 { width: 41.666667%; }
    .pt-col-xl-6 { width: 50%; }
    .pt-col-xl-7 { width: 58.333333%; }
    .pt-col-xl-8 { width: 66.666667%; }
    .pt-col-xl-9 { width: 75%; }
    .pt-col-xl-10 { width: 83.333333%; }
    .pt-col-xl-11 { width: 91.666667%; }
    .pt-col-xl-12 { width: 100%; }
}

/* ===================================================================
   5. Buttons
   =================================================================== */

.pt-btn {
    display: inline-block;
    font-family: var(--pt-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--pt-radius);
    padding: 12px 24px;
    transition: color var(--pt-transition),
                background-color var(--pt-transition),
                border-color var(--pt-transition),
                box-shadow var(--pt-transition),
                opacity var(--pt-transition);
    white-space: nowrap;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.pt-btn:hover {
    text-decoration: none;
}

.pt-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.25);
}

/* Primary */
.pt-btn--primary {
    background-color: var(--pt-primary);
    color: #ffffff;
    border-color: var(--pt-primary);
}

.pt-btn--primary:hover {
    background-color: var(--pt-primary-dark);
    border-color: var(--pt-primary-dark);
    color: #ffffff;
}

/* Secondary */
.pt-btn--secondary {
    background-color: var(--pt-secondary);
    color: #ffffff;
    border-color: var(--pt-secondary);
}

.pt-btn--secondary:hover {
    background-color: var(--pt-secondary-dark);
    border-color: var(--pt-secondary-dark);
    color: #ffffff;
}

/* Outline */
.pt-btn--outline {
    background-color: transparent;
    color: var(--pt-primary);
    border-color: var(--pt-primary);
}

.pt-btn--outline:hover {
    background-color: var(--pt-primary);
    color: #ffffff;
}

/* Dark */
.pt-btn--dark {
    background-color: var(--pt-bg-dark);
    color: #ffffff;
    border-color: var(--pt-bg-dark);
}

.pt-btn--dark:hover {
    background-color: var(--pt-heading);
    border-color: var(--pt-heading);
    color: #ffffff;
}

/* White */
.pt-btn--white {
    background-color: #ffffff;
    color: var(--pt-text-dark);
    border-color: #ffffff;
}

.pt-btn--white:hover {
    background-color: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #ffffff;
}

/* Sizes */
.pt-btn--sm {
    font-size: 12px;
    padding: 8px 16px;
}

.pt-btn--lg {
    font-size: 16px;
    padding: 16px 32px;
}

.pt-btn--xl {
    font-size: 18px;
    padding: 18px 40px;
}

/* Full width */
.pt-btn--block {
    display: block;
    width: 100%;
}

/* Disabled state */
.pt-btn:disabled,
.pt-btn--disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon inside button */
.pt-btn__icon {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.pt-btn__icon--right {
    margin-right: 0;
    margin-left: 8px;
}

/* ===================================================================
   6. Utility Classes
   =================================================================== */

/* Text alignment */
.pt-text-center { text-align: center; }
.pt-text-left { text-align: left; }
.pt-text-right { text-align: right; }

/* Text colors */
.pt-text-primary { color: var(--pt-primary); }
.pt-text-secondary { color: var(--pt-secondary); }
.pt-text-dark { color: var(--pt-text-dark); }
.pt-text-muted { color: var(--pt-text-light); }
.pt-text-white { color: #ffffff; }
.pt-text-success { color: var(--pt-success); }
.pt-text-danger { color: var(--pt-danger); }

/* Background colors */
.pt-bg-light { background-color: var(--pt-bg-light); }
.pt-bg-dark { background-color: var(--pt-bg-dark); }
.pt-bg-dark h1, .pt-bg-dark h2, .pt-bg-dark h3,
.pt-bg-dark h4, .pt-bg-dark h5, .pt-bg-dark h6 {
    color: #ffffff;
}
.pt-bg-dark a { color: var(--pt-primary-light); }
.pt-bg-dark a:hover { color: #ffffff; }
.pt-bg-primary { background-color: var(--pt-primary); color: #ffffff; }
.pt-bg-white { background-color: #ffffff; }

/* Margin bottom scale */
.pt-mb-0 { margin-bottom: 0; }
.pt-mb-1 { margin-bottom: 10px; }
.pt-mb-2 { margin-bottom: 20px; }
.pt-mb-3 { margin-bottom: 30px; }
.pt-mb-4 { margin-bottom: 40px; }
.pt-mb-5 { margin-bottom: 60px; }

/* Margin top scale */
.pt-mt-0 { margin-top: 0; }
.pt-mt-1 { margin-top: 10px; }
.pt-mt-2 { margin-top: 20px; }
.pt-mt-3 { margin-top: 30px; }
.pt-mt-4 { margin-top: 40px; }
.pt-mt-5 { margin-top: 60px; }

/* Padding scale */
.pt-p-0 { padding: 0; }
.pt-p-1 { padding: 10px; }
.pt-p-2 { padding: 20px; }
.pt-p-3 { padding: 30px; }
.pt-p-4 { padding: 40px; }
.pt-p-5 { padding: 60px; }

.pt-py-1 { padding-top: 10px; padding-bottom: 10px; }
.pt-py-2 { padding-top: 20px; padding-bottom: 20px; }
.pt-py-3 { padding-top: 30px; padding-bottom: 30px; }
.pt-py-4 { padding-top: 40px; padding-bottom: 40px; }
.pt-py-5 { padding-top: 60px; padding-bottom: 60px; }

/* Display */
.pt-d-none { display: none; }
.pt-d-block { display: block; }
.pt-d-flex { display: flex; }
.pt-d-inline { display: inline; }
.pt-d-inline-block { display: inline-block; }

/* Flex utilities */
.pt-flex-center { display: flex; align-items: center; justify-content: center; }
.pt-flex-between { display: flex; align-items: center; justify-content: space-between; }
.pt-flex-wrap { flex-wrap: wrap; }
.pt-flex-1 { flex: 1; }
.pt-align-center { align-items: center; }
.pt-justify-center { justify-content: center; }

/* Width */
.pt-w-100 { width: 100%; }
.pt-w-auto { width: auto; }

/* Overflow */
.pt-overflow-hidden { overflow: hidden; }

/* Position */
.pt-relative { position: relative; }
.pt-absolute { position: absolute; }

/* Border */
.pt-border { border: 1px solid var(--pt-border); }
.pt-border-top { border-top: 1px solid var(--pt-border); }
.pt-border-bottom { border-bottom: 1px solid var(--pt-border); }

/* Shadow */
.pt-shadow { box-shadow: var(--pt-shadow); }
.pt-shadow-sm { box-shadow: var(--pt-shadow-sm); }
.pt-shadow-lg { box-shadow: var(--pt-shadow-lg); }

/* Screen-reader only (visually hidden, accessible to AT) */
.pt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive visibility — defaults */
.pt-show-mobile { display: none; }
.pt-show-desktop { display: none; }

@media (max-width: 479px) {
    .pt-hidden-xs { display: none; }
}

@media (min-width: 480px) and (max-width: 767px) {
    .pt-hidden-sm { display: none; }
}

@media (max-width: 767px) {
    .pt-hidden-mobile { display: none; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .pt-hidden-md { display: none; }
}

@media (max-width: 991px) {
    .pt-hidden-tablet { display: none; }
    .pt-show-mobile { display: block; }
    .pt-hidden-desktop { display: none; }
}

@media (min-width: 992px) {
    .pt-hidden-lg { display: none; }
    .pt-show-desktop { display: block; }
}

/* ===================================================================
   7. Section Spacing & Titles
   =================================================================== */

/* PORTO-LAYOUT-01: trimmed section padding to match Porto Demo 1 (was 40/60/80, ~+574px taller). */
.pt-section {
    padding: 25px 0;
}

.pt-section--sm {
    padding: 15px 0;
}

.pt-section--lg {
    padding: 40px 0;
}

.pt-section--xl {
    padding: 55px 0;
}

.pt-section-title {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

h2.pt-section-title,
.pt-section-title h2 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.16px;
    color: var(--pt-heading);
    margin-bottom: 24px;
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
    font-family: Poppins;
    line-height: 22px;
}

.pt-section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: var(--pt-primary);
}

.pt-section-title--left {
    text-align: left;
}

.pt-section-title--left h2::after {
    left: 0;
    transform: none;
}

.pt-section-title--border h2 {
    width: 100%;
    border-bottom: 1px solid var(--pt-border);
}

.pt-section-title--border h2::after {
    width: 60px;
    height: 2px;
}

.pt-section-title p {
    color: var(--pt-text-light);
    font-size: 15px;
    margin-top: 10px;
}

/* ===================================================================
   8. Header — Type 1 (Default Porto Header)
   =================================================================== */

/* --- Row 1: Top Bar --- */
.pt-topbar {
    background-color: #0088cc;
    color: #ffffff;
    font-size: 12px;
    line-height: var(--pt-topbar-height);
    height: var(--pt-topbar-height);
}

.pt-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.pt-topbar__left {
    display: flex;
    align-items: center;
}

.pt-topbar__welcome {
    color: #cccccc;
}

.pt-topbar__right {
    display: flex;
    align-items: center;
}

.pt-topbar__links {
    display: flex;
    align-items: center;
    gap: 0;
}

.pt-topbar__link-item {
    padding: 0 12px;
}

.pt-topbar__link-item--divider {
    border-left: 1px solid #444444;
}

.pt-topbar__link-item a {
    color: #cccccc;
    font-size: 12px;
    transition: color var(--pt-transition);
}

.pt-topbar__link-item a:hover {
    color: #ffffff;
}

.pt-topbar__switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #cccccc;
    font-size: 12px;
    cursor: pointer;
    transition: color var(--pt-transition);
}

.pt-topbar__switcher:hover {
    color: #ffffff;
}

.pt-topbar__switcher-arrow {
    flex-shrink: 0;
    opacity: 0.7;
}

/* --- Row 2: Main Header --- */
.pt-header {
    background-color: #0088cc;
    padding: 15px 0;
    min-height: var(--pt-header-height);
    border-bottom: none;
}

/* PORTO-V2-V1: White text and icons on blue header */
.pt-header .pt-header__tool-item {
    color: #ffffff;
}
.pt-header .pt-header__tool-item:hover {
    color: rgba(255, 255, 255, 0.8);
}
.pt-header .pt-header__tool-icon {
    color: #ffffff;
    stroke: #ffffff;
}
.pt-header .pt-header__phone-label {
    color: rgba(255, 255, 255, 0.75);
}
.pt-header .pt-header__phone-number {
    color: #ffffff;
}
.pt-header .pt-header__hamburger-line {
    background-color: #ffffff;
}

.pt-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pt-header__logo {
    flex-shrink: 0;
}

.pt-header__logo a {
    display: block;
    line-height: 0;
}

.pt-header__logo img {
    height: 44px;
    width: 111px;
    max-width: 111px;
}

.pt-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.pt-header__hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--pt-text-dark);
    border-radius: 1px;
    transition: background-color var(--pt-transition), transform var(--pt-transition), opacity var(--pt-transition);
}

.pt-header__search {
    flex: 1;
    max-width: 572px;
    margin: 0 auto;
}

.pt-header__search-form {
    width: 100%;
}

.pt-header__search-inner {
    display: flex;
    align-items: center;
    border: none;
    border-radius: 25px;
    overflow: hidden;
    background: #f7f7f7;
    height: 40px;
    position: relative;
}

.pt-header__search-cat {
    width: 100px;
    height: 40px;
    border: none;
    border-left: 1px solid #e1e1e1;
    padding: 0 25px 0 15px;
    font-size: 13px;
    color: #8d8d8d;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}

.pt-header__search-input {
    flex: 1;
    height: 40px;
    border: none;
    padding: 8px 12px 8px 20px;
    font-size: 13.6px;
    font-family: Poppins;
    color: #8d8d8d;
    background: transparent;
    outline: none;
    min-width: 200px;
}

.pt-header__search-input:focus-visible {
    box-shadow: none;
}

.pt-header__search-input::placeholder {
    color: #8d8d8d;
}

.pt-header__search-cat:focus-visible {
    box-shadow: none;
}

/* FIX-PARITY-02 — search button was position:absolute right:0 which
 * placed it ON TOP of the .pt-header__search-cat dropdown (lens icon
 * bleeding into "All Categories" text). It must sit as a normal flex
 * item AFTER the cat dropdown so the order is: input | cat | btn. */
.pt-header__search-btn {
    width: 46px;
    height: 40px;
    border: none;
    background-color: transparent;
    color: #606669;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: static;
}

.pt-header__search-btn:hover {
    color: var(--pt-primary);
}

.pt-header__tools {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.pt-header__tool-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pt-text-dark);
    text-decoration: none;
    position: relative;
    transition: color var(--pt-transition);
}

.pt-header__tool-item:hover {
    color: var(--pt-primary);
}

.pt-header__tool-icon {
    flex-shrink: 0;
}

.pt-header__tool-text {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.pt-header__tool-arrow {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    opacity: 0.6;
}

.pt-header__tool-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--pt-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 4px;
}

/* N3: Cart count badge — hidden via [hidden] when summary_count == 0 */
.pt-header__cart-badge[hidden] {
    display: none;
}

/* --- PX-005: Wishlist heart icon pink/red + icon sizing --- */
.pt-header__tool-item[title="Wishlist"] .pt-header__tool-icon,
a[title="Wishlist"] .pt-header__tool-icon {
    color: #e84c4c;
    stroke: #e84c4c;
}

.pt-header__tool-icon {
    width: 22px;
    height: 22px;
}

/* --- F-BUG-02: Megamenu must be visible on every page including homepage.
       Porto Demo 1 shows the full mega-menu on the home page; the previous
       PX-006 / R3-004 rule wrongly hid it. Removed. --- */

/* --- PX-002: Topbar social icons --- */
.pt-topbar__social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-topbar__social-icon {
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    transition: color var(--pt-transition);
}

.pt-topbar__social-icon:hover {
    color: #fff;
}

.pt-topbar__switcher strong {
    margin-right: 4px;
}

/* --- Row 3: Navigation Bar --- */
.pt-nav {
    background-color: var(--pt-primary);
    height: var(--pt-nav-height);
}

.pt-nav__inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.pt-nav__categories-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 20px;
    background-color: rgba(0, 0, 0, 0.15);
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--pt-transition);
}

.pt-nav__categories-btn:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

.pt-nav__menu {
    flex: 1;
}

.pt-nav__list {
    display: flex;
    align-items: center;
    height: var(--pt-nav-height);
}

.pt-nav__item {
    height: 100%;
}

.pt-nav__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color var(--pt-transition);
}

.pt-nav__link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

button.pt-nav__link--dropdown {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.pt-nav__item--active .pt-nav__link {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ===================================================================
   8b. Mega Menu (Desktop + Mobile)
   =================================================================== */

/* --- Desktop Dropdown Base --- */
.pt-nav__item--has-dropdown {
    position: relative;
}

.pt-megamenu__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background-color: #ffffff;
    border: 1px solid var(--pt-border);
    border-top: 3px solid var(--pt-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
    pointer-events: none;
}

.pt-megamenu__dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* --- Full-width type --- */
.pt-megamenu__dropdown--fullwidth {
    border-radius: 0;
}

/* --- Static-width type --- */
.pt-megamenu__dropdown--static {
    border-radius: var(--pt-radius);
}

/* --- Classic type --- */
.pt-megamenu__dropdown--classic {
    min-width: 220px;
    padding: 10px 0;
    border-radius: var(--pt-radius);
}

.pt-megamenu__dropdown--classic ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-megamenu__dropdown--classic li a {
    display: block;
    padding: 8px 20px;
    color: var(--pt-text);
    font-size: 13px;
    transition: color var(--pt-transition), background-color var(--pt-transition);
}

.pt-megamenu__dropdown--classic li a:hover {
    color: var(--pt-primary);
    background-color: var(--pt-bg-light);
}

/* --- Columns layout --- */
.pt-megamenu__columns {
    display: grid;
    grid-template-columns: repeat(var(--pt-cols, 4), 1fr);
    gap: 20px;
}

.pt-megamenu__column-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pt-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pt-border);
}

.pt-megamenu__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-megamenu__links li {
    margin-bottom: 6px;
}

.pt-megamenu__links a {
    color: var(--pt-text);
    font-size: 13px;
    line-height: 1.6;
    transition: color var(--pt-transition);
}

.pt-megamenu__links a:hover {
    color: var(--pt-primary);
}

/* --- Top / Side blocks --- */
.pt-megamenu__top-block {
    margin-bottom: 15px;
}

.pt-megamenu__top-block:empty {
    display: none;
}

.pt-megamenu__side-block {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--pt-border);
}

.pt-megamenu__side-block:empty {
    display: none;
}

/* --- Category Labels (New, Hot, Sale) --- */
.pt-megamenu__label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    color: #ffffff;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.2;
}

.pt-megamenu__label--new {
    background-color: var(--pt-success);
}

.pt-megamenu__label--hot {
    background-color: var(--pt-hot);
}

.pt-megamenu__label--sale {
    background-color: var(--pt-secondary);
}

/* --- Mobile Off-Canvas Panel --- */
.pt-megamenu--mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    z-index: 1000;
    background-color: #ffffff;
    transform: translateX(-100%);
    transition: transform 300ms ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pt-megamenu--mobile.is-open {
    transform: translateX(0);
}

.pt-megamenu__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms;
}

.pt-megamenu__overlay.is-open {
    opacity: 1;
    visibility: visible;
}

body.pt-no-scroll {
    overflow: hidden;
}

/* --- Mobile Header --- */
.pt-megamenu__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--pt-border);
    flex-shrink: 0;
}

.pt-megamenu__mobile-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-text-dark);
    text-transform: uppercase;
}

.pt-megamenu__mobile-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    font-size: 24px;
    color: var(--pt-text);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.pt-megamenu__mobile-close:hover {
    color: var(--pt-secondary);
}

/* --- Mobile Body --- */
.pt-megamenu__mobile-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

/* --- Mobile Menu Items --- */
.pt-megamenu__mobile-item {
    border-bottom: 1px solid var(--pt-border-light, #f0f0f0);
}

.pt-megamenu__mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text-dark);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.pt-megamenu__mobile-link:hover {
    color: var(--pt-primary);
    background-color: var(--pt-bg-light);
}

.pt-megamenu__mobile-arrow {
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.pt-megamenu__mobile-item.is-expanded .pt-megamenu__mobile-arrow {
    transform: rotate(180deg);
}

/* --- Mobile Submenu --- */
.pt-megamenu__mobile-sub {
    display: none;
    padding: 0 0 8px;
    background-color: var(--pt-bg-light);
}

.pt-megamenu__mobile-sub-title {
    padding: 10px 20px 4px 30px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pt-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-megamenu__mobile-sub-link {
    display: block;
    padding: 8px 20px 8px 30px;
    font-size: 13px;
    color: var(--pt-text);
    text-decoration: none;
}

.pt-megamenu__mobile-sub-link:hover {
    color: var(--pt-primary);
}

/* --- Mega Menu Focus Styles --- */
.pt-megamenu__links a:focus-visible,
.pt-megamenu__dropdown--classic li a:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: -2px;
}

.pt-megamenu__mobile-link:focus-visible,
.pt-megamenu__mobile-sub-link:focus-visible,
.pt-megamenu__mobile-close:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: -2px;
}

/* --- Hide desktop dropdown on mobile --- */
@media (max-width: 991px) {
    .pt-megamenu__dropdown {
        display: none;
    }
}

/* --- Hide mobile panel on desktop --- */
@media (min-width: 992px) {
    .pt-megamenu--mobile,
    .pt-megamenu__overlay {
        display: none;
    }
}

/* --- Header Responsive --- */
@media (max-width: 991px) {
    .pt-header__inner {
        justify-content: space-between;
    }

    .pt-header__hamburger {
        display: flex;
    }

    .pt-header__logo img {
        height: 36px;
    }

    .pt-header__tools {
        gap: 12px;
    }

    .pt-header__tool-count {
        top: -6px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

@media (max-width: 479px) {
    .pt-header {
        padding: 10px 0;
    }

    .pt-header__logo img {
        height: 30px;
    }
}

/* ===================================================================
   8c. Footer (3-section system)
   =================================================================== */

/* --- Footer Top: Newsletter --- */
/* FOOTER-03: ITER-4 T2 — newsletter band IS shown in ITER-2+ EcommPaaS branding.
   Removed display:none that was added for Demo 1 clone (now EcommPaaS identity). */
.pt-footer-top {
    display: block;
    background-color: var(--pt-bg-light);
    padding: 25px 0;
    font-size: 13px;
    font-weight: 500;
}

.pt-footer-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pt-footer-top__text {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--pt-text-dark);
    white-space: nowrap;
    flex-shrink: 0;
}

.pt-footer-top__icon {
    flex-shrink: 0;
    color: var(--pt-primary);
}

.pt-footer-top__newsletter {
    flex: 1;
    max-width: 500px;
}

.pt-footer-top__newsletter-inner {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
    background: #ffffff;
    height: 46px;
}

/* FIX-PARITY-09: Force newsletter input + button to the same 46px height.
   Reset the Magento/browser default form-control padding which was adding
   2px top/bottom and misaligning the button. Uses body-prefix + !important
   to beat Magento core input styling that targets input[type="email"]. */
body .pt-footer-top__newsletter .pt-footer-top__newsletter-input,
body .pt-footer-top__newsletter input.pt-footer-top__newsletter-input,
body input.pt-footer-top__newsletter-input[type="email"],
body input.pt-footer-top__newsletter-input {
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    height: 46px !important;
    line-height: 44px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    border: 0 none !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-family: var(--pt-font) !important;
    color: var(--pt-text-dark) !important;
    outline: none !important;
    min-width: 0 !important;
    box-shadow: none !important;
}
.pt-footer-top__newsletter-input {
    flex: 1 1 auto;
    box-sizing: border-box;
    height: 46px;
    line-height: 44px;
    padding: 0 15px;
    margin: 0;
    border: none;
    background: #ffffff;
    font-size: 14px;
    font-family: var(--pt-font);
    color: var(--pt-text-dark);
    outline: none;
    min-width: 0;
    box-shadow: none;
}

.pt-footer-top__newsletter-input::placeholder {
    color: var(--pt-text-light);
}

.pt-footer-top__newsletter-input:focus,
.pt-footer-top__newsletter-input:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--pt-primary);
}

.pt-footer-top__newsletter-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 46px;
    line-height: 1;
    padding: 0 28px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #0088cc;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.pt-footer-top__newsletter-btn:hover,
.pt-footer-top__newsletter-btn:focus {
    background: #007bb8;
    color: #ffffff;
}

/* --- Footer Middle: 4-col links --- */
/* FOOTER-01: Demo 1 footer is 516h; ours was 881h (+365).
   Two root causes:
   1. pt-footer-middle padding 50+40=90 (trim to 30+30=60, -30).
   2. Magento default .footer.content block was rendering BELOW
      our custom pt-footer-* layout, adding a 231h duplicate block.
      Hide it (see .footer.content rule below). */
.pt-footer-middle {
    background-color: var(--pt-bg-dark, #222529);
    padding: 30px 0;
}
/* FOOTER-01: suppress the Magento default .footer.content block that
   the layout xml still renders underneath our custom pt-footer-*. */
.page-footer > .footer.content {
    display: none !important;
}

.pt-footer-middle__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.pt-footer-middle__title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pt-footer-middle__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-footer-middle__links li {
    margin-bottom: 8px;
}

.pt-footer-middle__links a {
    color: #999999;
    font-size: 13px;
    line-height: 1.6;
    transition: color var(--pt-transition);
}

.pt-footer-middle__links a:hover {
    color: var(--pt-primary-light, #39f);
}

.pt-footer-middle__links a:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

.pt-footer-middle__contact p {
    color: #999999;
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 6px;
}

.pt-footer-middle__contact a {
    color: var(--pt-primary-light, #39f);
    transition: color var(--pt-transition);
}

.pt-footer-middle__contact a:hover {
    color: #ffffff;
}

.pt-footer-middle__contact a:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

.pt-footer-middle__heading {
    position: relative;
    margin: -25px 0 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 0;
}

.pt-footer-middle__heading-title {
    display: inline-block;
    position: absolute;
    top: -22px;
    left: 0;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    background: var(--pt-primary, #0088cc);
    padding: 10px 22px 10px 18px;
    border-radius: 0 0 0 0;
    /* Ribbon notch on the right edge */
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

/* About Us column heading: ensure visible white text */
.pt-footer-middle__col > h3 {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.pt-footer-middle__logo {
    display: inline-block;
    margin-bottom: 15px;
}

.pt-footer-middle__logo img,
.pt-footer-middle__col > img {
    display: block;
    width: 111px;
    max-width: 111px;
    height: 44px;
    max-height: 44px;
    filter: brightness(0) invert(1);
    margin-bottom: 15px;
}

.pt-footer-middle__about-text {
    color: #999999;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 20px;
}

.pt-footer-middle__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.pt-footer-middle__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px; /* Porto Demo 1 reference: 20px radius, white icons, 40px (was 30px/50%/#ccc) */
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: background-color var(--pt-transition), color var(--pt-transition);
    text-decoration: none;
}

.pt-footer-middle__social-link:hover {
    background-color: var(--pt-primary);
    color: #ffffff;
}

.pt-footer-middle__social-link--text {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    gap: 5px;
    font-size: 13px;
    color: #999;
}

.pt-footer-middle__social-link--text:hover {
    background: none;
    color: var(--pt-primary-light, #39f);
}

.pt-footer-middle__social-link--text svg {
    flex-shrink: 0;
}

/* --- Footer Bottom: copyright, payments, social --- */
.pt-footer-bottom {
    background-color: var(--pt-bg-dark, #222529);
    border-top: none;
    padding: 15px 0;
}

.pt-footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.pt-footer-bottom__copyright {
    color: #777777;
    font-size: 12px;
    white-space: nowrap;
}

.pt-footer-bottom__payments {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-footer-bottom__payment-icon {
    display: flex;
    align-items: center;
    opacity: 0.85;
    transition: opacity var(--pt-transition);
}

.pt-footer-bottom__payment-icon:hover {
    opacity: 1;
}

.pt-footer-bottom__social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pt-footer-bottom__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: #999999;
    transition: background-color var(--pt-transition), color var(--pt-transition);
}

.pt-footer-bottom__social-link:hover {
    background-color: var(--pt-primary);
    color: #ffffff;
}

.pt-footer-bottom__social-link:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

/* --- Footer Responsive --- */
@media (max-width: 991px) {
    .pt-footer-top__inner {
        flex-direction: column;
        text-align: center;
    }

    .pt-footer-top__newsletter {
        max-width: 100%;
        width: 100%;
    }

    .pt-footer-middle__row {
        grid-template-columns: repeat(2, 1fr);
    }

    .pt-footer-bottom__inner {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

@media (max-width: 479px) {
    .pt-footer-middle__row {
        grid-template-columns: 1fr;
    }

    .pt-footer-top__newsletter-inner {
        flex-direction: column;
    }

    .pt-footer-top__newsletter-btn {
        border-radius: 0 0 var(--pt-radius-sm) var(--pt-radius-sm);
    }
}

/* ===================================================================
   9. Badge Styles
   =================================================================== */

/* BADGE-01: Match Porto Demo 1 product label exactly.
 * Measured on /porto-product-list-types/ SALE badges:
 *   font-size: 10px / weight 600 / color white
 *   padding: 5px 11px / height 20px
 *   border-radius: 0 (SQUARE — not rounded)
 *   SALE bg: rgb(226, 124, 124) (soft salmon red)
 * NEW bg not present on showcase; use Porto category-label green
 * rgb(12, 196, 133) which IS present in Demo 1.
 */
.pt-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 0;
    color: #ffffff;
    z-index: 2;
}

.pt-badge--new {
    background-color: rgb(12, 196, 133);
}

.pt-badge--sale {
    background-color: rgb(226, 124, 124);
}

.pt-badge--hot {
    background-color: var(--pt-hot);
}

.pt-badge--top {
    position: absolute;
    left: 10px;
    top: 10px;
}

.pt-badge--top-right {
    position: absolute;
    right: 10px;
    top: 10px;
    left: auto;
}

.pt-badge--percent {
    font-size: 13px;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
    padding: 6px 8px;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================================================================
   9b. Product Card Component
   =================================================================== */

.pt-product-card {
    position: relative;
    background-color: #ffffff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    overflow: hidden;
    transition: box-shadow var(--pt-transition);
}

.pt-product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* --- Image Container ---
   FEATURED-02: Lock image container to 1:1 aspect ratio so off-screen
   lazy-loaded slides don't reflow to natural image size (was causing
   slides 4-8 to render at 376h vs visible 231h, inflating swiper-wrapper
   by 145px). With aspect-ratio:1, all slides reserve fixed space
   regardless of load state. */
.pt-product-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
}

.pt-product-card__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.pt-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}

.pt-product-card:hover .pt-product-card__image img:not(.pt-product-card__img-hover) {
    transform: scale(1.05);
}

/* --- Badges --- */
.pt-product-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* --- Hover Action Buttons --- */
.pt-product-card__actions {
    position: absolute;
    top: 10px;
    right: -50px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: right 300ms ease;
}

.pt-product-card:hover .pt-product-card__actions,
.pt-product-card:focus-within .pt-product-card__actions {
    right: 10px;
}

/* BADGE-01 / ACTION-01: Porto Demo 1 action buttons are 36x36 SQUARE
 * (border-radius: 0), bg white, icon color rgb(51,51,51). Measured on
 * /porto-product-list-types/ .action.towishlist/.tocompare elements.
 */
.pt-product-card__action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background-color: #ffffff;
    color: rgb(51, 51, 51);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: background-color var(--pt-transition), color var(--pt-transition);
    padding: 0;
}

.pt-product-card__action:hover {
    background-color: var(--pt-primary);
    color: #ffffff;
}

.pt-product-card__action:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

/* FEATURED-01: Demo 1 product-item-details is ~66h. Ours was 115h with
   15px padding + 7/8/12 margin rails. Tighten padding 15→10/12, kill
   bottom margin on price (last child). Saves ~35h per card. */
.pt-product-card__info {
    padding: 10px 12px 12px;
}

.pt-product-card__category {
    font-size: 11px;
    color: var(--pt-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.pt-product-card__name {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0 0 4px;
    letter-spacing: -0.15px;
    /* FEATURED-03: clamp to 2 lines so long product names don't make
       one slide taller than siblings (was making slide 5 of 8 render at
       333h vs peers at 261h — inflating swiper-wrapper). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(14px * 1.35 * 2);
}

.pt-product-card__name a {
    color: var(--pt-text-dark);
    transition: color var(--pt-transition);
}

.pt-product-card__name a:hover {
    color: var(--pt-primary);
}

/* --- Star Rating --- */
.pt-product-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.pt-product-card__stars {
    position: relative;
    width: 80px;
    height: 14px;
    background: linear-gradient(90deg, var(--pt-border) 0%, var(--pt-border) 100%);
    overflow: hidden;
    font-size: 0;
}

.pt-product-card__stars::before {
    content: '\2605\2605\2605\2605\2605';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--pt-border);
    letter-spacing: 2px;
}

.pt-product-card__stars-filled {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}

.pt-product-card__stars-filled::before {
    content: '\2605\2605\2605\2605\2605';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 1;
    color: #ffa500;
    letter-spacing: 2px;
    white-space: nowrap;
}

.pt-product-card__review-count {
    font-size: 12px;
    color: var(--pt-text-light);
}

/* --- Price --- */
.pt-product-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 0;
    flex-wrap: wrap;
}
/* FEATURED-04: Magento special-price products render a stacked
   price-box (.special-price + .old-price with .price-label "Special
   Price" above each) — was making the price container 96h instead of
   24h on sale slides, pulling the entire slide to 350h while peers
   were 278h. Force inline layout and hide the label text.
   FEATURED-04b: flex-wrap was forcing children onto two rows when
   combined width (73+8+74=155) exceeded 149 parent. Switch to nowrap
   + 6px gap + reduced old-price font so both fit on one 24h line. */
.pt-product-card__price .price-box {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.pt-product-card__price .price-box .price-label,
.pt-product-card__price .price-box .old-price .price-label {
    display: none !important;
}
.pt-product-card__price .price-box .special-price,
.pt-product-card__price .price-box .old-price {
    display: inline-flex !important;
    align-items: baseline;
    height: auto;
}
.pt-product-card__price .price-box .old-price .price {
    font-size: 12px;
    color: rgb(167, 167, 167);
    text-decoration: line-through;
    font-weight: 400;
}
/* FEATURED-04b: nested .price-container is block by default — make it
   inline-flex too so it doesn't force a new row inside .special-price /
   .old-price flex items. */
.pt-product-card__price .price-box .price-container {
    display: inline-flex !important;
    align-items: baseline;
}

.pt-product-card__price-old {
    font-size: 13px;
    color: var(--pt-text-light);
    text-decoration: line-through;
}

.pt-product-card__price-now {
    font-size: 18px;
    font-weight: 700;
    color: var(--pt-text-dark);
}

/* Special price highlight */
.pt-product-card__price-old + .pt-product-card__price-now {
    color: var(--pt-secondary);
}

/* --- Add to Cart --- */
.pt-product-card__cart {
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.pt-product-card:hover .pt-product-card__cart,
.pt-product-card:focus-within .pt-product-card__cart {
    opacity: 1;
    transform: translateY(0);
}

/* --- Product Card Responsive --- */
@media (max-width: 991px) {
    .pt-product-card__actions {
        right: 10px;
    }

    .pt-product-card__cart {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 479px) {
    .pt-product-card__info {
        padding: 10px;
    }

    .pt-product-card__name {
        font-size: 13px;
    }

    .pt-product-card__price-now {
        font-size: 16px;
    }

    .pt-product-card__action {
        width: 32px;
        height: 32px;
    }
}

/* ===================================================================
   9c. Swiper Slider Overrides (Porto-styled)
   =================================================================== */

/* --- Navigation Arrows --- */
.swiper-button-prev,
.swiper-button-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(34, 37, 41, 0.75);
    color: #ffffff;
    transition: background-color var(--pt-transition), opacity var(--pt-transition);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: var(--pt-primary);
}

.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Pagination Dots --- */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: var(--pt-border);
    opacity: 1;
    transition: background-color var(--pt-transition), transform var(--pt-transition);
}

.swiper-pagination-bullet-active {
    background-color: var(--pt-primary);
    transform: scale(1.2);
}

.swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

/* --- Hero Slider Variant --- */
.pt-hero-slider .swiper-button-prev,
.pt-hero-slider .swiper-button-next {
    width: 48px;
    height: 48px;
    background-color: rgba(34, 37, 41, 0.6);
}

.pt-hero-slider .swiper-button-prev::after,
.pt-hero-slider .swiper-button-next::after {
    font-size: 18px;
}

.pt-hero-slider .swiper-button-prev:hover,
.pt-hero-slider .swiper-button-next:hover {
    background-color: var(--pt-primary);
}

.pt-hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}

.pt-hero-slider .swiper-slide {
    overflow: hidden;
}

/* Hero slide content overlay */
.pt-hero-slide__content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 40px 60px;
    max-width: 600px;
    z-index: 2;
}

.pt-hero-slide__title {
    font-family: var(--pt-font-heading);
    font-size: 42px;
    font-weight: 700;
    color: var(--pt-heading);
    line-height: 1.2;
    margin: 0 0 16px;
}

.pt-hero-slide__subtitle {
    font-size: 18px;
    color: var(--pt-text);
    margin: 0 0 24px;
    line-height: 1.6;
}

/* --- Brand Logo Carousel --- */
.pt-brand-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}

.pt-brand-slider .swiper-slide img {
    max-height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter var(--pt-transition), opacity var(--pt-transition);
}

.pt-brand-slider .swiper-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- Reduced motion for Swiper --- */
@media (prefers-reduced-motion: reduce) {
    .swiper-wrapper {
        transition-duration: 0ms !important;
    }

    .swiper-button-prev,
    .swiper-button-next,
    .swiper-pagination-bullet {
        transition: none;
    }

    .pt-brand-slider .swiper-slide img {
        transition: none;
    }
}

/* --- Swiper Responsive --- */
@media (max-width: 767px) {
    .swiper-button-prev,
    .swiper-button-next {
        width: 30px;
        height: 30px;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 12px;
    }

    .pt-hero-slider .swiper-button-prev,
    .pt-hero-slider .swiper-button-next {
        width: 36px;
        height: 36px;
    }

    .pt-hero-slider .swiper-button-prev::after,
    .pt-hero-slider .swiper-button-next::after {
        font-size: 14px;
    }

    .pt-hero-slide__content {
        padding: 20px 30px;
    }

    .pt-hero-slide__title {
        font-size: 24px;
    }

    .pt-hero-slide__subtitle {
        font-size: 14px;
        margin-bottom: 16px;
    }
}

@media (max-width: 479px) {
    .pt-hero-slide__content {
        padding: 15px 20px;
        max-width: 100%;
    }

    .pt-hero-slide__title {
        font-size: 20px;
    }

    .pt-hero-slide__subtitle {
        font-size: 13px;
    }

    .pt-brand-slider .swiper-slide img {
        max-height: 40px;
    }
}

/* ===================================================================
   9d. Homepage Components (Demo 1)
   =================================================================== */

/* --- Hero Slide --- */
.pt-hero-section {
    margin-bottom: 0;
}

.pt-hero-slide {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    background-color: var(--pt-bg-light);
}

.pt-hero-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pt-hero-slide__label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--pt-primary);
    margin: 0 0 12px;
}

/* --- Service Features Bar --- */
.pt-services {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.pt-services__item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    padding: 10px 0;
}

.pt-services__icon {
    flex-shrink: 0;
    color: var(--pt-primary);
}

.pt-services__title {
    font-family: var(--pt-font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text-dark);
    margin: 0 0 2px;
}

.pt-services__desc {
    font-size: 13px;
    color: var(--pt-text-light);
    margin: 0;
}

/* --- Promotional Banner Grid --- */
.pt-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pt-promo-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--pt-radius);
    text-decoration: none;
}

.pt-promo-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.pt-promo-card:hover img {
    transform: scale(1.05);
}

.pt-promo-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: #ffffff;
}

.pt-promo-card__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    opacity: 0.85;
}

.pt-promo-card__title {
    font-family: var(--pt-font-heading);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.pt-promo-card:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

/* --- Tab Listing --- */
.pt-tab-listing__tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--pt-border);
    margin-bottom: 30px;
}

.pt-tab-listing__tab {
    padding: 12px 24px;
    font-family: var(--pt-font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color var(--pt-transition), border-color var(--pt-transition);
}

.pt-tab-listing__tab:hover {
    color: var(--pt-primary);
}

.pt-tab-listing__tab--active,
.pt-tab-listing__tab[aria-selected="true"] {
    color: var(--pt-primary);
    border-bottom-color: var(--pt-primary);
}

.pt-tab-listing__tab:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: -2px;
}

.pt-tab-listing__panel[hidden] {
    display: none;
}

/* --- Wide Banner --- */
.pt-wide-banner__bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
}

.pt-wide-banner__content {
    max-width: 500px;
}

.pt-wide-banner__label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--pt-primary);
    margin: 0 0 12px;
}

.pt-wide-banner__title {
    font-family: var(--pt-font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--pt-heading);
    line-height: 1.2;
    margin: 0 0 24px;
}

/* --- Homepage Responsive --- */
@media (max-width: 991px) {
    .pt-services {
        flex-wrap: wrap;
    }

    .pt-services__item {
        flex: 0 0 calc(50% - 10px);
    }

    .pt-promo-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pt-hero-slide {
        min-height: 300px;
    }

    .pt-wide-banner__bg {
        padding: 50px 0;
    }

    .pt-wide-banner__title {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
    .pt-tab-listing__tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pt-tab-listing__tab {
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    .pt-services__item {
        flex: 0 0 100%;
    }
}

@media (max-width: 479px) {
    .pt-hero-slide {
        min-height: 220px;
    }

    .pt-wide-banner__bg {
        padding: 30px 0;
    }

    .pt-wide-banner__title {
        font-size: 22px;
    }

    .pt-promo-card__title {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-promo-card img {
        transition: none;
    }

    .pt-tab-listing__tab {
        transition: none;
    }
}

/* ===================================================================
   10. Form Elements (Porto-styled)
   =================================================================== */

.pt-input {
    width: 100%;
    height: 40px;
    padding: 8px 15px;
    font-size: var(--pt-font-size);
    font-family: var(--pt-font);
    color: var(--pt-text-dark);
    background-color: #ffffff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    transition: border-color var(--pt-transition);
    outline: none;
}

.pt-input:focus {
    border-color: var(--pt-primary);
    box-shadow: none;
}

.pt-input--lg {
    height: 48px;
    padding: 10px 20px;
    font-size: 16px;
}

.pt-select {
    width: 100%;
    height: 40px;
    padding: 8px 35px 8px 15px;
    font-size: var(--pt-font-size);
    font-family: var(--pt-font);
    color: var(--pt-text-dark);
    background-color: #ffffff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    outline: none;
}

.pt-select:focus {
    border-color: var(--pt-primary);
}

.pt-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 15px;
    font-size: var(--pt-font-size);
    font-family: var(--pt-font);
    color: var(--pt-text-dark);
    background-color: #ffffff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    resize: vertical;
    outline: none;
}

.pt-textarea:focus {
    border-color: var(--pt-primary);
}

.pt-form-group {
    margin-bottom: 20px;
}

.pt-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text-dark);
    margin-bottom: 8px;
}

/* Placeholder styles */
.pt-input::placeholder,
.pt-textarea::placeholder {
    color: var(--pt-text-light);
    opacity: 1;
}

/* Disabled form states */
.pt-input:disabled,
.pt-textarea:disabled,
.pt-select:disabled {
    background-color: var(--pt-bg-light);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ===================================================================
   11. Transition & Animation Helpers
   =================================================================== */

.pt-fade-in {
    animation: ptFadeIn 0.3s ease;
}

@keyframes ptFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pt-slide-down {
    animation: ptSlideDown 0.3s ease;
}

@keyframes ptSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-fade-in,
    .pt-slide-down {
        animation: none;
    }

    .pt-megamenu__dropdown,
    .pt-megamenu--mobile,
    .pt-megamenu__overlay,
    .pt-megamenu__mobile-arrow {
        transition: none;
    }
}

/* ===================================================================
   12. Responsive Container Adjustments
   =================================================================== */

@media (max-width: 767px) {
    .pt-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pt-section {
        padding: 30px 0;
    }

    .pt-section--lg {
        padding: 40px 0;
    }

    .pt-section--xl {
        padding: 50px 0;
    }

    .pt-section-title h2 {
        font-size: 18px;
    }

    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
}

@media (max-width: 479px) {
    .pt-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    h1 { font-size: 20px; }
    h2 { font-size: 18px; }
}

/* ===================================================================
   13. Responsive Polish (PORTO-009)
   Touch targets, overflow prevention, cross-component fixes
   =================================================================== */

/* --- Touch targets: enlarge interactive elements on touch devices --- */
@media (pointer: coarse) {
    .pt-tab-listing__tab {
        min-height: 44px;
        padding: 10px 20px;
    }

    .pt-footer-middle__links a {
        display: block;
        min-height: 44px;
        line-height: 44px;
    }

    .pt-product-card__action {
        width: 44px;
        height: 44px;
    }

    /* Enlarge bullet visual + add padding hit area for touch */
    .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
        position: relative;
    }

    .swiper-pagination-bullet::after {
        content: '';
        position: absolute;
        inset: -15px;
    }

    .pt-nav__link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .pt-topbar__link,
    .pt-header__tool-item {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Tablet + Mobile: search bar below header --- */
@media (max-width: 991px) {
    .pt-header__search {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 10px 15px;
        background: #ffffff;
        border-top: 1px solid var(--pt-border);
        z-index: 100;
    }
}

/* --- Mobile: simplified header, 2-col grids --- */
@media (max-width: 767px) {
    .pt-header__search-cat {
        display: none;
    }

    .pt-header__phone {
        display: none;
    }

    .pt-footer-top__text {
        font-size: 14px;
        white-space: normal;
    }

    .pt-footer-bottom__social-link {
        width: 36px;
        height: 36px;
    }

    /* Product card grid: 2 columns on phone */
    .products-grid .product-items,
    .widget-product-grid .product-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* --- Small mobile: max readability --- */
@media (max-width: 479px) {
    .pt-header__tools {
        gap: 8px;
    }

    .pt-footer-bottom__social-link {
        width: 32px;
        height: 32px;
    }

    .pt-footer-bottom__copyright {
        font-size: 12px;
    }

    /* Product card grid: 2 columns on small phone */
    .products-grid .product-items,
    .widget-product-grid .product-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Truncate long product names — display must be -webkit-box for clamping */
    .pt-product-card__name {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }

    .pt-section-title p {
        font-size: 13px;
    }
}

/* --- Very small mobile: single column --- */
@media (max-width: 359px) {
    .products-grid .product-items,
    .widget-product-grid .product-items {
        grid-template-columns: 1fr;
    }
}

/* --- Reduced motion for new animations --- */
@media (prefers-reduced-motion: reduce) {
    .pt-product-card__actions {
        transition: none;
    }
}

/* --- Print styles --- */
@media print {
    .pt-topbar,
    .pt-header,
    .pt-nav,
    .pt-footer-top,
    .pt-footer-middle,
    .pt-footer-bottom,
    .pt-megamenu--mobile,
    .pt-megamenu__overlay,
    .swiper-button-prev,
    .swiper-button-next,
    .swiper-pagination {
        display: none;
    }

    .pt-container {
        max-width: 100%;
        padding: 0;
    }

    .pt-product-card__cart {
        display: none;
    }
}

/* ===================================================================
   14. Category Page (PORTO-010)
   =================================================================== */

/* --- Category Banner --- */
.pt-category-banner {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-bottom: 20px;
}

.pt-category-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pt-category-banner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.pt-category-banner__title {
    color: #fff;
    font-family: var(--pt-font-heading);
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- Empty category --- */
.pt-category-empty {
    padding: 60px 20px;
    text-align: center;
}

.pt-category-empty__message {
    font-size: 16px;
    color: var(--pt-text-light);
}

/* --- Product Grid --- */
.pt-category-products {
    margin-bottom: 40px;
}

.pt-product-grid {
    display: grid;
    gap: var(--pt-gutter);
}

/* Column variants: 2–6 columns */
.pt-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pt-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pt-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.pt-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.pt-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Auto-fill fallback */
.pt-product-grid:not([class*="pt-grid--cols-"]) {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* --- Breadcrumbs (Porto Demo 1 styled) --- */
.pt-category-page .breadcrumbs {
    background: var(--pt-bg-light);
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--pt-text-light);
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-category-page .breadcrumbs .items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.pt-category-page .breadcrumbs .item {
    display: inline-flex;
    align-items: center;
}

.pt-category-page .breadcrumbs a {
    color: var(--pt-text);
    text-decoration: none;
    transition: color var(--pt-transition);
}

.pt-category-page .breadcrumbs a:hover {
    color: var(--pt-primary);
}

.pt-category-page .breadcrumbs .item strong {
    font-weight: 400;
    color: var(--pt-text-light);
}

.pt-category-page .breadcrumbs .item:not(:last-child)::after {
    content: '\203A';
    margin: 0 8px;
    color: var(--pt-text-light);
    font-size: 14px;
}

/* --- Magento toolbar override (remap default classes) --- */
/* TOOLBAR-01: Porto Demo 1 has NO category toolbar (it uses OnePage Scroll
 * infinite-scroll instead). Hide top + bottom toolbars site-wide on category
 * pages to match pixel parity. */
body.pt-category-page .toolbar.toolbar-products,
body.page-products .toolbar.toolbar-products,
body.catalog-category-view .toolbar.toolbar-products {
    display: none !important;
}
.pt-category-page .toolbar-products {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pt-border);
    font-size: 13px;
    color: var(--pt-text);
}

.pt-category-page .toolbar-products:last-child {
    border-bottom: none;
    border-top: 1px solid var(--pt-border);
    margin-top: 20px;
}

.pt-category-page .toolbar-products .toolbar-sorter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-category-page .toolbar-products .sorter-label {
    font-weight: 600;
    color: var(--pt-text-dark);
    white-space: nowrap;
}

.pt-category-page .toolbar-products .sorter-options {
    border: 1px solid var(--pt-border);
    padding: 6px 30px 6px 10px;
    font-size: 13px;
    color: var(--pt-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    cursor: pointer;
    border-radius: var(--pt-radius-sm);
}

.pt-category-page .toolbar-products .sorter-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    text-decoration: none;
    color: var(--pt-text);
    transition: color var(--pt-transition);
}

.pt-category-page .toolbar-products .sorter-action:hover {
    color: var(--pt-primary);
}

/* View mode icons */
.pt-category-page .toolbar-products .modes {
    display: flex;
    gap: 4px;
}

.pt-category-page .toolbar-products .modes-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: #fff;
    color: var(--pt-text-light);
    text-decoration: none;
    transition: color var(--pt-transition), background var(--pt-transition), border-color var(--pt-transition);
}

.pt-category-page .toolbar-products .modes-mode:hover,
.pt-category-page .toolbar-products .modes-mode.active {
    color: #fff;
    background: var(--pt-primary);
    border-color: var(--pt-primary);
}

.pt-category-page .toolbar-products .modes-mode > span {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Grid icon (before pseudo) */
.pt-category-page .toolbar-products .mode-grid::before {
    content: '';
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Crect x='0' y='0' width='4' height='4' rx='0.5'/%3E%3Crect x='6' y='0' width='4' height='4' rx='0.5'/%3E%3Crect x='12' y='0' width='4' height='4' rx='0.5'/%3E%3Crect x='0' y='6' width='4' height='4' rx='0.5'/%3E%3Crect x='6' y='6' width='4' height='4' rx='0.5'/%3E%3Crect x='12' y='6' width='4' height='4' rx='0.5'/%3E%3Crect x='0' y='12' width='4' height='4' rx='0.5'/%3E%3Crect x='6' y='12' width='4' height='4' rx='0.5'/%3E%3Crect x='12' y='12' width='4' height='4' rx='0.5'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* List icon (before pseudo) */
.pt-category-page .toolbar-products .mode-list::before {
    content: '';
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Crect x='0' y='1' width='16' height='2' rx='0.5'/%3E%3Crect x='0' y='7' width='16' height='2' rx='0.5'/%3E%3Crect x='0' y='13' width='16' height='2' rx='0.5'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.pt-category-page .toolbar-products .modes-mode:hover::before,
.pt-category-page .toolbar-products .modes-mode.active::before {
    filter: brightness(0) invert(1);
}

/* Limiter */
.pt-category-page .toolbar-products .limiter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.pt-category-page .toolbar-products .limiter-options {
    border: 1px solid var(--pt-border);
    padding: 6px 30px 6px 10px;
    font-size: 13px;
    color: var(--pt-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    cursor: pointer;
    border-radius: var(--pt-radius-sm);
}

/* Toolbar amount */
.pt-category-page .toolbar-products .toolbar-amount {
    font-size: 12px;
    color: var(--pt-text-light);
}

/* Pages / pagination */
.pt-category-page .toolbar-products .pages {
    margin-top: 0;
}

.pt-category-page .pages-items {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-category-page .pages-item-next,
.pt-category-page .pages-item-previous,
.pt-category-page .pages-items .item {
    margin: 0;
}

.pt-category-page .pages-items .item a,
.pt-category-page .pages-items .item strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    font-size: 14px;
    font-weight: 400;
    color: var(--pt-text);
    text-decoration: none;
    transition: color var(--pt-transition), background var(--pt-transition), border-color var(--pt-transition);
}

.pt-category-page .pages-items .item a:hover {
    color: #fff;
    background: var(--pt-primary);
    border-color: var(--pt-primary);
}

.pt-category-page .pages-items .item.current strong {
    color: #fff;
    background: var(--pt-primary);
    border-color: var(--pt-primary);
}

/* Pagination prev/next arrows — visually hide text but keep accessible */
.pt-category-page .pages-items .action.previous > span,
.pt-category-page .pages-items .action.next > span {
    clip: rect(0, 0, 0, 0);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.pt-category-page .pages-items .action.previous::before,
.pt-category-page .pages-items .action.next::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.pt-category-page .pages-items .action.previous::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M7 1L3 5l4 4' stroke='%23777' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pt-category-page .pages-items .action.next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l4 4-4 4' stroke='%23777' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pt-category-page .pages-items .action.previous:hover::before,
.pt-category-page .pages-items .action.next:hover::before {
    filter: brightness(0) invert(1);
}

/* Toolbar focus-visible styles */
.pt-category-page .toolbar-products .sorter-options:focus-visible,
.pt-category-page .toolbar-products .sorter-action:focus-visible,
.pt-category-page .toolbar-products .limiter-options:focus-visible,
.pt-category-page .toolbar-products .modes-mode:focus-visible,
.pt-category-page .pages-items .item a:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

/* ===================================================================
   14c. Product List View Mode (PORTO-012)
   =================================================================== */

/* List mode: single column, horizontal card layout */
.pt-product-grid--list {
    grid-template-columns: 1fr;
}

.pt-product-grid--list .pt-product-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pt-product-grid--list .pt-product-card__image {
    width: clamp(160px, 20%, 240px);
    flex-shrink: 0;
}

.pt-product-grid--list .pt-product-card__info {
    flex: 1;
    padding-top: 5px;
}

.pt-product-grid--list .pt-product-card__name {
    font-size: 1rem;
    margin-bottom: 8px;
}

.pt-product-grid--list .pt-product-card__price {
    font-size: 1.125rem;
    margin-bottom: 10px;
}

/* In list mode, show short description if available (2-line clamp) */
.pt-product-grid--list .pt-product-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--pt-text);
    line-height: 1.6;
    margin-bottom: 12px;
}

/* In grid mode, hide short description */
.pt-product-grid:not(.pt-product-grid--list) .pt-product-card__description {
    display: none;
}

/* In list mode, actions are always visible (no hover reveal) */
.pt-product-grid--list .pt-product-card__actions {
    position: static;
    opacity: 1;
    transform: none;
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-top: 10px;
}

.pt-product-grid--list .pt-product-card__action {
    background: var(--pt-bg-light);
}

/* In list mode, Add to Cart always visible */
.pt-product-grid--list .pt-product-card__cart {
    display: inline-flex;
}

/* Responsive: list mode → stack on mobile */
@media (max-width: 767px) {
    .pt-product-grid--list .pt-product-card {
        flex-direction: column;
    }

    .pt-product-grid--list .pt-product-card__image {
        width: 100%;
    }
}

/* --- Sidebar Layout (2-column-left) --- */
.pt-category-page .columns {
    display: flex;
    gap: var(--pt-gutter);
}

.pt-category-page .column.main {
    flex: 1;
    min-width: 0;
}

.pt-category-page .sidebar-main {
    width: 280px;
    flex: 0 0 280px;
    order: -1;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* ===================================================================
   14b. Sidebar — Layered Navigation Filters
   =================================================================== */

/* --- Filter Block --- */
.pt-category-page .block.filter {
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
}
.pt-category-page .block-title.filter-title {
    background: #f4f4f4;
    padding: 12px 20px;
    border-bottom: 1px solid #e1e1e1;
    border-left: 3px solid #0088cc;
}
.pt-category-page .block-title.filter-title strong {
    font-size: 15px; /* SIDEBAR-01: Demo 1 15/600 */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #222529;
}
.pt-category-page .filter-options {
    padding: 0;
    margin: 0;
}
.pt-category-page .filter-options-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222529;
    padding: 12px 20px;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pt-category-page .filter-options-title::after {
    content: '▾';
    font-size: 10px;
    color: #999;
}
.pt-category-page .filter-options-content {
    padding: 8px 20px 15px;
}
.pt-category-page .filter-options-content .items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pt-category-page .filter-options-content .item {
    padding: 4px 0;
}
.pt-category-page .filter-options-content .item a {
    color: #555;
    text-decoration: none;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}
.pt-category-page .filter-options-content .item a:hover {
    color: #0088cc;
}
.pt-category-page .filter-options-content .count {
    color: #999;
    font-size: 12px;
}

/* --- Sidebar Featured Products --- */
.pt-category-page .sidebar-main .pt-sidebar-block {
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
}
.pt-category-page .sidebar-main .pt-sidebar-block__title {
    background: #f4f4f4;
    padding: 12px 20px;
    border-bottom: 1px solid #e1e1e1;
    border-left: 3px solid #0088cc;
    /* SIDEBAR-02: 15/600 match Porto Demo 1 (was 14/700) */
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: #222529;
    margin: 0;
}

/* --- Sidebar Toggle Button (visible only on mobile) --- */
.pt-sidebar-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 15px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: #fff;
    color: var(--pt-text-dark);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--pt-transition), color var(--pt-transition);
}

.pt-sidebar-toggle:hover {
    border-color: var(--pt-primary);
    color: var(--pt-primary);
}

.pt-sidebar-toggle:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

.pt-sidebar-toggle svg {
    flex-shrink: 0;
}

/* --- Filter Block --- */
/* Visually hide "Shop By" heading but keep accessible for screen readers */
.pt-category-page .sidebar-main .block-title {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.pt-category-page .sidebar-main .filter-options-item {
    border-bottom: 1px solid var(--pt-border-light);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.pt-category-page .sidebar-main .filter-options-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Filter section headings */
.pt-category-page .sidebar-main .filter-options-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--pt-font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pt-heading);
    cursor: pointer;
    padding: 0;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
    user-select: none;
}

.pt-category-page .sidebar-main .filter-options-title::after {
    content: '';
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    transition: transform var(--pt-transition);
}

.pt-category-page .sidebar-main .filter-options-title.pt-filter--collapsed::after {
    transform: rotate(-90deg);
}

.pt-category-page .sidebar-main .filter-options-title:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Filter items list */
.pt-category-page .sidebar-main .filter-options-content .items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-category-page .sidebar-main .filter-options-content .item {
    margin-bottom: 6px;
}

.pt-category-page .sidebar-main .filter-options-content .item a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--pt-text);
    text-decoration: none;
    padding: 3px 0;
    transition: color var(--pt-transition);
}

.pt-category-page .sidebar-main .filter-options-content .item a:hover {
    color: var(--pt-primary);
}

/* Filter count in parentheses */
.pt-category-page .sidebar-main .filter-options-content .count {
    color: var(--pt-text-light);
    font-size: 12px;
    margin-left: auto;
}

/* Active filter item */
.pt-category-page .sidebar-main .filter-options-content .item a.active,
.pt-category-page .sidebar-main .filter-options-content .item.active a {
    color: var(--pt-primary);
    font-weight: 600;
}

/* --- Swatch filters (color, size) --- */
.pt-category-page .sidebar-main .swatch-option {
    min-width: 28px;
    min-height: 28px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    cursor: pointer;
    transition: border-color var(--pt-transition), box-shadow var(--pt-transition);
}

.pt-category-page .sidebar-main .swatch-option:hover {
    border-color: var(--pt-primary);
}

.pt-category-page .sidebar-main .swatch-option.selected {
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 2px var(--pt-primary-light);
}

/* --- Price slider (Magento native) --- */
.pt-category-page .sidebar-main .price-slider {
    margin: 10px 0;
}

.pt-category-page .sidebar-main input[type="range"] {
    width: 100%;
    accent-color: var(--pt-primary);
}

/* --- Clear All / Active Filters --- */
.pt-category-page .sidebar-main .filter-current {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-category-page .sidebar-main .filter-current .items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-category-page .sidebar-main .filter-current .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--pt-text);
    padding: 4px 0;
}

.pt-category-page .sidebar-main .filter-current .filter-label {
    font-weight: 600;
    color: var(--pt-text-dark);
    margin-right: 4px;
}

.pt-category-page .sidebar-main .filter-current .action.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--pt-text-light);
    font-size: 16px;
    text-decoration: none;
    border-radius: 50%;
    transition: color var(--pt-transition), background var(--pt-transition);
}

.pt-category-page .sidebar-main .filter-current .action.remove:hover {
    color: #fff;
    background: var(--pt-danger);
}

.pt-category-page .sidebar-main .filter-actions {
    margin-top: 8px;
}

.pt-category-page .sidebar-main .filter-actions a {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-primary);
    text-decoration: none;
    transition: color var(--pt-transition);
}

.pt-category-page .sidebar-main .filter-actions a:hover {
    color: var(--pt-primary-dark);
}

/* --- Category tree in sidebar --- */
.pt-category-page .sidebar-main .block-category-navigation .items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-category-page .sidebar-main .block-category-navigation .item {
    margin-bottom: 4px;
}

.pt-category-page .sidebar-main .block-category-navigation .item a {
    display: block;
    font-size: 13px;
    color: var(--pt-text);
    text-decoration: none;
    padding: 5px 0;
    transition: color var(--pt-transition);
}

.pt-category-page .sidebar-main .block-category-navigation .item a:hover,
.pt-category-page .sidebar-main .block-category-navigation .item.active > a {
    color: var(--pt-primary);
    font-weight: 600;
}

.pt-category-page .sidebar-main .block-category-navigation .items .items {
    padding-left: 15px;
}

/* --- Responsive: Category Page --- */
@media (max-width: 1199px) {
    .pt-grid--cols-5,
    .pt-grid--cols-6 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .pt-category-page .columns {
        flex-direction: column;
    }

    /* Sidebar: hidden by default on mobile, revealed by toggle button */
    .pt-sidebar-toggle {
        display: flex;
    }

    .pt-category-page .sidebar-main {
        display: none;
        width: 100%;
        margin-bottom: 20px;
        position: static;
        border: 1px solid var(--pt-border);
        border-radius: var(--pt-radius-sm);
        padding: 15px;
        background: #fff;
    }

    .pt-category-page .sidebar-main.pt-sidebar--open {
        display: block;
    }

    .pt-grid--cols-4,
    .pt-grid--cols-5,
    .pt-grid--cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .pt-category-banner__title {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .pt-grid--cols-3,
    .pt-grid--cols-4,
    .pt-grid--cols-5,
    .pt-grid--cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pt-category-banner {
        height: 200px;
    }

    .pt-category-banner__title {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .pt-category-page .toolbar-products {
        flex-direction: column;
        align-items: flex-start;
    }

    .pt-category-page .toolbar-products .modes {
        display: none;
    }
}

@media (max-width: 479px) {
    .pt-grid--cols-2,
    .pt-grid--cols-3,
    .pt-grid--cols-4,
    .pt-grid--cols-5,
    .pt-grid--cols-6 {
        grid-template-columns: 1fr;
    }

    .pt-category-banner__title {
        font-size: 16px;
    }
}

/* ===================================================================
   15. Product Detail Page — Type 1 Default (PORTO-013)
   =================================================================== */

/* --- Main layout: float-based 55% / 42% (avoids Fotorama 9.5M pixel bug with CSS grid) --- */
.pt-product-page .columns .column.main {
    display: block !important;
    padding-bottom: 0;
    overflow: hidden;
}

/* PDP-GALLERY-01: Demo 1 gives media 482px (~42%) and info 675px (~56%).
 * We had 55/42 — wrong direction. Flip so info gets the bigger column. */
.pt-product-page .product.media {
    float: left !important;
    width: 42% !important;
    position: relative;
    overflow: visible;
}
.pt-product-page .product.media .fotorama,
.pt-product-page .product.media .gallery-placeholder,
.pt-product-page .product.media .fotorama__stage {
    max-width: 100% !important;
}

/* PDP badges — overlaid on gallery top-left */
.pt-pdp-badges {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

.pt-product-page .product-info-main {
    float: right !important;
    width: 55% !important;
    padding-top: 0;
}

.pt-product-page .product.info.detailed,
.pt-product-page .block.related,
.pt-product-page .block.upsell,
.pt-product-page .block.crosssell {
    clear: both;
    width: 100%;
}

/* --- Gallery (Fotorama overrides) — match Porto Demo 1 exactly --- */
.pt-product-page .fotorama__stage {
    border: 1px solid #f4f4f4;
    border-radius: 0;
    overflow: hidden;
}

/* Porto Demo 1 active thumb border is dark (#222529), not teal */
.pt-product-page .fotorama__thumb-border {
    border-color: #222529 !important;
    border-width: 1px !important;
}

.pt-product-page .fotorama__nav--thumbs {
    margin-top: 10px;
}

.pt-product-page .fotorama__nav__frame--thumb {
    border: 1px solid #e1e1e1;
    border-radius: 0;
    overflow: hidden;
    opacity: 0.7;
    padding: 2px;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pt-product-page .fotorama__nav__frame--thumb:hover,
.pt-product-page .fotorama__active .fotorama__nav__frame--thumb {
    opacity: 1;
    border-color: #222529;
}

/* Prevent Fotorama default stage from adding extra vertical space */
.pt-product-page .fotorama__stage__shaft {
    max-height: 100%;
}
.pt-product-page .fotorama__wrap {
    margin: 0;
}

/* --- Product name --- */
.pt-product-page .page-title-wrapper.product {
    margin-bottom: 8px;
}

.pt-product-page .page-title-wrapper.product .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* --- Rating + reviews --- */
.pt-product-page .product-reviews-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pt-product-page .product-reviews-summary .rating-summary {
    display: flex;
    align-items: center;
}

.pt-product-page .product-reviews-summary .reviews-actions a {
    color: var(--pt-text-light);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pt-product-page .product-reviews-summary .reviews-actions a:hover {
    color: var(--pt-primary);
}

/* --- Price block --- */
.pt-product-page .product-info-price {
    margin-bottom: 15px;
}

.pt-product-page .product-info-price .price-box {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.pt-product-page .product-info-price .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pt-heading);
}

.pt-product-page .product-info-price .special-price .price {
    color: var(--pt-primary);
}

.pt-product-page .product-info-price .old-price .price {
    font-size: 1rem;
    font-weight: 400;
    color: var(--pt-text-light);
    text-decoration: line-through;
}

/* --- Short description --- */
.pt-product-page .product.attribute.overview {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 27px;
    color: var(--pt-text);
}

/* --- Configurable options / swatches --- */
.pt-product-page .product-options-wrapper {
    margin-bottom: 20px;
}

.pt-product-page .swatch-attribute {
    margin-bottom: 12px;
}

.pt-product-page .swatch-attribute-label {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 6px;
}

.pt-product-page .swatch-option {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.pt-product-page .swatch-option:hover {
    border-color: var(--pt-primary);
}

.pt-product-page .swatch-option.selected {
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 1px var(--pt-primary);
}

.pt-product-page .swatch-option.text {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    padding: 0 10px;
}

.pt-product-page .swatch-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Quantity selector (Porto style) --- */
.pt-addtocart {
    margin-bottom: 20px;
}

.pt-addtocart__qty {
    margin-bottom: 15px;
}

.pt-addtocart__qty-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--pt-heading);
}

.pt-addtocart__qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    overflow: hidden;
}

.pt-addtocart__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--pt-bg-light);
    border: 0;
    cursor: pointer;
    color: var(--pt-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pt-addtocart__qty-btn:hover {
    background: var(--pt-border);
    color: var(--pt-heading);
}

.pt-addtocart__qty-btn:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: -2px;
}

.pt-addtocart__qty-input {
    width: 50px;
    height: 40px;
    border: 0;
    border-left: 1px solid var(--pt-border);
    border-right: 1px solid var(--pt-border);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--pt-bg);
    color: var(--pt-heading);
    -moz-appearance: textfield;
}

.pt-addtocart__qty-input::-webkit-inner-spin-button,
.pt-addtocart__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pt-addtocart__qty-input:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: -2px;
}

/* --- Add to Cart button --- */
.pt-addtocart__submit {
    width: 100%;
    height: 48px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* --- Secondary actions: Wishlist, Compare, Email --- */
.pt-product-page .product-social-links,
.pt-product-page .product-addto-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--pt-border);
}

.pt-product-page .product-addto-links .action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    color: var(--pt-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.pt-product-page .product-addto-links .action:hover {
    color: var(--pt-primary);
}

.pt-product-page .product-addto-links .action:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

/* --- SKU & availability --- */
.pt-product-page .product.attribute.sku {
    font-size: 0.8125rem;
    color: var(--pt-text-light);
    margin-top: 15px;
}

.pt-product-page .product.attribute.sku .value {
    font-weight: 600;
}

.pt-product-page .stock {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 5px;
}

/* Stock color: Porto Demo 1 uses dark text, not green */
.pt-product-page .stock.available {
    color: #222529;
}

.pt-product-page .stock.unavailable {
    color: var(--pt-danger);
}

/* --- Product tabs (basic structure, full impl in PORTO-017) --- */
.pt-product-page .product.info.detailed {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--pt-border);
}

.pt-product-page .product.data.items > .item.title {
    display: inline-block;
    margin-right: -1px;
}

.pt-product-page .product.data.items > .item.title > .switch {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pt-text-light);
    text-decoration: none;
    border: 1px solid var(--pt-border);
    border-bottom: 0;
    background: var(--pt-bg-light);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.pt-product-page .product.data.items > .item.title > .switch:hover {
    color: var(--pt-heading);
}

.pt-product-page .product.data.items > .item.title > .switch:focus-visible {
    outline: 2px solid var(--pt-primary);
    outline-offset: -2px;
}

.pt-product-page .product.data.items > .item.title.active > .switch {
    color: var(--pt-heading);
    background: var(--pt-bg);
    border-bottom-color: var(--pt-bg);
}

.pt-product-page .product.data.items > .item.content {
    padding: 20px;
    border: 1px solid var(--pt-border);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* F-BUG-20: PDP tabs use Porto-style UNDERLINE tabs (matches Demo 1).
   Pill-style was the wrong direction — reverted. Underline accent + active
   color is provided by L116 below; this block only resets the layout to a
   horizontal underline strip. */
.pt-product-page .product.data.items,
.product.data.items {
    display: block;
    position: relative;
    margin: 0 0 30px;
    padding: 0 0 1px;
    list-style: none;
    border-bottom: 1px solid var(--pt-border);
    min-height: 40px;
}
.product.data.items > .item.title {
    display: inline-block;
    float: none;
    margin: 0 28px -1px 0;
    vertical-align: bottom;
    position: relative;
    z-index: 1;
}
.product.data.items > .item.title:last-of-type {
    margin-right: 0;
}
.product.data.items > .item.content {
    display: none;
    width: 100%;
    margin-top: 0;
    padding: 30px 0 15px;
    background: #ffffff;
    box-sizing: border-box;
    float: none;
    clear: both;
    border: 0;
}
.product.data.items > .item.content.active,
.product.data.items > .item.content._active {
    display: block;
}
/* First-tab fallback when no .active class has been applied yet */
.product.data.items:not(:has(> .item.content.active)):not(:has(> .item.content._active)) > .item.content:not(.item.content ~ .item.content) {
    display: block;
}

/* FIX-PARITY-05: mage-tabs-disabled fallback — when Magento tabs widget fails
   or is intentionally disabled, render as horizontal tabs with first content
   visible. Uses CSS flexbox with order to separate title row from content
   panels, because Magento interleaves title/content as siblings:
   (title, content, title, content, title, content). Without flex+order,
   an active content panel between titles breaks the horizontal title row. */
.pt-product-page .product.data.items.mage-tabs-disabled,
.product.data.items.mage-tabs-disabled {
    display: flex !important;
    flex-wrap: wrap !important;
    position: relative !important;
    border-bottom: 1px solid var(--pt-border) !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 40px !important;
}
/* Titles: order 0 keeps them all in the first row */
.product.data.items.mage-tabs-disabled > .item.title {
    display: block !important;
    float: none !important;
    margin: 0 -1px -1px 0 !important;
    position: relative !important;
    z-index: 1 !important;
    order: 0 !important;
}
.product.data.items.mage-tabs-disabled > .item.title > .switch {
    display: inline-block !important;
    padding: 10px 20px !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #818692 !important;
    text-decoration: none !important;
    border: 1px solid var(--pt-border) !important;
    border-bottom: 0 !important;
    background: #f4f4f4 !important;
    cursor: pointer !important;
    line-height: 20px !important;
}
.product.data.items.mage-tabs-disabled > .item.title.active > .switch,
.product.data.items.mage-tabs-disabled > .item.title._active > .switch {
    color: #222529 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    position: relative !important;
    z-index: 2 !important;
}
/* Content panels: order 1 forces them ALL below the title row.
   width: 100% ensures each panel takes a full row in the flex container. */
.product.data.items.mage-tabs-disabled > .item.content {
    display: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 25px 20px !important;
    border: 1px solid var(--pt-border) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    order: 1 !important;
}
.product.data.items.mage-tabs-disabled > .item.content.active,
.product.data.items.mage-tabs-disabled > .item.content._active {
    display: block !important;
}
/* Show content panel when its preceding TITLE sibling has active class.
   Magento's mage/tabs widget sets .active on titles only (not contents),
   and the DOM is interleaved: title, content, title, content.
   The adjacent sibling selector makes tab switching work with mage/tabs. */
.product.data.items.mage-tabs-disabled > .item.title.active + .item.content,
.product.data.items.mage-tabs-disabled > .item.title._active + .item.content {
    display: block !important;
}
/* Fallback: if JS never toggles .active, show the first tab's content.
 * NOTE: cannot use :first-of-type because titles and contents are sibling
 * DIVs (interleaved), so :first-of-type targets the first DIV (a title),
 * not the first content. Use the negative-sibling trick instead:
 * `.item.content:not(.item.content ~ .item.content)` = a content element
 * with no preceding content sibling = the FIRST content. Same trick for titles.
 */
/* Active title tab styling — both when mage/tabs sets .active on title,
   and fallback for first title when no title has .active */
.product.data.items.mage-tabs-disabled > .item.title.active > .switch,
.product.data.items.mage-tabs-disabled > .item.title._active > .switch {
    color: #222529 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
}
.product.data.items.mage-tabs-disabled:not(:has(> .item.title.active)):not(:has(> .item.title._active)) > .item.title:not(.item.title ~ .item.title) > .switch {
    color: #222529 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
}
/* Fallback: show first content when NO title has active class (initial load
   before mage/tabs fires, or if widget never initializes) */
.product.data.items.mage-tabs-disabled:not(:has(> .item.title.active)):not(:has(> .item.title._active)) > .item.content:not(.item.content ~ .item.content) {
    display: block !important;
}

/* Additional info table */
.pt-product-page .additional-attributes {
    width: 100%;
    border-collapse: collapse;
}

.pt-product-page .additional-attributes th,
.pt-product-page .additional-attributes td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--pt-border);
    font-size: 0.875rem;
    text-align: left;
}

.pt-product-page .additional-attributes th {
    font-weight: 600;
    color: var(--pt-heading);
    width: 30%;
}

/* --- Related / Upsell products --- */
.pt-product-page .block.related,
.pt-product-page .block.upsell {
    margin-top: 40px;
}

.pt-product-page .block.related .block-title,
.pt-product-page .block.upsell .block-title,
.pt-related-section .block-title {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--pt-primary);
}

.pt-related-section .block-title h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

/* Crosssell section (cart page) */
.pt-related-section {
    margin-top: 40px;
}

/* Swiper carousel inside related/upsell/crosssell */
.pt-related-carousel {
    position: relative;
    padding: 0 40px;
    overflow: hidden;
}

.pt-related-carousel .swiper-button-prev,
.pt-related-carousel .swiper-button-next {
    width: 32px;
    height: 32px;
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: 50%;
    color: var(--pt-text);
    transition: background-color var(--pt-transition), border-color var(--pt-transition);
}

.pt-related-carousel .swiper-button-prev::after,
.pt-related-carousel .swiper-button-next::after {
    font-size: 12px;
    font-weight: 700;
}

.pt-related-carousel .swiper-button-prev:hover,
.pt-related-carousel .swiper-button-next:hover {
    background: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #fff;
}

.pt-related-carousel .swiper-button-prev {
    left: 0;
}

.pt-related-carousel .swiper-button-next {
    right: 0;
}

/* Compact card variant for carousels */
.pt-product-card--compact .pt-product-card__info {
    padding: 10px 12px;
}

.pt-product-card--compact .pt-product-card__name {
    font-size: 13px;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 767px) {
    .pt-related-carousel {
        padding: 0 30px;
    }
}

/* --- Responsive: stack on mobile --- */
@media (max-width: 991px) {
    .pt-product-page .product.media,
    .pt-product-page .product-info-main {
        float: none !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .pt-product-page .page-title-wrapper.product .page-title {
        font-size: 1.25rem;
    }

    .pt-product-page .product-info-price .price {
        font-size: 1.25rem;
    }

    .pt-product-page .product.info.detailed {
        margin-top: 25px;
        padding-top: 20px;
    }

    .pt-product-page .product.data.items > .item.title > .switch {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }

    .pt-product-page .product.data.items > .item.content {
        padding: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-product-page .fotorama__nav__frame--thumb,
    .pt-product-page .product-reviews-summary .reviews-actions a,
    .pt-product-page .swatch-option,
    .pt-addtocart__qty-btn,
    .pt-product-page .product-addto-links .action,
    .pt-product-page .product.data.items > .item.title > .switch {
        transition: none;
    }
}

/* ================================================================
   16. PRODUCT PAGE TYPE 2 — FULL WIDTH  (PORTO-014)
   ================================================================
   Modifier: .pt-product-page--fullwidth
   Wider container (1600px) and 60 / 40 gallery-info split.
   All base Type 1 styles apply; only overrides listed here.
   ================================================================ */

/* --- Wider container --- */
.pt-product-page--fullwidth .page-main {
    max-width: var(--pt-container-wide);
    margin-inline: auto;
    padding-inline: var(--pt-gutter);
}

/* --- 60 / 40 column ratio (3fr 2fr avoids gap overflow) --- */
.pt-product-page--fullwidth .columns .column.main {
    grid-template-columns: 3fr 2fr;
}

/* --- Tabs + related blocks span full grid width --- */
.pt-product-page--fullwidth .product.info.detailed,
.pt-product-page--fullwidth .block.related,
.pt-product-page--fullwidth .block.upsell,
.pt-product-page--fullwidth .block.crosssell {
    grid-column: 1 / -1;
}

/* prefers-reduced-motion is inherited from base .pt-product-page (Section 15) */

/* --- Mid-range: revert to Type 1 ratio on laptops --- */
@media (max-width: 1400px) {
    .pt-product-page--fullwidth .columns .column.main {
        grid-template-columns: 11fr 9fr;
    }
}

/* --- Mobile: single-column stack --- */
@media (max-width: 991px) {
    .pt-product-page--fullwidth .page-main {
        max-width: 100%;
    }

    .pt-product-page--fullwidth .columns .column.main {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   17. PRODUCT PAGE TYPE 3 — STICKY RIGHT INFO  (PORTO-015)
   ================================================================
   Modifier: .pt-product-page--sticky
   Gallery shows all images stacked; info column is position: sticky.
   When info is taller than viewport the JS widget adds
   .pt-product-info--overflow to disable sticky.
   ================================================================ */

/*
 * Sticky requires no overflow: hidden/auto on ancestors.
 * Magento Luma may set overflow on .column.main; override here.
 */
.pt-product-page--sticky .columns .column.main {
    overflow: visible;
}

/* --- Info column sticks below the header --- */
.pt-product-page--sticky .product-info-main {
    position: sticky;
    top: calc(var(--pt-header-height) + var(--pt-nav-height) + 20px);
    align-self: start;
    max-height: calc(100vh - var(--pt-header-height) - var(--pt-nav-height) - 40px);
    overflow-y: auto;
}

/* --- Disable sticky when info overflows viewport (set by JS) --- */
.pt-product-page--sticky .product-info-main.pt-product-info--overflow {
    position: static;
    max-height: none;
    overflow-y: visible;
}

/* --- Gallery: show all images stacked, hide Fotorama nav ---
 * Fotorama sets inline height via JS, so !important is needed.
 */
.pt-product-page--sticky .fotorama__nav-wrap {
    display: none !important;
}

.pt-product-page--sticky .fotorama__stage {
    max-height: none !important;
    height: auto !important;
}

/* --- Tabs + blocks span full grid width --- */
.pt-product-page--sticky .product.info.detailed,
.pt-product-page--sticky .block.related,
.pt-product-page--sticky .block.upsell,
.pt-product-page--sticky .block.crosssell {
    grid-column: 1 / -1;
}

/* --- Responsive: no sticky on mobile --- */
@media (max-width: 991px) {
    .pt-product-page--sticky .columns .column.main {
        overflow: visible;
        grid-template-columns: 1fr;
    }

    .pt-product-page--sticky .product-info-main {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .pt-product-page--sticky .fotorama__nav-wrap {
        display: block !important;
    }

    .pt-product-page--sticky .fotorama__stage {
        max-height: 600px !important;
        height: auto !important;
    }
}

/* ================================================================
   18. PRODUCT PAGE TYPE 4 — VERTICAL THUMBNAILS  (PORTO-016)
   ================================================================
   Modifier: .pt-product-page--vertical-thumbs
   Repositions Fotorama's thumbnail navigation to a vertical strip
   on the left side of the main image.  80px wide, scrollable if
   more than ~5 thumbnails.

   Fotorama sets inline styles (height, width, transform) via JS.
   !important overrides are required where we fight inline styles.
   Mobile (<992px): falls back to default horizontal thumbnails.

   prefers-reduced-motion inherited from base Section 15.
   ================================================================ */

/* --- Gallery container: relative for absolute nav strip --- */
.pt-product-page--vertical-thumbs .product.media .fotorama-item,
.pt-product-page--vertical-thumbs .product.media .fotorama {
    position: relative;
}

/* --- Thumbnail nav: vertical strip on the left ---
 * Uses max-height instead of bottom: 0 because the Fotorama
 * wrapper may not have an explicit height set by JS.
 */
.pt-product-page--vertical-thumbs .fotorama__nav-wrap {
    position: absolute !important;
    inset-inline-start: 0;
    top: 0;
    width: 80px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--pt-border) transparent;
}

/* --- Thumbnail frames: fixed 80x80, stacked by block flow ---
 * Avoid flexbox on .fotorama__nav to not break Fotorama's
 * translate3d coordinate system for scroll/animation.
 */
.pt-product-page--vertical-thumbs .fotorama__nav {
    width: 80px !important;
}

.pt-product-page--vertical-thumbs .fotorama__nav__frame--thumb {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 6px;
}

/* --- Main image: offset by thumbnail column + 10px gutter ---
 * Both margin and width must be overridden because Fotorama
 * calculates stage width from container width via inline styles.
 */
.pt-product-page--vertical-thumbs .fotorama__stage {
    margin-inline-start: 90px !important;
    width: calc(100% - 90px) !important;
}

/* Shift PDP badges past the thumbnail strip */
.pt-product-page--vertical-thumbs .pt-pdp-badges {
    inset-inline-start: 100px;
}

/* --- Hide Fotorama's horizontal nav arrows --- */
.pt-product-page--vertical-thumbs .fotorama__nav .fotorama__arr {
    display: none;
}

/* --- Scrollbar: Webkit (Chrome/Safari) --- */
.pt-product-page--vertical-thumbs .fotorama__nav-wrap::-webkit-scrollbar {
    width: 3px;
}

.pt-product-page--vertical-thumbs .fotorama__nav-wrap::-webkit-scrollbar-track {
    background-color: transparent;
}

.pt-product-page--vertical-thumbs .fotorama__nav-wrap::-webkit-scrollbar-thumb {
    background-color: var(--pt-border);
    border-radius: 3px;
}

/* --- Tabs + blocks span full grid width --- */
.pt-product-page--vertical-thumbs .product.info.detailed,
.pt-product-page--vertical-thumbs .block.related,
.pt-product-page--vertical-thumbs .block.upsell,
.pt-product-page--vertical-thumbs .block.crosssell {
    grid-column: 1 / -1;
}

/* --- Responsive: revert to horizontal thumbnails on mobile --- */
@media (max-width: 991px) {
    .pt-product-page--vertical-thumbs .fotorama__nav-wrap {
        position: static !important;
        width: auto;
        max-height: none;
        overflow-y: hidden;
        overflow-x: auto;
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    .pt-product-page--vertical-thumbs .fotorama__nav {
        display: block !important;
        width: auto !important;
    }

    .pt-product-page--vertical-thumbs .fotorama__nav__frame--thumb {
        display: inline-block !important;
        margin-bottom: 0;
    }

    .pt-product-page--vertical-thumbs .fotorama__stage {
        margin-inline-start: 0 !important;
        width: 100% !important;
    }
}

/* ================================================================
   19. PRODUCT TABS — 4 STYLES  (PORTO-017)
   ================================================================
   Modifier classes on .product.info.detailed:
     .pt-tabs--horizontal  — row of tabs (default, extends Section 15)
     .pt-tabs--vertical    — tabs stacked left (200px), content right
     .pt-tabs--accordion   — collapsible panels, one open at a time
     .pt-tabs--sticky      — tab bar sticks below header, scroll spy
   Applied via ptProductTabs JS widget or admin ThemeConfig.
   ================================================================ */

/* ---------------------------------------------------------------
   19a. Horizontal (default) — additional polish over Section 15
   --------------------------------------------------------------- */
.pt-tabs--horizontal .product.data.items {
    border-bottom: 1px solid var(--pt-border);
}

.pt-tabs--horizontal .product.data.items > .item.title.active > .switch {
    border-bottom: 2px solid var(--pt-primary);
    margin-bottom: -1px;
}

/* ---------------------------------------------------------------
   19b. Vertical — tabs on the left, content on the right
   --------------------------------------------------------------- */
.pt-tabs--vertical .product.data.items {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    border: 1px solid var(--pt-border);
}

.pt-tabs--vertical .product.data.items > .item.title {
    display: block;
    grid-column: 1;
    margin-right: 0;
    border-bottom: 1px solid var(--pt-border);
}

.pt-tabs--vertical .product.data.items > .item.title > .switch {
    display: block;
    border: 0;
    border-inline-start: 3px solid transparent;
    background: var(--pt-bg-light);
    padding: 12px 16px;
}

.pt-tabs--vertical .product.data.items > .item.title.active > .switch {
    border-inline-start-color: var(--pt-primary);
    background: var(--pt-bg);
    color: var(--pt-heading);
}

.pt-tabs--vertical .product.data.items > .item.content {
    grid-column: 2;
    grid-row: 1 / -1;
    border: 0;
    border-inline-start: 1px solid var(--pt-border);
    padding: 20px;
}

/* ---------------------------------------------------------------
   19c. Accordion — collapsible panels
   --------------------------------------------------------------- */
.pt-tabs--accordion .product.data.items > .item.title {
    display: block;
    margin-right: 0;
}

.pt-tabs--accordion .product.data.items > .item.title > .switch {
    display: block;
    border: 1px solid var(--pt-border);
    border-bottom: 0;
    padding: 12px 16px;
    padding-inline-end: 40px;
    position: relative;
    cursor: pointer;
}

/* Chevron indicator */
.pt-tabs--accordion .product.data.items > .item.title > .switch::after {
    content: '';
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}

.pt-tabs--accordion .product.data.items > .item.title.active > .switch::after {
    transform: translateY(-30%) rotate(-135deg);
}

.pt-tabs--accordion .product.data.items > .item.title.active > .switch {
    background: var(--pt-bg);
    border-bottom: 0;
}

.pt-tabs--accordion .product.data.items > .item.content {
    border: 1px solid var(--pt-border);
    border-top: 0;
    margin-bottom: 0;
}

/* Last panel: bottom border */
.pt-tabs--accordion .product.data.items > .item.title:last-child > .switch,
.pt-tabs--accordion .product.data.items > .item.content:last-child {
    border-bottom: 1px solid var(--pt-border);
}

/* ---------------------------------------------------------------
   19d. Sticky — JS-generated clone bar (pt-tabs__sticky-bar)
   --------------------------------------------------------------- */
.pt-tabs--sticky .product.data.items {
    border-bottom: 1px solid var(--pt-border);
}

.pt-tabs--sticky .product.data.items > .item.title.active > .switch {
    border-bottom: 2px solid var(--pt-primary);
    margin-bottom: -1px;
}

/* Cloned sticky bar appended to <body> by ptProductTabs widget */
.pt-tabs__sticky-bar {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.pt-tabs__sticky-bar .switch {
    display: inline-block;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--pt-text);
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pt-tabs__sticky-bar .switch:hover {
    color: var(--pt-primary);
}

.pt-tabs__sticky-bar .switch.active {
    color: var(--pt-primary);
    border-bottom-color: var(--pt-primary);
}

/* ---------------------------------------------------------------
   19e. Responsive — accordion fallback on mobile
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Vertical tabs collapse to single column on mobile */
    .pt-tabs--vertical .product.data.items {
        grid-template-columns: 1fr;
    }

    .pt-tabs--vertical .product.data.items > .item.content {
        grid-column: 1;
        grid-row: auto;
        border-inline-start: 0;
        border-top: 1px solid var(--pt-border);
    }

    /* Sticky bar hidden on small screens */
    .pt-tabs__sticky-bar {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-tabs--accordion .product.data.items > .item.title > .switch::after,
    .pt-tabs__sticky-bar .switch {
        transition: none;
    }
}

/* ===================================================================
   20. FILTER PRODUCTS — WIDGET DISPLAY MODES  (PORTO-030)
   ===================================================================
   Styles for the EcommPaaS_FilterProducts module templates:
   carousel, grid, sidebar list, compact list.
   =================================================================== */

/* ---------------------------------------------------------------
   20a. Shared
   --------------------------------------------------------------- */
.pt-filter-products {
    margin-bottom: 40px;
}

/* ---------------------------------------------------------------
   20b. Grid display — configurable columns via CSS custom property
   --------------------------------------------------------------- */
.pt-filter-grid {
    display: grid;
    grid-template-columns: repeat(var(--pt-grid-cols, 4), 1fr);
    gap: 20px;
}

@media (max-width: 991px) {
    .pt-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .pt-filter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 479px) {
    .pt-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   20c. Carousel — overflow & nav
   --------------------------------------------------------------- */
.pt-product-carousel {
    overflow: hidden;
    position: relative;
    padding-bottom: 10px;
}

.pt-product-carousel .swiper-button-prev,
.pt-product-carousel .swiper-button-next {
    position: absolute;
    top: -45px;
    z-index: 10;
    width: 36px;
    height: 36px;
    background: #0088cc;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background 0.2s ease;
}

.pt-product-carousel:hover .swiper-button-prev,
.pt-product-carousel:hover .swiper-button-next,
.pt-product-carousel:focus-within .swiper-button-prev,
.pt-product-carousel:focus-within .swiper-button-next {
    opacity: 1;
}

.pt-product-carousel .swiper-button-prev {
    left: auto;
    right: 46px;
}

.pt-product-carousel .swiper-button-next {
    right: 5px;
}

.pt-product-carousel .swiper-button-prev:hover,
.pt-product-carousel .swiper-button-next:hover {
    background: #006699;
    color: #fff;
}

.pt-product-carousel .swiper-button-prev::after,
.pt-product-carousel .swiper-button-next::after {
    font-size: 14px;
    color: #fff;
}

/* ---------------------------------------------------------------
   20d. Sidebar list
   --------------------------------------------------------------- */
.pt-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-sidebar-list__item {
    border-bottom: 1px solid var(--pt-border, #e0e0e0);
}

.pt-sidebar-list__item:last-child {
    border-bottom: 0;
}

.pt-sidebar-list__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none;
    color: inherit;
}

.pt-sidebar-list__link:hover {
    text-decoration: none;
}

.pt-sidebar-list__link:hover .pt-sidebar-list__name {
    color: var(--pt-primary, #2879fe);
}

.pt-sidebar-list__image {
    flex-shrink: 0;
    width: 80px;
}

.pt-sidebar-list__image img {
    width: 100%;
    height: auto;
    display: block;
}

.pt-sidebar-list__info {
    flex: 1;
    min-width: 0;
}

.pt-sidebar-list__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@supports (-webkit-line-clamp: 2) {
    .pt-sidebar-list__name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
    }
}

.pt-sidebar-list__price {
    font-size: 14px;
    margin-top: 4px;
}

.pt-sidebar-list__price .price {
    font-weight: 700;
    color: var(--pt-primary, #2879fe);
}

/* Small stars for sidebar */
.pt-product-card__stars--sm {
    width: 60px;
    height: 10px;
}

/* ---------------------------------------------------------------
   20e. Compact list
   --------------------------------------------------------------- */
.pt-compact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-compact-list__item {
    border-bottom: 1px solid var(--pt-border, #e0e0e0);
}

.pt-compact-list__item:last-child {
    border-bottom: 0;
}

.pt-compact-list__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: inherit;
}

.pt-compact-list__link:hover {
    text-decoration: none;
}

.pt-compact-list__link:hover .pt-compact-list__name {
    color: var(--pt-primary, #2879fe);
}

.pt-compact-list__image {
    flex-shrink: 0;
    width: 50px;
}

.pt-compact-list__image img {
    width: 100%;
    height: auto;
    display: block;
}

.pt-compact-list__info {
    flex: 1;
    min-width: 0;
}

.pt-compact-list__name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-compact-list__price {
    font-size: 13px;
    margin-top: 2px;
}

.pt-compact-list__price .price {
    font-weight: 700;
    color: var(--pt-primary, #2879fe);
}

/* ===================================================================
   21. MEGA MENU — DROPDOWN STYLES  (PORTO-031)
   ===================================================================
   Works alongside mega-menu.js (PORTO-004). The JS adds is-open /
   is-active classes; CSS handles all layout and visual appearance.
   =================================================================== */

/* ---------------------------------------------------------------
   21a. Navigation container
   --------------------------------------------------------------- */
.pt-megamenu {
    position: relative;
}

.pt-nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.pt-nav__item {
    position: relative;
}

.pt-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: var(--pt-nav-height, 48px);
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text, #333);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.pt-nav__link:hover,
.pt-nav__item.is-active > .pt-nav__link {
    color: var(--pt-primary, #2879fe);
}

.pt-nav__link--dropdown::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.15s ease;
}

.pt-nav__item.is-active > .pt-nav__link--dropdown::after {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------
   21b. Dropdown containers
   --------------------------------------------------------------- */
.pt-megamenu__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--pt-white, #fff);
    border: 1px solid var(--pt-border, #e0e0e0);
    border-top: 3px solid var(--pt-primary, #2879fe);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 200px;
}

.pt-megamenu__dropdown.is-open {
    display: block;
}

/* Full-width dropdown */
.pt-megamenu__dropdown--fullwidth {
    left: 0;
    right: 0;
    width: 100%;
}

/* Static/fixed-width dropdown — width set via data-width or CSS var */
.pt-megamenu__dropdown--static {
    /* width is set inline by JS from data-width attribute */
}

/* Classic dropdown */
.pt-megamenu__dropdown--classic {
    min-width: 220px;
}

/* ---------------------------------------------------------------
   21c. Classic dropdown — simple list
   --------------------------------------------------------------- */
.pt-megamenu__dropdown--classic ul {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.pt-megamenu__dropdown--classic ul li {
    position: relative;
}

.pt-megamenu__dropdown--classic ul a {
    display: block;
    padding: 8px 20px;
    font-size: 14px;
    color: var(--pt-text, #333);
    text-decoration: none;
    transition: background 0.1s ease, color 0.1s ease;
}

.pt-megamenu__dropdown--classic ul a:hover {
    background: var(--pt-bg-light, #f5f5f5);
    color: var(--pt-primary, #2879fe);
}

/* Nested list inside classic */
.pt-megamenu__dropdown--classic ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    min-width: 200px;
    background: var(--pt-white, #fff);
    border: 1px solid var(--pt-border, #e0e0e0);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
}

.pt-megamenu__dropdown--classic ul li:hover > ul {
    display: block;
}

/* ---------------------------------------------------------------
   21d. Column layout — fullwidth / static types
   --------------------------------------------------------------- */
.pt-megamenu__top {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pt-border, #e0e0e0);
}

.pt-megamenu__content {
    display: flex;
    padding: 20px;
    gap: 20px;
}

.pt-megamenu__aside {
    flex-shrink: 0;
    width: 200px;
}

.pt-megamenu__columns {
    display: flex;
    flex: 1;
    gap: 16px;
    flex-wrap: wrap;
}

.pt-megamenu__column {
    flex: 1;
    min-width: 140px;
}

.pt-megamenu__column-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pt-border, #e0e0e0);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pt-megamenu__column-title a {
    color: var(--pt-text, #333);
    text-decoration: none;
}

.pt-megamenu__column-title a:hover {
    color: var(--pt-primary, #2879fe);
}

.pt-megamenu__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pt-megamenu__links a {
    font-size: 13px;
    color: var(--pt-text-muted, #666);
    text-decoration: none;
    transition: color 0.15s ease;
}

.pt-megamenu__links a:hover {
    color: var(--pt-primary, #2879fe);
}

/* ---------------------------------------------------------------
   21e. Category icon
   --------------------------------------------------------------- */
.pt-nav__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   21f. Label badges (new / hot / sale)
   --------------------------------------------------------------- */
.pt-megamenu__label {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 2px;
    line-height: 1.4;
    vertical-align: middle;
    color: #fff;
}

.pt-megamenu__label--new  { background: #4caf50; }
.pt-megamenu__label--hot  { background: #f44336; }
.pt-megamenu__label--sale { background: var(--pt-primary, #2879fe); }

/* ---------------------------------------------------------------
   21g. Mobile — off-canvas panel (managed by mega-menu.js)
   --------------------------------------------------------------- */
.pt-megamenu--mobile {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 90vw);
    background: var(--pt-white, #fff);
    z-index: 10000;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

.pt-megamenu--mobile.is-open {
    transform: translateX(0);
}

.pt-megamenu--mobile .pt-nav__list {
    flex-direction: column;
}

.pt-megamenu--mobile .pt-nav__item {
    border-bottom: 1px solid var(--pt-border, #e0e0e0);
}

.pt-megamenu--mobile .pt-nav__link {
    height: auto;
    padding: 14px 20px;
    justify-content: space-between;
    font-size: 15px;
}

.pt-megamenu--mobile .pt-megamenu__dropdown {
    position: static;
    border: 0;
    box-shadow: none;
    background: var(--pt-bg-light, #f5f5f5);
    padding: 0;
    min-width: 0;
    width: 100%;
    border-top: 1px solid var(--pt-border, #e0e0e0);
}

.pt-megamenu--mobile .pt-megamenu__content {
    flex-direction: column;
    padding: 12px 20px;
    gap: 12px;
}

.pt-megamenu--mobile .pt-megamenu__columns {
    flex-direction: column;
}

.pt-megamenu--mobile .pt-megamenu__column-title {
    font-size: 13px;
}

.pt-megamenu--mobile .pt-megamenu__aside {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .pt-megamenu--mobile {
        transition: none;
    }
}


/* ===================================================================
   Section 22 — Header Type 2: Centered Logo, Nav Below
   Applied when body has class .pt-header--type-2
   Layout: Row 1 topbar | Row 2 left-tools + center-logo + right-tools | Row 3 nav centered
=================================================================== */

.pt-header--type-2 .pt-header {
    border-bottom: 1px solid var(--pt-border-color, #eee);
}

.pt-header--type-2 .pt-header__inner {
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Centered logo: position in the middle via flex order */
.pt-header--type-2 .pt-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    order: 2;
}

/* Left tools group: phone + account */
.pt-header--type-2 .pt-header__tools {
    order: 3;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Move search to a left pseudo-group before logo */
.pt-header--type-2 .pt-header__search {
    order: 1;
    max-width: 280px;
}

/* Centered nav links on the nav row */
.pt-header--type-2 .pt-megamenu .pt-nav__list {
    justify-content: center;
}

/* Mobile: restore normal left layout */
@media (max-width: 991px) {
    .pt-header--type-2 .pt-header__logo {
        position: static;
        transform: none;
        order: 1;
    }
    .pt-header--type-2 .pt-header__search {
        order: 0;
    }
}


/* ===================================================================
   Section 23 — Header Type 3: Compact Single-Row (Logo Left, Nav Center, Tools Right)
   Applied when body has class .pt-header--type-3
   No topbar, single row ~70px, clean minimal look
=================================================================== */

/* Hide topbar for type 3 */
.pt-header--type-3 .pt-topbar {
    display: none;
}

/* Single-row compact header */
.pt-header--type-3 .pt-header {
    height: 70px;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.pt-header--type-3 .pt-header__inner {
    height: 70px;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Logo: shrink slightly for compact feel */
.pt-header--type-3 .pt-header__logo img {
    height: 38px;
    width: auto;
}

/* Search bar: reduce max-width for compact row */
.pt-header--type-3 .pt-header__search {
    flex: 1;
    max-width: 340px;
    margin: 0 24px;
}

/* Nav: integrated inline, centered via flex-grow */
.pt-header--type-3 .pt-megamenu {
    flex: 1;
}

.pt-header--type-3 .pt-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    gap: 0;
}

/* Remove separate nav row background/border for compact */
.pt-header--type-3 .pt-megamenu {
    background: transparent;
    border-top: none;
    box-shadow: none;
}

/* Tools: compact gap */
.pt-header--type-3 .pt-header__tools {
    gap: 8px;
}

/* Mobile: standard hamburger */
@media (max-width: 991px) {
    .pt-header--type-3 .pt-header {
        height: 60px;
    }
    .pt-header--type-3 .pt-header__inner {
        height: 60px;
    }
}


/* ===================================================================
   Section 24 — Header Type 4: Dark Header + Vertical Category Sidebar
   Applied when body has class .pt-header--type-4
   Dark background, white text/icons; homepage shows 260px left sidebar
=================================================================== */

/* Dark header background */
.pt-header--type-4 .pt-topbar,
.pt-header--type-4 .pt-header,
.pt-header--type-4 .pt-megamenu {
    background: var(--pt-bg-dark, #1a1a2e);
    color: #fff;
    border-color: rgba(255,255,255,.1);
}

/* White text/icons inside dark header */
.pt-header--type-4 .pt-topbar,
.pt-header--type-4 .pt-header a,
.pt-header--type-4 .pt-header .pt-header__tool-icon,
.pt-header--type-4 .pt-header .pt-header__tool-text {
    color: rgba(255,255,255,.85);
}

.pt-header--type-4 .pt-header a:hover,
.pt-header--type-4 .pt-header .pt-header__tool-item:hover .pt-header__tool-icon {
    color: #fff;
}

/* Dark nav links */
.pt-header--type-4 .pt-nav__link {
    color: rgba(255,255,255,.85);
}
.pt-header--type-4 .pt-nav__link:hover,
.pt-header--type-4 .pt-nav__item--active > .pt-nav__link {
    color: #fff;
    background: rgba(255,255,255,.08);
}

/* Dark search bar */
.pt-header--type-4 .pt-header__search-inner {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
}
.pt-header--type-4 .pt-header__search-input,
.pt-header--type-4 .pt-header__search-cat {
    color: #fff;
    background: transparent;
}
.pt-header--type-4 .pt-header__search-input::placeholder {
    color: rgba(255,255,255,.5);
}

/* Hamburger lines — white */
.pt-header--type-4 .pt-header__hamburger-line {
    background: #fff;
}

/* ---- Vertical Category Sidebar (homepage only) ---- */
/* Sidebar is visible on homepage via .cms-index-index body class */
.pt-header--type-4.cms-index-index .pt-page-wrapper {
    display: flex;
    align-items: flex-start;
}

.pt-category-sidebar {
    display: none; /* hidden by default */
    width: 260px;
    flex-shrink: 0;
    background: var(--pt-bg-dark, #1a1a2e);
    min-height: calc(100vh - 200px);
    padding: 20px 0;
}

.pt-header--type-4.cms-index-index .pt-category-sidebar {
    display: block;
}

.pt-category-sidebar__title {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 8px;
}

.pt-category-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-category-sidebar__item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(255,255,255,.8);
    font-size: 14px;
    transition: background .15s, color .15s;
}

.pt-category-sidebar__item a:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.pt-category-sidebar__item a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pt-primary, #0088cc);
    flex-shrink: 0;
}

/* Sidebar content area next to sidebar */
.pt-header--type-4.cms-index-index .pt-main-content {
    flex: 1;
    min-width: 0;
}

@media (max-width: 991px) {
    .pt-header--type-4.cms-index-index .pt-page-wrapper {
        display: block;
    }
    .pt-header--type-4.cms-index-index .pt-category-sidebar {
        display: none; /* hide on mobile */
    }
    .pt-header--type-4 .pt-topbar,
    .pt-header--type-4 .pt-header,
    .pt-header--type-4 .pt-megamenu {
        background: var(--pt-bg-dark, #1a1a2e);
    }
}


/* ===================================================================
   Section 25 — Header Type 5: Full-Width Header + All Categories Dropdown
   Applied when body has class .pt-header--type-5
   Row 3 nav: prominent "ALL CATEGORIES ▼" button (260px left) + nav links right
=================================================================== */

/* Wide search on Row 2 */
.pt-header--type-5 .pt-header__search {
    flex: 1;
    max-width: 560px;
}

/* Nav row layout: categories button + nav links */
.pt-header--type-5 .pt-megamenu .pt-nav__list {
    position: relative;
    padding-left: 0;
}

/* ALL CATEGORIES button */
.pt-cat-dropdown {
    display: none; /* shown only for type-5 */
    position: relative;
}

.pt-header--type-5 .pt-cat-dropdown {
    display: flex;
    align-items: center;
}

.pt-cat-dropdown__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 46px;
    background: var(--pt-primary, #0088cc);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    width: 260px;
    justify-content: space-between;
    transition: background .2s;
}

.pt-cat-dropdown__btn:hover {
    background: var(--pt-primary-dark, #006fa3);
}

.pt-cat-dropdown__btn-arrow {
    font-size: 10px;
    transition: transform .2s;
}

.pt-cat-dropdown[aria-expanded="true"] .pt-cat-dropdown__btn-arrow {
    transform: rotate(180deg);
}

/* Category vertical dropdown panel */
.pt-cat-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 260px;
    background: #fff;
    border: 1px solid var(--pt-border-color, #e8e8e8);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 200;
    display: none;
    padding: 8px 0;
}

.pt-cat-dropdown[aria-expanded="true"] .pt-cat-dropdown__panel {
    display: block;
}

.pt-cat-dropdown__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-cat-dropdown__panel li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: 14px;
    color: var(--pt-text, #333);
    transition: background .15s, color .15s;
}

.pt-cat-dropdown__panel li a:hover {
    background: var(--pt-bg-light, #f8f8f8);
    color: var(--pt-primary, #0088cc);
}

/* Nav row flex layout for type 5 */
.pt-header--type-5 .pt-megamenu > .pt-container,
.pt-header--type-5 .pt-megamenu {
    display: flex;
    align-items: center;
}

.pt-header--type-5 .pt-megamenu .pt-nav__list {
    flex: 1;
    justify-content: flex-start;
    padding-left: 16px;
}

@media (max-width: 991px) {
    .pt-header--type-5 .pt-cat-dropdown {
        display: none;
    }
}


/* ===================================================================
   Section 26 — Sticky Header Behavior (PORTO-044)
   Configurable scroll-direction-aware sticky header.
   JS (sticky-header.js) adds/removes .pt-header--sticky-visible on <body>.
   Enabled when body has class .pt-sticky-header.
   Compact sticky: 54px height, logo + nav + cart only.
=================================================================== */

/* Sticky header container: always fixed, hidden by default */
.pt-sticky-header .pt-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    height: 54px;
    display: flex;
    align-items: center;
    transform: translateY(-100%);
    transition: transform .2s ease;
    will-change: transform;
}

/* Slide in when JS adds this class */
.pt-sticky-header.pt-header--sticky-visible .pt-sticky-bar {
    transform: translateY(0);
}

.pt-sticky-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    max-width: var(--pt-container-max, 1200px);
    margin: 0 auto;
    gap: 16px;
}

/* Show logo in sticky when .pt-sticky-logo is on body */
.pt-sticky-bar__logo {
    display: none;
}
.pt-sticky-logo .pt-sticky-bar__logo {
    display: block;
    flex-shrink: 0;
}
.pt-sticky-bar__logo img {
    height: 32px;
    width: auto;
}

/* Compact nav in sticky bar */
.pt-sticky-bar__nav {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.pt-sticky-bar__nav-link {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-text, #333);
    white-space: nowrap;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.pt-sticky-bar__nav-link:hover {
    background: var(--pt-bg-light, #f5f5f5);
    color: var(--pt-primary, #0088cc);
}

/* Cart icon in sticky */
.pt-sticky-bar__cart {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--pt-text, #333);
    flex-shrink: 0;
}
.pt-sticky-bar__cart:hover {
    color: var(--pt-primary, #0088cc);
}

/* Dark header type 4 sticky override */
.pt-header--type-4 .pt-sticky-bar {
    background: var(--pt-bg-dark, #1a1a2e);
    color: #fff;
}
.pt-header--type-4 .pt-sticky-bar__nav-link {
    color: rgba(255,255,255,.85);
}
.pt-header--type-4 .pt-sticky-bar__nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}
.pt-header--type-4 .pt-sticky-bar__cart {
    color: rgba(255,255,255,.85);
}

/* Mobile sticky: only when .pt-mobile-sticky on body */
@media (max-width: 991px) {
    .pt-sticky-header .pt-sticky-bar {
        display: none; /* hidden on mobile by default */
    }
    .pt-mobile-sticky .pt-sticky-header .pt-sticky-bar,
    .pt-mobile-sticky.pt-sticky-header .pt-sticky-bar {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-sticky-header .pt-sticky-bar {
        transition: none;
    }
}

/* =================================================================
   Section 27 — Quick View Modal (PORTO-050)
   Data-attribute driven; no AJAX needed.
   JS inserts modal HTML once; product data from data-quick-view attr.
=================================================================== */

/* Backdrop */
.pt-quickview-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 1100;
    cursor: pointer;
}
.pt-quickview-backdrop.pt-is-open {
    display: block;
}

/* Modal container */
.pt-quickview-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.95);
    z-index: 1101;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow: hidden;
    transition: transform .22s ease, opacity .22s ease;
    opacity: 0;
}
.pt-quickview-modal.pt-is-open {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Close button */
.pt-quickview__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--pt-border, #e8e8e8);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pt-text-light, #666);
    transition: background .15s, color .15s;
    z-index: 1;
}
.pt-quickview__close:hover {
    background: var(--pt-bg-light, #f5f5f5);
    color: var(--pt-text, #333);
}

/* Body layout */
.pt-quickview__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow-y: auto;
    flex: 1;
}

/* Left — image */
.pt-quickview__image {
    background: var(--pt-bg-light, #f9f9f9);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    padding: 24px;
}
.pt-quickview__image img {
    max-width: 100%;
    max-height: 440px;
    object-fit: contain;
}
.pt-quickview__image-placeholder {
    width: 100%;
    height: 320px;
    background: var(--pt-bg-light, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pt-text-light, #aaa);
}

/* Right — info */
.pt-quickview__info {
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pt-quickview__name {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}
.pt-quickview__name a {
    color: inherit;
    text-decoration: none;
}
.pt-quickview__name a:hover {
    color: var(--pt-primary, #0088cc);
}

/* Price */
.pt-quickview__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.pt-quickview__price-final {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pt-price, #333);
}
.pt-quickview__price-regular {
    font-size: 1rem;
    color: var(--pt-text-light, #999);
    text-decoration: line-through;
}
.pt-quickview__price-discount {
    font-size: 0.85rem;
    background: var(--pt-sale, #e74c3c);
    color: #fff;
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 600;
}

/* Short description */
.pt-quickview__desc {
    font-size: 0.9rem;
    color: var(--pt-text-light, #666);
    line-height: 1.6;
    margin: 0;
    max-height: 96px;
    overflow: hidden;
}

/* ATC area */
.pt-quickview__atc {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: auto;
    flex-wrap: wrap;
}
.pt-quickview__atc-btn {
    flex: 1;
    min-width: 140px;
}
.pt-quickview__view-link {
    font-size: 0.85rem;
    color: var(--pt-text-light, #888);
    text-decoration: underline;
    white-space: nowrap;
}
.pt-quickview__view-link:hover {
    color: var(--pt-primary, #0088cc);
}

/* Responsive */
@media (max-width: 767px) {
    .pt-quickview__body {
        grid-template-columns: 1fr;
    }
    .pt-quickview__image {
        min-height: 240px;
    }
    .pt-quickview__info {
        padding: 24px 20px 20px;
    }
}

/* =================================================================
   Section 28 — AJAX Add to Cart Toast Notification (PORTO-051)
   Slides in from the top-right on successful cart add.
   Controlled by pt-is-visible class toggled by ajax-cart.js.
=================================================================== */

.pt-atc-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1200;
    background: #fff;
    border: 1px solid var(--pt-border, #e8e8e8);
    border-left: 4px solid var(--pt-success, #27ae60);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 340px;
    width: calc(100vw - 48px);
    transform: translateY(calc(-100% - 32px));
    opacity: 0;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
    pointer-events: none;
}
.pt-atc-toast.pt-is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Check icon */
.pt-atc-toast__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--pt-success, #27ae60);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Message text */
.pt-atc-toast__text {
    flex: 1;
    min-width: 0;
}
.pt-atc-toast__msg {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text, #333);
}
.pt-atc-toast__name {
    display: block;
    font-size: 12px;
    color: var(--pt-text-light, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* View Cart link */
.pt-atc-toast__link {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--pt-primary, #0088cc);
    white-space: nowrap;
    text-decoration: none;
}
.pt-atc-toast__link:hover {
    text-decoration: underline;
}

/* Close button */
.pt-atc-toast__close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--pt-text-light, #aaa);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-atc-toast__close:hover {
    color: var(--pt-text, #333);
}

/* ATC button loading state */
.pt-product-card__cart.pt-loading,
.pt-quickview__atc-btn.pt-loading {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* =============================================================
 * Section 29 — Newsletter Popup Modal (PORTO-054)
 * ============================================================= */

/* Backdrop */
.pt-newsletter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
}
.pt-newsletter-backdrop.pt-is-open {
    display: block;
}

/* Modal */
.pt-newsletter-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    background: #fff;
    border-radius: 6px;
    width: 90%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
}
.pt-newsletter-modal.pt-is-open {
    display: block;
}

/* Close button */
.pt-newsletter__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    color: var(--pt-text-light, #aaa);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.pt-newsletter__close:hover {
    color: var(--pt-text, #333);
}

/* Body: two-column layout (image + info) */
.pt-newsletter__body {
    display: flex;
    align-items: stretch;
}
.pt-newsletter__image {
    flex: 0 0 200px;
    background: var(--pt-primary, #0088cc) no-repeat center/cover;
    border-radius: 6px 0 0 6px;
    min-height: 260px;
}
.pt-newsletter__image:empty {
    display: none; /* hide when no image configured */
}
.pt-newsletter__info {
    flex: 1;
    padding: 40px 32px 32px;
}

/* Heading */
.pt-newsletter__title {
    font-family: var(--pt-font-heading, Poppins);
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--pt-heading-color, #222);
    padding-right: 24px; /* clear X button */
}
.pt-newsletter__subtitle {
    font-size: 0.9rem;
    color: var(--pt-text-light, #777);
    margin: 0 0 20px;
}

/* Form */
.pt-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pt-newsletter__email {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--pt-border, #ddd);
    border-radius: 4px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.pt-newsletter__email:focus {
    border-color: var(--pt-primary, #0088cc);
}
.pt-newsletter__submit {
    width: 100%;
}

/* "Don't show again" row */
.pt-newsletter__dismiss {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--pt-text-light, #888);
}
.pt-newsletter__dismiss-check {
    margin: 0;
    accent-color: var(--pt-primary, #0088cc);
}

/* Responsive: stack image above on mobile */
@media (max-width: 560px) {
    .pt-newsletter__body {
        flex-direction: column;
    }
    .pt-newsletter__image {
        flex: 0 0 140px;
        border-radius: 6px 6px 0 0;
        min-height: 140px;
    }
    .pt-newsletter__info {
        padding: 28px 20px 24px;
    }
}

/* =============================================================
 * Section 30 — Countdown Timer Widget (PORTO-055)
 * ============================================================= */

.pt-countdown {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pt-countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    background: var(--pt-primary, #0088cc);
    color: #fff;
    border-radius: 4px;
    padding: 8px 10px 6px;
    text-align: center;
}

.pt-countdown__item span:first-child {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    font-family: var(--pt-font-heading, Poppins);
    display: block;
}

.pt-countdown__item span:last-child {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    margin-top: 3px;
    display: block;
}

/* Separator colons between items */
.pt-countdown__sep {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pt-primary, #0088cc);
    padding-top: 6px;
    line-height: 1;
}

@media (max-width: 480px) {
    .pt-countdown__item {
        min-width: 46px;
        padding: 6px 8px 5px;
    }
    .pt-countdown__item span:first-child {
        font-size: 1.3rem;
    }
}

/* =============================================================
 * Section 31 — LAZY IMAGE LOADING (PORTO-056)
 * IntersectionObserver fade-in for product card images,
 * banners, and slide images. JS adds .pt-lazy on DOMReady,
 * then adds .pt-loaded when the image enters the viewport.
 * Image containers show a light placeholder while loading.
 * ============================================================= */

/**
 * F-BUG-05 (FINAL FIX): .pt-lazy must NOT hide the image.
 *
 * History: we initially used opacity:0 + IntersectionObserver fade-in.
 * That broke in three ways:
 *   1. Chromium 121+ defers decode of <img loading="lazy"> with opacity:0,
 *      so the load event never fires and the image stays invisible.
 *   2. IntersectionObserver callbacks are throttled or never delivered
 *      when the tab is backgrounded, so the fade-in never triggers.
 *   3. On the test tenant, even foregrounded tabs failed to receive
 *      IO callbacks reliably (suspected Chrome bug with very small
 *      product card images at certain layout phases).
 *
 * Resolution: keep the JS widget (it still adds loading="lazy" attr
 * for native browser deferral), but make .pt-lazy a no-op visually.
 * The fade-in animation is dropped — pixel parity with Porto Demo 1
 * does not require it (Porto's own product cards have no fade-in).
 */
.pt-lazy {
    opacity: 1;
}

/**
 * Loaded state: smooth fade-in once image is in viewport and loaded.
 * Removing .pt-lazy in markLoaded() prevents CSS re-hiding the image.
 */
.pt-loaded {
    opacity: 1;
}

/**
 * Placeholder background for image containers while loading.
 */
.pt-banner,
.pt-slide {
    background-color: var(--pt-bg-light, #f5f5f5);
}

/** Disable lazy-fade transition for users who prefer reduced motion.
 *  Also reveal images immediately so they are never invisible. */
@media (prefers-reduced-motion: reduce) {
    .pt-lazy {
        opacity: 1;
        transition: none;
    }
    .pt-loaded {
        transition: none;
    }
}

/* =============================================================
 * Section 32 — HOVER SWAP IMAGE (PORTO-058)
 * Reveals a second product image on card hover.
 * The hover image (.pt-product-card__img-hover) is positioned
 * absolutely over the primary image and transitions in on hover.
 * JS (lazy-images.js) excludes hover images from its selector
 * so .pt-lazy/.pt-loaded never interfere with hover-swap opacity.
 * Only activates on devices with a precise pointer (desktop) to
 * avoid confusing double-tap behaviour on touch screens.
 * ============================================================= */

/** Hover image: stacked over the primary image, hidden by default.
 *  .pt-product-card__image already has position:relative + overflow:hidden
 *  from Section 9a — no need to redeclare here. */
.pt-product-card__img-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
    /* pointer-events off so hover-action buttons are always clickable */
    pointer-events: none;
    z-index: 1;
}

/** Hover-swap only on devices with fine pointer (mouse/trackpad, not touch) */
@media (hover: hover) and (pointer: fine) {
    .pt-product-card:hover .pt-product-card__img-hover {
        opacity: 1;
    }
    /** Fade out the primary image slightly to make the swap feel natural */
    .pt-product-card:hover .pt-product-card__image > a > img:not(.pt-product-card__img-hover) {
        opacity: 0.15;
        transition: opacity 0.35s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-product-card__img-hover {
        transition: none;
    }
}

/* =============================================================
 * Section 33 — Product Grid Type Variations (PORTO-059)
 *
 * Ten CSS-only card layout variants applied via .pt-grid-type-{N}
 * on the .pt-product-grid wrapper. Same HTML for all types.
 *
 * Type 1 — Default (Image top, info below, actions on hover)
 *   Already covered by base .pt-product-card styles. No overrides.
 *
 * Type 2 — Info Overlay (info slides up from bottom on card hover)
 * Type 3 — Side Info (horizontal card: image left, info right)
 * Type 4 — Minimal (image + name + price only; actions hidden)
 * Type 5 — Detailed (description, persistent actions, larger card)
 * Type 6 — Centered (text center-aligned, full-width ATC button)
 * Type 7 — Boxed (bordered card, padded image, prominent badges)
 * Type 8 — Wide (50/50 horizontal card, designed for 2-col grid)
 * Type 9 — Compact (small dense card, 5+ per row)
 * Type 10 — Magazine (first item spans 2 cols, rest are normal)
 * ============================================================= */

/* ── Type 2: Info Overlay ─────────────────────────────────── */
.pt-grid-type-2 .pt-product-card__image {
    position: relative;
    overflow: hidden;
}

.pt-grid-type-2 .pt-product-card__info {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 3;
}

.pt-grid-type-2 .pt-product-card:hover .pt-product-card__info,
.pt-grid-type-2 .pt-product-card:focus-within .pt-product-card__info {
    transform: translateY(0);
}

.pt-grid-type-2 .pt-product-card__name a,
.pt-grid-type-2 .pt-product-card__price {
    color: #fff;
}

/* Keep the card as a positioned container; overflow:hidden clips __info slide-up.
 * translateZ(0) forces GPU layer on iOS Safari where clip can break without it. */
.pt-grid-type-2 .pt-product-card {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

/* ── Type 3: Side Info ────────────────────────────────────── */
.pt-grid-type-3 .pt-product-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.pt-grid-type-3 .pt-product-card__image {
    flex: 0 0 45%;
    min-width: 0;
}

.pt-grid-type-3 .pt-product-card__info {
    flex: 1 1 0;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
}

/* Actions bar always visible in side layout */
.pt-grid-type-3 .pt-product-card__actions {
    position: static;
    opacity: 1;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

/* ── Type 4: Minimal ──────────────────────────────────────── */
.pt-grid-type-4 .pt-product-card__rating,
.pt-grid-type-4 .pt-product-card__actions,
.pt-grid-type-4 form[data-role="tocart-form"] {
    display: none;
}

.pt-grid-type-4 .pt-product-card__info {
    padding: 0.5rem 0;
}

/* ── Type 5: Detailed ─────────────────────────────────────── */
.pt-grid-type-5 .pt-product-card__actions {
    position: static;
    opacity: 1;
    transform: none;
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Reserve space for description excerpt (added via CSS content trick) */
.pt-grid-type-5 .pt-product-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pt-grid-type-5 .pt-product-card {
    height: 100%;
}

/* Override the default "hide description in grid mode" rule so Type 5 shows it.
 * Base rule specificity: (.pt-product-grid:not(...) .pt-product-card__description) = (0,3,0).
 * This selector (.pt-grid-type-5.pt-product-grid .pt-product-card__description) = (0,3,0)
 * and appears later in the file, so it wins unambiguously regardless of source order changes. */
.pt-grid-type-5.pt-product-grid .pt-product-card__description {
    /* Use -webkit-box model for line-clamp; this value also serves as display:block fallback */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    color: var(--pt-text-light, #888);
    line-height: 1.5;
    margin: 0;
}

/* ── Type 6: Centered ─────────────────────────────────────── */
.pt-grid-type-6 .pt-product-card__info {
    text-align: center;
}

.pt-grid-type-6 .pt-product-card__rating {
    justify-content: center;
}

.pt-grid-type-6 .pt-product-card__cart {
    width: 100%;
}

.pt-grid-type-6 .pt-product-card__actions {
    left: 50%;
    right: auto; /* reset base right:-50px so left:50% + translateX(-50%) centres correctly */
    transform: translateX(-50%) translateY(4px);
    width: auto;
}

.pt-grid-type-6 .pt-product-card:hover .pt-product-card__actions {
    transform: translateX(-50%) translateY(0);
}

/* ── Type 7: Boxed ────────────────────────────────────────── */
.pt-grid-type-7 .pt-product-card {
    border: 1px solid var(--pt-border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease;
}

.pt-grid-type-7 .pt-product-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.pt-grid-type-7 .pt-product-card__image {
    padding: 0.75rem;
    background: var(--pt-bg-light, #f8f8f8);
}

.pt-grid-type-7 .pt-product-card__info {
    padding: 0.75rem;
}

.pt-grid-type-7 .pt-badge {
    font-size: 0.75rem;
    padding: 0.3em 0.6em;
}

/* ── Type 8: Wide (50/50 horizontal, for 2-col grid) ─────── */
.pt-grid-type-8 .pt-product-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.pt-grid-type-8 .pt-product-card__image {
    flex: 0 0 50%;
}

.pt-grid-type-8 .pt-product-card__info {
    flex: 1 1 0;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pt-grid-type-8 .pt-product-card__actions {
    position: static;
    opacity: 1;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

/* ── Type 9: Compact ──────────────────────────────────────── */
.pt-grid-type-9 .pt-product-card__image img {
    max-height: 160px;
    object-fit: cover;
    width: 100%;
}

.pt-grid-type-9 .pt-product-card__name {
    font-size: 0.8rem;
    margin: 0.25rem 0;
}

.pt-grid-type-9 .pt-product-card__price {
    font-size: 0.85rem;
}

.pt-grid-type-9 .pt-product-card__rating {
    display: none;
}

.pt-grid-type-9 .pt-product-card__cart {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
}

/* Use more columns for compact type (override grid-cols via auto-fill) */
@media (min-width: 992px) {
    .pt-grid-type-9.pt-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ── Type 10: Magazine (first item spans 2 cols) ──────────── */
@media (min-width: 768px) {
    .pt-grid-type-10 .pt-product-grid__item:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }

    .pt-grid-type-10 .pt-product-grid__item:first-child .pt-product-card__image img {
        max-height: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pt-grid-type-10 .pt-product-grid__item:first-child .pt-product-card {
        height: 100%;
    }

    .pt-grid-type-10 .pt-product-grid__item:first-child .pt-product-card__info {
        padding: 1.25rem;
    }

    .pt-grid-type-10 .pt-product-grid__item:first-child .pt-product-card__name {
        font-size: 1.25rem;
    }
}

/* ===================================================================
   PORTO-061. CMS Pages — About, Contact, FAQ, 404
   =================================================================== */

/* ── CMS page base ──────────────────────────────────────────── */
.pt-cms-page .page-main {
    padding-top: 0;
}

.pt-container--narrow {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pt-gutter);
    padding-right: var(--pt-gutter);
}

/* ── About — Values grid ────────────────────────────────────── */
.pt-about-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.pt-about-values__item {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--pt-bg-light);
    border-radius: var(--pt-radius);
}

.pt-about-values__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.pt-about-values__item h3 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    color: var(--pt-heading);
}

.pt-about-values__item p {
    font-size: 0.9rem;
    color: var(--pt-text);
    margin: 0;
}

/* ── About — Team grid ──────────────────────────────────────── */
.pt-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.pt-team-card {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    transition: box-shadow var(--pt-transition);
}

.pt-team-card:hover {
    box-shadow: var(--pt-shadow);
}

.pt-team-card__avatar {
    font-size: 3.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.pt-team-card__name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--pt-heading);
}

.pt-team-card__role {
    font-size: 0.875rem;
    color: var(--pt-text-light);
    margin: 0;
}

/* ── Contact layout ─────────────────────────────────────────── */
.pt-contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 768px) {
    .pt-contact-layout {
        grid-template-columns: 1fr;
    }
}

.pt-contact-form-wrap .fieldset {
    margin-bottom: 1.5rem;
}

.pt-contact-info__card {
    background: var(--pt-bg-light);
    border-radius: var(--pt-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.pt-contact-info__card h3 {
    margin: 0 0 1.25rem;
    color: var(--pt-heading);
}

.pt-contact-info__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.pt-contact-info__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--pt-text);
}

.pt-contact-info__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pt-contact-map-placeholder {
    background: var(--pt-bg-light);
    border: 1px dashed var(--pt-border);
    border-radius: var(--pt-radius);
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--pt-text-light);
    gap: 0.5rem;
}

.pt-contact-map-placeholder p {
    margin: 0;
    font-size: 0.875rem;
}

/* ── FAQ — accordion ────────────────────────────────────────── */
.pt-faq-group {
    margin-bottom: 2.5rem;
}

.pt-faq-group__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pt-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--pt-primary);
}

.pt-accordion__item {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.pt-accordion__trigger {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pt-heading);
    background: var(--pt-bg);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--pt-transition);
}

.pt-accordion__trigger:hover {
    background: var(--pt-bg-light);
}

.pt-accordion__trigger::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--pt-primary);
    transition: transform var(--pt-transition);
    flex-shrink: 0;
    font-weight: 300;
}

details[open] > .pt-accordion__trigger::after {
    transform: rotate(45deg);
}

.pt-accordion__trigger::-webkit-details-marker {
    display: none;
}

.pt-accordion__content {
    padding: 0 1.25rem 1rem;
    font-size: 0.9rem;
    color: var(--pt-text);
    line-height: 1.7;
    background: var(--pt-bg);
}

.pt-accordion__content p {
    margin: 0;
}

/* ── 404 page ───────────────────────────────────────────────── */
.pt-404-number {
    font-size: clamp(6rem, 20vw, 12rem);
    font-weight: 800;
    color: var(--pt-border);
    line-height: 1;
    margin-bottom: 0.5rem;
    font-family: var(--pt-font-heading);
}

.pt-404-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--pt-heading);
    margin: 0 0 1rem;
}

.pt-404-subtitle {
    font-size: 1.05rem;
    color: var(--pt-text-light);
    max-width: 480px;
    margin: 0 auto;
}

.pt-404-search {
    margin-top: 2rem;
}

/* ===================================================================
   Cart Page
   =================================================================== */

/* ── Cart layout ────────────────────────────────────────────── */
.pt-cart-page .cart-container {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 991px) {
    .pt-cart-page .cart-container {
        grid-template-columns: 1fr;
    }
}

/* ── Cart table ─────────────────────────────────────────────── */
.pt-cart-page .cart.table-wrapper {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    overflow: hidden;
}

.pt-cart-page .cart thead th {
    background: var(--pt-bg-light);
    padding: 0.875rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pt-text-dark);
    border-bottom: 1px solid var(--pt-border);
}

.pt-cart-page .cart tbody tr {
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-cart-page .cart tbody tr:last-child {
    border-bottom: none;
}

.pt-cart-page .cart td {
    padding: 1.25rem 1rem;
    vertical-align: middle;
}

.pt-cart-page .product-item-photo .product-image-photo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--pt-radius-sm);
}

.pt-cart-page .product-item-name a {
    font-weight: 600;
    color: var(--pt-heading);
    text-decoration: none;
}

.pt-cart-page .product-item-name a:hover {
    color: var(--pt-primary);
}

/* ── Cart qty cell: stepper + Update Cart button stacked ─────── */
.pt-cart-page .col.qty .field.qty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Stepper inherits pt-addtocart__qty-control (inline-flex) — keep compact */
.pt-cart-page .col.qty .pt-addtocart__qty-control {
    flex-shrink: 0;
}

/* Per-row Update Cart button */
.pt-cart-page .pt-cart-item-update {
    font-size: 12px;
    padding: 6px 14px;
    white-space: nowrap;
    border: 1px solid var(--pt-border, #e1e1e1);
    background: var(--pt-bg-light, #f4f4f4);
    color: var(--pt-heading, #222529);
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: var(--pt-radius-sm);
}

.pt-cart-page .pt-cart-item-update:hover {
    background: var(--pt-border, #e1e1e1);
}

/* Legacy plain qty input (fallback if stepper is not present) */
.pt-cart-page .input-text.qty {
    width: 60px;
    text-align: center;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    padding: 0.5rem;
    font-size: 0.9rem;
}

.pt-cart-page .action.action-delete::before {
    content: '×';
    font-size: 1.25rem;
    color: var(--pt-text-light);
    font-weight: 300;
}

.pt-cart-page .action.action-delete:hover::before {
    color: var(--pt-danger);
}

/* ── Cart actions ───────────────────────────────────────────── */
.pt-cart-page .cart.main.actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Cart totals sidebar ────────────────────────────────────── */
.pt-cart-page .cart-summary {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--pt-header-height) + 1rem);
}

.pt-cart-page .cart-summary > .title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pt-heading);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pt-border);
}

.pt-cart-page .cart-totals .totals th,
.pt-cart-page .cart-totals .totals td {
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.pt-cart-page .cart-totals .grand .mark,
.pt-cart-page .cart-totals .grand .amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pt-heading);
    border-top: 1px solid var(--pt-border);
    padding-top: 0.75rem;
}

.pt-cart-page .checkout-methods-items .action.primary.checkout {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    margin-top: 1rem;
}

/* ── Empty cart ─────────────────────────────────────────────── */
.pt-cart-page .cart-empty {
    text-align: center;
    padding: 4rem 2rem;
}

.pt-cart-page .cart-empty::before {
    content: '🛒';
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .pt-cart-page .cart thead {
        display: none;
    }

    .pt-cart-page .cart td {
        display: block;
        padding: 0.5rem 1rem;
    }

    .pt-cart-page .cart tr {
        display: block;
        padding: 1rem 0;
    }
}

/* ===================================================================
   Checkout Page
   =================================================================== */

/* ── Layout ─────────────────────────────────────────────────── */
.pt-checkout-page .checkout-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 991px) {
    .pt-checkout-page .checkout-container {
        grid-template-columns: 1fr;
    }
    .pt-checkout-page .opc-sidebar {
        order: -1;
    }
}

/* ── Progress steps ─────────────────────────────────────────── */
.pt-checkout-page .opc-progress-bar {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    counter-reset: step;
}

.pt-checkout-page .opc-progress-bar-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.pt-checkout-page .opc-progress-bar-item::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--pt-border);
    color: var(--pt-text-light);
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0 auto 0.5rem;
    position: relative;
    z-index: 1;
}

.pt-checkout-page .opc-progress-bar-item._active::before,
.pt-checkout-page .opc-progress-bar-item._complete::before {
    background: var(--pt-primary);
    color: #fff;
}

.pt-checkout-page .opc-progress-bar-item > span {
    font-size: 0.8rem;
    color: var(--pt-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pt-checkout-page .opc-progress-bar-item._active > span {
    color: var(--pt-primary);
}

.pt-checkout-page .opc-progress-bar-item + .opc-progress-bar-item::after {
    content: '';
    position: absolute;
    top: 1rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--pt-border);
    z-index: 0;
}

/* ── Form fields ────────────────────────────────────────────── */
.pt-checkout-page .field .control input,
.pt-checkout-page .field .control select,
.pt-checkout-page .field .control textarea {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transition: border-color var(--pt-transition);
    width: 100%;
}

.pt-checkout-page .field .control input:focus,
.pt-checkout-page .field .control select:focus {
    border-color: var(--pt-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
}

/* ── Step titles ────────────────────────────────────────────── */
.pt-checkout-page .step-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pt-heading);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pt-border);
}

/* ── Shipping methods ───────────────────────────────────────── */
.pt-checkout-page .table-checkout-shipping-method tbody tr {
    cursor: pointer;
}

.pt-checkout-page .table-checkout-shipping-method tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-checkout-page .table-checkout-shipping-method .radio {
    accent-color: var(--pt-primary);
}

/* ── Order summary sidebar ──────────────────────────────────── */
.pt-checkout-page .opc-sidebar .opc-block-summary {
    background: var(--pt-bg-light);
    border-radius: var(--pt-radius);
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--pt-header-height) + 1rem);
}

.pt-checkout-page .opc-block-summary .title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--pt-heading);
}

.pt-checkout-page .minicart-items .product-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-checkout-page .minicart-items .product-item-photo {
    flex-shrink: 0;
}

.pt-checkout-page .minicart-items .product-image-photo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--pt-radius-sm);
}

/* ── Trust badges ───────────────────────────────────────────── */
.pt-checkout-trust {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pt-border-light);
    font-size: 0.8rem;
    color: var(--pt-text-light);
}

.pt-checkout-trust span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Navigation buttons ─────────────────────────────────────── */
.pt-checkout-page .button.action.continue.primary {
    background: var(--pt-primary);
    color: #fff;
    padding: 0.875rem 2rem;
    font-weight: 600;
}

.pt-checkout-page .action-show-popup > span::before,
.pt-checkout-page .action.secondary {
    color: var(--pt-primary);
}

/* ===================================================================
   Customer Account Pages
   =================================================================== */

.pt-account-page .account-nav {
    background: var(--pt-bg);
    overflow: hidden;
}

.pt-account-page .account-nav .title {
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
    background: var(--pt-bg);
    border-bottom: 1px solid #ddd;
}

.pt-account-page .account-nav-item a,
.pt-account-page .account-nav-item strong {
    display: block;
    padding: 8px 18px 8px 15px;
    font-size: 14px;
    color: #777;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    transition: color var(--pt-transition), background var(--pt-transition);
}

.pt-account-page .account-nav-item a:hover {
    color: var(--pt-primary);
    background: transparent;
}

.pt-account-page .account-nav-item.current a,
.pt-account-page .account-nav-item.current strong {
    color: var(--pt-primary);
    font-weight: 400;
    border-left: 3px solid var(--pt-primary);
    padding-left: 12px;
}

.pt-account-page .block-dashboard-info,
.pt-account-page .block-dashboard-addresses,
.pt-account-page .block-dashboard-orders {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.pt-account-page .block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-account-page .block-title strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pt-heading);
}

.pt-account-page .orders-history .table-wrapper {
    border-radius: var(--pt-radius);
    overflow: hidden;
    border: 1px solid var(--pt-border);
}

.pt-account-page .orders-history thead th {
    background: var(--pt-bg-light);
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--pt-text-dark);
}

.pt-account-page .orders-history tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--pt-border-light);
    font-size: 0.875rem;
}

.pt-account-page .orders-history .order-status {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--pt-bg-light);
    color: var(--pt-text);
}

.pt-account-page .block-addresses-list .items.addresses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.pt-account-page .block-addresses-list .item.address {
    background: var(--pt-bg-light);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    padding: 1.25rem;
}

@media (max-width: 767px) {
    .pt-account-page .sidebar.sidebar-main {
        order: -1;
    }
}

/* ===================================================================
   Search Results Page
   =================================================================== */

.pt-search-results-page .page-title-wrapper .page-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--pt-heading);
    margin-bottom: 0.5rem;
}

.pt-search-results-page .search.found {
    color: var(--pt-text-light);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.pt-search-results-page .search.found strong {
    color: var(--pt-primary);
}

.pt-search-results-page .search-no-result {
    text-align: center;
    padding: 3rem 1rem;
}

.pt-search-results-page .search-no-result::before {
    content: '🔍';
    font-size: 3.5rem;
    display: block;
    margin-bottom: 1rem;
}

.pt-search-results-page .search-no-result .message {
    font-size: 1.1rem;
    color: var(--pt-text);
    margin-bottom: 0.5rem;
}

.pt-search-results-page .search-no-result ul {
    list-style: none;
    padding: 0;
    color: var(--pt-text-light);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.pt-search-results-page .search-no-result ul li::before {
    content: '→ ';
    color: var(--pt-primary);
}

/* ===================================================================
   Cross-Browser Compatibility Fixes
   =================================================================== */

/* IE11 has <1% market share; we intentionally do not support it. */

/* ── Safari: text-size-adjust ───────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ── Firefox: input[type=number] spinner removal ────────────── */
input[type='number'] {
    -moz-appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Safari: sticky position ────────────────────────────────── */
.pt-sticky-header {
    position: -webkit-sticky; /* old Safari */
    position: sticky;
}

/* ── Swiper: touch-action for iOS scroll ────────────────────── */
.swiper {
    touch-action: pan-y;
}

/* ── iOS Safari: avoid 100vh ────────────────────────────────── */
.pt-hero--fullscreen {
    min-height: 90vh;
}

/* ── Print: hide UI chrome ──────────────────────────────────── */
@media print {
    .pt-header,
    .pt-footer,
    .pt-newsletter-popup,
    .pt-sticky-header,
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #555;
    }
}

/* ===================================================================
   Performance — CSS hints & optimizations
   =================================================================== */

/* ── content-visibility for footer (Chrome 85+) ─────────────── */
/* Applied only to the footer: it's always below the fold and has no
   sticky children. Broader application (e.g. .pt-section) breaks
   sticky positioning via the implied CSS containment boundary. */
.pt-footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* ── will-change: applied via JS just before animation starts ── */
/* Permanent will-change promotes every matching element to its own
   compositing layer unconditionally, wasting GPU memory.
   JS adds/removes it around the transform animation instead. */

/* ── Reduce motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .pt-hero-slider,
    .pt-brand-slider {
        animation: none !important;
    }
}

/* ── High-contrast mode support ─────────────────────────────── */
@media (prefers-contrast: more) {
    :root {
        --pt-border: #767676;
        --pt-text-light: #595959;
    }

    .pt-btn {
        border: 2px solid currentColor;
    }
}

/* ===================================================================
   VQA Pixel-Perfect Fixes
   =================================================================== */

/* --- VQA-001: Nav Home link highlight --- */
.pt-nav__item--home .pt-nav__link {
    font-weight: 700;
}

/* --- VQA-002 / VQA-003: Homepage 2-column with sidebar --- */
/* CSS Grid: sidebar left (280px) + main content right — matches Porto Demo 1 */
.pt-homepage-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    max-width: var(--pt-max-width, 1200px);
    margin: 0 auto;
    padding: 20px 15px;
}
.pt-homepage-sidebar {
    grid-column: 1;
    grid-row: 1;
}
.pt-homepage-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

/* Tablet: sidebar stacks below main (Demo 1 does this at 991px) */
@media (max-width: 991px) {
    .pt-homepage-grid {
        grid-template-columns: 1fr;
    }
    .pt-homepage-main {
        order: 1;
    }
    .pt-homepage-sidebar {
        order: 2;
        grid-row: auto;
    }
    /* Contact page 2-col → single column on tablet */
    body.contact-index-index .column.main {
        flex-direction: column !important;
    }
    body.contact-index-index .column.main > .form.contact,
    body.contact-index-index .column.main > #contact-form,
    body.contact-index-index .pt-contact-details-panel {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .pt-homepage-grid {
        grid-template-columns: 1fr;
    }
    .pt-homepage-sidebar {
        grid-row: auto;
    }
}

/* --- VQA-003: Browse Categories Sidebar Panel --- */
.pt-sidebar-nav {
    background: #fff;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
}

/* SIDEBAR-NAV-02: Demo 1 .widget_sidebar_menu title measured live —
   fs 15, pad 14/14, bg rgb(245), no border-left/border-bottom. Ours was
   fs 14 pad 12/20 with 3px border-left and 1px border-bottom. */
h3.pt-sidebar-nav__title,
.pt-sidebar-nav .pt-sidebar-nav__title {
    background: #f5f5f5;
    color: #222529;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 14px 14px;
    margin: 0;
    border: 0;
}

.pt-sidebar-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pt-sidebar-nav__item {
    border-bottom: 1px solid var(--pt-border-light);
    position: relative;
}

.pt-sidebar-nav__item:last-child {
    border-bottom: 0;
}

/* SIDEBAR-NAV-01: Demo 1 .widget_sidebar_menu ul > li > a measured live —
   line-height 18px (not body-inherited 25.2), font-weight 500 (not 600),
   color rgb(85,85,85) (not #222529). Makes each item 46h instead of 54h,
   reclaiming 64px of the 140px pt-sidebar-nav height delta. */
.pt-sidebar-nav__link,
.pt-sidebar-nav__link:link,
.pt-sidebar-nav__link:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 14px 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: rgb(85, 85, 85);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

.pt-sidebar-nav__link:hover {
    color: var(--pt-primary);
    background: var(--pt-bg-light);
}

/* R3-006: Sidebar submenu — flyout to the right (matching Porto Demo 1) */
.pt-sidebar-nav__item {
    position: relative;
}
.pt-sidebar-nav__item > ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e1e1e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}
.pt-sidebar-nav__item:hover > ul {
    display: block;
}
/* Show chevron arrow for items with children */
.pt-sidebar-nav__item > a .pt-sidebar-nav__arrow {
    margin-left: auto;
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
}
.pt-sidebar-nav__item:hover > a .pt-sidebar-nav__arrow {
    color: #0088cc;
}

.pt-sidebar-nav__icon {
    flex-shrink: 0;
    color: #999;
}

.pt-sidebar-nav__arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--pt-text-light);
}

.pt-sidebar-nav__sub {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    background: #fff;
}

.pt-sidebar-nav__sub-item {
    border-bottom: none;
}

.pt-sidebar-nav__sub-item:last-child {
    border-bottom: 0;
}

.pt-sidebar-nav__sub-link {
    display: block;
    padding: 6px 20px;
    font-size: 13px;
    color: var(--pt-text);
    text-decoration: none;
    transition: color var(--pt-transition);
}

.pt-sidebar-nav__sub-link:hover {
    color: var(--pt-primary);
}

/* --- VQA-004: Hero inset in 2-column grid --- */
.pt-hero--inset {
    width: 100%;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    display: flex;
}

.pt-hero--inset .pt-hero__slide {
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding: 40px 30px;
}

.pt-hero--inset .pt-hero__content {
    max-width: 480px;
}

.pt-hero--inset .pt-hero__subtitle {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
}

.pt-hero--inset .pt-hero__title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 15px;
}

.pt-hero--inset .pt-hero__title strong {
    color: var(--pt-primary-light);
}

.pt-hero--inset .pt-hero__desc {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
    font-size: 15px;
}

.pt-hero--inset .pt-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- VQA-010: Logo proportions — matched to original Porto (111x44) --- */
.pt-header__logo img {
    max-height: 44px;
    width: 111px;
    max-width: 111px;
}

/* --- P1-13: Add to Cart button — blue style on PDP (matches Porto Demo 1 original) --- */
.pt-product-page .pt-addtocart__submit {
    background-color: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #fff;
    width: 100%;
    min-width: 180px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* GAP-FIX: Remove CSS ::before cart icon — the SVG in addtocart.phtml is the single intended icon */
.pt-product-page .pt-addtocart__submit::before {
    content: none !important;
    display: none !important;
}

.pt-product-page .pt-addtocart__submit:hover {
    background-color: var(--pt-primary-dark);
    border-color: var(--pt-primary-dark);
    color: #fff;
}

/* --- VQA-013: Login page centered layout --- */
.pt-login-page .login-container {
    max-width: 900px;
    margin: 40px auto;
}

.pt-login-page .block-customer-login .block-title,
.pt-login-page .block-new-customer .block-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--pt-heading);
    border-bottom: 1px solid var(--pt-border);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.pt-login-page .actions-toolbar .action.login,
.pt-login-page .actions-toolbar .action.create {
    display: block;
    width: 100%;
    background: var(--pt-bg-dark);
    color: #fff;
    border: 2px solid var(--pt-bg-dark);
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    cursor: pointer;
    transition: background var(--pt-transition), border-color var(--pt-transition);
}

.pt-login-page .actions-toolbar .action.login:hover,
.pt-login-page .actions-toolbar .action.create:hover {
    background: var(--pt-primary);
    border-color: var(--pt-primary);
}

/* --- VQA-014: Registration page styling --- */
.pt-register-page .form.create.account {
    max-width: 800px;
    margin: 40px auto;
}

.pt-register-page .actions-toolbar .action.submit {
    display: block;
    width: 100%;
    background: var(--pt-bg-dark);
    color: #fff;
    border: 2px solid var(--pt-bg-dark);
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background var(--pt-transition), border-color var(--pt-transition);
}

.pt-register-page .actions-toolbar .action.submit:hover {
    background: var(--pt-primary);
    border-color: var(--pt-primary);
}

/* --- VQA-015: Cart empty state — full-width black button --- */
.pt-cart-page .cart-empty {
    text-align: center;
    padding: 60px 20px;
}

.pt-cart-page .cart-empty p {
    font-size: 16px;
    color: var(--pt-text);
    margin-bottom: 25px;
}

.pt-cart-page .cart-empty .action.continue {
    display: inline-block;
    background: var(--pt-bg-dark);
    color: #fff;
    border: 2px solid var(--pt-bg-dark);
    padding: 14px 48px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background var(--pt-transition), border-color var(--pt-transition);
}

.pt-cart-page .cart-empty .action.continue:hover {
    background: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #fff;
}

.pt-cart-page .page-title-wrapper .page-title {
    color: var(--pt-primary);
}

/* --- VQA-016: Blog heading Porto blue --- */
.blog-index-index .page-title-wrapper .page-title,
.blog-post-view .page-title-wrapper .page-title,
.amasty-blog-index-index .page-title-wrapper .page-title,
[class*="blog"] .page-title-wrapper .page-title {
    color: var(--pt-primary);
}

/* --- VQA-017 (revised F-BUG-CARD-02): Hide Magento's default duplicate
       rating markers on product listing grid cards, but KEEP the theme's
       own .pt-product-card__rating placeholder which matches Porto Demo 1
       (empty 5-star container always visible on PLP cards). --- */
.pt-product-grid .rating-summary,
.pt-product-grid .reviews-actions {
    display: none;
}

/* --- VQA-019: Pre-header promotional bar --- */
.pt-promo-bar {
    background: #2d2d2d;
    color: #fff;
    text-align: center;
    padding: 10px 40px;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    z-index: 101;
}

.pt-promo-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    max-width: var(--pt-container);
    margin: 0 auto;
}

.pt-promo-bar__text {
    margin: 0;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pt-promo-bar__cta {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

.pt-promo-bar__cta:hover {
    color: #ccc;
}

.pt-promo-bar__note {
    font-size: 12px;
    color: #aaa;
    font-style: normal;
}

.pt-promo-bar__close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    opacity: 0.8;
    transition: opacity var(--pt-transition);
    line-height: 1;
}

.pt-promo-bar__close:hover {
    opacity: 1;
}

@media (max-width: 767px) {
    .pt-promo-bar {
        padding: 8px 35px;
        font-size: 12px;
    }
}

/* --- VQA-020: Disable sticky nav on scroll (Porto Demo 1 reference has no sticky) --- */
/* The sticky bar is controlled by pt-sticky-header body class.
 * Demo 1 does not use sticky — hide the sticky bar by default for demo1.
 * This is controlled via ThemeConfig admin config; CSS below ensures
 * the bar is invisible even if the class is accidentally applied. */
body:not(.pt-sticky-header) .pt-sticky-bar {
    display: none !important;
}

/* --- VQA-021: Phone header "CALL US NOW" style --- */
.pt-header__phone-block {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pt-header__phone-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pt-text-light);
}

.pt-header__phone-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-heading);
    white-space: nowrap;
}

/* --- VQA-022: Footer payment icons — standardize sizing --- */
.pt-footer-bottom__payment-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity var(--pt-transition);
}

.pt-footer-bottom__payment-icon:hover {
    opacity: 1;
}

.pt-footer-bottom__payment-icon svg {
    display: block;
    border-radius: 3px;
}

/* --- VQA-011: Social share block on PDP --- */
.pt-product-social-share {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid var(--pt-border);
    margin-top: 15px;
}

.pt-product-social-share__label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pt-text-dark);
    white-space: nowrap;
}

.pt-product-social-share__links {
    display: flex;
    gap: 8px;
}

.pt-product-social-share__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pt-bg-light);
    color: var(--pt-text-dark);
    text-decoration: none;
    transition: background var(--pt-transition), color var(--pt-transition);
    border: 1px solid var(--pt-border);
}

.pt-product-social-share__link:hover {
    background: var(--pt-primary);
    color: #fff;
    border-color: var(--pt-primary);
}

.pt-product-social-share__link--facebook:hover  { background: #1877f2; border-color: #1877f2; }
.pt-product-social-share__link--twitter:hover   { background: #1da1f2; border-color: #1da1f2; }
.pt-product-social-share__link--pinterest:hover  { background: #e60023; border-color: #e60023; }
.pt-product-social-share__link--linkedin:hover   { background: #0a66c2; border-color: #0a66c2; }
.pt-product-social-share__link--whatsapp:hover   { background: #25d366; border-color: #25d366; }

/* --- VQA-011: Prev/Next product navigation --- */
.pt-product-prev-next {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--pt-border);
    margin-top: 10px;
}

.pt-product-prev-next__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text);
    text-decoration: none;
    transition: color var(--pt-transition);
    padding: 5px 0;
}

.pt-product-prev-next__link:hover {
    color: var(--pt-primary);
}

/* --- VQA-025: Product custom tab content --- */
.pt-product-custom-tab {
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--pt-text);
}

.pt-product-custom-tab p {
    margin-bottom: 15px;
}

.pt-product-custom-tab h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--pt-heading);
}

.pt-product-custom-tab__checklist {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
}

.pt-product-custom-tab__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--pt-text);
    margin-bottom: 8px;
    line-height: 1.6;
}

.pt-product-custom-tab__checklist .pt-check-icon {
    flex-shrink: 0;
    color: var(--pt-primary);
    margin-top: 3px;
}

/* FEATURED-01: Demo 1 featured-products carousel is 318h with only ~20px
   outer margin. Ours was 554h total: 80px section padding + 20px header
   margin + 40px filter-products margin + 377h carousel. Trim outer
   spacing: section pad 40→15, header mb 20→12, filter-products mb 40→0
   (section padding already provides separation). */
.pt-homepage .pt-homepage-section {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pt-homepage .pt-section-header {
    margin-bottom: 12px;
    text-align: left;
}

.pt-homepage .pt-filter-products {
    margin-bottom: 0;
}

.pt-homepage h2.pt-section-title {
    font-size: 16px;
    margin-bottom: 24px;
    display: block;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.pt-homepage h2.pt-section-title::after {
    display: none;
}

/* --- VQA-007 / M4: Contact page styling ---
 * Magento_Contact renders a bare <form class="form contact"> inside .column.main.
 * Center it with a max-width so it doesn't hang left in the 1240px column.
 */
/* CONTACT-01: Demo 1 live measurement:
   - column.main full container width (1180)
   - form 780w
   - fieldset flat (no bg/border/pad)
   - page-title-wrapper 0h (hidden)
   - fieldMb 14
   - submit stays blue 14/700 (matches ours — prior L136 tenant plan
     to make it dark 16/700 full-width was WRONG per live DOM). */
.pt-contact-page .column.main {
    max-width: none;
    margin: 0 auto;
    padding: 40px 0 60px;
}

.pt-contact-page .form.contact {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
}

.pt-contact-page .fieldset.contact {
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.pt-contact-page .fieldset.contact > .legend {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--pt-heading);
}

.pt-contact-page .actions-toolbar {
    margin-top: 20px;
    text-align: center;
}

.pt-contact-page .actions-toolbar .action.submit {
    background: var(--pt-bg-dark);
    color: #fff;
    border: 2px solid var(--pt-bg-dark);
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background var(--pt-transition);
}

.pt-contact-page .actions-toolbar .action.submit:hover {
    background: var(--pt-primary);
    border-color: var(--pt-primary);
}

/* --- VQA-005: About Us page --- */
.pt-about-page .pt-about-hero {
    margin-left: calc(-1 * var(--pt-gutter));
    margin-right: calc(-1 * var(--pt-gutter));
}

/* --- General: Hide Magento default compare/wishlist sidebar widgets --- */
.block.block-compare,
.block.block-wishlist.widget,
.catalog-compare-sidebar {
    display: none !important;
}

/* ===================================================================
 * PORTO DEMO 1 — HOMEPAGE SECTIONS
 * =================================================================== */

/* --- Trust Bar (FREE SHIPPING, MONEY BACK, ONLINE SUPPORT) --- */
.pt-trustbar {
    background: #f4f4f4;
    padding: 12px 0;
    margin-bottom: 0;
}
.pt-trustbar__grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: var(--pt-max-width, 1200px);
    margin: 0 auto;
    padding: 0 15px;
}
.pt-trustbar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.pt-trustbar__item + .pt-trustbar__item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: #ddd;
}
.pt-trustbar__icon {
    flex-shrink: 0;
    width: 35px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222529;
}
.pt-trustbar__icon svg {
    stroke: #222529;
    width: 29px;
    height: 29px;
}
.pt-trustbar__text h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 3px;
    color: #222529;
    text-transform: uppercase;
}
.pt-trustbar__text p {
    font-size: 13px;
    color: #777;
    margin: 0;
}

/* --- Hero Slider --- */
.pt-hero-slider {
    margin-bottom: 20px;
    border-radius: 0;
}
/* HERO-01: Demo 1 .home-banner-slider renders at 428h (880w main-col).
   Ours was 380h — 48px too short, making the top of the page feel
   cramped vs the reference. Bump min-height to match Demo 1. */
.pt-hero-slide {
    min-height: 428px;
    display: flex;
    align-items: center;
    padding: 40px 60px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.pt-hero-slide--dark {
    color: #fff;
}
.pt-hero-slide--dark .pt-hero-slide__content {
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.pt-hero-slide--dark .pt-hero-slide__title,
.pt-hero-slide--dark .pt-hero-slide__subtitle,
.pt-hero-slide--dark .pt-hero-slide__price-label,
.pt-hero-slide--dark .pt-hero-slide__price-value,
.pt-hero-slide--dark .pt-hero-slide__deal span,
.pt-hero-slide--dark .pt-hero-slide__deal strong,
.pt-hero-slide--dark .pt-hero-slide__deal em,
.pt-hero-slide--dark .pt-hero-slide__deal p {
    color: #fff;
}
.pt-hero-slide--light {
    color: #333;
}
.pt-hero-slide--light .pt-hero-slide__content {
    text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}
.pt-hero-slide--light .pt-hero-slide__title {
    color: #333;
}
.pt-hero-slide--light .pt-hero-slide__subtitle {
    color: #777;
}
.pt-hero-slide--light .pt-hero-slide__price-label {
    color: #999;
}
.pt-hero-slide--light .pt-hero-slide__price-value {
    color: #333;
}
.pt-hero-slide--light .pt-btn--primary {
    border-color: #333;
    color: #333;
}
.pt-hero-slide--light .pt-btn--primary:hover {
    background: #333;
    color: #fff;
}
.pt-hero-slide:nth-child(1) .pt-hero-slide__content {
    max-width: 50%;
}
.pt-hero-slide__content {
    color: #fff;
    position: relative;
    z-index: 2;
    top: auto;
    transform: none;
    padding: 0;
}
.pt-hero-slide__subtitle {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
}
/* nth-child(1) color overrides moved to .pt-hero-slide--light modifier */
.pt-hero-slide__title {
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 15px;
    color: #fff;
    line-height: 1.1;
}
.pt-hero-slide .pt-btn--primary {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 28px;
    font-size: 13px;
}
.pt-hero-slide .pt-btn--primary:hover {
    background: #fff;
    color: #333;
}
/* nth-child(1) button overrides moved to .pt-hero-slide--light modifier */
.pt-hero-slide__price {
    margin-bottom: 20px;
}
.pt-hero-slide__price-label {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.pt-hero-slide__price-value {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
}
.pt-hero-slide__price-value sup {
    font-size: 16px;
}
.pt-hero-slide__deal {
    margin-bottom: 20px;
    line-height: 1.4;
}
.pt-hero-slide__deal span {
    font-size: 13px;
    text-transform: uppercase;
    display: block;
    color: rgba(255,255,255,0.7);
}
.pt-hero-slide__deal strong {
    font-size: 42px;
    display: block;
    color: #fff;
}
.pt-hero-slide__deal em {
    font-size: 18px;
    font-style: normal;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}
.pt-hero-slide__deal p {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin: 5px 0 0;
}

/* --- Category Banners (Watches / Deals / Handbags) --- */
.pt-category-banners__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}
/* BANNERS-01: Demo 1 .home-ads col-md-4 banners are 190h — measured live.
   Ours were 300h (+110) because of oversized 80x80 badge + loose gaps +
   large h3/h4/button content. Force 190h, shrink badge to 56x56, tighten
   gaps and typography so content fits without overflow.
   BANNERS-02: earlier .pt-category-banner (L3094) set margin-bottom:20
   which L3094's height override missed, inflating the banner ROW to
   210h instead of 190h. Zero the margin here. */
.pt-category-banner {
    padding: 16px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 190px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
}
.pt-category-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.15);
    z-index: 0;
}
.pt-category-banner__badge,
.pt-category-banner__content {
    position: relative;
    z-index: 1;
}
.pt-category-banner__content h3,
.pt-category-banner__content h4 {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.pt-category-banner__content .pt-btn--sm {
    background: #fff;
    color: #333;
    border: none;
}
.pt-category-banner__content .pt-btn--sm:hover {
    background: #0088cc;
    color: #fff;
}
.pt-category-banner__badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0088cc;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.pt-category-banner__badge span {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.pt-category-banner__badge em {
    font-style: normal;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}
.pt-category-banner__content h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 2px;
    color: #fff;
    line-height: 1.2;
}
.pt-category-banner__content h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
    color: rgba(255,255,255,0.9);
    line-height: 1.2;
}
.pt-category-banner__content h4 del {
    color: rgba(255,255,255,0.6);
    margin-right: 5px;
}
.pt-category-banner__content h4 sup {
    font-size: 11px;
}

/* --- Sidebar Sale Badge --- */
.pt-sidebar-sale {
    background: #f4f4f4;
    padding: 25px 20px;
    text-align: center;
    margin-bottom: 20px;
}
.pt-sidebar-sale-slider {
    overflow: hidden;
}
.pt-sidebar-sale-slider .swiper-slide {
    height: auto;
}
.pt-sidebar-sale-pagination {
    text-align: center;
    margin-top: 10px;
}
.pt-sidebar-sale-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ccc;
    opacity: 1;
    margin: 0 3px;
}
.pt-sidebar-sale-pagination .swiper-pagination-bullet-active {
    background: var(--pt-primary, #0088cc);
}
.pt-sidebar-sale__badge {
    margin-bottom: 15px;
}
.pt-sidebar-sale__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0088cc;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.pt-sidebar-sale__heading {
    margin: 0 0 10px;
    line-height: 1;
}
.pt-sidebar-sale__title {
    font-size: 18px;
    font-weight: 700;
    color: #222529;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.pt-sidebar-sale__deal {
    margin-bottom: 10px;
}
.pt-sidebar-sale__up {
    display: block;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 5px;
}
.pt-sidebar-sale__pct {
    font-size: 72px;
    font-weight: 800;
    color: var(--pt-primary, #0088cc);
    line-height: 1;
}
.pt-sidebar-sale__pct sup {
    font-size: 32px;
    vertical-align: super;
}
.pt-sidebar-sale__pct-lg {
    font-size: 48px;
    font-weight: 800;
    color: var(--pt-primary, #0088cc);
    line-height: 1;
    display: block;
}
.pt-sidebar-sale__off {
    font-size: 18px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
}
.pt-sidebar-sale__desc {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
}

/* --- Sidebar Newsletter — SIDEBAR-NEWSLETTER-01 ---
   Demo 1 .widget_text with .box-newsletter measured live:
   bg rgb(244,244,244), pad 30/16/16/16, centered layout, stacked form
   with 48px block input and 41px full-width button. Title margin 0/15,
   p margin 0/20. Total height 275. */
.pt-sidebar-newsletter {
    background: #f4f4f4;
    border: 0;
    padding: 30px 16px 16px;
    margin-bottom: 15px;
    text-align: center;
}
.pt-sidebar-newsletter__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
    color: #222529;
}
.pt-sidebar-newsletter p {
    font-size: 13px;
    color: #777;
    line-height: 1.7;
    margin: 0 0 20px;
}
.pt-sidebar-newsletter__form,
.pt-sidebar-newsletter form {
    display: block;
}
.pt-sidebar-newsletter input[type="email"],
.pt-sidebar-newsletter .pt-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 12px;
    border: 0;
    background: #fff;
    font-size: 13px;
    color: #555;
    margin: 0 0 10px;
    box-sizing: border-box;
}

/* --- Sidebar Testimonial --- */
/* SIDEBAR-TESTIMONIALS-01: Demo 1 testimonials widget is transparent
   bg, no border, no padding — measured 261h. Ours was white bg +
   1px border + 15px pad, landing at 307h (+46). */
.pt-sidebar-testimonials {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 15px;
}
.pt-testimonial__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.pt-testimonial__avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #999;
    flex-shrink: 0;
    overflow: hidden;
}
.pt-testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pt-testimonial__author-info strong {
    display: block;
    font-size: 14px;
    color: #222529;
}
.pt-testimonial__author-info span {
    display: block;
    font-size: 12px;
    color: #999;
}
.pt-testimonial__mark {
    font-size: 48px;
    font-family: Georgia, serif;
    color: var(--pt-primary, #0088cc);
    line-height: 1;
    display: block;
    margin-bottom: 5px;
}
.pt-testimonial__quote {
    font-size: 13px;
    color: #555;
    margin: 0;
    border: none;
    padding: 0;
    font-style: italic;
}

/* --- Testimonial Carousel --- */
.pt-testimonial-slider {
    overflow: hidden;
}
.pt-testimonial-slider .swiper-slide {
    height: auto;
}
.pt-testimonial-slider .pt-testimonial {
    padding: 0;
}
.pt-testimonial-pagination {
    text-align: center;
    margin-top: 10px;
}
.pt-testimonial-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ccc;
    opacity: 1;
    margin: 0 3px;
}
.pt-testimonial-pagination .swiper-pagination-bullet-active {
    background: var(--pt-primary, #0088cc);
}

/* --- Sidebar Blog Posts --- */
.pt-sidebar-blog {
    background: #fff;
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 0;
}
.pt-sidebar-blog__post {
    border-bottom: 1px solid #f0f0f0;
}
.pt-sidebar-blog__post:last-child {
    border-bottom: none;
}
/* Blog carousel */
.pt-sidebar-blog-slider {
    overflow: hidden;
}
.pt-sidebar-blog-slider .swiper-slide {
    height: auto;
}
.pt-sidebar-blog-pagination {
    text-align: center;
    margin-top: 10px;
}
.pt-sidebar-blog-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ccc;
    opacity: 1;
    margin: 0 3px;
}
.pt-sidebar-blog-pagination .swiper-pagination-bullet-active {
    background: var(--pt-primary, #0088cc);
}
.pt-sidebar-blog__post {
    border-bottom: none;
}
.pt-sidebar-blog__image-link {
    display: block;
    overflow: hidden;
}
.pt-sidebar-blog__image-link img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.pt-sidebar-blog__info {
    padding: 15px;
    position: relative;
}
.pt-sidebar-blog__date {
    display: inline-block;
    background: var(--pt-primary, #0088cc);
    color: #fff;
    text-align: center;
    padding: 5px 8px;
    line-height: 1.2;
    margin-bottom: 8px;
}
.pt-sidebar-blog__day {
    display: block;
    font-size: 16px;
    font-weight: 700;
}
.pt-sidebar-blog__month {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
}
.pt-sidebar-blog__fulldate {
    display: block;
    font-size: 11px;
    color: #999;
    margin-bottom: 5px;
}
.pt-sidebar-blog__info h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 8px 0 5px;
}
.pt-sidebar-blog__info h4 a {
    color: #222529;
    text-decoration: none;
}
.pt-sidebar-blog__info h4 a:hover {
    color: var(--pt-primary, #0088cc);
}
.pt-sidebar-blog__info p {
    font-size: 12px;
    color: #777;
    margin: 0 0 5px;
}
.pt-sidebar-blog__more {
    font-size: 12px;
    color: var(--pt-primary, #0088cc);
    text-decoration: none;
}

/* --- Three-Column Products (Top Rated / Best Selling / Latest) ---
   THREECOL-01: Demo 1 equivalent row is 356h; ours was 337h (-19).
   Add padding-top:20 on the section to gain the missing ~19px
   without stretching individual list items (which stay balanced). */
.pt-homepage-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
    padding-top: 20px;
}
.pt-three-col__title {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
    margin: 0 0 15px;
    text-transform: uppercase;
}

/* --- Small Product List --- */
.pt-list-small__item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}
.pt-list-small__item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.pt-list-small__image {
    flex-shrink: 0;
    width: 75px;
    height: 75px;
}
.pt-list-small__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pt-list-small__name {
    font-size: 13px;
    font-weight: 600;
    color: #222529;
    display: block;
    margin-bottom: 4px;
    text-decoration: none;
}
.pt-list-small__name:hover {
    color: var(--pt-primary, #0088cc);
}
.pt-list-small__price {
    font-size: 14px;
    font-weight: 700;
    color: #222529;
}

/* --- Service Icons (Customer Support / Secured Payment / Returns) ---
   SERVICES-01: Demo 1 services row is 239h; ours was 269h (+30).
   60h of padding (30 top + 30 bottom) was the extra. Halve to match. */
.pt-services {
    border-top: 1px solid var(--pt-border, #e1e1e1);
    padding: 15px 0;
    margin-top: 30px;
}
.pt-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.pt-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.pt-service__icon {
    flex-shrink: 0;
    background: transparent;
    border: 2px solid #0188cc;
    border-radius: 500px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0188cc;
}
.pt-service__icon svg {
    stroke: #0188cc;
    width: 36px;
    height: 36px;
}
.pt-service__text h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    text-transform: none;
    color: #222529;
}
.pt-service__text p {
    font-size: 14px;
    color: #555;
    margin: 2px 0 0;
    font-style: normal;
}
.pt-service__desc {
    display: block;
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin-top: 4px;
}

/* --- Brand Logos --- */
/* BRANDS-01: Demo 1 brands row is 150h (porto-brand wrapper with a
   ~60h carousel + ~66h bottom margin). Ours was 110h (32+32 pad +
   44 grid + 2 border). Bump pad 32->52 to add 40 and match Demo 1. */
.pt-brand-logos {
    border-top: 1px solid var(--pt-border, #e1e1e1);
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
    padding: 52px 0;
    margin: 24px 0;
}
.pt-brand-logos__grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.pt-brand-logos__item {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
    border-right: 1px solid var(--pt-border, #e1e1e1);
}
.pt-brand-logos__item:last-child {
    border-right: none;
}
.pt-brand-logo {
    opacity: 0.5;
    filter: grayscale(100%);
    transition: opacity 0.3s, filter 0.3s;
    display: inline-block;
    font-size: 26px !important;
    letter-spacing: 2px;
}
.pt-brand-logos__item:hover .pt-brand-logo {
    opacity: 1;
    filter: grayscale(0%);
}

/* --- Footer improvements to match Porto original --- */
.pt-footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pt-footer-contact-list li {
    margin-bottom: 8px;
    font-size: 13px;
    color: #777;
}
.pt-footer-contact-list strong {
    color: #555;
    font-size: 12px;
}
.pt-footer-social {
    margin-top: 15px;
}
.pt-social-link {
    display: inline-block;
    margin-right: 8px;
    font-size: 13px;
    color: #777;
    text-decoration: none;
}
.pt-social-link:hover {
    color: var(--pt-primary, #0088cc);
}
.pt-footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.pt-tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ddd;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    border-radius: 2px;
}
.pt-tag:hover {
    border-color: var(--pt-primary, #0088cc);
    color: var(--pt-primary, #0088cc);
}
.pt-footer-readmore {
    font-size: 13px;
    color: var(--pt-primary, #0088cc);
    text-decoration: none;
}

/* --- Footer CMS Block Widget Styles (dark background context) --- */
.pt-footer-widget__title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: normal;
    margin: 0 0 15px;
    padding-bottom: 0;
    border-bottom: none;
}
.pt-footer-widget p {
    color: #999;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 12px;
}
.pt-footer-middle .pt-footer-readmore {
    color: var(--pt-primary-light, #39f);
}
.pt-footer-middle .pt-footer-readmore:hover {
    color: #fff;
}
.pt-footer-middle .pt-footer-contact-list li {
    color: #999;
}
.pt-footer-middle .pt-footer-contact-list strong {
    color: #ccc;
}
.pt-footer-middle .pt-footer-contact-list a {
    color: var(--pt-primary-light, #39f);
    text-decoration: none;
}
.pt-footer-middle .pt-footer-contact-list a:hover {
    color: #fff;
}
.pt-footer-middle .pt-social-link {
    color: #999;
}
.pt-footer-middle .pt-social-link:hover {
    color: var(--pt-primary-light, #39f);
}
.pt-footer-middle .pt-social-link i {
    margin-right: 4px;
}
.pt-footer-middle .pt-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pt-footer-middle .pt-footer-links li {
    margin-bottom: 8px;
}
.pt-footer-middle .pt-footer-links a {
    color: #999;
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;
    transition: color var(--pt-transition);
}
.pt-footer-middle .pt-footer-links a:hover {
    color: var(--pt-primary-light, #39f);
}
.pt-footer-middle .pt-tag {
    border-color: rgba(255, 255, 255, 0.15);
    color: #999;
}
.pt-footer-middle .pt-tag:hover {
    border-color: var(--pt-primary, #0088cc);
    color: var(--pt-primary-light, #39f);
}

/* --- Promo Slider --- */
.pt-promo-slider {
    margin-bottom: 20px;
}
.pt-promo-slide {
    min-height: 250px;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 40px;
}
.pt-promo-slider .swiper-wrapper {
    display: flex;
}
.pt-promo-slide__content h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.8);
    margin: 0 0 5px;
}
.pt-promo-slide__content h3 {
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 15px;
    color: #fff;
}
.pt-promo-slide__content h2 {
    font-size: 36px;
    font-weight: 300;
    color: #fff;
    margin: 0 0 5px;
}
.pt-promo-slide__price {
    margin-bottom: 20px;
}
.pt-promo-slide__price span {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.pt-promo-slide__price strong {
    font-size: 36px;
    font-weight: 700;
}
.pt-promo-slide__price strong sup {
    font-size: 14px;
}

/* ===================================================================
   Category Page — Sidebar Blocks (Porto Demo 1)
   =================================================================== */

/* --- Sidebar Block Shared (section heading style) --- */
.pt-sidebar-block {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-sidebar-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* SIDEBAR-01: Demo 1 sidebar block titles are 15px/600 rgb(34,37,41) */
.pt-sidebar-block__title {
    font-family: var(--pt-font-heading);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(34, 37, 41);
    letter-spacing: 0.5px;
    margin: 0 0 15px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--pt-primary);
    line-height: 1.4;
}

/* --- Sidebar: CATEGORIES tree (N4 — matches Porto Demo 1) --- */
.pt-sidebar-cats__list,
.pt-sidebar-cats__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-sidebar-cats__item {
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-sidebar-cats__item:last-child {
    border-bottom: none;
}

.pt-sidebar-cats__link {
    display: block;
    padding: 10px 0;
    font-family: var(--pt-font-heading);
    font-size: 13px;
    font-weight: 400;
    color: var(--pt-body);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.pt-sidebar-cats__link:hover {
    color: var(--pt-primary);
    padding-left: 6px;
}

.pt-sidebar-cats__children {
    padding-left: 14px;
    padding-bottom: 6px;
}

.pt-sidebar-cats__children .pt-sidebar-cats__item {
    border-bottom: none;
}

.pt-sidebar-cats__children .pt-sidebar-cats__link {
    padding: 6px 0;
    font-size: 12px;
    color: var(--pt-muted, #888);
}

.pt-sidebar-cats__children .pt-sidebar-cats__link:hover {
    color: var(--pt-primary);
}

/* --- Sidebar: Featured Products --- */
.pt-sidebar-featured__list {
    display: flex;
    flex-direction: column;
}

.pt-sidebar-featured__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--pt-border-light);
    transition: background-color var(--pt-transition);
}

.pt-sidebar-featured__item:last-child {
    border-bottom: none;
}

.pt-sidebar-featured__item:hover {
    text-decoration: none;
}

.pt-sidebar-featured__item:hover .pt-sidebar-featured__name {
    color: var(--pt-primary);
}

.pt-sidebar-featured__image {
    flex-shrink: 0;
    width: 75px;
}

.pt-sidebar-featured__image img {
    width: 100%;
    height: auto;
    display: block;
}

.pt-sidebar-featured__info {
    flex: 1;
    min-width: 0;
}

.pt-sidebar-featured__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-dark);
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color var(--pt-transition);
    overflow: hidden;
    text-overflow: ellipsis;
}

@supports (-webkit-line-clamp: 2) {
    .pt-sidebar-featured__name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.pt-sidebar-featured__price {
    font-size: 13px;
}

.pt-sidebar-featured__price .price {
    font-weight: 700;
    color: var(--pt-primary);
}

.pt-sidebar-featured__price .old-price .price {
    font-weight: 400;
    color: var(--pt-text-light);
    text-decoration: line-through;
    font-size: 12px;
}

/* --- Sidebar: Custom HTML Block --- */
.pt-sidebar-custom-html__content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--pt-text);
}

.pt-sidebar-custom-html__subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text-dark);
    margin: 0 0 8px;
}

.pt-sidebar-custom-html__text {
    margin: 0;
    color: var(--pt-text);
}

/* --- Category Page: Promo Banners (3-column) --- */
.pt-category-promo-banners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.pt-category-promo-banner {
    padding: 25px 20px;
    text-align: center;
    border-radius: var(--pt-radius);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    transition: opacity var(--pt-transition);
}

.pt-category-promo-banner:hover {
    opacity: 0.9;
}

.pt-category-promo-banner__content {
    width: 100%;
}

.pt-category-promo-banner__label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 5px;
    font-weight: 400;
}

.pt-category-promo-banner__label strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-top: 3px;
    letter-spacing: 0;
}

.pt-category-promo-banner__price {
    margin: 10px 0;
}

.pt-category-promo-banner__price span {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.pt-category-promo-banner__price strong {
    font-size: 28px;
    font-weight: 700;
}

.pt-category-promo-banner__cta {
    display: inline-block;
    padding: 8px 22px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--pt-radius-sm);
    transition: background-color var(--pt-transition), border-color var(--pt-transition);
    cursor: pointer;
}

.pt-category-promo-banner__cta:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* --- Category Page: Sidebar Category Navigation (enhanced) --- */
.pt-category-page .sidebar-main .block-category-navigation {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--pt-border-light);
}

.pt-category-page .sidebar-main .block-category-navigation > .block-title {
    clip: auto;
    border: 0;
    height: auto;
    margin: 0 0 12px;
    overflow: visible;
    padding: 0 0 10px;
    position: static;
    white-space: normal;
    width: auto;
    font-family: var(--pt-font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pt-heading);
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--pt-primary);
}

/* --- Category Page: Enhanced Layered Navigation Title --- */
.pt-category-page .sidebar-main .block.filter > .block-title {
    clip: auto;
    border: 0;
    height: auto;
    margin: 0 0 12px;
    overflow: visible;
    padding: 0 0 10px;
    position: static;
    white-space: normal;
    width: auto;
    font-family: var(--pt-font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pt-heading);
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--pt-primary);
}

.pt-category-page .sidebar-main .block.filter > .block-title strong {
    font-weight: 700;
}

/* --- Category Page: Product Grid Column Count Default --- */
/* Porto Demo 1 category uses 3 columns when sidebar is present */
.pt-category-page .column.main .pt-product-grid:not([class*="pt-grid--cols-"]) {
    grid-template-columns: repeat(3, 1fr);
}

/* --- Category Page: Toolbar Enhancements --- */
/* Hide duplicate toolbar-amount on the bottom toolbar */
.pt-category-page .toolbar-products:last-child .toolbar-amount {
    display: none;
}

/* --- Category Page: Magento Price Styling in Product Grid --- */
.pt-category-page .pt-product-card .price-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.pt-category-page .pt-product-card .price-box .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-text-dark);
}

.pt-category-page .pt-product-card .price-box .old-price .price {
    font-size: 13px;
    font-weight: 400;
    color: var(--pt-text-light);
    text-decoration: line-through;
}

.pt-category-page .pt-product-card .price-box .special-price .price {
    color: var(--pt-secondary);
}

/* ===================================================================
   Category Page — Responsive Overrides
   =================================================================== */

@media (max-width: 991px) {
    .pt-category-promo-banners {
        grid-template-columns: 1fr;
    }

    .pt-sidebar-featured,
    .pt-sidebar-custom-html {
        display: none;
    }

    .pt-category-page .sidebar-main .pt-sidebar-featured,
    .pt-category-page .sidebar-main .pt-sidebar-custom-html {
        display: block;
    }
}

@media (max-width: 767px) {
    .pt-category-promo-banners {
        gap: 10px;
    }

    .pt-category-promo-banner {
        min-height: 120px;
        padding: 15px;
    }

    .pt-category-promo-banner__label strong {
        font-size: 18px;
    }

    .pt-category-promo-banner__price strong {
        font-size: 22px;
    }

    .pt-category-page .breadcrumbs {
        margin: 0 0 15px;
        padding: 10px 15px;
    }
}

@media (max-width: 767px) {
    .pt-trustbar__grid {
        flex-direction: column;
        gap: 15px;
    }
    .pt-category-banners__grid {
        grid-template-columns: 1fr;
    }
    .pt-homepage-three-col {
        grid-template-columns: 1fr;
    }
    .pt-services__grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   PDP — Product Detail Page Porto Demo 1 Refinements
   12 fixes for pixel-perfect match to original Porto Demo 1
   =================================================================== */

/* --- PDP-01: Image gallery — thumbnail strip below main image --- */
/* Fotorama default is horizontal thumbs below, which matches Porto Demo 1.
 * These overrides ensure proper spacing and highlight the active thumb. */
.pt-product-page .fotorama__nav-wrap {
    margin-top: 12px;
}

.pt-product-page .fotorama__nav--thumbs .fotorama__nav__frame--thumb {
    width: 100px;
    height: 100px;
    margin: 0 4px;
    padding: 2px !important;
    border: 1px solid #e1e1e1;
    border-radius: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pt-product-page .fotorama__nav--thumbs .fotorama__thumb {
    border: 0;
}

.pt-product-page .fotorama__nav--thumbs .fotorama__active .fotorama__nav__frame--thumb,
.pt-product-page .fotorama__nav--thumbs .fotorama__nav__frame--thumb.fotorama__active {
    opacity: 1;
    border-color: #222529;
    border-width: 1px;
}

/* --- PDP-02: Previous/Next product navigation refinements --- */
.pt-product-prev-next {
    justify-content: flex-end;
}

.pt-product-prev-next__link--prev {
    margin-right: auto;
}

/* --- PDP-03: "Be the first to review" link styling --- */
.pt-product-page .product-reviews-summary .reviews-actions {
    display: flex;
    align-items: center;
}

.pt-product-page .product-reviews-summary .reviews-actions a {
    color: var(--pt-primary);
    font-size: 0.8125rem;
    text-decoration: none;
}

.pt-product-page .product-reviews-summary .reviews-actions a:hover {
    text-decoration: underline;
}

/* When no reviews yet, show "Be the first to review" with proper spacing */
.pt-product-page .product-reviews-summary:empty + .reviews-actions,
.pt-product-page .reviews-actions a.action.add {
    color: var(--pt-primary);
    font-size: 13px;
}

/* --- PDP-04: Price typography — match Porto Demo 1 --- */
.pt-product-page .product-info-price .price-box .price-label {
    font-size: 0.8125rem;
    color: var(--pt-text-light);
    font-weight: 400;
}

.pt-product-page .product-info-price .price-box .price-wrapper .price {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--pt-heading);
    letter-spacing: -0.5px;
}

.pt-product-page .product-info-price .special-price .price-wrapper .price {
    color: var(--pt-primary);
}

.pt-product-page .product-info-price .old-price .price-wrapper .price {
    font-size: 1rem;
    color: var(--pt-text-light);
    text-decoration: line-through;
    font-weight: 400;
}

/* --- PDP-05: Availability and SKU display — deferred to GAP-016 block at ~line 17500 --- */
.pt-product-page .product-info-stock-sku {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 15px 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 12px;
    text-transform: uppercase;
    color: #777;
}

.pt-product-page .product.attribute.sku {
    font-size: 13px;
    color: var(--pt-text-light);
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pt-product-page .product.attribute.sku .type {
    font-weight: 400;
    color: var(--pt-text-light);
}

.pt-product-page .product.attribute.sku .value {
    font-weight: 600;
    color: var(--pt-text-dark);
}

/* Stock styling — defer to GAP-016 rule in stock-sku section */
.pt-product-page .stock {
    font-size: 12px;
    font-weight: 600;
    margin-top: 0;
    display: flex;
    align-items: baseline;
    gap: 0;
}

/* Green dot removed — Porto Demo 1 has plain text "Availability: IN STOCK"
   with no colored indicator. See GAP-016 fix in stock-sku section.
   Use !important to override this from the GAP-016 block. */

/* --- PDP-06: Quantity counter style refinements --- */
.pt-addtocart__qty-control {
    border-radius: 0;
}

.pt-addtocart__qty-btn {
    width: 36px;
    height: 36px;
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
}

.pt-addtocart__qty-btn--minus {
    border-right: 0;
}

.pt-addtocart__qty-btn--plus {
    border-left: 0;
}

.pt-addtocart__qty-input {
    width: 44px;
    height: 36px;
    border: 1px solid var(--pt-border);
    font-size: 14px;
}

/* --- PDP-07 / P1-13: Add to Cart button — full-width blue with cart icon (Porto Demo 1 blue) --- */
/* (background/color handled by P1-13 VQA-012 override above, this block adds shape refinements) */
.pt-product-page .pt-addtocart__submit {
    border-radius: 0;
    height: 45px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- PDP-08: Social sharing icons — additional platform colors --- */
/* LinkedIn and WhatsApp hover colors added above (line ~7944) */

/* --- PDP-09: Tabs — Details / Reviews / Custom Tab styling --- */
.pt-product-page .product.data.items > .item.title > .switch {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    padding: 12px 24px;
    border-radius: 0;
}

/* --- PDP-10: Tab content — already covered in VQA-025 update above --- */

/* --- PDP-11: Related products — heading "WE FOUND OTHER PRODUCTS YOU MIGHT LIKE!" --- */
.pt-related-section .block-title h2 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pt-heading);
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--pt-border);
    margin-bottom: 25px;
}

/* --- PDP-12: Related product cards — "ADD TO CART" button --- */
.pt-product-card--related {
    text-align: center;
}

.pt-product-card--related .pt-product-card__info {
    padding: 10px 0 0;
}

.pt-product-card--related .pt-product-card__name {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
}

.pt-product-card--related .pt-product-card__name a {
    color: var(--pt-text-dark);
    text-decoration: none;
}

.pt-product-card--related .pt-product-card__name a:hover {
    color: var(--pt-primary);
}

.pt-product-card--related .pt-product-card__price {
    margin-bottom: 10px;
}

.pt-product-card--related .pt-product-card__atc-form {
    margin-top: 8px;
}

.pt-product-card__cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 16px;
    background: var(--pt-bg-dark);
    color: #fff;
    border: 2px solid var(--pt-bg-dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background var(--pt-transition), border-color var(--pt-transition);
}

.pt-product-card__cart-btn:hover {
    background: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #fff;
}

.pt-product-card__cart-btn svg {
    flex-shrink: 0;
}

/* --- PDP responsive refinements --- */
@media (max-width: 767px) {
    .pt-product-page .product-info-stock-sku {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pt-product-social-share {
        flex-wrap: wrap;
    }

    .pt-product-prev-next {
        flex-wrap: wrap;
    }

    .pt-product-card__cart-btn {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ===================================================================
   Blog Pages — Post Card, Sidebar, Single Post, Comments, Pagination
   Matches Porto Demo 1 blog layout
   =================================================================== */

/* ── Blog page base ────────────────────────────────────────── */
.pt-blog-page .page-title-wrapper .page-title {
    color: var(--pt-primary);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pt-blog-page .columns {
    padding-top: 30px;
}

/* ── Blog listing ──────────────────────────────────────────── */
.pt-blog-list__items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pt-blog-list__item {
    margin-bottom: 40px;
}

.pt-blog-list__item:last-child {
    margin-bottom: 0;
}

/* ── Blog post card ────────────────────────────────────────── */
.pt-blog-post-card {
    background: #fff;
    border: 1px solid var(--pt-border, #e1e1e1);
    border-radius: 0;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.pt-blog-post-card:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.pt-blog-post-card__image {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.pt-blog-post-card__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.pt-blog-post-card:hover .pt-blog-post-card__image img {
    transform: scale(1.05);
}

.pt-blog-post-card__cats {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.pt-blog-post-card__cat {
    display: inline-block;
    background: var(--pt-primary, #0088cc);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.pt-blog-post-card__cat:hover {
    background: var(--pt-bg-dark, #222);
    color: #fff;
}

.pt-blog-post-card__body {
    padding: 25px;
}

.pt-blog-post-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
}

.pt-blog-post-card__meta svg {
    vertical-align: -2px;
    margin-right: 3px;
    color: #bbb;
}

.pt-blog-post-card__date,
.pt-blog-post-card__author,
.pt-blog-post-card__comments-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pt-blog-post-card__sep {
    color: #ccc;
    margin: 0 3px;
}

.pt-blog-post-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}

.pt-blog-post-card__title a {
    color: var(--pt-heading, #222529);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pt-blog-post-card__title a:hover {
    color: var(--pt-primary, #0088cc);
}

.pt-blog-post-card__excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: #777;
    margin: 0 0 18px;
}

.pt-blog-post-card__readmore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pt-primary, #0088cc);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pt-blog-post-card__readmore:hover {
    color: var(--pt-heading, #222529);
}

.pt-blog-post-card__readmore svg {
    transition: transform 0.2s ease;
}

.pt-blog-post-card__readmore:hover svg {
    transform: translateX(3px);
}

/* ── Blog sidebar ──────────────────────────────────────────── */
.pt-blog-sidebar {
    font-size: 14px;
}

.pt-blog-sidebar__section {
    background: #fff;
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 20px;
    margin-bottom: 20px;
}

.pt-blog-sidebar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    text-transform: uppercase;
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
    position: relative;
}

.pt-blog-sidebar__title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--pt-primary, #0088cc);
}

/* Sidebar search */
.pt-blog-sidebar__search {
    display: flex;
    border: 1px solid var(--pt-border, #e1e1e1);
}

.pt-blog-sidebar__search-input {
    flex: 1;
    border: none;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
    background: #fff;
}

.pt-blog-sidebar__search-input:focus {
    box-shadow: none;
}

.pt-blog-sidebar__search-btn {
    background: var(--pt-primary, #0088cc);
    border: none;
    color: #fff;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
}

.pt-blog-sidebar__search-btn:hover {
    background: var(--pt-bg-dark, #222);
}

/* Sidebar categories */
.pt-blog-sidebar__cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pt-blog-sidebar__cat-list li {
    border-bottom: 1px solid #f0f0f0;
}

.pt-blog-sidebar__cat-list li:last-child {
    border-bottom: none;
}

.pt-blog-sidebar__cat-list a {
    display: block;
    padding: 8px 0;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pt-blog-sidebar__cat-list a:hover {
    color: var(--pt-primary, #0088cc);
}

.pt-blog-sidebar__cat-list a::before {
    content: '\25B8';
    margin-right: 8px;
    color: var(--pt-primary, #0088cc);
}

/* Sidebar recent posts */
.pt-blog-sidebar__recent {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pt-blog-sidebar__recent-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.pt-blog-sidebar__recent-item:first-child {
    padding-top: 0;
}

.pt-blog-sidebar__recent-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pt-blog-sidebar__recent-img-link {
    flex-shrink: 0;
}

.pt-blog-sidebar__recent-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
}

.pt-blog-sidebar__recent-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.pt-blog-sidebar__recent-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-heading, #222529);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.pt-blog-sidebar__recent-link:hover {
    color: var(--pt-primary, #0088cc);
}

.pt-blog-sidebar__recent-date {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* Sidebar tags */
.pt-blog-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pt-blog-sidebar__tag {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid #ddd;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pt-blog-sidebar__tag:hover {
    border-color: var(--pt-primary, #0088cc);
    color: var(--pt-primary, #0088cc);
}

/* ── Blog single post detail ───────────────────────────────── */
.pt-blog-post-detail {
    background: #fff;
}

.pt-blog-post-detail__image {
    margin-bottom: 25px;
    line-height: 0;
}

.pt-blog-post-detail__image img {
    width: 100%;
    height: auto;
    display: block;
}

.pt-blog-post-detail__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    margin: 0 0 12px;
    line-height: 1.3;
}

.pt-blog-post-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 13px;
    color: #999;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
}

.pt-blog-post-detail__meta svg {
    vertical-align: -2px;
    margin-right: 3px;
    color: #bbb;
}

.pt-blog-post-detail__date,
.pt-blog-post-detail__author {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pt-blog-post-detail__sep {
    color: #ccc;
    margin: 0 5px;
}

.pt-blog-post-detail__content {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.pt-blog-post-detail__content p {
    margin-bottom: 1.2em;
}

.pt-blog-post-detail__content h2,
.pt-blog-post-detail__content h3,
.pt-blog-post-detail__content h4 {
    color: var(--pt-heading, #222529);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.pt-blog-post-detail__content img {
    max-width: 100%;
    height: auto;
}

.pt-blog-post-detail__content blockquote {
    border-left: 3px solid var(--pt-primary, #0088cc);
    padding: 15px 20px;
    margin: 20px 0;
    background: #f9f9f9;
    font-style: italic;
    color: #555;
}

/* Post tags */
.pt-blog-post-detail__tags {
    padding: 20px 0;
    border-top: 1px solid var(--pt-border, #e1e1e1);
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pt-blog-post-detail__tags-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    text-transform: uppercase;
}

.pt-blog-post-detail__tag {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #ddd;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pt-blog-post-detail__tag:hover {
    border-color: var(--pt-primary, #0088cc);
    color: var(--pt-primary, #0088cc);
}

/* Post share */
.pt-blog-post-detail__share {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    margin-bottom: 30px;
}

.pt-blog-post-detail__share-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pt-heading, #222529);
}

.pt-blog-post-detail__share-links {
    display: flex;
    gap: 8px;
}

.pt-blog-post-detail__share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pt-bg-light, #f4f4f4);
    color: #555;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    border: 1px solid var(--pt-border, #e1e1e1);
}

.pt-blog-post-detail__share-link:hover {
    color: #fff;
}

.pt-blog-post-detail__share-link--facebook:hover { background: #1877f2; border-color: #1877f2; }
.pt-blog-post-detail__share-link--twitter:hover  { background: #1da1f2; border-color: #1da1f2; }
.pt-blog-post-detail__share-link--linkedin:hover  { background: #0077b5; border-color: #0077b5; }
.pt-blog-post-detail__share-link--email:hover     { background: #555; border-color: #555; }

/* Post back link */
.pt-blog-post-detail__back {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--pt-border, #e1e1e1);
}

/* ── Blog comments section ─────────────────────────────────── */
.pt-blog-comments {
    background: #fff;
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 30px;
    margin-top: 30px;
}

.pt-blog-comments__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    margin: 0 0 8px;
    text-transform: uppercase;
}

.pt-blog-comments__note {
    font-size: 13px;
    color: #999;
    margin-bottom: 25px;
}

.pt-blog-comments__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.pt-blog-comments__form-field {
    margin-bottom: 15px;
}

.pt-blog-comments__form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-heading, #222529);
    margin-bottom: 6px;
}

.pt-blog-comments__form-field input,
.pt-blog-comments__form-field textarea {
    width: 100%;
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.pt-blog-comments__form-field input:focus,
.pt-blog-comments__form-field textarea:focus {
    border-color: var(--pt-primary, #0088cc);
}

.pt-blog-comments__form-field textarea {
    resize: vertical;
    min-height: 120px;
}

@media (max-width: 767px) {
    .pt-blog-comments__form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Blog pagination ───────────────────────────────────────── */
.pt-blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--pt-border, #e1e1e1);
}

.pt-blog-pagination__link,
.pt-blog-pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--pt-border, #e1e1e1);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pt-blog-pagination__link {
    color: #555;
    background: #fff;
}

.pt-blog-pagination__link:hover {
    background: var(--pt-primary, #0088cc);
    color: #fff;
    border-color: var(--pt-primary, #0088cc);
}

.pt-blog-pagination__current {
    background: var(--pt-primary, #0088cc);
    color: #fff;
    border-color: var(--pt-primary, #0088cc);
}

.pt-blog-pagination__prev,
.pt-blog-pagination__next {
    border: 1px solid var(--pt-border, #e1e1e1);
}

.pt-blog-pagination__prev svg,
.pt-blog-pagination__next svg {
    display: block;
}

/* ── Blog empty state ──────────────────────────────────────── */
.pt-blog-empty {
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: #777;
}

/* ===================================================================
   About Us Page — Porto Demo 1 CSS polish
   =================================================================== */

.pt-cms-page.cms-about-us .page-title-wrapper .page-title,
.pt-cms-page .page-title-wrapper .page-title {
    color: var(--pt-primary, #0088cc);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.pt-about-page .page-main {
    padding-top: 0;
}

.pt-about-hero {
    background: var(--pt-bg-light, #f4f4f4);
    padding: 40px 30px;
    text-align: center;
    margin-bottom: 40px;
}

.pt-about-hero h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--pt-heading, #222529);
}

.pt-about-hero p {
    font-size: 15px;
    color: #777;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* SIDEBAR-NAV-02: These rules used to target `.pt-cms-page .column.main`
   which also matched the homepage (also a CMS page) — leaking text-content
   margins onto every h3/ul/li in the homepage sidebar widgets, including
   pt-sidebar-nav__title (h3) and pt-sidebar-nav__list (ul). Scope them to
   the actual text-content pages (.pt-about-page, .pt-contact-page) so the
   homepage widgets keep their BEM styling. */
.pt-about-page p,
.pt-contact-page p {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.2em;
}

.pt-about-page h2,
.pt-contact-page h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    margin: 30px 0 15px;
    text-transform: uppercase;
}

.pt-about-page h3,
.pt-contact-page h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    margin: 25px 0 10px;
}

.pt-about-page img,
.pt-contact-page img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
}

.pt-about-page ul,
.pt-about-page ol,
.pt-contact-page ul,
.pt-contact-page ol {
    padding-left: 20px;
    margin-bottom: 1.2em;
}

.pt-about-page li,
.pt-contact-page li {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 5px;
}

/* ===================================================================
   Contact Page — Porto Demo 1 with map + contact details
   =================================================================== */

.pt-contact-page .page-title-wrapper .page-title {
    color: var(--pt-primary, #0088cc);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.pt-contact-page .pt-contact-map-placeholder {
    height: 300px;
    margin-bottom: 30px;
}

.pt-contact-info__card {
    border: 1px solid var(--pt-border, #e1e1e1);
}

.pt-contact-info__card h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
}

.pt-contact-info__card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--pt-primary, #0088cc);
}

.pt-contact-info__list li strong {
    font-weight: 600;
    color: var(--pt-heading, #222529);
}

.pt-contact-page .field .control input,
.pt-contact-page .field .control textarea {
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 10px 14px;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.2s ease;
}

.pt-contact-page .field .control input:focus,
.pt-contact-page .field .control textarea:focus {
    border-color: var(--pt-primary, #0088cc);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

/* ===================================================================
   Search Results Page — toolbar and no-results refinement
   =================================================================== */

.pt-search-results-page .search.found {
    padding: 15px 0;
}

.pt-search-results-page .search.results .product-items {
    margin-top: 20px;
}

.pt-search-results-page .toolbar-sorter,
.pt-search-results-page .modes {
    font-size: 13px;
}

.pt-search-results-page .toolbar-products {
    padding: 12px 0;
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
    margin-bottom: 20px;
}

/* ===================================================================
   404 Page — centered with styled CMS content
   =================================================================== */

.pt-page-404 .page-main {
    text-align: center;
    padding: 60px 20px;
}

.pt-page-404 .page-title-wrapper {
    display: none;
}

.pt-page-404 .column.main {
    max-width: 900px;
    margin: 0 auto;
}

/* Porto-styled 404 content (rendered via no-route CMS page) */
.pt-page-404 .pt-page-404-content {
    padding: 20px 0 60px;
}

.pt-page-404 .pt-404-number {
    font-size: 10rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pt-primary, #0088cc);
    letter-spacing: -4px;
    margin-bottom: 1rem;
}

.pt-page-404 .pt-404-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    margin: 0 0 0.75rem;
    text-transform: none;
}

.pt-page-404 .pt-404-subtitle {
    font-size: 1rem;
    color: #777;
    margin-bottom: 2rem;
}

.pt-page-404 .pt-404-search form {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid var(--pt-primary, #0088cc);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.pt-page-404 .pt-404-search input[type="search"],
.pt-page-404 .pt-404-search input[type="text"] {
    flex: 1;
    border: 0;
    padding: 12px 16px;
    font-size: 14px;
    outline: none;
}

.pt-page-404 .pt-404-search button,
.pt-page-404 .pt-404-search .action.search {
    background: var(--pt-primary, #0088cc);
    color: #fff;
    border: 0;
    padding: 12px 20px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-page-404 .pt-404-search button:hover {
    background: var(--pt-primary-dark, #006699);
}

@media (max-width: 600px) {
    .pt-page-404 .pt-404-number {
        font-size: 6rem;
    }
    .pt-page-404 .pt-404-title {
        font-size: 1.5rem;
    }
}

.pt-page-404 .column.main dl {
    text-align: left;
    margin-top: 20px;
}

.pt-page-404 .column.main dl dt {
    font-weight: 700;
    color: var(--pt-heading, #222529);
    margin-bottom: 5px;
}

.pt-page-404 .column.main dl dd {
    margin-bottom: 15px;
    color: #555;
    font-size: 14px;
}

/* .pt-page-404 ul/li rules removed — new .nf-* markup has no list element */

/* ===================================================================
   Customer Login Page — Porto Demo 1 two-column with social login
   =================================================================== */

.pt-login-page .page-title-wrapper .page-title {
    color: var(--pt-primary, #0088cc);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.pt-login-page .login-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 960px;
    margin: 30px auto 60px;
}

/* LOGIN-01: Demo 1 block-customer-login / block-new-customer are flat:
   no bg, no border, pad 0 10px. Ours was bg/border/pad30 — boxy.
   Flatten to match Demo 1 exactly. */
.pt-login-page .block-customer-login,
.pt-login-page .block-new-customer,
body.customer-account-login .login-container .block-customer-login,
body.customer-account-login .login-container .block-new-customer {
    background: transparent !important;
    border: 0 !important;
    padding: 0 10px !important;
    box-shadow: none !important;
}

.pt-login-page .block-customer-login .block-title,
.pt-login-page .block-new-customer .block-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
    padding-bottom: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;
    position: relative;
}

.pt-login-page .block-customer-login .block-title::after,
.pt-login-page .block-new-customer .block-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--pt-primary, #0088cc);
}

.pt-login-page .block-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.pt-login-page .field .control input {
    width: 100%;
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.pt-login-page .field .control input:focus {
    border-color: var(--pt-primary, #0088cc);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

.pt-login-page .field .label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-heading, #222529);
    margin-bottom: 6px;
}

.pt-login-page .actions-toolbar .action.login,
.pt-login-page .actions-toolbar .action.create {
    display: block;
    width: 100%;
    background: var(--pt-bg-dark, #222);
    color: #fff;
    border: 2px solid var(--pt-bg-dark, #222);
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pt-login-page .actions-toolbar .action.login:hover,
.pt-login-page .actions-toolbar .action.create:hover {
    background: var(--pt-primary, #0088cc);
    border-color: var(--pt-primary, #0088cc);
}

.pt-login-page .actions-toolbar .secondary a {
    font-size: 13px;
    color: var(--pt-primary, #0088cc);
    text-decoration: none;
    margin-top: 12px;
    display: inline-block;
}

.pt-login-page .actions-toolbar .secondary a:hover {
    text-decoration: underline;
}

/* ── R7: CREATE AN ACCOUNT CTA stacked below SIGN IN ─────────── */
.pt-login-create-account {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--pt-border, #e1e1e1);
    text-align: left;
}

.pt-login-create-account__text {
    font-size: 13px;
    color: var(--pt-text-light, #777);
    margin-bottom: 10px;
}

.pt-login-create-account .action.create {
    display: inline-block;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--pt-heading, #222529);
    color: var(--pt-heading, #222529);
    background: transparent;
    border-radius: var(--pt-radius-sm, 3px);
    transition: background 0.2s ease, color 0.2s ease;
    letter-spacing: 0.5px;
}

.pt-login-create-account .action.create:hover {
    background: var(--pt-heading, #222529);
    color: #fff;
}

/* Social login placeholder (ready for plugins) */
.pt-login-social {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--pt-border, #e1e1e1);
}

.pt-login-social__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pt-heading, #222529);
    margin-bottom: 12px;
    text-align: center;
}

.pt-login-social__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pt-login-social__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--pt-border, #e1e1e1);
    color: #555;
    text-decoration: none;
    transition: background 0.2s ease;
    background: #fff;
    cursor: pointer;
}

.pt-login-social__btn:hover {
    background: var(--pt-bg-light, #f4f4f4);
}

.pt-login-social__btn--facebook { border-color: #1877f2; color: #1877f2; }
.pt-login-social__btn--google   { border-color: #db4437; color: #db4437; }
.pt-login-social__btn--facebook:hover { background: #1877f2; color: #fff; }
.pt-login-social__btn--google:hover   { background: #db4437; color: #fff; }

@media (max-width: 767px) {
    .pt-login-page .login-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ===================================================================
   Customer Registration Page — Porto Demo 1
   =================================================================== */

.pt-register-page .page-title-wrapper .page-title {
    color: var(--pt-primary, #0088cc);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.pt-register-page .form.create.account {
    max-width: 800px;
    margin: 30px auto 60px;
    background: #fff;
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 30px;
}

.pt-register-page .form.create.account .fieldset {
    margin-bottom: 25px;
}

.pt-register-page .form.create.account .legend {
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-heading, #222529);
    text-transform: uppercase;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

.pt-register-page .form.create.account .legend::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--pt-primary, #0088cc);
}

.pt-register-page .field .control input {
    width: 100%;
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.pt-register-page .field .control input:focus {
    border-color: var(--pt-primary, #0088cc);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

.pt-register-page .field .label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-heading, #222529);
    margin-bottom: 6px;
}

.pt-register-page .actions-toolbar .action.submit {
    display: block;
    width: 100%;
    background: var(--pt-bg-dark, #222);
    color: #fff;
    border: 2px solid var(--pt-bg-dark, #222);
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pt-register-page .actions-toolbar .action.submit:hover {
    background: var(--pt-primary, #0088cc);
    border-color: var(--pt-primary, #0088cc);
}

/* ===================================================================
   Checkout Page — Porto Demo 1 payment and layout refinements
   =================================================================== */

.pt-checkout-page .page-title-wrapper .page-title {
    color: var(--pt-primary, #0088cc);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.pt-checkout-page .authentication-wrapper {
    margin-bottom: 20px;
}

.pt-checkout-page .authentication-wrapper .action-auth-toggle {
    color: var(--pt-primary, #0088cc);
    font-size: 13px;
    font-weight: 600;
}

.pt-checkout-page .payment-method-title {
    padding: 12px 15px;
    background: var(--pt-bg-light, #f4f4f4);
    border: 1px solid var(--pt-border, #e1e1e1);
    margin-bottom: -1px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.pt-checkout-page .payment-method-content {
    padding: 20px 15px;
    border: 1px solid var(--pt-border, #e1e1e1);
    border-top: none;
}

.pt-checkout-page .payment-method .action.primary.checkout {
    background: var(--pt-primary, #0088cc);
    color: #fff;
    border: 2px solid var(--pt-primary, #0088cc);
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pt-checkout-page .payment-method .action.primary.checkout:hover {
    background: var(--pt-bg-dark, #222);
    border-color: var(--pt-bg-dark, #222);
}

.pt-checkout-page .billing-address-form .field .label {
    font-size: 13px;
    font-weight: 600;
}

.pt-checkout-page .discount-code .payment-option-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--pt-primary, #0088cc);
    cursor: pointer;
}

.pt-checkout-page .opc-block-summary .items-in-cart > .title {
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 10px 0;
    border-bottom: 1px solid var(--pt-border, #e1e1e1);
}

.pt-checkout-page .opc-block-summary .table-totals th,
.pt-checkout-page .opc-block-summary .table-totals td {
    padding: 6px 0;
    font-size: 14px;
}

.pt-checkout-page .opc-block-summary .grand.totals th,
.pt-checkout-page .opc-block-summary .grand.totals td {
    font-size: 16px;
    font-weight: 700;
    padding-top: 12px;
    border-top: 1px solid var(--pt-border, #e1e1e1);
}

/* ===================================================================
   Shopping Cart Page — Porto Demo 1 update/discount refinements
   =================================================================== */

.pt-cart-page .action.update {
    background: var(--pt-bg-light, #f4f4f4);
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--pt-heading, #222529);
    cursor: pointer;
    transition: background 0.2s ease;
}

.pt-cart-page .action.update:hover {
    background: var(--pt-border, #e1e1e1);
}

.pt-cart-page .action.continue {
    font-size: 13px;
    color: var(--pt-primary, #0088cc);
    text-decoration: none;
    font-weight: 600;
}

.pt-cart-page .action.continue:hover {
    text-decoration: underline;
}

.pt-cart-page .block.discount {
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 15px;
    margin-top: 15px;
}

.pt-cart-page .block.discount .title strong {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--pt-primary, #0088cc);
}

.pt-cart-page .block.discount .field .control input {
    border: 1px solid var(--pt-border, #e1e1e1);
    padding: 10px 12px;
    font-size: 14px;
    width: 100%;
}

.pt-cart-page .block.discount .action.apply {
    background: var(--pt-primary, #0088cc);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

.pt-cart-page .checkout-methods-items .action.primary.checkout {
    background: var(--pt-primary, #0088cc);
    border-color: var(--pt-primary, #0088cc);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
}

.pt-cart-page .checkout-methods-items .action.primary.checkout:hover {
    background: var(--pt-bg-dark, #222);
    border-color: var(--pt-bg-dark, #222);
}

/* ===================================================================
   Shared Button Styles (pt-btn--dark, pt-btn--outline)
   =================================================================== */

.pt-btn--dark {
    display: inline-block;
    background: var(--pt-bg-dark, #222);
    color: #fff;
    border: 2px solid var(--pt-bg-dark, #222);
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pt-btn--dark:hover {
    background: var(--pt-primary, #0088cc);
    border-color: var(--pt-primary, #0088cc);
    color: #fff;
}

.pt-btn--outline {
    display: inline-block;
    background: #fff;
    color: var(--pt-heading, #222529);
    border: 2px solid var(--pt-border, #e1e1e1);
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pt-btn--outline:hover {
    border-color: var(--pt-primary, #0088cc);
    color: var(--pt-primary, #0088cc);
}

/* ===================================================================
   Blog / Inner Pages — Responsive
   =================================================================== */

@media (max-width: 767px) {
    .pt-blog-post-card__title {
        font-size: 17px;
    }

    .pt-blog-post-detail__title {
        font-size: 20px;
    }

    .pt-blog-comments {
        padding: 20px;
    }

    .pt-blog-post-detail__share {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===================================================================
   PIXEL-PERFECT OVERRIDES — Consolidated (single block, no duplicates)
   These MUST be at the end to override Magento defaults + earlier rules.
   =================================================================== */

/* --- Global font stack --- */
body,button,input,select,textarea,.action,.actions-toolbar .action,.field .label,.breadcrumbs,.page-title,.block-title,.toolbar,.product-item-link,.product-item-name,.price-box,.price,.product-info-main,.product-options-wrapper,.table-wrapper,th,td,.modal-popup,.modal-slide,.checkout-cart-index,.customer-account-login,.sidebar{font-family:Poppins}

input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="url"],input[type="number"],select,textarea{font-family:Poppins;font-size:13px;border:1px solid #e1e1e1;border-radius:0;padding:10px 14px;color:#777;background:#fff;transition:border-color .2s ease;outline:none}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="number"]:focus,select:focus,textarea:focus{border-color:#0088cc;box-shadow:none;outline:none}

.pt-header__search-input{border:none!important;border-radius:0!important;background:transparent!important}

button.action.primary,.action.primary{font-family:Poppins;font-weight:700;text-transform:uppercase;letter-spacing:.1px;border-radius:0}

.product-item-link{font-size:15px!important;font-weight:400!important;font-family:Poppins!important;color:#222529!important;line-height:1.35!important;letter-spacing:-.15px!important;text-decoration:none!important}
.product-item-link:hover{color:#0088cc!important}

.product-item .price-box .price{font-size:18px!important;font-weight:600!important;font-family:Poppins!important;color:#444!important;line-height:18px!important}
.product-item .price-box .old-price .price{font-size:13px!important;font-weight:400!important;color:#999!important;text-decoration:line-through!important}
.product-item .price-box .special-price .price{color:#ff5b5b!important}

.products-grid .product-item .action.tocart{height:36px;width:36px;padding:0;font-size:14px;font-weight:700;font-family:Poppins;background:#fff;color:#333;border:1px solid #ddd;border-radius:30px;text-transform:uppercase;letter-spacing:.14px;line-height:34px;text-align:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.products-grid .product-item .action.tocart:hover{background:#0088cc;color:#fff;border-color:#0088cc}

.products-grid .product-item .actions-secondary .action{width:36px;height:36px;border-radius:30px;border:1px solid #ddd;background:#fff;color:#333;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.products-grid .product-item .actions-secondary .action:hover{background:#0088cc;color:#fff;border-color:#0088cc}

.breadcrumbs{font-size:12px;font-family:Poppins;margin-bottom:0}
.breadcrumbs a{font-size:12px;color:#8e8e8e;font-family:Poppins}
.breadcrumbs a:hover{color:#0088cc}

.page-title-wrapper .page-title{font-size:28px;font-weight:700;font-family:Poppins;color:#222529;text-transform:none;letter-spacing:normal}

.toolbar-products{font-family:Poppins;font-size:13px}
.toolbar-products select{font-family:Poppins;font-size:13px;height:36px;border:1px solid #e1e1e1;border-radius:0;padding:6px 30px 6px 10px}

.sidebar-main .filter-options-title{font-size:15px;font-weight:600;font-family:Poppins;color:#222529;text-transform:uppercase;padding:12px 0;border-bottom:1px solid #e7e7e7}
.sidebar-main .filter-options-item .item a{font-size:13px;font-family:Poppins;color:#777;padding:6px 0;line-height:24px}
.sidebar-main .filter-options-item .item a:hover{color:#0088cc}

.product-info-main .page-title-wrapper .page-title{font-size:30px;font-weight:700;font-family:Poppins;color:#222529;letter-spacing:-.3px;line-height:36px}
.product-info-main .price-box .price{font-size:24px;font-weight:600;font-family:Poppins;color:#222529;line-height:24px}
.product-info-main .product.attribute.overview,.product-info-main .product.attribute.overview .value{font-size:16px;font-family:Poppins;color:#777;line-height:27px}
.product-info-main .product.attribute.sku .value{font-size:12px;font-family:Poppins;color:#222529}

.product-info-main .action.tocart.primary{height:48px;padding:0 28px;font-size:14px;font-weight:700;font-family:Poppins;background:#0088cc;color:#fff;border:none;border-radius:0;text-transform:uppercase;letter-spacing:-.21px;line-height:48px;cursor:pointer;transition:background .2s ease}
.product-info-main .action.tocart.primary:hover{background:#0073aa}

.product-info-main .input-text.qty,.product-info-main input#qty{width:44px;height:48px;text-align:center;font-size:16px;font-family:Poppins;border:1px solid #e1e1e1;border-radius:0;padding:0 5px}

.product.data.items>.item.title>.switch,.product.data.items .data.switch{font-size:13px;font-weight:700;font-family:Poppins;color:#818692;text-transform:uppercase;letter-spacing:normal}
.product.data.items>.item.title.active>.switch{color:#222529}
.product.data.items>.item.content{font-size:14px;font-family:Poppins;color:#777;line-height:24px}

.product-social-links a,.product-addto-links a{font-size:14px;font-family:Poppins;color:#222529}

.checkout-cart-index .page-title{font-size:22px;font-weight:700;font-family:Poppins;color:#222529;text-transform:uppercase}
.checkout-cart-index .cart.item .product-item-name a{font-size:14px;font-weight:700;font-family:Poppins;color:#222529}
.checkout-cart-index .cart.item .product-item-name a:hover{color:#0088cc}
.checkout-cart-index .cart.item .price{font-size:16px;font-weight:600;font-family:Poppins;color:#444}

.cart-summary .checkout-methods-items .action.primary.checkout{font-size:14px;font-weight:700;font-family:Poppins;background:#0088cc;border:none;padding:14px 24px;text-transform:uppercase;border-radius:0}
.cart-summary .checkout-methods-items .action.primary.checkout:hover{background:#0073aa}

.customer-account-login .field .label{font-family:Poppins;font-size:14px;font-weight:500;color:#777}
.customer-account-login .field .control input{font-family:Poppins;font-size:13.6px;height:50px;padding:8px 12px;border:0;border-radius:24px 0 0 24px;background:#F4F4F4}

.pt-brand-slider-section,.pt-brands{border-top:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;padding:32px 0}
.sections.nav-sections{background-color:#f4f4f4;border-bottom:none}
.block-title strong{font-family:Poppins;font-weight:700}
.block-minicart .product-item-name a{font-family:Poppins;font-size:14px;color:#222529}
.block-minicart .price{font-family:Poppins;font-weight:600}
.pages .items .item a,.pages .items .item strong{font-family:Poppins;font-size:13px}
.abs-product-name a,.product-item-name a,.product.name a{font-family:Poppins}
.products-grid .product-item{margin:0;padding:0}
.products-grid .product-items{margin:0;padding:0}
.product-item-info{max-width:none;padding:0}
.pt-product-page .columns .column.main::after,.pt-category-page .columns::after{content:'';display:table;clear:both}

/* --- CSS Variables override --- */
:root {
    --pt-topbar-height: 40px !important;
    /* iter7: raised from 98px to 113px — announcement bar moved out of page-header
       so we add its 40px height back as 15px extra padding here to reach original
       Porto V2 Demo 1 header height of 201px (topbar:40 + header:113 + nav:48 = 201) */
    --pt-header-height: 113px !important;
    --pt-nav-height: 48px !important;
    --pt-font: Poppins !important;
    --pt-font-heading: Poppins !important;
    --pt-line-height: 1.714 !important;
}

/* --- Body --- */
body {
    line-height: 24px;
    font-family: Poppins;
}

/* --- Topbar: 40px, #0188cc bg --- */
.pt-topbar {
    height: 40px !important;
    line-height: 40px !important;
    font-size: 11px;
    font-family: Poppins;
    color: #bde1f5;
    background-color: #0188cc !important;
}
.pt-topbar__inner { line-height: 40px !important; }
.pt-topbar__link-item,
.pt-topbar__link-item a,
.pt-topbar__switcher,
.pt-topbar__welcome { line-height: 40px !important; }
.pt-topbar__link-item a { color: #bde1f5; font-size: 11px; font-weight: 600; font-family: Poppins; }
.pt-topbar__switcher { color: #bde1f5; font-size: 11px; font-weight: 600; }
.pt-topbar__social-icon { color: #bde1f5; }
.pt-topbar__link-item--divider { border-left-color: rgba(189, 225, 245, 0.3); }

/* --- Header: padding, no border --- */
.pt-header { padding: 20px 0; border-bottom: none; min-height: 98px; }
.pt-header__logo img { height: 44px; width: 111px; max-width: 111px; max-height: 44px; }

/* --- Search --- */
.pt-header__search-input { height: 40px !important; font-size: 13px; font-family: Poppins; padding: 8px 12px 8px 20px; color: #8d8d8d; border: none !important; background: transparent !important; border-radius: 0 !important; }
.pt-header__search-cat { height: 40px; }
.pt-header__search-btn { height: 40px; }

/* --- Nav bar --- */
.pt-nav { background-color: #f4f4f4; border-bottom: none; height: 48px; }
.pt-nav__link { font-size: 12px !important; font-weight: 600 !important; font-family: Poppins !important; color: #6b7a83 !important; padding: 18px 0 !important; text-transform: uppercase !important; letter-spacing: -0.3px !important; line-height: 12px !important; }
.pt-nav__link:hover, .pt-nav__item.is-active > .pt-nav__link { color: #0088cc !important; }
.pt-nav__item { margin-right: 23px; }
.pt-nav__item:last-child { margin-right: 0; }

/* --- Magento nav-sections --- */
.sections.nav-sections { background-color: #f4f4f4 !important; border-bottom: none !important; display: block !important; height: auto !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important; margin-bottom: 0 !important; }
.nav-sections .navigation { font-family: Poppins; font-size: 12px; font-weight: 700; max-width: 1200px; margin: 0 auto; padding: 0 10px; }
.nav-sections .navigation .level0 > a { font-family: Poppins !important; font-size: 12px !important; font-weight: 600 !important; color: #6b7a83 !important; padding: 18px 0 !important; text-transform: uppercase !important; letter-spacing: -0.3px !important; line-height: 12px !important; text-decoration: none !important; }
.nav-sections .navigation .level0 > a:hover { color: #0088cc !important; }
.nav-sections .navigation .level0 { margin-right: 23px; }
.nav-sections .navigation .level0:last-child { margin-right: 0; }
.nav-sections .nav-sections-items { display: block !important; }
.nav-sections .nav-sections-item-content { display: block !important; }

/* --- Page header --- */
.page-header { border-top: 0 !important; background-color: #0088cc !important; }

/* --- Section titles --- */
h2.pt-section-title { font-size: 16px !important; font-weight: 700 !important; font-family: Poppins !important; letter-spacing: -0.16px !important; line-height: 22px !important; margin-bottom: 24px !important; text-transform: uppercase !important; }
.pt-three-col__title { font-size: 16px !important; font-weight: 700 !important; font-family: Poppins !important; text-transform: uppercase !important; letter-spacing: -0.16px !important; }

/* --- Product card name/price --- */
.pt-product-card__name, .pt-cms-page .column.main .pt-product-card__name, .pt-cms-page .column.main h3.pt-product-card__name { font-size: 15px !important; font-weight: 400 !important; font-family: Poppins !important; line-height: 1.35 !important; letter-spacing: -0.15px !important; }
.pt-product-card__name a { color: #222529 !important; }
.pt-product-card__name a:hover { color: #0088cc !important; }
.pt-product-card__price-now { font-size: 18px !important; font-weight: 600 !important; font-family: Poppins !important; color: #444 !important; }
.pt-product-card { border: none !important; box-shadow: none !important; padding: 0 10px !important; }
.pt-product-card:hover { box-shadow: none !important; }
.pt-product-card .product-item-name a, .pt-product-card h3 a, .products-grid .product-item-name a { font-size: 15px !important; font-weight: 400 !important; color: #222529 !important; font-family: Poppins !important; letter-spacing: -0.15px !important; line-height: 1.35 !important; text-decoration: none !important; }
.pt-product-card .product-item-name a:hover, .pt-product-card h3 a:hover, .products-grid .product-item-name a:hover { color: #0088cc !important; }
.pt-product-card .price, .products-grid .product-item .price-box .price { font-size: 18px !important; font-weight: 600 !important; color: #444 !important; font-family: Poppins !important; line-height: 18px !important; }
.pt-product-card .old-price .price, .products-grid .product-item .price-box .old-price .price { font-size: 13px !important; font-weight: 400 !important; color: #999 !important; text-decoration: line-through !important; }
.pt-product-card .special-price .price, .products-grid .product-item .price-box .special-price .price { color: #ff5b5b !important; }

/* --- Add to cart (grid): circle 36x36 --- */
.products-grid .product-item .action.tocart { height: 36px !important; width: 36px !important; padding: 0 !important; font-size: 0 !important; background: #fff !important; color: #333 !important; border: 1px solid #ddd !important; border-radius: 30px !important; line-height: 34px !important; text-align: center !important; }
.products-grid .product-item .action.tocart:hover { background: #0088cc !important; color: #fff !important; border-color: #0088cc !important; }

/* --- Primary button --- */
button.action.primary, .action.primary, .actions-toolbar .action.primary { font-family: Poppins !important; font-size: 14px !important; font-weight: 700 !important; background-color: #0088cc !important; color: #fff !important; border: none !important; border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: 0.14px !important; cursor: pointer; }
button.action.primary:hover, .action.primary:hover, .actions-toolbar .action.primary:hover { background-color: #0073aa !important; }

/* --- Login/Register buttons: dark (P1-13: PDP tocart removed from this group — it is blue) --- */
.customer-account-login .action.login, .customer-account-login .action.create { background-color: #222529 !important; }
.customer-account-login .action.login:hover, .customer-account-login .action.create:hover { background-color: #0088cc !important; }

/* --- Login page --- */
.customer-account-login .page-title-wrapper .page-title, .customer-account-login .page-title { font-size: 28px !important; font-weight: 700 !important; color: #212529 !important; text-transform: none !important; letter-spacing: normal !important; font-family: Poppins !important; }
.customer-account-login .block-title strong, .customer-account-login .login-container .block-title strong { font-size: 22px !important; font-weight: 700 !important; color: #222529 !important; text-transform: none !important; letter-spacing: -0.22px !important; line-height: 1.2 !important; font-family: Poppins !important; }
.customer-account-login .field .control input, .customer-account-login input[type="email"], .customer-account-login input[type="password"], .customer-account-login input[type="text"] { font-family: Poppins !important; font-size: 13.6px !important; height: 50px !important; padding: 8px 12px !important; border: 0 !important; border-radius: 24px 0 0 24px !important; background: #F4F4F4 !important; color: #777 !important; width: 100% !important; }
.customer-account-login .field .control input:focus { border-color: #0088cc !important; box-shadow: none !important; }
.customer-account-login .action.login, .customer-account-login .actions-toolbar .action.login { font-size: 16px !important; font-weight: 700 !important; font-family: Poppins !important; background: #222529 !important; color: #fff !important; border: none !important; border-radius: 0 !important; padding: 16px 32px !important; text-transform: uppercase !important; width: 100% !important; display: block !important; cursor: pointer; }
.customer-account-login .action.login:hover { background: #0088cc !important; }
.customer-account-login .action.create, .customer-account-login .block-new-customer .action.create { font-size: 16px !important; font-weight: 700 !important; font-family: Poppins !important; background: #222529 !important; color: #fff !important; border: none !important; border-radius: 0 !important; padding: 16px 32px !important; text-transform: uppercase !important; width: 100% !important; display: block !important; text-align: center !important; text-decoration: none !important; }
.customer-account-login .action.create:hover { background: #0088cc !important; color: #fff !important; }
.customer-account-login .login-container { display: flex !important; flex-wrap: wrap !important; max-width: 1200px !important; margin: 0 auto !important; }
.customer-account-login .login-container .block { flex: 1 !important; min-width: 0 !important; padding: 0 10px !important; }

/* --- Breadcrumbs --- */
.breadcrumbs { font-family: Poppins !important; font-size: 12px !important; margin-bottom: 0 !important; padding: 12px 0 !important; }
.breadcrumbs a { font-size: 12px !important; color: #8e8e8e !important; text-transform: uppercase !important; font-family: Poppins !important; }
.breadcrumbs a:hover { color: #0088cc !important; }

/* --- Category page sidebar --- */
.pt-category-page .sidebar-main .block-title strong, .sidebar-main .block-title strong { font-size: 15px !important; font-weight: 600 !important; color: #222529 !important; text-transform: uppercase !important; font-family: Poppins !important; }
.sidebar-main .block-content a, .pt-category-page .sidebar-main a { font-size: 14px !important; font-weight: 500 !important; color: #777 !important; font-family: Poppins !important; padding: 4px 0 !important; line-height: 22px !important; }
.sidebar-main .block-content a:hover, .pt-category-page .sidebar-main a:hover { color: #0088cc !important; }
.pt-category-page .page-title, .catalog-category-view .page-title { font-size: 20px !important; font-weight: 700 !important; color: #0088cc !important; font-family: Poppins !important; }

/* --- Browse categories sidebar --- */
.pt-sidebar-categories .pt-sidebar-categories__title, .browse-categories-title { font-size: 15px !important; font-weight: 600 !important; color: #222529 !important; text-transform: uppercase !important; font-family: Poppins !important; }
.pt-sidebar-categories a, .pt-sidebar-categories .pt-sidebar-categories__link { font-size: 14px !important; font-weight: 500 !important; color: #777 !important; font-family: Poppins !important; padding: 4px 0 !important; line-height: 22px !important; }
.pt-sidebar-categories a:hover { color: #0088cc !important; }

/* --- Form inputs --- */
.fieldset > .field > .control input[type="text"], .fieldset > .field > .control input[type="email"], .fieldset > .field > .control input[type="password"], .fieldset > .field > .control input[type="tel"], .fieldset > .field > .control select, .fieldset > .field > .control textarea { height: 50px !important; border: 1px solid rgba(0,0,0,0.09) !important; border-radius: 0 !important; background: #fff !important; padding: 8px 12px !important; font-family: Poppins !important; font-size: 13.6px !important; color: #777 !important; }
.fieldset > .field > .control input:focus, .fieldset > .field > .control select:focus, .fieldset > .field > .control textarea:focus { border-color: #0088cc !important; box-shadow: none !important; }
.customer-account-create .field .control input { height: 50px !important; border: 1px solid rgba(0,0,0,0.09) !important; border-radius: 0 !important; background: #fff !important; font-family: Poppins !important; font-size: 13.6px !important; }
.contact-index-index .fieldset > .field > .control textarea { height: 150px !important; }

/* --- Footer overrides --- */
.pt-footer-middle__title { font-size: 15px !important; font-weight: 600 !important; font-family: Poppins !important; text-transform: uppercase !important; }
.pt-footer-middle__contact p, .pt-footer-middle__about-text { font-size: 13px !important; color: #a8a8a8 !important; letter-spacing: 0.065px !important; line-height: 24px !important; }
.pt-footer-middle__links a { font-size: 13px !important; color: #a8a8a8 !important; letter-spacing: 0.065px !important; line-height: 22px !important; font-family: Poppins; }
.pt-footer-middle__links li { margin-bottom: 10px; }
.pt-footer-bottom { padding: 15px 0; font-size: 11.7px !important; letter-spacing: 0.065px !important; }
.pt-footer-bottom__copyright { font-size: 11.7px; font-family: Poppins; letter-spacing: 0.065px !important; }

/* --- Cart page --- */
.checkout-cart-index .page-title-wrapper .page-title { font-size: 22px !important; font-weight: 700 !important; color: #222529 !important; text-transform: uppercase !important; font-family: Poppins !important; }

/* --- Newsletter sidebar button — SIDEBAR-NEWSLETTER-01 ---
   Demo 1 measured: btn w 127, h 41, bg rgb(0,136,204), uppercase 11/700.
   Block display but width auto (content width). */
.pt-sidebar-newsletter .pt-sidebar-newsletter__btn,
.pt-sidebar-newsletter button,
.pt-sidebar-newsletter [type="submit"] {
    display: inline-block !important;
    height: 41px !important;
    padding: 0 24px !important;
    background: #0088cc !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: Poppins !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
.pt-sidebar-newsletter .pt-sidebar-newsletter__btn:hover,
.pt-sidebar-newsletter button:hover { background: #0073aa !important; }

/* --- P1-13: PDP add to cart button blue (matches Porto Demo 1) --- */
.product-info-main .box-tocart .action.tocart { background: #0088cc !important; color: #fff !important; border: none !important; border-radius: 0 !important; height: 48px !important; padding: 0 28px !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: -0.21px !important; font-family: Poppins !important; }
.product-info-main .box-tocart .action.tocart:hover { background: #0073aa !important; }

/* --- PDP float-based layout (prevents Fotorama 9.5M pixel bug) --- */
.pt-product-page .columns .column.main { display: block !important; overflow: hidden; }
/* PDP-GALLERY-02: override duplicate — Demo 1 media 42% / info 55% */
.pt-product-page .product.media { float: left !important; width: 42% !important; overflow: visible; }
.pt-product-page .product-info-main { float: right !important; width: 55% !important; }

/* ===================================================================
   VQA-030: Pixel-perfect hero slide — Porto Demo 1 matching
   =================================================================== */

/* Hero slide italic title (e.g., "Summer Sale" in cursive) */
.pt-hero-slide__title em {
    font-style: italic;
    font-family: 'Georgia', 'Times New Roman', cursive;
    font-weight: 400;
    font-size: 48px;
    display: block;
    text-transform: none;
}

/* Hero slide primary button — Porto red style */
.pt-hero-slide .pt-btn--primary {
    background: var(--pt-secondary);
    border: 2px solid var(--pt-secondary);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 28px;
    font-size: 13px;
    border-radius: 3px;
}
.pt-hero-slide .pt-btn--primary:hover {
    background: var(--pt-secondary-dark);
    border-color: var(--pt-secondary-dark);
    color: #fff;
}

/* Hero content left alignment */
.pt-hero-slide__content--left {
    text-align: left;
}

/* Hero slide label (subtitle above title) */
.pt-hero-slide__label {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Footer logo sizing — match original Porto (selector also handles direct img child) */
.pt-footer-middle__logo img,
.pt-footer-middle__col > img {
    width: 111px !important;
    max-width: 111px !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: contain;
}

/* ===================================================================
   VQA-031: Pixel-perfect v9 — 5 CSS fixes from section comparison
   =================================================================== */

/* Fix #1: Promo bar MEN/WOMEN — white boxed badges matching original */
.pt-promo-bar__cta {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 3px 12px;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 0 4px;
    display: inline-block;
    line-height: 1.4;
}
.pt-promo-bar__cta:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Fix #2: Topbar links — ALL CAPS matching original Porto */
.pt-topbar__link-item a {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Fix #3: Search bar — wider, category dropdown fully visible */
.pt-header__search {
    max-width: 620px;
}
.pt-header__search-cat {
    width: 130px;
    min-width: 130px;
}
.pt-header__search-inner {
    border: 1px solid #e1e1e1;
    background: #fff;
}

/* Fix #4: Header icons — outlined heart (not filled), cart with badge */
.pt-header__tool-item--wishlist svg {
    fill: none;
    stroke: currentColor;
}
.pt-header__tool-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--pt-primary);
    color: #fff;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.pt-header__tool-item {
    position: relative;
}

/* Fix #5: Trust bar — icons in colored circles matching original */
.pt-trustbar__icon {
    width: 46px;
    height: 46px;
    border: 2px solid var(--pt-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pt-primary);
    flex-shrink: 0;
}
.pt-trustbar__icon svg {
    stroke: var(--pt-primary);
    width: 22px;
    height: 22px;
}
.pt-trustbar__text h3 {
    font-size: 14px;
    font-weight: 700;
    color: #222529;
    text-transform: uppercase;
    letter-spacing: 0;
}
.pt-trustbar__text p {
    font-size: 13px;
    color: #777;
}
/* Trust bar separator — vertical line between items */
.pt-trustbar__item + .pt-trustbar__item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: #e1e1e1;
}

/* ===================================================================
   FIX: Cart + Checkout layout collapse (C1 + C2)
   Magento Blank's _module.less applies float+percentage widths to
   .form-cart, .cart-summary, .opc-wrapper, .opc-sidebar that override
   the porto-v2 grid layout. These rules reset the children so the
   parent grid actually controls width.
   =================================================================== */

/* C1 — Cart with item: reset floats/widths inside .cart-container grid */
.checkout-cart-index .cart-container,
.pt-cart-page .cart-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    float: none;
}

.checkout-cart-index .cart-container > .form-cart,
.checkout-cart-index .cart-container > #form-validate,
.pt-cart-page .cart-container > .form-cart,
.pt-cart-page .cart-container > #form-validate {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 100%;
    float: none !important;
    padding-right: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.checkout-cart-index .cart-container > .cart-summary,
.pt-cart-page .cart-container > .cart-summary {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 1.5rem;
    position: sticky;
    top: 80px;
    min-width: 0;
}

/* Hide empty placeholder divs Magento renders inside .cart-container that
   would otherwise consume grid tracks and push real content down. */
.checkout-cart-index .cart-container > div:empty,
.pt-cart-page .cart-container > div:empty {
    display: none !important;
}

@media (max-width: 991px) {
    .checkout-cart-index .cart-container,
    .pt-cart-page .cart-container {
        grid-template-columns: minmax(0, 1fr);
    }
    .checkout-cart-index .cart-container > .form-cart,
    .checkout-cart-index .cart-container > #form-validate,
    .pt-cart-page .cart-container > .form-cart,
    .pt-cart-page .cart-container > #form-validate {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }
    .checkout-cart-index .cart-container > .cart-summary,
    .pt-cart-page .cart-container > .cart-summary {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        position: static;
    }
}

/* C2 — Checkout: Magento renders .checkout-container > {.opc-progress-bar,
   .opc-estimated-wrapper, .opc-wrapper, .opc-sidebar, .authentication-wrapper}
   inside .columns > .column.main. The grid container MUST be .checkout-container
   (NOT .column.main) because .opc-wrapper and .opc-sidebar are direct children
   of .checkout-container. Resetting .column.main to block prevents double-grid. */
.checkout-index-index .columns,
.pt-checkout-page .columns {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.checkout-index-index .column.main,
.pt-checkout-page .column.main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.checkout-index-index .checkout-container,
.pt-checkout-page .checkout-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
        "progress progress"
        "form     sidebar";
    column-gap: 30px;
    row-gap: 1.5rem;
    align-items: start;
    justify-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.checkout-index-index .checkout-container > .opc-progress-bar,
.pt-checkout-page .checkout-container > .opc-progress-bar {
    grid-area: progress;
    justify-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 1.5rem 0 !important;
}

.checkout-index-index .checkout-container > .opc-estimated-wrapper,
.pt-checkout-page .checkout-container > .opc-estimated-wrapper {
    display: none !important;
}

.checkout-index-index .checkout-container > .opc-wrapper,
.pt-checkout-page .checkout-container > .opc-wrapper {
    grid-area: form;
    justify-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 0 !important;
}

.checkout-index-index .checkout-container > .opc-sidebar,
.checkout-index-index .checkout-container > .opc-summary-wrapper,
.pt-checkout-page .checkout-container > .opc-sidebar,
.pt-checkout-page .checkout-container > .opc-summary-wrapper {
    grid-area: sidebar;
    justify-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    float: none !important;
    margin: 0 !important;
    position: sticky;
    top: 80px;
}

.checkout-index-index .checkout-container > .authentication-wrapper,
.pt-checkout-page .checkout-container > .authentication-wrapper {
    grid-area: progress;
    justify-self: end;
    align-self: start;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .checkout-index-index .checkout-container,
    .pt-checkout-page .checkout-container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "progress"
            "sidebar"
            "form";
    }
    .checkout-index-index .checkout-container > .opc-sidebar,
    .pt-checkout-page .checkout-container > .opc-sidebar {
        position: static;
    }
}

/* ===================================================================
   PORTO-COLOR-02 — Restore Porto blue (#0088CC) on missing component states
   Reference Porto Demo 1 paints --pt-primary on 70 elements; clone was at 13.
   This block adds the missing hover, CTA, badge, and step-up states.
   =================================================================== */
.action.primary,
.action-primary,
button.primary,
button.action.primary {
    background-color: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #ffffff;
}
.action.primary:hover,
.action-primary:hover,
button.primary:hover,
button.action.primary:hover {
    background-color: var(--pt-primary-dark);
    border-color: var(--pt-primary-dark);
    color: #ffffff;
}
.action.tocart.primary,
.product-info-main .action.tocart.primary,
.box-tocart .action.tocart {
    background-color: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #ffffff;
}
.action.tocart.primary:hover,
.box-tocart .action.tocart:hover {
    background-color: var(--pt-primary-dark);
    border-color: var(--pt-primary-dark);
}
.product-label.sale-label,
.product-label.new-label,
.product-item .product-label {
    background-color: var(--pt-primary);
    color: #ffffff;
}
.minicart-wrapper .action.showcart .counter.qty,
.counter.qty {
    background-color: var(--pt-primary);
    color: #ffffff;
}
.swiper-button-next,
.swiper-button-prev,
.slick-arrow:hover,
.owl-prev:hover,
.owl-next:hover {
    color: var(--pt-primary);
}
.top-links a:hover,
.greet a:hover,
.header .links a:hover,
.footer-links a:hover,
.footer a:hover {
    color: var(--pt-primary);
}
.actions-toolbar .action.continue,
.actions-toolbar .action.update,
.cart.table-wrapper .action-edit:hover,
.cart.table-wrapper .action-delete:hover {
    color: var(--pt-primary);
}
.product-item-name a:hover,
.product-item-link:hover,
.page-title a:hover {
    color: var(--pt-primary);
}
.qty-control .qty-btn:hover,
.product-info-main .field.qty .control button:hover {
    color: var(--pt-primary);
    border-color: var(--pt-primary);
}
.action.subscribe.primary,
button.action.subscribe {
    background-color: var(--pt-primary);
    border-color: var(--pt-primary);
    color: #ffffff;
}

/* ===================================================================
   PORTO-MENU-01 — Defensive container constraint for mega-menu
   Ensures the rendered nav never overflows the 1200px page grid even
   if a child block forgets to wrap itself in .pt-container.
   =================================================================== */
.pt-megamenu {
    width: 100%;
}
.pt-megamenu > .pt-container,
.pt-megamenu > ul.pt-nav__list {
    max-width: var(--pt-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pt-gutter);
    padding-right: var(--pt-gutter);
}
.pt-nav__list {
    box-sizing: border-box;
}

/* ============================================================================
   PORTO-MINOR-01: Hero Slider Navigation Arrows
   ============================================================================ */
.pt-hero-slider {
    position: relative;
}

.pt-hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.pt-hero-slider__arrow:hover {
    background-color: #ffffff;
}

.pt-hero-slider__arrow::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-top: 2px solid #333;
}

.pt-hero-slider__arrow--prev {
    left: 20px;
}

.pt-hero-slider__arrow--prev::after {
    transform: rotate(-135deg);
    margin-right: 3px;
}

.pt-hero-slider__arrow--next {
    right: 20px;
}

.pt-hero-slider__arrow--next::after {
    transform: rotate(45deg);
    margin-left: 3px;
}

@media (max-width: 767px) {
    .pt-hero-slider__arrow {
        display: none;
    }
}

/* ============================================================================
   PORTO-MINOR-02: Footer Recent Posts Column
   ============================================================================ */
.pt-footer-middle__row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.pt-footer-recent-posts__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pt-footer-recent-posts__item {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    align-items: flex-start;
}

.pt-footer-recent-posts__image-link {
    flex-shrink: 0;
}

.pt-footer-recent-posts__image-link img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.pt-footer-recent-posts__info {
    flex: 1;
}

.pt-footer-recent-posts__info h4 {
    font-size: 13px;
    margin: 4px 0 0;
    line-height: 1.3;
    font-weight: 600;
}

.pt-footer-recent-posts__info h4 a {
    color: inherit;
    text-decoration: none;
}

.pt-footer-recent-posts__info h4 a:hover {
    color: var(--pt-primary);
}

.pt-footer-recent-posts__date {
    font-size: 11px;
    color: #999;
    display: block;
    margin-bottom: 4px;
}

@media (max-width: 1024px) {
    .pt-footer-middle__row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .pt-footer-middle__row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   PORTO-MINOR-03: Related Products Block
   ============================================================================ */
.block-related {
    margin-top: 48px;
}

.block-related .block-title strong {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}

.block-related .products-grid {
    margin-top: 20px;
}

.block-related .product-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.block-related .field.choice {
    display: none;
}

@media (max-width: 1024px) {
    .block-related .product-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .block-related .product-items {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   PORTO-MINOR-04: Electronics Megamenu Promo Tile
   ============================================================================ */
.pt-megamenu__dropdown--classic {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.pt-megamenu__dropdown--classic > ul {
    flex: 1;
}

/* FIX-PARITY-08: Megamenu promo block — Porto Demo 1 renders the promo
   as a 200x240 card with the product image as the background, and the
   UP TO / 50% OFF / Shop Now overlay absolutely positioned on top. */
.pt-megamenu__promo {
    position: relative;
    width: 200px;
    min-height: 240px;
    text-align: center;
    overflow: hidden;
    background: #f4f4f4;
    border-radius: 2px;
    flex-shrink: 0;
}

.pt-megamenu__promo img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
}

.pt-megamenu__promo-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    padding: 0 15px;
    text-align: center;
    z-index: 2;
}

.pt-megamenu__promo-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #222529;
    margin-bottom: 2px;
}

.pt-megamenu__promo-percent {
    display: block;
    font-size: 32px;
    line-height: 1;
    color: #222529;
    font-weight: 700;
    margin: 0 0 10px;
}

.pt-megamenu__promo-percent sup {
    font-size: 12px;
    font-weight: 700;
    vertical-align: super;
    margin-left: 2px;
    color: #e84c3d;
}

.pt-megamenu__promo .pt-btn--sm {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 18px;
    background: #0088cc;
    color: #ffffff;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
}

.pt-megamenu__promo .pt-btn--sm:hover {
    background: #007bb8;
    color: #ffffff;
}

@media (max-width: 1024px) {
    .pt-megamenu__promo {
        display: none;
    }
}

/* ===================================================================
   PORTO-VALIDATE-LOOP-1 — Cosmetic parity corrections
   Diff'd live against m2.portotheme.com/demo1_en (April 2026).
   Each rule documents the reference value it is targeting.
   =================================================================== */

/* Topbar font weight: reference uses 600 (semi-bold), we shipped 400. */
.pt-topbar,
.pt-topbar__welcome,
.pt-topbar__link-item,
.pt-topbar__switcher {
    font-weight: 600 !important;
}

/* Topbar height: reference 40px, we shipped 36px. */
.pt-topbar {
    height: 40px !important;
    line-height: 40px !important;
}

/* Demo 1 has no full-width promo bar above the topbar; hide it for now.
 * (Demos that DO use one wrap their <body> in .pt-promo-bar--show; absence
 * of that class on demo 1 keeps it hidden by default.) */
body:not(.pt-promo-bar--show) .pt-promo-bar {
    display: none !important;
}

/* Newsletter input: reference height 48px (we shipped 32px). */
.pt-footer-top__newsletter-input {
    height: 48px !important;
}

/* Footer link color/size: reference #A8A8A8 / 13px / 24px line-height. */
.pt-footer a,
.pt-footer-middle a {
    font-size: 13px;
    line-height: 24px;
}

/* Footer headings: reference uses 13px uppercase, we shipped 15px. */
.pt-footer-middle__title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}


/* ===================================================================
   PORTO-VALIDATE-LOOP-2 — Category PLP parity corrections
   Diff'd live against m2.portotheme.com/demo1_en/categories.html (Apr 2026).
   Review feedback addressed:
     - WCAG AA contrast: prices use #006699 (5.74:1) instead of #0088cc (3.89:1)
     - Scope: every selector requires .pt-category-page so CMS-embedded
       product widgets are unaffected
     - Performance: aspect-ratio replaces min-height + object-fit reflow
     - Mobile: <480px overrides reduce padding/min-height for narrow screens
   Deferred (out of scope): extract LOOP-* blocks to porto-overrides.css
   =================================================================== */

/* Page title: clone shipped margin-bottom 40px (Magento default).
 * Reference uses 15px which matches the breadcrumb spacing rhythm. */
.pt-category-page .page-title-wrapper {
    margin-bottom: 15px !important;
}
.pt-category-page .page-title-wrapper .page-title {
    margin-bottom: 0 !important;
}

/* Product cards on PLP: reference uses 15px 10px padding for breathing
 * room. Strictly scoped to .pt-category-page so CMS-embedded product
 * widgets are unaffected (CMS has its own card density rules). */
.pt-category-page .pt-product-grid__item {
    padding: 15px 10px !important;
    background: #fff;
}

/* F-BUG-CARD-04: PLP card typography — re-measured from REAL Demo 1 category
 * page (m2.portotheme.com/demo1_en/categories/electronics.html). CARD-03's
 * 15px/lh1.35 was measured on the /porto-product-list-types/ showcase page
 * which displays multiple Grid Types mixed together — Grid Type 1 on an
 * actual category URL is:
 *   Name : <a> 14px / 400 / line-height 19.6px (1.4) / rgb(34,37,41)
 *   Price: span.price 15px / 600 / rgb(68,68,68)
 *   Old  : [data-price-type="oldPrice"] .price 12px / 600 / rgb(167,167,167) line-through
 *   (R77: corrected from 14.4px — CARD-04 measurement was wrong; re-verified live)
 *   Card : width ~238px (viewport-dependent, 4-col grid)
 */
.pt-category-page .pt-product-card__name {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 8px 0 4px !important;
    letter-spacing: 0 !important;
}
.pt-category-page .pt-product-card__name,
.pt-category-page .pt-product-card__name a {
    color: rgb(34, 37, 41) !important;
}

/* Price: final price on Demo 1 is 15px/600/rgb(68,68,68). The previous
 * .pt-category-page .pt-product-card .price selector (spec 0,3,1) lost
 * to Magento's default .product-info-price .price rules. Escalate by
 * targeting .pt-product-card__price span.price with the same scope. */
.pt-category-page .pt-product-card__price,
.pt-category-page .pt-product-card__price .price,
.pt-category-page .pt-product-card .price-box .price,
.pt-category-page .pt-product-card .price-wrapper .price {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgb(68, 68, 68) !important;
}
/* Old price (strikethrough) on discounted cards */
.pt-category-page .pt-product-card__price-old,
.pt-category-page .pt-product-card .old-price .price,
.pt-category-page .pt-product-card [data-price-type="oldPrice"] .price {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgb(167, 167, 167) !important;
    text-decoration: line-through !important;
}

/* Encourage card images to render at ~180-220px (was 135px).
 * aspect-ratio reserves the box up front so image swap does not
 * trigger reflow on every load. */
.pt-category-page .pt-product-card__image {
    aspect-ratio: 1 / 1;
    min-height: 180px;
}
.pt-category-page .pt-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mobile: <480px gets tighter padding and shorter image so the card
 * does not push the price below the fold on narrow phones. */
@media (max-width: 479px) {
    .pt-category-page .pt-product-grid__item {
        padding: 8px 5px !important;
    }
    .pt-category-page .pt-product-card__image {
        min-height: 120px;
    }
    .pt-category-page .pt-product-card__name {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
}

/* ============================================================================
 * PORTO-VALIDATE-LOOP-3 — Product Detail Page (PDP) parity vs Porto Demo 1
 * Reference: https://m2.portotheme.com/demo1_en/apple-airpods-max.html
 * Scope: strictly under .pt-product-page to keep PLP / CMS untouched.
 *
 * Diff captured 2026-04-08 via getComputedStyle on both DOMs:
 *   Element              | Porto Demo 1            | Ours (vloop2)        | Fix
 *   --------------------+-------------------------+----------------------+-------------
 *   h1.page-title        | 30px / 700 / mb 6px     | 15px / 700 / mb 0px  | bump
 *   product-info price   | 24px / 600 / #222529    | 16.25px / 700 / #777 | bump+recolor
 * ============================================================================ */

/* Product title — h1 inside .product-info-main was rendering at .base inline
 * size (15px). Porto Demo 1 ships an h1 at 30px / 700 with a 6px bottom
 * margin so the price sits visually directly under the name. */
.pt-product-page .product-info-main h1.page-title,
.pt-product-page .page-title-wrapper h1.page-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
    color: #222529 !important;
    text-transform: none !important;
}
.pt-product-page .product-info-main h1.page-title .base,
.pt-product-page .page-title-wrapper h1.page-title .base {
    /* `.base` is a span inside the h1 — let it inherit so the cascade above wins. */
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Product price block — Porto Demo 1 renders at 24px / 600 / #222529.
 * Ours was 16.25px / 700 / #777 (gray, undersized). Match the reference. */
.pt-product-page .product-info-main .price-box .price,
.pt-product-page .product-info-price .price-box .price,
.pt-product-page .product-info-main .price-final_price .price {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #222529 !important;
    line-height: 1.2 !important;
}

/* Old price (when present) stays smaller and struck-through, in muted gray. */
.pt-product-page .product-info-main .old-price .price,
.pt-product-page .product-info-main .price-box .old-price .price {
    font-size: 16px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Mobile: <480px → reduce title to 22px so it does not wrap into 3+ lines. */
@media (max-width: 479px) {
    .pt-product-page .product-info-main h1.page-title,
    .pt-product-page .page-title-wrapper h1.page-title {
        font-size: 22px !important;
    }
    .pt-product-page .product-info-main .price-box .price {
        font-size: 20px !important;
    }
}

/* ============================================================================
 * PORTO-VALIDATE-LOOPS-4-9 — Batched parity fixes for cart, checkout, login,
 * my-account, CMS pages, and search/404 vs Porto Demo 1.
 *
 * Each section is strictly scoped under its body class to avoid leakage.
 * Diffs captured 2026-04-08 via getComputedStyle on the live reference and
 * test-protov2-01 storefront in parallel browser tabs.
 * ============================================================================ */

/* ----- Loop 4: Shopping Cart (.checkout-cart-index / .pt-cart-page) ------ */

/* Page title — Porto: 20px / 700 / #0088CC accent (matches reference link
 * color), no bottom margin. The wrapper carries the vertical breathing room. */
.checkout-cart-index .pt-cart-page .page-title-wrapper h1.page-title,
.pt-cart-page .page-title-wrapper h1.page-title,
.pt-cart-page h1.page-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0088cc !important;
    margin-bottom: 0 !important;
}
.pt-cart-page .page-title-wrapper {
    padding: 32px 0 !important;
    margin-bottom: 0 !important;
}

/* Empty cart message — Porto centers the text without inflated padding,
 * relying on .page-main vertical rhythm. Ours had 60px 20px which pushed
 * everything too far down. */
.pt-cart-page .cart-empty {
    padding: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #777 !important;
}

/* Continue-shopping CTA — Porto styles it as a solid uppercase block button.
 * Ours fell back to a plain text link. Force button styling. */
.pt-cart-page .cart-empty a {
    display: inline-block;
    background-color: #222529 !important;
    color: #fff !important;
    padding: 16px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    margin-top: 20px;
}
.pt-cart-page .cart-empty a:hover {
    background-color: #0088cc !important;
}

/* Page max-width — Porto uses 1200px container, ours was 1280px. Reduce to
 * match the reference for visual rhythm. */
.pt-cart-page .page-main {
    max-width: 1200px !important;
    padding-bottom: 40px !important;
}

/* ----- Loop 5: Checkout (.checkout-index-index / .pt-checkout-page) ----- */

/* The checkout shell on Porto Demo 1 uses a 1200px max-width with 30px gap
 * between the form column and the order summary sidebar. Match that. */
.checkout-index-index .page-main,
.pt-checkout-page .page-main {
    max-width: 1200px !important;
}
.checkout-index-index .opc-wrapper {
    padding-right: 30px !important;
}
.checkout-index-index .opc-progress-bar {
    margin: 30px 0 25px !important;
}
.checkout-index-index .opc-progress-bar-item > span {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}
.checkout-index-index .opc-progress-bar-item._active > span {
    color: #0088cc !important;
}
.checkout-index-index .opc-block-summary {
    background-color: #f4f4f4 !important;
    padding: 22px 30px !important;
}
.checkout-index-index .opc-block-summary > .title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #222529 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    padding-bottom: 15px !important;
    margin-bottom: 18px !important;
}

/* ----- Loop 6: Customer Login (.customer-account-login) ----------------- */

/* New-customer block — Porto strips the card chrome and uses a quiet
 * 20px / 300 / #777 title to keep visual focus on the login form. */
.customer-account-login .block-new-customer {
    padding: 7px 21px 0 0 !important;
    border: none !important;
    background-color: transparent !important;
}
.customer-account-login .block-new-customer .block-title strong {
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #777 !important;
}
.customer-account-login .block-new-customer .block-content p {
    font-size: 14px !important;
    color: #777 !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

/* P1-06: Belt-and-suspenders hide for "New Customers" block.
 * Primary gate is customer_account_login.xml display="false".
 * This CSS ensures the block stays hidden even if layout cache is stale. */
.customer-account-login .block-new-customer {
    display: none !important;
}

/* ----- Loop 7: My Account dashboard (.customer-account-index) ----------- */

/* Account nav sidebar — Porto Demo 1 uses a clean light-gray panel with
 * uppercase section headers and underlined active link. Match the rhythm. */
.customer-account-index .block-collapsible-nav .item a,
.account .block-collapsible-nav .item a {
    padding: 8px 18px !important;
    font-size: 13px !important;
    color: #555 !important;
    border-left: 2px solid transparent !important;
}
.customer-account-index .block-collapsible-nav .item.current a,
.account .block-collapsible-nav .item.current a,
.customer-account-index .block-collapsible-nav .item.current strong,
.account .block-collapsible-nav .item.current strong {
    color: #0088cc !important;
    border-left: 2px solid #0088cc !important;
    background-color: #f4f4f4 !important;
}
.customer-account-index .block-dashboard-info .block-title strong,
.account .block .block-title strong {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #222529 !important;
}

/* ----- Loop 8: CMS pages (.cms-page-view / .pt-cms-page) ---------------- */

/* Container width parity — Porto uses 1200px with 20px / 40px vertical
 * padding. Ours had 1280px with 0px padding (looks too wide and flush). */
.cms-page-view .page-main,
.pt-cms-page .page-main {
    max-width: 1200px !important;
    padding-top: 20px !important;
    padding-bottom: 40px !important;
}

/* CMS page title — match cart styling with Porto blue accent. */
.cms-page-view h1.page-title,
.pt-cms-page h1.page-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0088cc !important;
}

/* ----- Loop 9: Search results + 404 ------------------------------------- */

/* Search results page title color — Porto uses the blue accent.
 * Body class is `pt-search-results-page` (not `pt-search-result`) — loop 9
 * shipped the wrong selector, causing the default #222529 to win. This
 * correction also bumps specificity with `body.` so stray default rules
 * from luma don't override.
 */
body.catalogsearch-result-index .page-title-wrapper h1.page-title,
body.pt-search-results-page .page-title-wrapper h1.page-title {
    color: #0088cc !important;
}

/* 404 page CTA padding — 1px difference normalized. */
.cms-no-route a.action.primary,
.pt-page-404 a.action.primary {
    padding: 15px 17px !important;
}

/* ============================================================================
 * PORTO-VALIDATE-LOOP-10 — Mobile pass (≤480px / 375px viewport)
 *
 * Loops 2 (PLP) and 3 (PDP) already shipped per-page mobile @media queries.
 * This loop adds the same treatment to cart, checkout, login, my-account,
 * and CMS so the entire site holds together at iPhone-13 width (390px) and
 * iPhone-SE width (375px).
 *
 * Verified against Porto Demo 1 mobile rendering at 375px width.
 * ============================================================================ */

@media (max-width: 479px) {

    /* ----- Cart -------------------------------------------------------- */
    .pt-cart-page .page-title-wrapper {
        padding: 18px 0 !important;
    }
    .pt-cart-page h1.page-title {
        font-size: 18px !important;
    }
    .pt-cart-page .cart-empty a {
        padding: 14px 22px !important;
        font-size: 13px !important;
        display: block;
        text-align: center;
    }

    /* ----- Checkout ---------------------------------------------------- */
    .checkout-index-index .opc-wrapper {
        padding-right: 0 !important;
    }
    .checkout-index-index .opc-progress-bar {
        margin: 18px 0 15px !important;
    }
    .checkout-index-index .opc-progress-bar-item > span {
        font-size: 11px !important;
    }
    .checkout-index-index .opc-block-summary {
        padding: 18px !important;
    }

    /* ----- Login ------------------------------------------------------- */
    .customer-account-login .block-customer-login,
    .customer-account-login .block-new-customer {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 25px !important;
    }
    .customer-account-login .block-customer-login .action.login {
        padding: 14px 22px !important;
        font-size: 14px !important;
    }

    /* ----- My Account -------------------------------------------------- */
    .customer-account-index .block-collapsible-nav,
    .account .block-collapsible-nav {
        margin-bottom: 20px !important;
    }
    .customer-account-index .block-collapsible-nav .item a,
    .account .block-collapsible-nav .item a {
        padding: 10px 14px !important;
    }

    /* ----- CMS --------------------------------------------------------- */
    .pt-cms-page .page-main,
    .cms-page-view .page-main {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .pt-cms-page h1.page-title,
    .cms-page-view h1.page-title {
        font-size: 18px !important;
    }

    /* ----- Search results / 404 ---------------------------------------- */
    .pt-search-results-page h1.page-title,
    .catalogsearch-result-index h1.page-title {
        font-size: 18px !important;
    }
    .pt-page-404 a.action.primary,
    .cms-no-route a.action.primary {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }
}

/* ----- Tablet (480-767px) — soften the gap between mobile and desktop ----- */
@media (min-width: 480px) and (max-width: 767px) {
    .pt-cart-page .page-main,
    .pt-checkout-page .page-main,
    .pt-cms-page .page-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ============================================================================
 * Loops 11-20 discovery sweep — batched parity corrections
 * ----------------------------------------------------------------------------
 * Captured by fingerprinting Porto Demo 1 against our porto-v2 clone via
 * Chrome MCP getComputedStyle. Each rule below ships a diff found during
 * Loops 11-20 of the validation sweep that was not caught by the earlier
 * per-page audits.
 *
 * Full gap report: docs/visual-qa/PORTO_VALIDATE_LOOPS_11_20_COMPLETE.md
 * ==========================================================================*/

/* Loop 18 — Category PLP: Porto's category h1 has 15px bottom margin; ours
 * was 0. Without this gap the breadcrumb-to-grid rhythm is too tight. */
body.pt-category-page .page-title-wrapper .page-title,
body.catalog-category-view .page-title-wrapper .page-title {
    margin-bottom: 15px !important;
}

/* Loop 18 — PLP + PDP breadcrumbs: Porto renders breadcrumbs on a white
 * background with no wrapper padding and a slightly softer grey. Ours had
 * a #f4f4f4 strip and 12px vertical padding that pushed the h1 down. */
body.pt-category-page .breadcrumbs,
body.catalog-category-view .breadcrumbs,
body.pt-product-page .breadcrumbs,
body.catalog-product-view .breadcrumbs {
    background-color: #ffffff !important;
    padding: 0 !important;
}
body.pt-category-page .breadcrumbs .items,
body.catalog-category-view .breadcrumbs .items,
body.pt-product-page .breadcrumbs .items,
body.catalog-product-view .breadcrumbs .items,
body.pt-category-page .breadcrumbs .items > li,
body.catalog-category-view .breadcrumbs .items > li,
body.pt-product-page .breadcrumbs .items > li,
body.catalog-product-view .breadcrumbs .items > li {
    color: #8e8e8e !important;
}

/* Loop 19 — PDP SKU row: Porto uses #777 / 12px / 400 / mb 4px for the SKU
 * line. Ours shipped #999 / 13px / mb 0 which made the meta row look heavier
 * than the reference. */
body.pt-product-page .product-info-stock-sku .sku,
body.catalog-product-view .product-info-stock-sku .sku {
    color: #777777 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-bottom: 4px !important;
}

/* Loop 19 — PDP stock indicator: Porto's "In stock" label is a quiet
 * #222529 / 12px / 600 with a 4px left pad. Ours was #0088cc / 13px / 700 —
 * way too shouty next to the SKU. Downgrades it back to reference weight. */
body.pt-product-page .product-info-stock-sku .stock.available,
body.pt-product-page .product-info-stock-sku .stock,
body.catalog-product-view .product-info-stock-sku .stock.available,
body.catalog-product-view .product-info-stock-sku .stock {
    color: #222529 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    padding: 0 0 0 4px !important;
}

/* Loop 19 — PDP qty label + input: Porto renders the Qty label at
 * 14px/500/#777 with 8px margin-bottom, and the input at 44x48 with a visible
 * border. Ours was missing these dimensions. */
body.pt-product-page .product-info-main .field.qty > .label,
body.catalog-product-view .product-info-main .field.qty > .label {
    color: #777777 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}
body.pt-product-page .product-info-main .field.qty .control input#qty,
body.catalog-product-view .product-info-main .field.qty .control input#qty {
    width: 44px !important;
    height: 48px !important;
    font-size: 16px !important;
    border: 1px solid #e7e7e7 !important;
    text-align: center !important;
}

/* Loop 19 — PDP price label stray: Our PDP renders a tiny 8.125px
 * "Special Price" label that is not present in Porto Demo 1. Hide it so the
 * price block matches the reference. */
body.pt-product-page .product-info-price .price-label,
body.catalog-product-view .product-info-price .price-label {
    display: none !important;
}

/* =====================================================================
 * Loops 21-30 discovery sweep — second-pass parity corrections.
 *
 * Scope: PDP tab title/content parity, PLP filter-title reset, sidebar
 * padding cleanup, cart empty-state typography, login page chrome, search
 * results notice + h1 scoping, interactive hover/focus correction.
 *
 * Reference: https://m2.portotheme.com/demo1_en/
 * Full diff table: docs/visual-qa/PORTO_VALIDATE_LOOPS_21_30_COMPLETE.md
 * ===================================================================== */

/* Loop 22 — PLP filter-title has a stale gray pill background; Porto Demo 1
 * renders the filter heading flush with no background fill. Reset to clean
 * transparent to match. */
body.pt-category-page .sidebar .filter-title,
body.catalog-category-view .sidebar .filter-title,
body.page-products .sidebar .filter-title {
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Loop 22 — Sidebar right-padding produces an odd fractional value
 * (24.7969px). Reset to an integer value that matches the Porto layout
 * gutter. */
body.pt-category-page .sidebar.sidebar-main,
body.catalog-category-view .sidebar.sidebar-main,
body.page-products .sidebar.sidebar-main {
    padding-right: 20px !important;
}

/* Loop 23 — PDP tab title typography. Porto ships 13px/700 with inactive
 * #818692 and active #222529, with zero padding on the `.switch`. Our
 * variant had 600 weight, #999 inactive, and 12px/24px padding. Align to
 * the reference so the tab strip sits flush. */
body.pt-product-page .product.data.items > .item.title > .switch,
body.catalog-product-view .product.data.items > .item.title > .switch {
    font-weight: 700 !important;
    padding: 0 !important;
    color: #818692 !important;
}
body.pt-product-page .product.data.items > .item.title.active > .switch,
body.pt-product-page .product.data.items > .item.title._active > .switch,
body.catalog-product-view .product.data.items > .item.title.active > .switch,
body.catalog-product-view .product.data.items > .item.title._active > .switch {
    color: #222529 !important;
}

/* Loop 23 — PDP tab content font-size is rendering at 8.75px on our tenant
 * (clearly broken inheritance from something upstream). Porto renders 14px/
 * 24px in #777. Force the correct typography on the active content panel. */
body.pt-product-page .product.data.items > .item.content,
body.catalog-product-view .product.data.items > .item.content {
    font-size: 14px !important;
    line-height: 24px !important;
    color: #777 !important;
}

/* Loop 23 — PDP reviews summary: Porto 13px/#999 with 18.57px mb; ours 14px/
 * #777 with 12px mb. Reshape to match. */
body.pt-product-page .product-info-main .product-reviews-summary,
body.catalog-product-view .product-info-main .product-reviews-summary {
    font-size: 13px !important;
    color: #999 !important;
    margin-bottom: 18px !important;
}

/* Loop 23 — GAP-019: social-links same row as ATC, no top margin */
body.pt-product-page .product-info-main .product-social-links,
body.catalog-product-view .product-info-main .product-social-links {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Loop 24 — Cart empty state: Porto .cart-empty p renders at 14px with 20px
 * margin-bottom; ours at 16px/25px. Align to Porto. */
body.pt-cart-page .cart-empty p,
body.checkout-cart-index .cart-empty p {
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

/* Loop 26 — Login page h1 flush against block titles: Porto mb=0, ours mb=
 * 40px. Trim to match the Porto stacked layout. */
body.pt-login-page .page-title-wrapper .page-title,
body.customer-account-login .page-title-wrapper .page-title,
body.pt-login-page.customer-account-create .page-title-wrapper .page-title,
body.customer-account-create .page-title-wrapper .page-title {
    margin-bottom: 0 !important;
}

/* Loop 26 — Login block-title: Porto 22px/400 no border/no uppercase/no
 * padding, mb 15px. Ours 18px/700 uppercase with border-bottom + padding.
 * Reset to the Porto variant. The inner strong still reads 22px/700. */
body.pt-login-page .login-container .block-title,
body.customer-account-login .login-container .block-title {
    font-size: 22px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

/* Loop 26 — Login field labels need 8px mb to breathe above inputs. */
body.pt-login-page .login-container .field > .label,
body.pt-login-page .login-container .field > label,
body.customer-account-login .login-container .field > .label,
body.customer-account-login .login-container .field > label {
    margin-bottom: 8px !important;
}

/* Loop 27 — Search results h1: our PLP margin-bottom fix (Loops 11-20) was
 * scoped to catalog-category-view and missed the search results body class.
 * Extend so the gap beneath the "Search results for: ..." heading matches
 * the PLP treatment (15px). */
body.pt-search-results-page .page-title-wrapper .page-title,
body.catalogsearch-result-index .page-title-wrapper .page-title {
    margin-bottom: 15px !important;
}

/* Loop 27 — Search empty-results notice alignment with Porto: 14px font,
 * padding 12px 14px 12px 45px, mb 7px. */
body.pt-search-results-page .message.notice,
body.catalogsearch-result-index .message.notice {
    font-size: 14px !important;
    padding: 12px 14px 12px 45px !important;
    margin-bottom: 7px !important;
}

/* Loop 28 — Hover color correction. Porto's default hover for `.action.
 * primary` and `a` resolves to #0088cc (the base primary blue), not a
 * darker shade. Our CSS had `var(--pt-primary-dark)` overriding the base
 * and producing a visible rgb(0,107,180) hover. Force the canonical
 * primary hover color. */
body .action.primary:hover,
body button.action.primary:hover,
body .action-primary:hover {
    background-color: #0088cc !important;
    border-color: #0088cc !important;
    color: #ffffff !important;
}
body a:hover,
body .nav-sections a:hover {
    color: #0088cc !important;
}

/* Loop 28 — Focus state for inputs: Porto ships box-shadow: none so the
 * browser's default blue focus ring is suppressed. Match. */
body input:focus,
body select:focus,
body textarea:focus {
    box-shadow: none !important;
}

/* Loop 28 — Focus state for bare buttons matches hover-ish light gray with
 * #e7e7e7 border and #777 text, per Porto Demo 1. */
body button:focus {
    background: #e2e2e2 !important;
    border: 1px solid #e7e7e7 !important;
    color: #777 !important;
}

/* =========================================================================
 * PORTO-VALIDATE-LOOPS-31-45 — fourth discovery sweep (PR #TBD)
 *
 * 15 additional discovery loops against Porto Demo 1. Loops 31, 33, 36,
 * 38, 39, 43, 44 surfaced structural/deferred items (hero slider content
 * block, section heading color minor, mini-cart dropdown missing,
 * PLP layered filters not available on Porto Demo 1 reference, seeded
 * cart blocker, CMS page minor). Batched below: Loops 32, 34, 35, 37,
 * 40, 41, 42 shippable parity fixes.
 *
 * See docs/visual-qa/PORTO_VALIDATE_LOOPS_31_45_COMPLETE.md for full DOM
 * fingerprint tables and deferred follow-up list.
 * ========================================================================= */

/* Loop 32 — Product carousel card price 14/400/#777 → 18/600/#444
 *   Applies to .pt-product-card price inside product carousel
 *   Porto reference: 18px/600/#444, matches top-rated and featured widgets */
body .pt-product-card__price,
body .pt-product-card .price-box .price,
body .pt-product-card .price-wrapper .price,
body .products-grid .product-item .price-box .price {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #444444 !important;
}

/* Loop 34 — Header mega-menu submenu box + level-1/level-2 typography
 *   Porto: min-width 230px, pad 10px, box-shadow 0 10px 25px rgba(0,0,0,.15)
 *   Level 1 (column heading): 12px/700/#333/uppercase/pad 0 0 5px
 *   Level 2 (regular items):  12px/600/#696969/uppercase/pad 7px 0       */
body .pt-megamenu .pt-nav__submenu,
body .pt-megamenu .pt-nav__item--has-dropdown > ul,
body .pt-megamenu .submenu {
    background-color: #ffffff !important;
    min-width: 230px !important;
    padding: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: 0 !important;
}
body .pt-megamenu .pt-nav__submenu > li > a,
body .pt-megamenu .pt-nav__submenu .pt-nav__sublink,
body .pt-megamenu .submenu > li > a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #696969 !important;
    text-transform: uppercase !important;
    padding: 7px 0 !important;
    line-height: 1 !important;
}
body .pt-megamenu .pt-nav__submenu .pt-nav__subheading,
body .pt-megamenu .pt-nav__submenu > li.level1.parent > a,
body .pt-megamenu .pt-nav__submenu .mega-col-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    text-transform: uppercase !important;
    padding: 0 0 5px !important;
}

/* Loop 35 — Footer middle column typography + link color
 *   Porto .footer-middle: color rgb(168,168,168), fs 13px
 *   Porto .widget-title : 15px/600/#fff/uppercase/mb 15px
 *   Porto .footer-middle a: rgb(168,168,168) (not blue!)
 *   Our pt-footer-middle link was rendering rgb(51,153,255) (blue) —
 *   inherited from global a color. Explicit override required.           */
body .pt-footer-middle {
    color: rgb(168, 168, 168) !important;
    font-size: 13px !important;
}
body .pt-footer-middle__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}
body .pt-footer-middle a,
body .pt-footer-middle .pt-footer-middle__col a,
body .pt-footer-middle ul li a {
    color: rgb(168, 168, 168) !important;
}
body .pt-footer-middle a:hover,
body .pt-footer-middle ul li a:hover {
    color: #ffffff !important;
}

/* Loop 37 — Search input padding + button radius/icon size
 *   Porto input: pad 8px 12px 8px 20px, fs 13.6px
 *   Porto button: radius 0, icon fs 15.7px                                */
body .pt-header__search-input,
body #search {
    padding: 8px 12px 8px 20px !important;
    font-size: 13.6px !important;
}
body .pt-header__search-btn {
    border-radius: 0 !important;
    font-size: 15.7px !important;
}

/* Loop 40/41 — PDP price line-height + SKU/stock text-transform swap
 *   Porto price lh: 24px (ours was 28.8px)
 *   Porto SKU tt  : uppercase (ours was none)
 *   Porto stock tt: none      (ours was uppercase)                        */
body.pt-product-page .product-info-main .price-wrapper .price,
body.pt-product-page .product-info-main .price,
body.catalog-product-view .product-info-main .price-wrapper .price,
body.catalog-product-view .product-info-main .price {
    line-height: 24px !important;
}
body.pt-product-page .product-info-stock-sku .product.attribute.sku,
body.pt-product-page .product-info-stock-sku .sku,
body.catalog-product-view .product-info-stock-sku .product.attribute.sku,
body.catalog-product-view .product-info-stock-sku .sku {
    text-transform: uppercase !important;
}
body.pt-product-page .product-info-stock-sku .stock,
body.catalog-product-view .product-info-stock-sku .stock {
    text-transform: none !important;
}

/* =========================================================================
 * PORTO-VALIDATE-LOOPS-46-65 — fifth discovery sweep (20 deep loops)
 * Audit scope: homepage, PDP, PLP, footer, global buttons/forms
 * ========================================================================= */

/* Loop 47 — Search block base styling (Porto: rgb(247,247,247) bg,
 * rgb(141,141,141) placeholder, 13px). Ours was transparent. */
body .pt-header__search,
body .block.block-search {
    background-color: rgb(247, 247, 247) !important;
}
body .pt-header__search-input,
body #search_mini_form #search,
body .block-search #search {
    background-color: rgb(247, 247, 247) !important;
    color: rgb(141, 141, 141) !important;
    font-size: 13px !important;
    border: 0 !important;
}
body .pt-header__search-input::placeholder,
body #search::placeholder {
    color: rgb(141, 141, 141) !important;
}

/* Loop 48 — Hero slider H2 title (Porto: 43.75px/700/#fff/no transform).
 * Ours was 48px/300/#222/uppercase. */
body .pt-hero h2,
body .pt-hero-slider h2,
body .pt-hero__title,
body .pt-hero-slider__slide h2 {
    font-size: 43.75px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: none !important;
    line-height: 1.1 !important;
}

/* Loop 51 — PDP page title (Porto: 30px/700/rgb(34,37,41)/lh 36px).
 * Porto uses a larger title than default Magento 26px. */
body.catalog-product-view .page-title-wrapper .page-title,
body.catalog-product-view .product-info-main h1,
body.pt-product-page .product-info-main h1,
body.pt-product-page .page-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    line-height: 36px !important;
    margin: 0 0 6px !important;
}

/* Loop 51 — PDP price baseline (Porto: 24px/600/rgb(34,37,41)).
 * Loop 40 already set line-height:24px. This adds size/weight. */
body.catalog-product-view .product-info-main .price-wrapper .price,
body.catalog-product-view .product-info-main .price-box .price,
body.pt-product-page .product-info-main .price-wrapper .price,
body.pt-product-page .product-info-main .price-box .price {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
}

/* Loop 52 — PDP short description (Porto: 16px/400/rgb(119,119,119)/lh 27px) */
body.catalog-product-view .product.attribute.overview,
body.catalog-product-view .product-info-main .product.overview,
body.pt-product-page .product.attribute.overview,
body.pt-product-page .product-info-short-description {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 27px !important;
}

/* Loop 53/54 — PDP tabs (Porto Demo 1: title 13px/700/uppercase,
 * inactive #818692, active #222529, content 14px/400/#777/lh 24px) */
body.catalog-product-view .product.data.items > .item.title > .switch,
body.pt-product-page .product.data.items > .item.title > .switch {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #818692 !important;
    line-height: 24px !important;
}
body.catalog-product-view .product.data.items > .item.title.active > .switch,
body.catalog-product-view .product.data.items > .item.title._active > .switch,
body.pt-product-page .product.data.items > .item.title.active > .switch,
body.pt-product-page .product.data.items > .item.title._active > .switch {
    color: #222529 !important;
}
body.catalog-product-view .product.data.items > .item.content,
body.pt-product-page .product.data.items > .item.content {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 24px !important;
    padding: 30px 0 15px !important;
}

/* Loop 55 — Add to Cart button (Porto Demo 1: rgb(34,37,41) dark bg/white
 * text/14px/uppercase/radius 0/padding 0 28px; hover → blue #0088cc) */
body.catalog-product-view #product-addtocart-button,
body.catalog-product-view .product-info-main .action.primary.tocart,
body.pt-product-page #product-addtocart-button {
    background-color: rgb(34, 37, 41) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 28px !important;
    height: 48px !important;
    line-height: 48px !important;
}
body.catalog-product-view #product-addtocart-button:hover,
body.pt-product-page #product-addtocart-button:hover {
    background-color: rgb(0, 136, 204) !important;
}

/* Loop 59 — Footer column title weight + size (Porto: 15px/600).
 * Ours was 14px/700. */
body .pt-footer-middle__title,
body .pt-footer-middle h3,
body .pt-footer-middle h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Loop 63 — Global primary button baseline (Porto: rgb(0,136,204) bg /
 * white / 13px / 700 / uppercase / radius 0 / padding 10.4px 26px) */
body button.action.primary,
body .cart-summary .action.primary,
body .checkout-methods-items .action.primary,
body .form-create-account button.primary,
body .actions-toolbar .primary button {
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 10.4px 26px !important;
    line-height: 18.5714px !important;
}
body button.action.primary:hover,
body .actions-toolbar .primary button:hover {
    background-color: rgb(34, 37, 41) !important;
}

/* Loop 63 — Secondary Sign In button (Porto: 14px/600/rgb(119,119,119),
 * border 1px #ccc, radius 0, lh 14px). Ours had 18px/700/radius 3px. */
body .action.action-login.secondary,
body .block-customer-login .action.secondary,
body .form.form-login .action.secondary {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgb(119, 119, 119) !important;
    background-color: #ffffff !important;
    border: 1px solid rgb(204, 204, 204) !important;
    border-radius: 0 !important;
    line-height: 14px !important;
    padding: 15px 17px !important;
    text-transform: none !important;
}

/* Loop 63 — Form inputs (Porto uses border 0, transparent bg).
 * Keep our white bg but drop the subtle border for parity. */
body .field input[type="text"],
body .field input[type="email"],
body .field input[type="password"],
body .field input[type="tel"],
body .field input[type="search"],
body .field textarea {
    border: 1px solid rgb(225, 225, 225) !important;
    border-radius: 0 !important;
}

/* =========================================================================
 * PORTO-VALIDATE-LOOPS-66-85 — sixth sweep: structural + PDP detail parity
 *
 * Source: live computed-style fingerprints captured on m2.portotheme.com/demo1_en/
 * (homepage + Brown Bag PDP + footer) compared against
 * test-protov2-01.e-store.world at sha-96ed442.
 *
 * 17 fixes covering header height, topbar width, footer full-width bleed,
 * breadcrumbs, PDP details (SKU/stock/reviews/qty/wishlist/compare/tab
 * borders/upsell), trust bar column equality, content-area link color,
 * checkbox styling.
 *
 * Deferred: hero h2 Segoe Script family (low-priority decorative font),
 * sidebar mega-menu vertical nav (structural/phtml task, not CSS).
 * ========================================================================= */

/* L66 — Header inner height (Porto .pt-header ≈ 58px, ours was 101px) ------ */
body header.page-header .pt-header {
    padding: 7px 0 !important;
}

/* L67 — Topbar inner width 1160 → 1200 to match .pt-container ------------- */
body .pt-topbar__inner {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* L68 — Footer full-width dark background bleed (CRITICAL visual) ---------- */
body .pt-footer-middle,
body .pt-footer-bottom,
body .pt-footer__middle,
body .pt-footer__bottom {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Inner content container within the full-width footer bands */
body .pt-footer-middle > .pt-container,
body .pt-footer-bottom > .pt-container,
body .pt-footer-middle__inner,
body .pt-footer-bottom__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* L69 — Footer-middle padding alignment (Porto: no outer padding) --------- */
/* FOOTER-02: Demo 1 pt-footer-middle is 30/0/30; was 50/0/40 (+30 over). */
body .pt-footer-middle {
    padding: 30px 0 30px !important;
}
body .pt-footer-bottom {
    padding: 15px 0 !important;
}

/* L70 — Footer col title: remove 12px bottom padding/border underline ---- */
body .pt-footer-middle__title,
body .pt-footer-middle h3,
body .pt-footer-middle h4 {
    padding-bottom: 0 !important;
    margin-bottom: 15px !important;
    line-height: 21px !important;
    border-bottom: 0 !important;
}

/* L71 — Breadcrumbs (Porto: #fff bg, 12/400/rgb(142,142,142)/uppercase) ---- */
body .breadcrumbs {
    background-color: #ffffff !important;
    padding: 10px 0 !important;
}
body .breadcrumbs .items,
body .breadcrumbs .item,
body .breadcrumbs .item a,
body .breadcrumbs .item strong {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgb(142, 142, 142) !important;
    text-transform: uppercase !important;
    line-height: 22px !important;
}
body .breadcrumbs .item a:hover {
    color: rgb(0, 136, 204) !important;
}

/* L72 — PDP SKU 12/400/rgb(119,119,119)/uppercase ------------------------- */
body.catalog-product-view .product-info-main .product.attribute.sku,
body.pt-product-page .product-info-main .product.attribute.sku {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    text-transform: uppercase !important;
    line-height: 24px !important;
    margin: 0 0 4px !important;
}

/* L73 — PDP Stock 12/600/rgb(34,37,41)/uppercase -------------------------- */
body.catalog-product-view .product-info-main .stock,
body.pt-product-page .product-info-main .stock {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: uppercase !important;
    line-height: 24px !important;
    padding: 0 0 0 4px !important;
    margin: 0 0 4px !important;
}

/* L74 — PDP Reviews summary 13/400/rgb(153,153,153) ------------------------ */
body.catalog-product-view .product-info-main .product-reviews-summary,
body.catalog-product-view .product-info-main .reviews-actions,
body.pt-product-page .product-info-main .product-reviews-summary {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgb(153, 153, 153) !important;
    line-height: 24px !important;
}

/* L75 — PDP Qty input: 16/700, 44×48, 1px rgb(231,231,231) border ---------- */
body.catalog-product-view .product-info-main .field.qty input.qty,
body.pt-product-page .product-info-main .field.qty input.qty {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    width: 44px !important;
    height: 48px !important;
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 0 !important;
    padding: 0 5px !important;
    text-align: center !important;
}

/* FIX-PARITY-01 — PDP Wishlist/Compare icon-only buttons (48x48).
 * Replaces the broken L76 rule which forced width:48px on an element
 * that contained the full text "Add to Wish List" — causing words to
 * wrap per-line inside the 48px box. We keep the 48x48 dimensions but:
 *   1) hide the <span> text via font-size:0 on the child
 *   2) render an SVG icon via ::before as an inline data URI background
 * This matches Porto Demo 1's icon-only square target exactly without
 * depending on the porto-icons font (which we do not ship).
 */
body.catalog-product-view .product-info-main .action.towishlist,
body.catalog-product-view .product-info-main .action.tocompare,
body.pt-product-page .product-info-main .action.towishlist,
body.pt-product-page .product-info-main .action.tocompare {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: rgb(34, 37, 41) !important;
    background-color: transparent !important;
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 0 !important;
    margin: 0 0 0 5px !important;
    padding: 0 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

body.catalog-product-view .product-info-main .action.towishlist > span,
body.catalog-product-view .product-info-main .action.tocompare > span,
body.pt-product-page .product-info-main .action.towishlist > span,
body.pt-product-page .product-info-main .action.tocompare > span {
    font-size: 0 !important;
    line-height: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    display: inline-block !important;
}

body.catalog-product-view .product-info-main .action.towishlist::before,
body.pt-product-page .product-info-main .action.towishlist::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgb(34,37,41)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    margin: 0 !important;
    font: 0/0 a !important;
}

body.catalog-product-view .product-info-main .action.tocompare::before,
body.pt-product-page .product-info-main .action.tocompare::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgb(34,37,41)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='16'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    margin: 0 !important;
    font: 0/0 a !important;
}

/* Container row for the icon buttons — keep them side-by-side, no wrap */
body.catalog-product-view .product-info-main .product-addto-links,
body.pt-product-page .product-info-main .product-addto-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgb(231, 231, 231) !important;
}

body.catalog-product-view .product-info-main .product-addto-links .action.towishlist,
body.pt-product-page .product-info-main .product-addto-links .action.towishlist {
    margin-left: 0 !important;
}

/* L77 — PDP Tab content border 1px rgb(231,231,231) + padding 30 0 15 ----- */
body.catalog-product-view .product.data.items > .item.content,
body.pt-product-page .product.data.items > .item.content {
    border: 1px solid rgb(231, 231, 231) !important;
    padding: 30px 0 15px !important;
    background-color: #ffffff !important;
}

/* L78 — Body content area link color rgb(0,136,204) ----------------------- */
body .page-main a:not(.action):not(.btn):not(.primary):not(.secondary):not(.tocart):not(.towishlist):not(.tocompare),
body .column.main a:not(.action):not(.btn):not(.primary):not(.secondary):not(.tocart):not(.towishlist):not(.tocompare) {
    color: rgb(0, 136, 204);
    text-decoration: none;
}
body .page-main a:not(.action):not(.btn):not(.primary):not(.secondary):hover {
    color: rgb(0, 103, 153);
    text-decoration: none;
}

/* L79 — Checkbox: 20×20, 1px rgb(204,204,204), radius 3px ----------------- */
body input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    border: 1px solid rgb(204, 204, 204) !important;
    border-radius: 3px !important;
    background-color: transparent !important;
}

/* L80 — Trust bar equal 3 columns (was 307/278/252) ----------------------- */
body .pt-trustbar__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
}
body .pt-trustbar__item {
    width: auto !important;
    min-width: 0 !important;
}

/* L81 — Upsell block padding 40 0 0 --------------------------------------- */
body.catalog-product-view .block.upsell,
body.pt-product-page .block.upsell {
    padding: 40px 0 0 !important;
    margin: 0 !important;
}

/* L82 — PDP Page title wrapper lh 36/margin 6 (confirm L51 sub-spec) ------ */
body.catalog-product-view .page-title-wrapper .page-title span,
body.pt-product-page .page-title-wrapper .page-title span {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    line-height: 36px !important;
}

/* =========================================================================
 * PORTO-VALIDATE-LOOPS-86-100 — seventh sweep: homepage blocks + PDP details
 *                               + login + mobile parity batch
 *
 * Source: exhaustive computed-style fingerprint comparison between
 *         m2.portotheme.com/demo1_en/ and test-protov2-01.e-store.world.
 * Previous batch: Loops 66-85 (sha-fbcd190).
 * ========================================================================= */

/* L86 — Hero slider arrows: Porto uses flat gray 14x21 pad 4 7
 *        We had circular dark 48x48 radius 50% rgba(34,37,41,0.6). */
body .pt-hero-slider .owl-nav button.owl-prev,
body .pt-hero-slider .owl-nav button.owl-next,
body .pt-hero .owl-nav button.owl-prev,
body .pt-hero .owl-nav button.owl-next,
body .pt-hero__slider .owl-nav > button {
    width: 14px !important;
    height: 21px !important;
    padding: 4px 7px !important;
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: 0 !important;
    color: rgb(214, 214, 214) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
body .pt-hero-slider .owl-nav button.owl-prev:hover,
body .pt-hero-slider .owl-nav button.owl-next:hover,
body .pt-hero .owl-nav button:hover {
    color: rgb(34, 37, 41) !important;
    background: transparent !important;
}

/* L87 — Homepage sidebar border rgb(225,225,225) → rgb(231,231,231) */
body .sidebar.sidebar-main,
body .pt-sidebar,
body .column.main + .sidebar,
body .sidebar .block,
body .sidebar .filter-options-item {
    border-color: rgb(231, 231, 231) !important;
}

/* L88 — Product cards: width 150→225, name 14/700/rgb(119,119,119),
 *        add-to-cart button 36x36 circle */
body .products-grid .product-item,
body .pt-products .product-item,
body .products.products-grid .product-items .product-item {
    width: 225px !important;
    min-width: 225px !important;
}
body .products-grid .product-item-name,
body .products-grid .product-item-link,
body .pt-products .product-item-name a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 20px !important;
    text-transform: none !important;
}
body .products-grid .product-item-name a:hover,
body .pt-products .product-item-name a:hover {
    color: rgb(0, 136, 204) !important;
}
body .products-grid .product-item .action.tocart,
body .products-grid .product-item-actions .action.tocart,
body .pt-products .product-item .tocart {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
    border: 0 !important;
}

/* L89 — Testimonial block: Porto has 3px solid rgb(1,136,204) blue border,
 *        avatar 55x55, quote 14/400/rgb(153,153,153). We had none. */
body .pt-testimonials .pt-testimonial,
body .pt-testimonials__item,
body .testimonial-item,
body .pt-testimonial {
    border: 3px solid rgb(1, 136, 204) !important;
    padding: 30px !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
}
body .pt-testimonials .pt-testimonial__avatar img,
body .pt-testimonial .testimonial-avatar,
body .pt-testimonial__avatar img,
body .testimonial-item img {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
body .pt-testimonial .testimonial-quote,
body .pt-testimonial__quote,
body .testimonial-content {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(153, 153, 153) !important;
    line-height: 24px !important;
    font-style: italic !important;
}

/* L90 — Blog preview block title parity with other block titles */
body .pt-blog-preview .block-title,
body .pt-blog .block-title,
body .block.blog-posts .block-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: uppercase !important;
    margin-bottom: 30px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
}
body .pt-blog-preview .post-title a,
body .pt-blog .post-item-name a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: none !important;
}

/* L91 — CMS page general: content max-width 1200, heading 30/700 */
body.cms-page-view .page-main,
body.cms-index-index .page-main,
body .cms-content {
    max-width: 1200px !important;
}
body.cms-page-view .page-title,
body .cms-content h1 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    margin-bottom: 20px !important;
}

/* L92 — Cart page: totals block 14/400 rgb(119,119,119), grand total 18/700 */
body.checkout-cart-index .cart-totals,
body.checkout-cart-index .cart-summary {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    background-color: rgb(247, 247, 247) !important;
    padding: 20px !important;
}
body.checkout-cart-index .cart-totals .grand.totals,
body.checkout-cart-index .grand.totals .mark,
body.checkout-cart-index .grand.totals .amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
}
body.checkout-cart-index .cart .action.primary.checkout,
body.checkout-cart-index .checkout-methods-items .action.primary {
    width: 100% !important;
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* L93 — Checkout page: step title 22/400, action primary full-width blue */
body.checkout-index-index .opc-wrapper .step-title,
body.checkout-index-index .opc-block-summary .title {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: rgb(34, 37, 41) !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    padding-bottom: 10px !important;
}
body.checkout-index-index .action.primary,
body.checkout-index-index button.action.continue {
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 28px !important;
}

/* L94 — Login page: block title 22/400 (not 18/700), primary btn full-width,
 *        forgot link 14/500/rgb(34,37,41), input full-width. */
body.customer-account-login .login-container .block-title,
body.customer-account-login .block.block-customer-login .block-title,
body.customer-account-login .block.block-new-customer .block-title {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: rgb(34, 37, 41) !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
}
body.customer-account-login .login-container .block-title strong {
    font-weight: 400 !important;
    font-size: 22px !important;
}
body.customer-account-login .login-container .action.primary.login,
body.customer-account-login .login-container .actions-toolbar .primary .action {
    width: 100% !important;
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
}
body.customer-account-login .login-container .action.remind {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgb(34, 37, 41) !important;
    text-decoration: none !important;
}
body.customer-account-login .login-container input[type="email"],
body.customer-account-login .login-container input[type="password"],
body.customer-account-login .login-container input[type="text"] {
    width: 100% !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 24px 0 0 24px !important;
    background: #F4F4F4 !important;
    padding: 8px 12px !important;
    font-size: 13.6px !important;
}

/* L95 — Customer account dashboard: block title 18/700 uppercase,
 *        sidebar nav item 14/400/rgb(119,119,119). */
body.customer-account-index .block-dashboard-info .block-title strong,
body.customer-account-index .block-dashboard-addresses .block-title strong,
body.account .block .block-title strong {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: uppercase !important;
}
body.account .sidebar-main .nav.items a,
body.account .account-nav .items a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    padding: 8px 12px !important;
    display: block !important;
}
body.account .sidebar-main .nav.items a:hover,
body.account .account-nav .items .current a {
    color: rgb(0, 136, 204) !important;
    background-color: rgb(247, 247, 247) !important;
}

/* L96 — PDP gallery: main stage border 1px solid rgb(244,244,244),
 *        fotorama block 482x474. */
body.catalog-product-view .fotorama__stage,
body.catalog-product-view .gallery-placeholder .fotorama__stage {
    border: 1px solid rgb(244, 244, 244) !important;
}
body.catalog-product-view .fotorama__nav .fotorama__thumb {
    border: 1px solid rgb(244, 244, 244) !important;
}
body.catalog-product-view .fotorama__active .fotorama__thumb {
    border-color: rgb(0, 136, 204) !important;
}

/* L97 — Related/upsell block title 24/700 uppercase with bottom border,
 *        upsell block width 1180 pad 40 0 0 (already in L81, reinforced). */
body.catalog-product-view .block.related .block-title strong,
body.catalog-product-view .block.upsell .block-title strong,
body.catalog-product-view .block.crosssell .block-title strong {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: uppercase !important;
}
body.catalog-product-view .block.related .block-title,
body.catalog-product-view .block.upsell .block-title,
body.catalog-product-view .block.crosssell .block-title {
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    padding-bottom: 10px !important;
    margin-bottom: 30px !important;
}

/* L98 — Reviews tab label 14/700 upper rgb(129,134,146) pad 7 0,
 *        submit review btn 14/700 upper bg rgb(0,136,204) pad 11.2 28. */
body.catalog-product-view #tab-label-reviews,
body.catalog-product-view .product.data.items > .item.title > .switch[data-toggle="reviews"] {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(129, 134, 146) !important;
    text-transform: uppercase !important;
    padding: 7px 0 !important;
    margin: 0 35px 0 0 !important;
}
body.catalog-product-view .product.data.items > .item.title.active .switch {
    color: rgb(34, 37, 41) !important;
}
body.catalog-product-view #review-form .action.submit.primary,
body.catalog-product-view .review-form .action.submit.primary {
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 11.2px 28px !important;
}
body.catalog-product-view .review-form-actions .label,
body.catalog-product-view .review-field-ratings .label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgb(119, 119, 119) !important;
    margin-bottom: 7px !important;
}

/* L99 — Sticky header on scroll: Porto Demo 1 desktop does NOT have a
 *        sticky header (position stays relative). Skipped — no fix needed. */

/* L100 — Mobile responsive (<= 767px): header height 50, logo 30,
 *         nav drawer 280px left slide, trust bar stack, product grid 2 cols. */
@media (max-width: 767px) {
    body header.page-header .pt-header {
        padding: 6px 0 !important;
        height: 50px !important;
    }
    body .pt-header__logo img,
    body .logo img {
        max-height: 30px !important;
    }
    body .nav-sections {
        width: 280px !important;
        left: -280px !important;
        position: fixed !important;
        top: 0 !important;
        height: 100% !important;
        background: #ffffff !important;
        transition: left 0.3s ease !important;
        z-index: 9999 !important;
    }
    body.nav-open .nav-sections {
        left: 0 !important;
    }
    body .pt-trust-bar,
    body .pt-trust-bar__grid {
        display: block !important;
        grid-template-columns: none !important;
    }
    body .pt-trust-bar .pt-trust-item,
    body .pt-trust-bar__item {
        width: 100% !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgb(231, 231, 231) !important;
    }
    body .products-grid .product-items,
    body .pt-products .product-items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    body .products-grid .product-item,
    body .pt-products .product-item {
        width: 100% !important;
        min-width: 0 !important;
    }
    body.catalog-product-view .product-info-main,
    body.catalog-product-view .product.media {
        width: 100% !important;
        float: none !important;
    }
    body.checkout-cart-index .cart-container .form-cart,
    body.checkout-cart-index .cart-container .cart-summary {
        width: 100% !important;
        float: none !important;
    }
    body.customer-account-login .login-container .block {
        width: 100% !important;
        float: none !important;
        margin-bottom: 30px !important;
    }
}

/* =========================================================================
 * PORTO-VALIDATE-LOOPS-101-120 — eighth sweep: header chrome + PLP +
 *                                PDP tabs + account forms + search + 404
 *
 * Source: exhaustive computed-style fingerprint comparison between
 *         m2.portotheme.com/demo1_en/ and test-protov2-01.e-store.world
 *         on 2026-04-08. Rolls onto Loops 86-100 (sha-1535be3).
 * ========================================================================= */

/* L101 — Top announcement strip: Porto uses subtle pill-style small copy
 *        10.9998/600 rgb(189,225,245) no-upper on flex row. */
body .panel.header,
body .pt-topbar,
body .pt-header-top {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgb(189, 225, 245) !important;
    text-transform: none !important;
    line-height: 26px !important;
}
body .panel.header a,
body .pt-topbar a {
    color: rgb(189, 225, 245) !important;
    text-decoration: none !important;
}
body .panel.header a:hover,
body .pt-topbar a:hover {
    color: #ffffff !important;
}

/* L102 — Main nav items: 12/600 upper rgb(107,122,131) pad 18 0 */
body .navigation .level0 > a,
body .pt-nav > li > a,
body nav.navigation > ul > li > a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgb(107, 122, 131) !important;
    text-transform: uppercase !important;
    padding: 18px 0 !important;
    line-height: 12px !important;
}
body .navigation .level0.active > a,
body .navigation .level0:hover > a,
body .pt-nav > li:hover > a,
body .pt-nav > li.active > a {
    color: rgb(0, 136, 204) !important;
}

/* L103 — Search bar: rounded pill bg rgb(247,247,247) radius 25 h40 w~572 */
body .block-search,
body #search_mini_form,
body .pt-search {
    background-color: rgb(247, 247, 247) !important;
    border-radius: 25px !important;
    height: 40px !important;
    border: 0 !important;
}
body .block-search #search,
body .block-search input.search,
body #search_mini_form input[type="text"] {
    background-color: transparent !important;
    border: 0 !important;
    height: 40px !important;
    font-size: 13.6px !important;
    color: rgb(141, 141, 141) !important;
    padding: 8px 12px 8px 20px !important;
    line-height: 19.04px !important;
}
body .block-search .action.search,
body .block-search button.action,
body #search_mini_form button {
    background-color: transparent !important;
    color: rgb(96, 102, 105) !important;
    width: 46px !important;
    height: 40px !important;
    font-size: 15.7px !important;
    padding: 0 !important;
    border: 0 !important;
}

/* L104 — Minicart icon row: color rgb(34,37,41), counter 11/600 rgb(189,225,245) lh26 */
body .minicart-wrapper .action.showcart,
body .pt-cart .action.showcart,
body .pt-minicart {
    color: rgb(34, 37, 41) !important;
    display: flex !important;
    align-items: center !important;
    height: 26px !important;
}
body .minicart-wrapper .action.showcart .counter.qty,
body .minicart-wrapper .counter.qty,
body .pt-minicart .counter {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgb(189, 225, 245) !important;
    line-height: 26px !important;
    text-transform: uppercase !important;
    background-color: transparent !important;
}

/* L105 — Hero slider dots (dots-style-1): dot span 14x14 border 2px rgb(0,136,204)
 *        radius 30 margin 5 2; inactive = rgb(214,214,214); wrapper w218 h24 mt10. */
body .dots-style-1 .owl-dots,
body .pt-hero .owl-dots,
body .pt-hero-slider .owl-dots {
    text-align: center !important;
    height: 24px !important;
    margin: 10px 0 -10px !important;
}
body .dots-style-1 .owl-dot span,
body .pt-hero .owl-dot span,
body .pt-hero-slider .owl-dot span {
    width: 14px !important;
    height: 14px !important;
    border: 2px solid rgb(214, 214, 214) !important;
    border-radius: 30px !important;
    margin: 5px 2px !important;
    background-color: transparent !important;
    display: block !important;
    box-shadow: none !important;
}
body .dots-style-1 .owl-dot.active span,
body .pt-hero .owl-dot.active span,
body .pt-hero-slider .owl-dot.active span {
    border-color: rgb(0, 136, 204) !important;
    background-color: transparent !important;
}

/* L106 — Home banner slider item: block 218x350 margin right 1px no-pad */
body .home-banner-slider .owl-item,
body .pt-banner-slider .owl-item {
    margin-right: 1px !important;
}
body .home-banner-slider,
body .pt-banner-slider {
    padding-bottom: 4px !important;
    margin-bottom: 24px !important;
}

/* L107 — Product carousel owl-nav prev/next: 30w flat bg rgb(214,214,214)
 *        color white pad 4 7 no-border radius 0 */
body .porto-carousel .owl-nav button.owl-prev,
body .porto-carousel .owl-nav button.owl-next,
body .products .owl-nav button.owl-prev,
body .products .owl-nav button.owl-next,
body .pt-products .owl-nav button {
    width: 30px !important;
    background-color: rgb(214, 214, 214) !important;
    color: #ffffff !important;
    padding: 4px 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
body .porto-carousel .owl-nav button:hover,
body .products .owl-nav button:hover,
body .pt-products .owl-nav button:hover {
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
}

/* L108 — Category tile (homepage): no extra rules beyond L88 — covered. */

/* L109 — Brand strip: .porto-brand / .brand-carousel w880 h126 pad 32 0 mb24 */
body .porto-brand,
body .pt-brand,
body .pt-brands {
    padding: 32px 0 !important;
    margin: 0 0 24px 0 !important;
    background-color: transparent !important;
}
body .brand-carousel,
body .pt-brands .brand-carousel {
    height: 60px !important;
}
body .brand-carousel img,
body .pt-brands img {
    max-height: 60px !important;
    object-fit: contain !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s !important;
}
body .brand-carousel img:hover,
body .pt-brands img:hover {
    opacity: 1 !important;
}

/* L110 — Newsletter block: .box-newsletter bg rgb(244,244,244) w280 h275;
 *        input pill radius 30 w232 h48 pad 12/12/12/40 fs13 bg white;
 *        button bg rgb(0,136,204) white 13/700 upper pad 10.4 26. */
body .box-newsletter,
body .pt-newsletter {
    background-color: rgb(244, 244, 244) !important;
    padding: 30px 20px !important;
    text-align: center !important;
}
body .box-newsletter .field.newsletter input#newsletter,
body .box-newsletter input[type="email"],
body .pt-newsletter input[type="email"],
body .block.newsletter input#newsletter {
    background-color: #ffffff !important;
    border-radius: 30px !important;
    height: 48px !important;
    padding: 12px 12px 12px 40px !important;
    font-size: 13px !important;
    color: rgb(119, 119, 119) !important;
    border: 0 !important;
}
body .box-newsletter button.action.subscribe,
body .box-newsletter button[title="Subscribe"],
body .pt-newsletter button,
body .block.newsletter .action.subscribe {
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10.4px 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 20px 0 !important;
}

/* L111 — Footer social + copyright: copyright row bg inherit, text small */
body .pt-footer .social,
body .footer .social-icons,
body .pt-social {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}
body .pt-footer .social a,
body .footer .social-icons a,
body .pt-social a {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}
body .pt-footer .social a:hover {
    background-color: rgb(0, 136, 204) !important;
}
body .copyright,
body .pt-footer-copyright,
body .pt-footer__copyright,
body .pt-footer-bottom .copyright {
    font-size: 12px !important;
    color: rgb(153, 153, 153) !important;
    padding: 20px 0 !important;
    text-align: center !important;
}

/* L112 — PLP page title: 20/700 rgb(0,136,204) lh30 mb15.
 *        Body .page-with-filter .page-products .catalog-category-view
 *        .catalogsearch-result-index all use 2columns-left layout. */
body.page-with-filter .page-title-wrapper .page-title,
body.catalog-category-view .page-title-wrapper .page-title,
body.catalogsearch-result-index .page-title-wrapper .page-title,
body.page-products .page-title-wrapper .page-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    line-height: 30px !important;
    margin: 0 0 15px 0 !important;
    text-transform: none !important;
}

/* L113 — PLP filter sidebar: w295 pad 0 15 0 0, block-title 14/700 upper,
 *        option title 14/700 rgb(34,37,41), option item 14/400 rgb(119,119,119). */
body.page-with-filter .sidebar.sidebar-main,
body.page-products .sidebar.sidebar-main {
    width: 295px !important;
    padding: 0 15px 0 0 !important;
}
/* SIDEBAR-02: re-harmonized to 15/600 (was L113 14/700). Porto Demo 1 actually
 * uses 15px/600 for all PLP sidebar titles. L113 originally set 14/700; fixed here. */
body.page-with-filter .block.filter .block-title strong,
body.page-products .filter-title strong {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: uppercase !important;
}
body.page-with-filter .filter-options-title,
body.page-products .filter-options-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: none !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
}
body.page-with-filter .filter-options-content .item a,
body.page-products .filter-options-content .item a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    padding: 5px 0 !important;
    display: block !important;
    text-decoration: none !important;
}
body.page-with-filter .filter-options-content .item a:hover,
body.page-products .filter-options-content .item a:hover {
    color: rgb(0, 136, 204) !important;
}

/* L114 — PLP toolbar: amount 14/400 rgb(119,119,119); sorter label 14/400;
 *        sorter select 14/400 border 1px rgb(231,231,231) pad 7 12 radius 0;
 *        pager current bg rgb(0,136,204) color #fff, link 14/400 rgb(119). */
body .toolbar.toolbar-products {
    margin-bottom: 20px !important;
    padding: 0 !important;
}
body .toolbar-amount {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 38px !important;
}
body .toolbar-sorter.sorter .sorter-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    margin-right: 8px !important;
}
body .toolbar-sorter.sorter #sorter,
body .toolbar-sorter select.sorter-options {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(34, 37, 41) !important;
    border: 1px solid rgb(231, 231, 231) !important;
    padding: 7px 12px !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    height: 38px !important;
}
body .pages .item a.page,
body .pages .item strong.page {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    padding: 8px 12px !important;
    border: 0 !important;
}
body .pages .item.current strong.page,
body .pages .item.current {
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
}
body .pages .action {
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 0 !important;
}
body .limiter .limiter-text {
    font-size: 14px !important;
    color: rgb(119, 119, 119) !important;
}
body .limiter #limiter {
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 0 !important;
    height: 38px !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
}

/* L115 — PDP swatches: label 14/600 rgb(34,37,41); color option 32x32
 *        1px rgb(231,231,231); selected 2px rgb(0,136,204); text option
 *        min 40x32 pad 0 10 border 1px rgb(231,231,231). */
body.catalog-product-view .swatch-attribute-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: none !important;
    margin-bottom: 8px !important;
    display: block !important;
}
body.catalog-product-view .swatch-option.color {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 0 !important;
    margin: 0 6px 6px 0 !important;
}
body.catalog-product-view .swatch-option.text {
    min-width: 40px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    color: rgb(34, 37, 41) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 6px 6px 0 !important;
    line-height: 30px !important;
}
body.catalog-product-view .swatch-option.selected,
body.catalog-product-view .swatch-option:not(.disabled):hover {
    outline: 2px solid rgb(0, 136, 204) !important;
    border-color: rgb(0, 136, 204) !important;
}

/* L116 — PDP tab labels: Porto uses 13/700 upper rgb(34,37,41)
 *        (NOT 14/700/rgb(129) as in L98 reviews-only case). Override L98
 *        for the GENERAL tab label to match Porto's non-reviews tabs. */
/* Porto Demo 1 PDP tabs: inline titles, active = 2px solid #222529 bottom
 * border on the .item.title element, inactive color #818692, active #222529.
 * Title spacing: padding 7px 0, margin 0 35px 0 0. */
body.catalog-product-view .product.data.items {
    border-bottom: 1px solid #e7e7e7 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
body.catalog-product-view .product.data.items > .item.title {
    display: inline-block !important;
    float: none !important;
    padding: 7px 0 !important;
    margin: 0 35px 0 0 !important;
    vertical-align: bottom !important;
    border-bottom: 2px solid transparent !important;
    position: relative !important;
}
body.catalog-product-view .product.data.items > .item.title.active,
body.catalog-product-view .product.data.items > .item.title._active {
    border-bottom: 2px solid #222529 !important;
}
body.catalog-product-view .product.data.items > .item.title > .switch {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #818692 !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    line-height: 24px !important;
    background-color: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
}
body.catalog-product-view .product.data.items > .item.title.active > .switch,
body.catalog-product-view .product.data.items > .item.title._active > .switch {
    color: #222529 !important;
}
body.catalog-product-view .product.data.items > .item.title > .switch:hover {
    color: #222529 !important;
}
/* First-tab fallback underline when no .active class is present */
body.catalog-product-view .product.data.items:not(:has(> .item.title.active)):not(:has(> .item.title._active)) > .item.title:first-of-type {
    border-bottom: 2px solid #222529 !important;
}
body.catalog-product-view .product.data.items:not(:has(> .item.title.active)):not(:has(> .item.title._active)) > .item.title:first-of-type > .switch {
    color: #222529 !important;
}
body.catalog-product-view .product.data.items > .item.content {
    padding: 30px 0 15px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    color: rgb(119, 119, 119) !important;
    line-height: 24px !important;
    border: 0 !important;
}
/* Override mage-tabs-disabled box styles on PDP — Porto Demo 1 uses simple
 * underline tabs, not the boxed tab style from the disabled fallback. */
body.catalog-product-view .product.data.items.mage-tabs-disabled {
    border-bottom: 1px solid #e7e7e7 !important;
    min-height: auto !important;
}
body.catalog-product-view .product.data.items.mage-tabs-disabled > .item.title {
    display: inline-block !important;
    padding: 7px 0 !important;
    margin: 0 35px 0 0 !important;
    vertical-align: bottom !important;
    border-bottom: 2px solid transparent !important;
}
body.catalog-product-view .product.data.items.mage-tabs-disabled > .item.title.active,
body.catalog-product-view .product.data.items.mage-tabs-disabled > .item.title._active {
    border-bottom: 2px solid #222529 !important;
}
body.catalog-product-view .product.data.items.mage-tabs-disabled > .item.title > .switch {
    display: inline-block !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #818692 !important;
    background: transparent !important;
    border: 0 !important;
    line-height: 24px !important;
}
body.catalog-product-view .product.data.items.mage-tabs-disabled > .item.title.active > .switch,
body.catalog-product-view .product.data.items.mage-tabs-disabled > .item.title._active > .switch {
    color: #222529 !important;
    background: transparent !important;
    border: 0 !important;
}
body.catalog-product-view .product.data.items.mage-tabs-disabled > .item.content {
    border: 0 !important;
    border-top: 1px solid #e7e7e7 !important; /* Porto Demo 1: 1px top separator tab nav↔content */
    padding: 30px 0 15px !important;
    background: #ffffff !important;
}
body.catalog-product-view .product.data.items.mage-tabs-disabled:not(:has(> .item.title.active)):not(:has(> .item.title._active)) > .item.title:not(.item.title ~ .item.title) {
    border-bottom: 2px solid #222529 !important;
}
body.catalog-product-view .product.data.items.mage-tabs-disabled:not(:has(> .item.title.active)):not(:has(> .item.title._active)) > .item.title:not(.item.title ~ .item.title) > .switch {
    color: #222529 !important;
    background: transparent !important;
}

/* L117 — Customer create-account page: page title 28/700 rgb(33,37,41) lh30;
 *        fieldset pad 0 25; fieldset legend 22/600 rgb(34,37,41) lh26 mb15;
 *        field label 14/500 rgb(119,119,119) mb8; input h50 border
 *        1px rgba(0,0,0,0.09) fs13.6 pad 8 12; submit btn DARK rgb(34,37,41)
 *        #fff 16/700 upper pad 16 32 h55 full-width. */
body.customer-account-create .page-title,
body.customer-account-forgotpassword .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
    line-height: 30px !important;
    text-transform: none !important;
}
body.customer-account-create .fieldset,
body.customer-account-forgotpassword .fieldset {
    margin: 0 0 28px 0 !important;
}
body.customer-account-create .fieldset > .legend,
body.customer-account-forgotpassword .fieldset > .legend {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
    line-height: 26.4px !important;
    margin: 0 0 15px 0 !important;
    border-bottom: 0 !important;
    text-transform: none !important;
}
body.customer-account-create .fieldset .field > .label,
body.customer-account-forgotpassword .fieldset .field > .label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 24px !important;
    margin: 0 0 8px 0 !important;
    text-transform: none !important;
}
body.customer-account-create .fieldset .field input[type="text"],
body.customer-account-create .fieldset .field input[type="email"],
body.customer-account-create .fieldset .field input[type="password"],
body.customer-account-forgotpassword .fieldset .field input[type="text"],
body.customer-account-forgotpassword .fieldset .field input[type="email"] {
    height: 50px !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    background-color: #ffffff !important;
    font-size: 13.6px !important;
    color: rgb(119, 119, 119) !important;
    padding: 8px 12px !important;
    line-height: 32px !important;
    border-radius: 0 !important;
    width: 100% !important;
}
body.customer-account-create .actions-toolbar .primary .action,
body.customer-account-forgotpassword .actions-toolbar .primary .action,
body.customer-account-login .actions-toolbar .primary .action {
    background-color: rgb(34, 37, 41) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
    height: 55px !important;
    line-height: 22.8571px !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
}
body.customer-account-create .actions-toolbar .secondary .action.back,
body.customer-account-forgotpassword .actions-toolbar .secondary .action.back {
    display: none !important;
}

/* L118 — Forgot-password: covered by L117 shared selectors. */

/* L119 — Search results page: uses PLP 2columns-left layout, column.main
 *        w885 pad 0 0 40 5; empty state (no products) message bg rgb(247,247,247)
 *        14/400 rgb(119,119,119) pad 20. */
body.catalogsearch-result-index .column.main {
    padding: 0 0 40px 5px !important;
}
body.catalogsearch-result-index .message.notice,
body.catalogsearch-result-index .message.info,
body.page-with-filter .message.notice.empty {
    background-color: rgb(247, 247, 247) !important;
    color: rgb(119, 119, 119) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
}

/* L120 — 404 page (cms-no-route-2, cms-noroute-index): 1column layout,
 *        column.main w1180 h-auto pad 0 0 40. Page title + CTA link to home. */
body.cms-no-route .column.main,
body.cms-noroute-index .column.main,
body.cms-no-route-2 .column.main {
    padding: 0 0 40px 0 !important;
}
body.cms-no-route .page-title,
body.cms-noroute-index .page-title,
body.cms-no-route-2 .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
    line-height: 30px !important;
    text-align: center !important;
    margin: 40px 0 20px 0 !important;
    text-transform: none !important;
}
body.cms-no-route .column.main p,
body.cms-noroute-index .column.main p,
body.cms-no-route-2 .column.main p {
    text-align: center !important;
    font-size: 14px !important;
    color: rgb(119, 119, 119) !important;
    line-height: 24px !important;
}
body.cms-no-route .column.main a,
body.cms-noroute-index .column.main a,
body.cms-no-route-2 .column.main a {
    color: rgb(0, 136, 204) !important;
    text-decoration: none !important;
}

/* =========================================================================
 * PORTO-VALIDATE-LOOPS-121-140 — ninth sweep: header auxiliaries +
 *                                service boxes + account pages + footer
 *                                payment + breadcrumbs + misc chrome
 *
 * Source: exhaustive computed-style fingerprint comparison between
 *         m2.portotheme.com/demo1_en/ and test-protov2-01 on 2026-04-08.
 *         Rolls onto Loops 101-120 (sha-a1c01b8).
 * ========================================================================= */

/* L121 — Header wishlist/compare icon links: 12.6/400 rgb(34,37,41)
 *        h27 w46 lh22 margin-right 8 padding-right 4. */
body .header .link.wishlist a,
body .header .link.compare a,
body .pt-header a.pt-wishlist,
body .pt-header a.pt-compare,
body header a[href*="wishlist"],
body header a[href*="catalog/product_compare"] {
    font-size: 12.6px !important;
    font-weight: 400 !important;
    color: rgb(34, 37, 41) !important;
    line-height: 22px !important;
    height: 27px !important;
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
    padding: 0 4px 0 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
}

/* L122 — Header customer-welcome / account dropdown: 11/600 upper
 *        rgb(189,225,245) on topbar, mirrors L101. */
body .panel.header .customer-welcome,
body .panel.header .customer-name,
body .panel.header a.account,
body .pt-topbar .customer-welcome,
body .pt-topbar .customer-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgb(189, 225, 245) !important;
    line-height: 26px !important;
    text-transform: uppercase !important;
}

/* L123 — Language / currency switcher (topbar): 11/600 upper
 *        rgb(189,225,245) h26 mr20; dropdown option 11/400 upper
 *        rgb(119,119,119) lh25 pad 0 7. */
body .switcher-language,
body .switcher.language,
body .switcher-currency,
body .switcher.currency,
body .switcher-store {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgb(189, 225, 245) !important;
    line-height: 24px !important;
    text-transform: uppercase !important;
    height: 26px !important;
    margin: 0 20px 0 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: 0 !important;
}
body .switcher .options a,
body .switcher-dropdown a {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 25px !important;
    padding: 0 7px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* L124 — "Shop by category" widget (HP left column): item 14/600
 *        rgb(34,37,41) pad 9 0 border-bottom 1px rgb(231,231,231). */
body .pt-shop-by-category,
body .home-category-list,
body .block.widget.block-categories,
body .pt-category-widget {
    border: 1px solid rgb(231, 231, 231) !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}
body .pt-shop-by-category a,
body .home-category-list a,
body .pt-category-widget .item a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
    padding: 9px 15px !important;
    display: block !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    text-decoration: none !important;
    text-transform: none !important;
}
body .pt-shop-by-category a:hover,
body .home-category-list a:hover {
    color: rgb(0, 136, 204) !important;
    background-color: rgb(247, 247, 247) !important;
}

/* L125 — Deals countdown timer block: number box 32x32 bg rgb(34,37,41)
 *        color #fff 14/700 radius 0; label 10/400 rgb(119). */
body .porto-deal-countdown,
body .countdown-row,
body .pt-deals .countdown {
    display: inline-flex !important;
    gap: 4px !important;
    align-items: center !important;
}
body .countdown-amount,
body .countdown .amount,
body .porto-deal-countdown .num {
    width: 32px !important;
    height: 32px !important;
    background-color: rgb(34, 37, 41) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    text-align: center !important;
    border-radius: 0 !important;
    display: inline-block !important;
}
body .countdown-period,
body .countdown .label {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    text-transform: uppercase !important;
    margin-left: 2px !important;
}

/* L126 — Recently viewed block: same title styling as related (L97)
 *        but tighter margin. */
body .block.widget.block-viewed-products-grid .block-title strong,
body .block-viewed-products-list .block-title strong,
body .block.widget.block-new-products-grid .block-title strong {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: uppercase !important;
}
body .block.widget.block-viewed-products-grid .block-title,
body .block-viewed-products-list .block-title {
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* L127 — HP tabs-grid switcher (.porto-product-tabs / .products-tabs):
 *        nav-link 14/700 upper rgb(119,119,119) pad 5 15 lh20;
 *        active underline rgb(0,136,204) + color rgb(34,37,41). */
body .porto-product-tabs .nav-tabs,
body .products-tabs .nav-tabs,
body .pt-tabs .nav-tabs {
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    margin-bottom: 20px !important;
}
body .porto-product-tabs .nav-link,
body .products-tabs .nav-link,
body .pt-tabs a.nav-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(119, 119, 119) !important;
    padding: 5px 15px !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    border: 0 !important;
    background-color: transparent !important;
    text-decoration: none !important;
}
body .porto-product-tabs .nav-link.active,
body .products-tabs .nav-link.active,
body .pt-tabs a.nav-link.active {
    color: rgb(34, 37, 41) !important;
    border-bottom: 2px solid rgb(0, 136, 204) !important;
}

/* L128 — Porto service icon boxes (.porto-sicon-box style_1):
 *        box flex h32 m 0 24; icon inline 29x29 color rgb(34,37,41) m 0 5;
 *        title 11/600 rgb(119,119,119) lh13 mb3; desc 14/400 rgb(119,119,119) lh22. */
body .porto-sicon-box,
body .porto-sicon-box.style_1 {
    display: flex !important;
    align-items: center !important;
    margin: 0 24px !important;
    background-color: transparent !important;
    padding: 0 !important;
}
body .porto-sicon-box .porto-sicon-icon,
body .porto-sicon-box i,
body .pt-service-icon {
    font-size: 29px !important;
    line-height: 29px !important;
    color: rgb(34, 37, 41) !important;
    margin: 0 5px !important;
    display: inline-block !important;
}
body .porto-sicon-box .porto-sicon-title,
body .porto-sicon-box .service-title,
body .pt-service-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 13.2px !important;
    margin: 0 0 3px 0 !important;
    text-transform: none !important;
}
body .porto-sicon-box .porto-sicon-description,
body .porto-sicon-box .service-description,
body .pt-service-description {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 22px !important;
    margin: 7px 0 0 0 !important;
}

/* L129 — Category page description block: 14/400 rgb(119,119,119) lh24 mb20. */
body.catalog-category-view .category-description,
body.catalog-category-view .category-cms {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 24px !important;
    margin-bottom: 20px !important;
}

/* L130 — Subcategory tile: block w225 h120 border 1px rgb(231,231,231)
 *        title 14/700 rgb(34,37,41) center. */
body .subcategory-grid .category-item,
body .subcategory-list .item {
    width: 225px !important;
    border: 1px solid rgb(231, 231, 231) !important;
    padding: 15px !important;
    background-color: #ffffff !important;
    text-align: center !important;
}
body .subcategory-grid .category-item a,
body .subcategory-list .item a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-decoration: none !important;
    text-transform: none !important;
}
body .subcategory-grid .category-item a:hover {
    color: rgb(0, 136, 204) !important;
}

/* L131 — Product quickview modal: Porto uses .mfp-content modal. */
body .mfp-content,
body .modal-popup.product-quickview .modal-inner-wrap {
    max-width: 1000px !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
body .mfp-close,
body .modal-popup.product-quickview .action-close {
    color: rgb(34, 37, 41) !important;
    font-size: 24px !important;
    opacity: 1 !important;
}

/* L132 — Wishlist page (.wishlist-index-index): page title 28/700,
 *        grid product-item same as PLP, update+share buttons dark. */
body.wishlist-index-index .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
    line-height: 30px !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
}
body.wishlist-index-index .actions-toolbar .primary .action,
body.wishlist-index-index .action.tocart,
body.wishlist-index-index .action.update {
    background-color: rgb(34, 37, 41) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* L133 — Compare products page (.catalog-product-compare-index): table
 *        th/td border 1px rgb(231,231,231) pad 15; th bg rgb(247,247,247). */
body.catalog-product-compare-index .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
    line-height: 30px !important;
    margin-bottom: 20px !important;
}
body.catalog-product-compare-index table.data.table.table-comparison th,
body.catalog-product-compare-index table.data.table.table-comparison td {
    border: 1px solid rgb(231, 231, 231) !important;
    padding: 15px !important;
    font-size: 14px !important;
    color: rgb(119, 119, 119) !important;
    line-height: 22px !important;
}
body.catalog-product-compare-index table.data.table.table-comparison th {
    background-color: rgb(247, 247, 247) !important;
    color: rgb(34, 37, 41) !important;
    font-weight: 700 !important;
}

/* L134 — My orders table (.sales-order-history): table header bg
 *        rgb(247,247,247) 14/700 rgb(34,37,41); row pad 12 15 fs13 rgb(119). */
body.sales-order-history table.table-order-items th,
body.sales-order-history table.data.table th,
body.account table.data.table th {
    background-color: rgb(247, 247, 247) !important;
    color: rgb(34, 37, 41) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    text-transform: none !important;
}
body.sales-order-history table.data.table td,
body.account table.data.table td {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
}
body.sales-order-history .actions-toolbar .action,
body.account .action.view {
    color: rgb(0, 136, 204) !important;
    text-decoration: none !important;
}

/* L135 — My addresses page (.customer-address-index): address block
 *        border 1px rgb(231,231,231) pad 20 bg #fff; title 16/700. */
body.customer-address-index .block .block-title strong,
body.customer-address-form .block .block-title strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: uppercase !important;
}
body.customer-address-index .block.block-addresses-default address,
body.customer-address-index .block.block-addresses-list address {
    border: 1px solid rgb(231, 231, 231) !important;
    padding: 20px !important;
    font-size: 14px !important;
    color: rgb(119, 119, 119) !important;
    line-height: 24px !important;
    background-color: #ffffff !important;
}

/* L136 — Contact us page form (.contact-index-index): fieldset legend
 *        22/600, field label 14/500 rgb(119), input h50 border 1px
 *        rgba(0,0,0,0.09), submit DARK btn 16/700 upper full-width. */
body.contact-index-index .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
    line-height: 30px !important;
}
body.contact-index-index .fieldset > .legend {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
    margin-bottom: 15px !important;
    text-transform: none !important;
    border-bottom: 0 !important;
}
body.contact-index-index .fieldset .field > .label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgb(119, 119, 119) !important;
}
body.contact-index-index .fieldset input[type="text"],
body.contact-index-index .fieldset input[type="email"],
body.contact-index-index .fieldset input[type="tel"],
body.contact-index-index .fieldset textarea {
    height: 50px !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    font-size: 13.6px !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    color: rgb(119, 119, 119) !important;
}
body.contact-index-index .fieldset textarea {
    height: auto !important;
    min-height: 120px !important;
}
body.contact-index-index .actions-toolbar .primary .action.submit {
    background-color: rgb(34, 37, 41) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 32px !important;
    height: 55px !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* L137 — Order success (thank you) page (.checkout-onepage-success):
 *        title 28/700 rgb(33,37,41); continue btn DARK 16/700 upper. */
body.checkout-onepage-success .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
    line-height: 30px !important;
    text-transform: none !important;
}
body.checkout-onepage-success .checkout-success p {
    font-size: 14px !important;
    color: rgb(119, 119, 119) !important;
    line-height: 24px !important;
}
body.checkout-onepage-success .actions-toolbar .action.continue {
    background-color: rgb(34, 37, 41) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 32px !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* L138 — Footer bottom bar payment icons: wrapper h38 flex; each icon
 *        56x32 bg rgb(214,211,204) radius 4 margin 3. */
body .payment-icons,
body .footer .payment-icons,
body .pt-footer .payment-icons {
    display: flex !important;
    height: 38px !important;
    align-items: center !important;
    gap: 0 !important;
}
body .payment-icon,
body .payment-icons span,
body .footer .payment-icons span {
    width: 56px !important;
    height: 32px !important;
    background-color: rgb(214, 211, 204) !important;
    border-radius: 4px !important;
    margin: 3px !important;
    display: inline-block !important;
}

/* L139 — Breadcrumbs bar (refinement of L71): bar h46 bg #fff full-width;
 *        item 12/400 upper rgb(142,142,142) lh22 flex; separator ::after
 *        content "" margin 0 4 rgb(142,142,142). */
/* FIX-PARITY-03 (revised after Porto Demo 1 reference capture):
 * Porto Demo 1 has .breadcrumbs as a FULL-WIDTH wrapper (x:0 w:viewport)
 * with the inner <ul class="items"> centered via max-width:1200px
 * + margin:0 auto + padding:12px 10px. Earlier version wrongly put
 * max-width on .breadcrumbs itself. Matches Porto exactly now. */
body .breadcrumbs {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
body .breadcrumbs .items {
    display: flex !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 12px 10px !important;
    list-style: none !important;
}
body .breadcrumbs .item {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgb(142, 142, 142) !important;
    line-height: 22px !important;
    text-transform: uppercase !important;
    height: 22px !important;
}
body .breadcrumbs .item:not(:last-child)::after {
    content: "/" !important;
    color: rgb(142, 142, 142) !important;
    font-size: 12px !important;
    margin: 0 4px !important;
}

/* L140 — Scroll-to-top button: Porto Demo 1 does NOT have one.
 *        We hide ours if present; disable the fixed circular button. */
body #back-top,
body .back-to-top,
body .scroll-to-top,
body #scroll-to-top,
body .pt-back-to-top {
    display: none !important;
}

/* ===================================================================
   FIX-PARITY-10 — PLP sidebar structural clean-up
   The block.filter was rendering with bare border, no internal padding,
   and "Shopping Options" subtitle stuck to the edges. These rules flatten
   the filter block to Porto Demo 1's clean underline-section style.
   =================================================================== */
body.page-with-filter .sidebar.sidebar-main .block.filter,
body.page-products .sidebar.sidebar-main .block.filter {
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    background: transparent !important;
}

body.page-with-filter .sidebar.sidebar-main .block.filter .block-subtitle.filter-subtitle,
body.page-products .sidebar.sidebar-main .block.filter .block-subtitle.filter-subtitle {
    display: block !important;
    font-size: 15px !important; /* SIDEBAR-01: Demo 1 uses 15/600, not 16/700 */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: rgb(34, 37, 41) !important;
    padding: 0 0 12px !important;
    margin: 0 0 15px !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options,
body.page-products .sidebar.sidebar-main .filter-options {
    padding: 0 !important;
    margin: 0 !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options-item,
body.page-products .sidebar.sidebar-main .filter-options-item {
    border: 0 !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    padding: 0 0 15px !important;
    margin: 0 0 15px !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options-item:last-child,
body.page-products .sidebar.sidebar-main .filter-options-item:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options-title,
body.page-products .sidebar.sidebar-main .filter-options-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 15px !important; /* SIDEBAR-01: Demo 1 15/600 */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: rgb(34, 37, 41) !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    border: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options-title::after,
body.page-products .sidebar.sidebar-main .filter-options-title::after {
    content: '\2212' !important; /* minus */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(119, 119, 119) !important;
    margin-left: 8px !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options-title[aria-expanded="false"]::after,
body.page-products .sidebar.sidebar-main .filter-options-title[aria-expanded="false"]::after {
    content: '+' !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options-content,
body.page-products .sidebar.sidebar-main .filter-options-content {
    padding: 0 !important;
    margin: 0 !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options-content .items,
body.page-products .sidebar.sidebar-main .filter-options-content .items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-with-filter .sidebar.sidebar-main .filter-options-content .item,
body.page-products .sidebar.sidebar-main .filter-options-content .item {
    padding: 4px 0 !important;
    margin: 0 !important;
}

/* ===================================================================
   FIX-PARITY-11 — PLP Categories nested block
   The sidebar Categories block needs a section header matching the
   Shopping Options subtitle, and nested child categories need indent.
   =================================================================== */
body.page-with-filter .sidebar.sidebar-main .block-category-list,
body.page-products .sidebar.sidebar-main .block-category-list,
body.pt-category-page .sidebar.sidebar-main .block-category-list {
    margin-bottom: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-title,
body.page-products .sidebar.sidebar-main .block-category-list .block-title,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-title {
    clip: auto !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 15px !important;
    padding: 0 0 12px !important;
    overflow: visible !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-title strong,
body.page-products .sidebar.sidebar-main .block-category-list .block-title strong,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-title strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: rgb(34, 37, 41) !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-content ul,
body.page-products .sidebar.sidebar-main .block-category-list .block-content ul,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-content ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-content li,
body.page-products .sidebar.sidebar-main .block-category-list .block-content li,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-content li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgb(240, 240, 240) !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-content li:last-child,
body.page-products .sidebar.sidebar-main .block-category-list .block-content li:last-child,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-content li:last-child {
    border-bottom: 0 !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-content a,
body.page-products .sidebar.sidebar-main .block-category-list .block-content a,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-content a {
    display: block !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: color 0.2s ease !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-content a:hover,
body.page-products .sidebar.sidebar-main .block-category-list .block-content a:hover,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-content a:hover {
    color: rgb(0, 136, 204) !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-content ul ul a,
body.page-products .sidebar.sidebar-main .block-category-list .block-content ul ul a,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-content ul ul a {
    padding-left: 15px !important;
    font-size: 13px !important;
}

body.page-with-filter .sidebar.sidebar-main .block-category-list .block-content ul ul ul a,
body.page-products .sidebar.sidebar-main .block-category-list .block-content ul ul ul a,
body.pt-category-page .sidebar.sidebar-main .block-category-list .block-content ul ul ul a {
    padding-left: 30px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * F-BUG BATCH A — Theme-only parity fixes (bugs #26-#60 from full scan)
 * ────────────────────────────────────────────────────────────────────── */

/* #26 — Cart: hide ALL extra placeholder children of .cart-container besides
 *        form-cart and cart-summary. The previous :empty rule didn't catch
 *        children with whitespace text nodes. */
body.checkout-cart-index .cart-container > *:not(.form-cart):not(#form-validate):not(.cart-summary):not(.crosssell):not(.cart-empty),
body.pt-cart-page .cart-container > *:not(.form-cart):not(#form-validate):not(.cart-summary):not(.crosssell):not(.cart-empty) {
    display: none !important;
}

/* #27 — Cart: coupon + estimate-shipping accordion sections styled to
 *        match Porto Demo 1 (dark divider, +/− indicator, bold title 14/700) */
body.checkout-cart-index .cart-summary .block,
body.pt-cart-page .cart-summary .block {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgb(231, 231, 231) !important;
    background: transparent !important;
}
body.checkout-cart-index .cart-summary .block > .title,
body.pt-cart-page .cart-summary .block > .title {
    position: relative !important;
    display: block !important;
    padding: 14px 24px 14px 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 0 !important;
}
body.checkout-cart-index .cart-summary .block > .title strong,
body.pt-cart-page .cart-summary .block > .title strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: none !important;
}
body.checkout-cart-index .cart-summary .block > .title::after,
body.pt-cart-page .cart-summary .block > .title::after {
    content: "+" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 1 !important;
}
body.checkout-cart-index .cart-summary .block.active > .title::after,
body.pt-cart-page .cart-summary .block.active > .title::after {
    content: "−" !important;
}
body.checkout-cart-index .cart-summary .block .content,
body.pt-cart-page .cart-summary .block .content {
    padding: 0 0 14px !important;
    background: transparent !important;
}

/* #28 — Checkout grid: fluid 1fr 380px (was hard 750/380) */
@media (min-width: 769px) {
    body.checkout-index-index .opc-wrapper,
    body.checkout-index-index #checkoutSteps {
        grid-column: 1 / 2 !important;
    }
    body.checkout-index-index .opc-sidebar,
    body.checkout-index-index .opc-summary-wrapper {
        grid-column: 2 / 3 !important;
    }
    body.checkout-index-index .checkout-container > .opc-estimated-wrapper + form,
    body.checkout-index-index .checkout-container,
    body.checkout-index-index #checkout {
        display: grid !important;
        grid-template-columns: 1fr 380px !important;
        gap: 30px !important;
    }
}

/* #29 — Shipping methods: card-style rows */
body.checkout-index-index #checkout-shipping-method-load .table-checkout-shipping-method,
body.checkout-index-index #shipping-method-buttons-container ~ * .table-checkout-shipping-method {
    display: block !important;
    border-collapse: separate !important;
}
body.checkout-index-index .table-checkout-shipping-method tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
body.checkout-index-index .table-checkout-shipping-method tbody tr {
    display: grid !important;
    grid-template-columns: 30px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 3px !important;
    background: #ffffff !important;
}
body.checkout-index-index .table-checkout-shipping-method tbody tr:hover {
    border-color: rgb(0, 136, 204) !important;
}
body.checkout-index-index .table-checkout-shipping-method tbody tr td {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
body.checkout-index-index .table-checkout-shipping-method .col-method-title {
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
}

/* #30 — Checkout authentication popup styled */
body .modal-popup.authentication-dropdown .modal-inner-wrap,
body .modal-popup.authentication-popup .modal-inner-wrap {
    border-radius: 4px !important;
    border: 1px solid rgb(231, 231, 231) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}
body .modal-popup.authentication-dropdown .modal-title,
body .modal-popup.authentication-popup .modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    padding: 18px 24px !important;
}

/* #31 — Login & create-account submit buttons DARK (not blue) */
body.customer-account-login .login-container .actions-toolbar .action.login,
body.customer-account-login .login-container .actions-toolbar .action.primary,
body.customer-account-login .actions-toolbar .action.create.primary,
body.customer-account-create .actions-toolbar .action.submit.primary,
body.customer-account-forgotpassword .actions-toolbar .action.submit.primary,
body.checkout-index-index .modal-popup .action.action-login {
    background-color: rgb(34, 37, 41) !important;
    border-color: rgb(34, 37, 41) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    height: 55px !important;
    padding: 16px 32px !important;
    border-radius: 3px !important;
}
body.customer-account-login .login-container .actions-toolbar .action.login:hover,
body.customer-account-login .actions-toolbar .action.create.primary:hover {
    background-color: rgb(0, 136, 204) !important;
    border-color: rgb(0, 136, 204) !important;
}

/* #32 — Login: vertical divider between login & new-customer blocks */
body.customer-account-login .login-container {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    gap: 40px !important;
    align-items: stretch !important;
}
body.customer-account-login .login-container::before {
    content: "" !important;
    grid-column: 2 !important;
    background: rgb(231, 231, 231) !important;
    width: 1px !important;
    align-self: stretch !important;
    margin: 0 -20px !important;
}
body.customer-account-login .login-container .block-customer-login { grid-column: 1; }
body.customer-account-login .login-container .block-new-customer { grid-column: 3; }

/* #34 — Newsletter mobile button: keep "SUBSCRIBE" text visible (no icon swap) */
@media (max-width: 768px) {
    body .pt-footer-top__newsletter .pt-footer-top__newsletter-btn {
        font-size: 13px !important;
        padding: 0 16px !important;
        min-width: 110px !important;
        text-indent: 0 !important;
    }
}

/* #41 — Hero slider arrows: square dark buttons w/ chevron */
body .pt-hero-slider .swiper-button-prev,
body .pt-hero-slider .swiper-button-next,
body .slick-prev,
body .slick-next {
    width: 40px !important;
    height: 60px !important;
    background: rgba(34, 37, 41, 0.6) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    transition: background 0.2s !important;
}
body .pt-hero-slider .swiper-button-prev:hover,
body .pt-hero-slider .swiper-button-next:hover,
body .slick-prev:hover,
body .slick-next:hover {
    background: rgb(34, 37, 41) !important;
}
body .pt-hero-slider .swiper-button-prev::after { content: "‹" !important; font-size: 28px !important; font-weight: 300 !important; }
body .pt-hero-slider .swiper-button-next::after { content: "›" !important; font-size: 28px !important; font-weight: 300 !important; }
body .slick-prev::before { content: "‹" !important; font-size: 28px !important; }
body .slick-next::before { content: "›" !important; font-size: 28px !important; }

/* #42 — Slider dots: dark squares (was light grey circles) */
body .pt-hero-slider .swiper-pagination-bullet,
body .slick-dots li button {
    width: 14px !important;
    height: 4px !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    transition: background 0.2s, width 0.2s !important;
}
body .pt-hero-slider .swiper-pagination-bullet-active,
body .slick-dots li.slick-active button {
    background: #ffffff !important;
    width: 28px !important;
}
body .slick-dots li button::before { display: none !important; }

/* #45 — PLP list view actually styles items as horizontal rows */
body.page-products.list-view .pt-product-grid,
body.page-products.list-view .products-grid .product-items,
body.page-products [data-view-mode="list"] .pt-product-grid {
    display: block !important;
    grid-template-columns: none !important;
}
body.page-products.list-view .pt-product-card,
body.page-products [data-view-mode="list"] .pt-product-card {
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    gap: 24px !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
    border: 1px solid rgb(231, 231, 231) !important;
}

/* #46 — Toolbar amount label: Porto-style 13/400 grey */
body .toolbar.toolbar-products .toolbar-amount,
body .toolbar.toolbar-products #toolbar-amount {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 38px !important;
}

/* #47 — PDP stock label: small uppercase pill */
body.catalog-product-view .product-info-main .stock {
    display: inline-block !important;
    padding: 2px 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 16px !important;
    border-radius: 2px !important;
}
/* PDP-STOCK-02: was green pill — Demo 1 has plain text, no background */
body.catalog-product-view .product-info-main .stock.available {
    color: rgb(34, 37, 41) !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}
body.catalog-product-view .product-info-main .stock.available span {
    color: rgb(34, 37, 41) !important;
    background: transparent !important;
}

/* GAP-009: Show related / upsell / crosssell sections on PDP.
 * The related-carousel.phtml template already returns early when
 * $_items is empty, so no visual gap appears on products with no
 * related items. Magento base CSS may hide these blocks expecting
 * the relatedProducts JS widget to show them — force visible. */
body.pt-product-page .pt-related-section,
body.catalog-product-view .pt-related-section {
    display: block !important;
}
body.catalog-product-view .product-info-main .stock.unavailable {
    color: #ffffff !important;
    background: rgb(189, 54, 47) !important;
}

/* #48 — PDP SKU label — Porto Demo 1: column layout, left-aligned */
body.catalog-product-view .product-info-main .product-info-stock-sku {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
}
body.catalog-product-view .product-info-main .product.attribute.sku {
    display: inline-flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    font-size: 12px !important;
    color: rgb(119, 119, 119) !important;
}
body.catalog-product-view .product-info-main .product.attribute.sku .type::after {
    content: ":" !important;
    margin-right: 4px !important;
}

/* #49 — PDP qty input: -/+ buttons flanking center input */
body.catalog-product-view .product-info-main .box-tocart .field.qty {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    height: 50px !important;
    margin-right: 10px !important;
}
body.catalog-product-view .product-info-main .box-tocart .field.qty .label { display: none !important; }
body.catalog-product-view .product-info-main .box-tocart .field.qty .control { display: flex !important; align-items: stretch !important; }
body.catalog-product-view .product-info-main .box-tocart .field.qty input.qty {
    width: 50px !important;
    height: 100% !important;
    border: 0 !important;
    border-left: 1px solid rgb(231, 231, 231) !important;
    border-right: 1px solid rgb(231, 231, 231) !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
body.catalog-product-view .product-info-main .box-tocart .field.qty input.qty::-webkit-inner-spin-button,
body.catalog-product-view .product-info-main .box-tocart .field.qty input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
body.catalog-product-view .product-info-main .box-tocart .field.qty .control::before {
    content: "−" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    cursor: pointer !important;
    user-select: none !important;
    font-size: 18px !important;
    color: rgb(119, 119, 119) !important;
}
body.catalog-product-view .product-info-main .box-tocart .field.qty .control::after {
    content: "+" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    cursor: pointer !important;
    user-select: none !important;
    font-size: 18px !important;
    color: rgb(119, 119, 119) !important;
}

/* #50 — PDP short description: spacing above/below */
body.catalog-product-view .product-info-main .product.attribute.overview {
    margin: 18px 0 22px !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid rgb(231, 231, 231) !important;
    font-size: 16px !important;
    line-height: 27px !important;
    color: rgb(119, 119, 119) !important;
}

/* #51 — Cart: item thumbnail 110px (was 75px) */
body.checkout-cart-index .cart.table-wrapper .product-image-photo,
body.pt-cart-page .cart.table-wrapper .product-image-photo,
body.checkout-cart-index .cart.table-wrapper .product-image-container {
    width: 110px !important;
    max-width: 110px !important;
}
body.checkout-cart-index .cart.table-wrapper .product-image-container { display: inline-block !important; }
body.checkout-cart-index .cart.table-wrapper .col.item .product-item-photo {
    width: 110px !important;
    padding-right: 16px !important;
}

/* #53 — Footer newsletter label: 14/700 white */
body .pt-footer-top__newsletter-text,
body .pt-footer-top__newsletter h3,
body .pt-footer-top__newsletter .pt-footer-top__newsletter-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 22px !important;
    text-transform: none !important;
}

/* #55 — Copyright bar: Demo 1 rgb(34,37,41) + thin top border.
   Was rgb(26,26,26) — HOMEMISC-01 measured Demo 1 at rgb(34,37,41). */
body .pt-footer-bottom,
body .pt-footer__copyright {
    background-color: rgb(34, 37, 41) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* #57 — Breadcrumb separator: target Magento's actual <li class="item"> output */
body .breadcrumbs .items .item:not(:last-child)::after,
body .breadcrumbs .items > li:not(:last-child)::after,
body.cms-page-view .breadcrumbs .items .item:not(:last-child)::after {
    content: "/" !important;
    display: inline-block !important;
    margin: 0 8px !important;
    font-size: 12px !important;
    color: rgb(142, 142, 142) !important;
    font-weight: 400 !important;
}

/* #60 — Loading mask: dark overlay + Porto spinner */
body .loading-mask,
body .loader,
body .lac-notification-sticky + .loading-mask {
    background: rgba(34, 37, 41, 0.7) !important;
}
body .loading-mask .loader > img {
    display: none !important;
}
body .loading-mask .loader::after,
body .loader::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin: -20px 0 0 -20px !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: pt-spin 0.8s linear infinite !important;
}
@keyframes pt-spin {
    to { transform: rotate(360deg); }
}

/* #34 / #36 / #37 / #38 — Mobile header & off-canvas megamenu  */
@media (max-width: 991px) {
    body .pt-header__hamburger {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 36px !important;
        height: 36px !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin-right: 12px !important;
    }
    body .pt-header__hamburger-line {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: rgb(34, 37, 41) !important;
    }
    body .pt-header__inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
    }
    body .pt-header__search.pt-hidden-tablet,
    body .pt-header__tool-item.pt-hidden-tablet {
        display: none !important;
    }
    body .pt-header__tools {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    body .pt-header__tool-item--cart {
        display: inline-flex !important;
    }
    /* Megamenu becomes off-canvas drawer */
    body .pt-megamenu {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 80vw !important;
        background: #ffffff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        padding: 60px 0 20px !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15) !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    body.pt-mobile-nav-open .pt-megamenu {
        display: block !important;
        transform: translateX(0);
    }
    body .pt-megamenu .pt-container { padding: 0 !important; }
    body .pt-megamenu .pt-nav__list { display: block !important; }
    body .pt-megamenu .pt-nav__item {
        display: block !important;
        border-bottom: 1px solid rgb(231, 231, 231) !important;
    }
    body .pt-megamenu .pt-nav__link {
        display: block !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: rgb(34, 37, 41) !important;
    }
    body .pt-megamenu .pt-nav__dropdown { display: none !important; }
    /* Backdrop when drawer open */
    body.pt-mobile-nav-open::after {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
    }
    body html { overflow-x: hidden !important; }
    body { overflow-x: hidden !important; }
}

/* #9 — Header search bar min-width pinned to 540px on >= 1200px viewports */
@media (min-width: 1200px) {
    body .pt-header__search {
        flex: 1 1 540px !important;
        min-width: 540px !important;
        max-width: 720px !important;
    }
}

/* =====================================================================
 * PDP parity batch — measured from Porto Demo 1 tonometer-v2.html
 * ===================================================================== */

/* PDP-STOCK-01: Stock "In stock" should be plain text, no green pill.
 * Demo 1: 12/600 uppercase rgb(34,37,41), transparent bg, no pill, h24.
 * Our tenant shows Magento default rgb(81,163,81) green pill — reset. */
body.pt-product-page .stock.available,
body.catalog-product-view .stock.available,
body.pt-product-page .product.attribute.availability,
body.catalog-product-view .product.attribute.availability {
    background: transparent !important;
    color: rgb(34, 37, 41) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    line-height: 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* PDP-DESC-01: Short description — 16/400 rgb(119) lh27 (not 14/400 lh24).
 * Must target .value AND inner p/div/span to prevent inheritance from body 14px. */
body.pt-product-page .product.attribute.overview,
body.catalog-product-view .product.attribute.overview,
body.pt-product-page .product.attribute.overview .value,
body.catalog-product-view .product.attribute.overview .value,
body.pt-product-page .product.attribute.overview .value p,
body.catalog-product-view .product.attribute.overview .value p,
body.pt-product-page .product.attribute.overview .value div,
body.catalog-product-view .product.attribute.overview .value div,
body.pt-product-page .product-info-main .product.attribute.overview,
body.pt-product-page .product-info-main .product.attribute.overview .value,
body.pt-product-page .product-info-main .product.attribute.overview .value p,
body.catalog-product-view .product-info-main .product.attribute.overview,
body.catalog-product-view .product-info-main .product.attribute.overview .value,
body.catalog-product-view .product-info-main .product.attribute.overview .value p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 27px !important;
    color: rgb(119, 119, 119) !important;
}

/* PDP-TAB-01: Tab title text — inactive #818692, active #222529.
 * Demo 1: 13/700 uppercase, inactive rgb(129,134,146), active rgb(34,37,41).
 * The <a> inherits from generic link color so we override with !important. */
body.pt-product-page .product.data.items > .item.title > .switch,
body.pt-product-page .product.data.items > .item.title a.switch,
body.catalog-product-view .product.data.items > .item.title > .switch,
body.catalog-product-view .product.data.items > .item.title a.switch {
    color: #818692 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
body.pt-product-page .product.data.items > .item.title.active > .switch,
body.pt-product-page .product.data.items > .item.title._active > .switch,
body.catalog-product-view .product.data.items > .item.title.active > .switch,
body.catalog-product-view .product.data.items > .item.title._active > .switch {
    color: #222529 !important;
}

/* ==================================================================
   CART-01: Porto Demo 1 shopping cart page parity
   Tenant had Porto-blue 20px title, 8px th, 9px qty, blue checkout btn.
   Demo 1 uses dark 28/700 titles, 14/700 th, 14/400 qty, dark btns.
   ================================================================== */
body.checkout-cart-index .page-title-wrapper .page-title,
body.checkout-cart-index .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: uppercase !important;
    margin: 0 0 20px !important;
}
/* Cart table header */
body.checkout-cart-index #shopping-cart-table thead th,
body.checkout-cart-index .cart.table thead th {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    background: transparent !important;
    text-transform: uppercase !important;
    padding: 16px 10px !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
}
/* Cart table body cells */
body.checkout-cart-index #shopping-cart-table tbody td,
body.checkout-cart-index .cart.table tbody td {
    font-size: 14px !important;
    color: rgb(68, 68, 68) !important;
    padding: 20px 10px !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
    vertical-align: top !important;
}
/* Product name link — R58: fw 500 per Porto Demo 1 reference measurement */
body.checkout-cart-index .product-item-name,
body.checkout-cart-index .product-item-name a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgb(34, 37, 41) !important;
    text-decoration: none !important;
}
body.checkout-cart-index .product-item-name a:hover {
    color: rgb(0, 136, 204) !important;
}
/* Price cells */
body.checkout-cart-index #shopping-cart-table .price,
body.checkout-cart-index .cart.table .col.price .price,
body.checkout-cart-index .cart.table .col.subtotal .price {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
}
/* Qty input */
body.checkout-cart-index .cart.table .input-text.qty,
body.checkout-cart-index #shopping-cart-table .input-text.qty {
    width: 60px !important;
    height: 40px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(34, 37, 41) !important;
    padding: 8px !important;
    border: 1px solid rgb(231, 231, 231) !important;
    border-radius: 0 !important;
    text-align: center !important;
}
/* Proceed to checkout button — Demo 1 dark full-width */
body.checkout-cart-index .cart-totals .checkout-methods-items button.checkout,
body.checkout-cart-index button.action.primary.checkout {
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 18px 20px !important;
    height: 55px !important;
    width: 100% !important;
    line-height: 1 !important;
}
body.checkout-cart-index button.action.primary.checkout:hover {
    background: rgb(0, 136, 204) !important;
}
/* Continue shopping / update cart buttons — secondary dark outline */
body.checkout-cart-index .cart.main.actions .action.continue,
body.checkout-cart-index .cart.main.actions button.update,
body.checkout-cart-index .cart.main.actions button.clear {
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    height: 40px !important;
    line-height: 16px !important;
}
body.checkout-cart-index .cart.main.actions .action.continue:hover,
body.checkout-cart-index .cart.main.actions button.update:hover {
    background: rgb(0, 136, 204) !important;
}
/* Cart totals block */
body.checkout-cart-index .cart-totals {
    background: rgb(247, 247, 247) !important;
    padding: 20px !important;
    border: 0 !important;
}
body.checkout-cart-index .cart-totals .totals th,
body.checkout-cart-index .cart-totals .totals td {
    font-size: 14px !important;
    color: rgb(68, 68, 68) !important;
    padding: 8px 0 !important;
    border: 0 !important;
}
body.checkout-cart-index .cart-totals .grand .mark,
body.checkout-cart-index .cart-totals .grand .amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    padding-top: 16px !important;
    border-top: 1px solid rgb(231, 231, 231) !important;
}

/* ==================================================================
   LOGIN-01: Customer login page Demo 1 parity
   Tenant had 22/400 block titles, narrow inputs (186px), narrow login
   button (124px). Demo 1 uses 22/700 block titles, full-width 580px
   inputs, full-width 16/700 buttons.
   ================================================================== */
body.customer-account-login .login-container .block-title strong,
body.customer-account-login .block-customer-login .block-title strong,
body.customer-account-login .block-new-customer .block-title strong {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
}
/* Full width pill inputs in login form (P1-05) */
body.customer-account-login .login-container .field input[type="email"],
body.customer-account-login .login-container .field input[type="password"],
body.customer-account-login .login-container .field input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    padding: 8px 12px !important;
    font-size: 13.6px !important;
    border: 0 !important;
    border-radius: 24px 0 0 24px !important;
    background: #F4F4F4 !important;
    color: rgb(119, 119, 119) !important;
}
body.customer-account-login .login-container .field {
    width: 100% !important;
}
/* LOGIN-02: Demo 1 field margin-bottom is 14px; ours was 29px (from
   Luma _forms.less $indent__base-driven rule). 4 fields × 15px delta
   = 60px extra height. Align label mb to Demo 1 (4px, was 8px) and
   tighten label font-size 14->12 to match Demo 1 block-title scale. */
body.customer-account-login .login-container .fieldset > .field,
body.customer-account-login .login-container .fieldset > .fields > .field,
body.customer-account-login .block-customer-login .fieldset > .field,
body.customer-account-login .block-new-customer .fieldset > .field {
    margin-bottom: 14px !important;
}
body.customer-account-login .login-container .field > .label {
    margin-bottom: 4px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}
/* Login button — full width, 16/700 dark */
body.customer-account-login .login-container .actions-toolbar button.action.login,
body.customer-account-login .actions-toolbar .primary button.action.login {
    width: 100% !important;
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
    height: 55px !important;
    line-height: 1 !important;
}
body.customer-account-login .login-container .actions-toolbar button.action.login:hover {
    background: rgb(0, 136, 204) !important;
}
/* Create an account button — Demo 1 16/700 same height */
body.customer-account-login .block-new-customer .actions-toolbar a.action.create,
body.customer-account-login .actions-toolbar .secondary a.action.create {
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
    height: 55px !important;
    line-height: 1 !important;
    display: inline-block !important;
}
body.customer-account-login .block-new-customer .actions-toolbar a.action.create:hover {
    background: rgb(0, 136, 204) !important;
}
/* Labels stacked above inputs */
body.customer-account-login .login-container .field > .label {
    display: block !important;
    padding: 0 0 6px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgb(119, 119, 119) !important;
    text-align: left !important;
}

/* ==================================================================
   REG-01: Create account page Demo 1 parity
   Tenant had 14/700 narrow submit (230px). Demo 1 uses 16/700 ~440px.
   ================================================================== */
body.customer-account-create .form-create-account button.action.submit,
body.customer-account-create form button.action.submit.primary {
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
    height: 55px !important;
    min-width: 240px !important;
    line-height: 1 !important;
}
body.customer-account-create form button.action.submit.primary:hover {
    background: rgb(0, 136, 204) !important;
}
/* Register page legend matching Demo 1 22/600 */
body.customer-account-create .fieldset > .legend,
body.customer-account-create fieldset > legend > span {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: rgb(34, 37, 41) !important;
    margin-bottom: 20px !important;
}

/* ==================================================================
   LOGIN-02: Demo 1 uses .login-container display:block with each
   block at ~48% float. Tenant defaulted to display:grid which forced
   blocks to ~273px wide. Force layout match.
   ================================================================== */
body.customer-account-login .login-container {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
body.customer-account-login .login-container::after {
    content: "";
    display: block;
    clear: both;
}
body.customer-account-login .login-container .block.block-customer-login {
    float: left !important;
    width: 48% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-right: 20px !important;
}
body.customer-account-login .login-container .block.block-new-customer {
    float: right !important;
    width: 48% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
}
/* Now that block is wide, force form/fieldset/field/control to fill it */
body.customer-account-login .block-customer-login .block-content,
body.customer-account-login .block-customer-login form.form-login,
body.customer-account-login .block-customer-login fieldset.fieldset,
body.customer-account-login .block-customer-login .field,
body.customer-account-login .block-customer-login .field .control,
body.customer-account-login .block-new-customer .block-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body.customer-account-login .block-customer-login .field .control input.input-text {
    width: 100% !important;
    max-width: 100% !important;
}
/* Login button full width within its block */
body.customer-account-login .login-container .actions-toolbar .primary,
body.customer-account-login .login-container .actions-toolbar {
    width: 100% !important;
    display: block !important;
}
body.customer-account-login .login-container .actions-toolbar button.action.login {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* LOGIN-03: Demo 1 customer pages render .page-title-wrapper as a
   light-grey banner (bg rgb(244,244,244), pad 60/0, title 28/700) that
   is 152h. Our tenant rendered 36h plain-text, making the login page
   start flush against the breadcrumbs. Add the banner treatment scoped
   to all customer-account-* pages so register/login/forgot password/
   dashboard all get the same treatment. Title already 28/700 from an
   earlier batch. */
/* LOGIN-04: Selector must match both layouts:
   - 1column (login/register/forgot): .page-title-wrapper is child of .page-main
   - 2columns-left (dashboard/wishlist/orders/addresses): .page-title-wrapper
     is moved into .column.main by the layout. Use descendant selector
     (no `>`) to cover both. */
body.customer-account-login .page-title-wrapper,
body.customer-account-create .page-title-wrapper,
body.customer-account-forgotpassword .page-title-wrapper,
body.customer-account-index .page-title-wrapper,
body.customer-account-edit .page-title-wrapper,
body.customer-address-index .page-title-wrapper,
body.customer-address-form .page-title-wrapper,
body.sales-order-history .page-title-wrapper,
body.sales-order-view .page-title-wrapper,
body.wishlist-index-index .page-title-wrapper {
    background-color: rgb(244, 244, 244) !important;
    padding: 60px 0 !important;
    margin: 0 0 30px !important;
    text-align: center !important;
}
body.customer-account-login .page-title-wrapper > .page-title,
body.customer-account-create .page-title-wrapper > .page-title,
body.customer-account-forgotpassword .page-title-wrapper > .page-title,
body.customer-account-index .page-title-wrapper > .page-title,
body.customer-account-edit .page-title-wrapper > .page-title,
body.customer-address-index .page-title-wrapper > .page-title,
body.customer-address-form .page-title-wrapper > .page-title,
body.sales-order-history .page-title-wrapper > .page-title,
body.sales-order-view .page-title-wrapper > .page-title,
body.wishlist-index-index .page-title-wrapper > .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    padding: 0 15px !important;
}

/* ==================================================================
   REG-02: Override existing 14px winning selector with 16px + 442 wide
   to match Demo 1. Pre-existing
   `body.customer-account-create .actions-toolbar .action.submit.primary`
   was at specificity (0,4,1) and beating REG-01.
   ================================================================== */
body.customer-account-create .actions-toolbar .action.submit.primary,
body.customer-account-create .form-create-account .actions-toolbar .action.submit.primary,
body.customer-account-create form.form-create-account button.action.submit.primary {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 32px !important;
    height: 55px !important;
    min-width: 442px !important;
    line-height: 1 !important;
}
body.customer-account-create .actions-toolbar .action.submit.primary:hover {
    background: rgb(0, 136, 204) !important;
}

/* ==================================================================
   REG-03: Register page parity with Demo 1.
   - field margin-bottom 29 -> 14 (same as LOGIN-02; Luma _forms.less base)
   - form width 620 -> ~983 (Demo 1 uses wider col-lg-8 container)
   - Demo 1 page-main: 718h; ours: 1153h (+435). Wider form collapses
     the vertical stack by ~250 and the field mb trim recovers ~185.
   Same margin-bottom fix also needed on forgotpassword which shares
   the same Luma rule.
   ================================================================== */
body.customer-account-create .form-create-account,
body.customer-account-create form.form.create.account,
body.customer-account-forgotpassword .form.password.forget {
    max-width: 983px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
}
body.customer-account-create .fieldset > .field,
body.customer-account-create .fieldset > .fields > .field,
body.customer-account-forgotpassword .fieldset > .field,
body.customer-account-forgotpassword .fieldset > .fields > .field {
    margin-bottom: 14px !important;
}

/* CONTACT-01 overrides: hide page-title-wrapper, field mb 29->14. */
body.contact-index-index .page-main > .page-title-wrapper {
    display: none !important;
}
body.contact-index-index .form.contact .fieldset > .field,
body.contact-index-index .form.contact .fieldset > .fields > .field {
    margin-bottom: 14px !important;
}

/* ==================================================================
   MEGAMENU-01: Submenu link typography Demo 1 parity.
   Demo 1 column heading 12/700 rgb(51,51,51), sub-link 12/600 rgb(105,105,105),
   link pad 0 0 5px, li pad 15px 10px 0.
   Tenant was 14/400 rgb(119,119,119) pad 8 20.
   ================================================================== */
body .pt-megamenu__dropdown ul li {
    padding: 15px 10px 0 !important;
    list-style: none !important;
}
body .pt-megamenu__dropdown ul li a {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgb(51, 51, 51) !important;
    text-transform: uppercase !important;
    padding: 0 0 5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}
body .pt-megamenu__dropdown ul li ul li a,
body .pt-megamenu__dropdown ul ul a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgb(105, 105, 105) !important;
    text-transform: none !important;
    padding: 0 0 5px !important;
}
body .pt-megamenu__dropdown ul li a:hover,
body .pt-megamenu__dropdown ul ul a:hover {
    color: rgb(0, 136, 204) !important;
}

/* ==================================================================
   CONTACT-01: Demo 1 contact page uses Porto-blue 20/700 title and a
   small Porto-blue 14/700 submit btn (NOT dark like other forms).
   Earlier L136 mistakenly set dark 16/700 full-width — revert.
   ================================================================== */
body.contact-index-index .page-title-wrapper .page-title,
body.contact-index-index .page-title-wrapper h1.page-title,
body.contact-index-index h1.page-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    text-transform: none !important;
}
body.contact-index-index form#contact-form fieldset {
    max-width: 780px !important;
    width: 100% !important;
}
body.contact-index-index form#contact-form .field input[type="text"],
body.contact-index-index form#contact-form .field input[type="email"],
body.contact-index-index form#contact-form .field input[type="tel"] {
    height: 37px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 !important;
}
body.contact-index-index form#contact-form button.action.submit,
body.contact-index-index .actions-toolbar button.action.submit.primary {
    background: rgb(0, 136, 204) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 2px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    height: 48px !important;
    width: auto !important;
    min-width: 0 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}
body.contact-index-index form#contact-form button.action.submit:hover {
    background: rgb(34, 37, 41) !important;
}

/* ==================================================================
   FORGOT-01: Forgot password submit btn — Demo 1 590x55 16/700 dark.
   Tenant was 229x55 14/700 (winning rule applied 14px from generic).
   ================================================================== */
body.customer-account-forgotpassword .actions-toolbar .action.submit.primary,
body.customer-account-forgotpassword form button.action.submit.primary,
body.customer-account-forgotpassword .actions-toolbar .primary button.action {
    font-size: 16px !important;
    font-weight: 700 !important;
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 32px !important;
    height: 55px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    display: block !important;
}
body.customer-account-forgotpassword .actions-toolbar,
body.customer-account-forgotpassword .actions-toolbar .primary {
    width: 100% !important;
    display: block !important;
}
body.customer-account-forgotpassword .actions-toolbar .action.submit.primary:hover {
    background: rgb(0, 136, 204) !important;
}

/* ============================================================
   SEARCH-01: Demo 1 search empty-state is a yellow alert notice
   (bg rgb(253,240,213), text rgb(111,68,0), 14/400). Tenant had
   the default gray/gray. Scope to catalogsearch result page.
   ============================================================ */
body.catalogsearch-result-index .message.notice,
body.catalogsearch-result-index .message.info,
body.catalogsearch-result-index .column.main > .message {
    background: rgb(253, 240, 213) !important;
    color: rgb(111, 68, 0) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}
body.catalogsearch-result-index .message.notice > *::before,
body.catalogsearch-result-index .message.notice::before {
    color: rgb(111, 68, 0) !important;
}

/* ============================================================
   ADVSEARCH-01 / R2: Advanced Search form — pixel-perfect match
   to m2.portotheme.com/demo2_en/catalogsearch/advanced/
   Measurements taken 2026-04-21 from live Demo 2 source.

   Key differences fixed vs clone baseline:
   - Form card: border-top 4px #0088CC, sides/bottom 1px #ececec,
     box-shadow, bg white, padding 35px 25px
   - Legend "SEARCH SETTINGS": #0088CC, 16px/400, uppercase
   - Labels: stacked above inputs (display:block, margin-bottom 8px)
     NOT right-aligned horizontal
   - Inputs: full-width, height 50px, border rgba(0,0,0,0.09)
   - Button: bg #0088CC (blue), not purple; height 48px, 12.8px/600
   ============================================================ */

/* --- Page title --- */
body.catalogsearch-advanced-index .page-title-wrapper .page-title,
body.catalogsearch-advanced-index h1.page-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    text-transform: none !important;
    margin: 0 0 20px !important;
}

/* --- Bordered card form --- */
body.catalogsearch-advanced-index form.form.search.advanced {
    background: rgb(255, 255, 255) !important;
    border-top: 4px solid rgb(0, 136, 204) !important;
    border-right: 1px solid rgb(236, 236, 236) !important;
    border-bottom: 1px solid rgb(236, 236, 236) !important;
    border-left: 1px solid rgb(236, 236, 236) !important;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 3px 0px !important;
    padding: 35px 25px !important;
}

/* --- Legend: "SEARCH SETTINGS" uppercase blue --- */
body.catalogsearch-advanced-index .legend,
body.catalogsearch-advanced-index fieldset.fieldset > legend.legend {
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
body.catalogsearch-advanced-index .legend > span,
body.catalogsearch-advanced-index fieldset > .legend span,
body.catalogsearch-advanced-index fieldset.fieldset > legend span {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* --- Field layout: stacked (label above input) --- */
body.catalogsearch-advanced-index form.form.search.advanced .field {
    display: block !important;
    margin-bottom: 16px !important;
}
body.catalogsearch-advanced-index form.form.search.advanced .field > .label,
body.catalogsearch-advanced-index form.form.search.advanced .field label {
    display: block !important;
    float: none !important;
    width: auto !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgb(119, 119, 119) !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}
body.catalogsearch-advanced-index form.form.search.advanced .field > .control {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
}

/* --- Inputs full-width, 50px height --- */
body.catalogsearch-advanced-index form.form.search.advanced input[type="text"],
body.catalogsearch-advanced-index form.form.search.advanced input[type="number"],
body.catalogsearch-advanced-index form.form.search.advanced select {
    width: 100% !important;
    height: 50px !important;
    font-size: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 !important;
    background: rgb(255, 255, 255) !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
}

/* --- Price range: two inputs side by side (from/to) --- */
body.catalogsearch-advanced-index form.form.search.advanced .field.price .control {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body.catalogsearch-advanced-index form.form.search.advanced .field.price .control input {
    flex: 1 !important;
    width: auto !important;
}

/* --- SEARCH button: blue #0088CC, full natural width, 48px high --- */
body.catalogsearch-advanced-index form.form.search.advanced .action.search,
body.catalogsearch-advanced-index form.form.search.advanced button[type="submit"],
body.catalogsearch-advanced-index form.form.search.advanced .actions-toolbar .action.search {
    background: rgb(0, 136, 204) !important;
    background-color: rgb(0, 136, 204) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12.8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    cursor: pointer !important;
}

/* ============================================================
   CART-02: Previous CART-01 measurements were wrong. Demo 1
   WITH ITEMS cart actually has:
     - H1: 20/700 rgb(0, 136, 204) (Porto blue, same as all titles)
     - Checkout btn: bg rgb(34,37,41), 15/700, h48 (not h55 16/700)
     - Table th: 14/600 rgb(33,37,41), bg TRANSPARENT (not rgb(247))
   Override CART-01's incorrect dark title + oversized button here.
   ============================================================ */
body.checkout-cart-index .page-title-wrapper .page-title,
body.checkout-cart-index h1.page-title,
body.checkout-cart-index.pt-cart-page .page-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    text-transform: none !important;
    margin: 0 0 20px !important;
}
body.checkout-cart-index #shopping-cart-table th,
body.checkout-cart-index .cart.items th,
body.checkout-cart-index table.cart.table-wrapper th {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgb(33, 37, 41) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09) !important;
    padding: 12px 10px !important;
    text-transform: none !important;
}
body.checkout-cart-index button.action.checkout,
body.checkout-cart-index button[data-role="proceed-to-checkout"],
body.checkout-cart-index .cart-summary button.checkout,
body.checkout-cart-index .cart-summary .checkout-methods-items button.primary {
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    height: 48px !important;
    min-height: 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}
body.checkout-cart-index button.action.checkout:hover,
body.checkout-cart-index button[data-role="proceed-to-checkout"]:hover {
    background: rgb(0, 136, 204) !important;
}

/* ============================================================
   PDP-REVIEW-01: Demo 1 PDP review form "You're reviewing:"
   label is 16/400. Tenant rendered 20/400. Shrink to 16/400.
   Scope to product page review form.
   ============================================================ */
body.catalog-product-view #review-form legend > span,
body.catalog-product-view #review-form .legend span,
body.catalog-product-view #review-form fieldset > .legend span {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(51, 51, 51) !important;
    text-transform: none !important;
}
body.catalog-product-view #review-form legend,
body.catalog-product-view #review-form .legend {
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ============================================================
   HOMESERVICE-01: Homepage service icon boxes (.pt-service)
   Demo 1 reference (porto-sicon-box.style_1 "FREE SHIPPING & RETURN"):
     icon:  35px
     title: 14px/700 rgb(34,37,41) none-case
     desc:  13px/400 rgb(119,119,119)
   Tenant rendered 17/700 title + 14/400 rgb(85,85,85) desc
   (too large + wrong gray). Align typography to Demo 1.
   ============================================================ */
body.cms-home .pt-service h3,
body.cms-home .pt-service .pt-service__text h3,
.pt-service h3,
.pt-service .pt-service__text h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    text-transform: none !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}
body.cms-home .pt-service p,
body.cms-home .pt-service .pt-service__text p,
.pt-service p,
.pt-service .pt-service__text p {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgb(119, 119, 119) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.pt-service .pt-service__icon svg {
    width: 35px !important;
    height: 35px !important;
    stroke: rgb(34, 37, 41) !important;
}
.pt-service .pt-service__icon {
    margin-right: 15px !important;
}

/* ============================================================
   HOMEMISC-01: Two small parity deltas discovered during the
   homepage typography sweep.
   1) Section titles (.pt-section-title, .pt-three-col__title)
      were rgb(34,37,41). Demo 1 "Featured Products" heading
      uses rgb(49,49,49) — slightly lighter dark gray. Match.
   2) Footer bottom strip (.pt-footer-bottom) background was
      rgb(26,26,26). Demo 1 uses rgb(34,37,41). Match.
   ============================================================ */
body.cms-home .pt-section-title,
body.cms-home .pt-three-col__title,
.pt-section-title,
.pt-three-col__title {
    color: rgb(49, 49, 49) !important;
}

.pt-footer-bottom {
    background: rgb(34, 37, 41) !important;
}

/* ==================================================================
   CART-01: Shopping cart table parity with Demo 1.
   Live measurements (seeded cart, 2 items):
     Demo 1: cart.table-wrapper bg transparent, no border; thumb 84x84;
             td pad 20px 10px; item row h=124.
     Tenant: cart.table-wrapper bg rgb(255,255,255) + 1px solid
             rgb(231,231,231); thumb 110x100; item row h=202.
   Fix: drop white card + border on .cart.table-wrapper, force
        product thumbnail to 84x84, tighten item name margin.
   ================================================================== */
body.checkout-cart-index .cart.table-wrapper,
body.pt-cart-page .cart.table-wrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
body.checkout-cart-index .cart.table-wrapper .product-image-container,
body.pt-cart-page .cart.table-wrapper .product-image-container {
    width: 84px !important;
    height: 84px !important;
}
body.checkout-cart-index .cart.table-wrapper .product-image-photo,
body.pt-cart-page .cart.table-wrapper .product-image-photo {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
    object-fit: cover !important;
}
body.checkout-cart-index .cart.table-wrapper .product-item-name,
body.pt-cart-page .cart.table-wrapper .product-item-name {
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* ==================================================================
   CHECKOUT-01: One-page checkout shipping step parity with Demo 1.
   Live measurements (guest checkout, 1 item):
     Demo 1: progress bar block, items inline-block w=185 h=73, active
             marker rgb(255,85,1) Porto-orange. Page title 20px.
             Form field margin-bottom 14.
     Tenant: progress bar flex, items block w=580 h=99 (stretched),
             active marker rgb(0,136,204) Porto-blue. Title 22px.
             Form field margin-bottom 29.
   Fix: progress bar block + items inline-block + auto width, title
        20/700, field mb 29 -> 14, active marker Porto-orange.
   ================================================================== */
body.checkout-index-index .opc-progress-bar {
    display: block !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}
body.checkout-index-index .opc-progress-bar-item {
    display: inline-block !important;
    width: auto !important;
    min-width: 185px !important;
    height: auto !important;
    flex: none !important;
    padding-top: 45px !important;
    margin: 0 -4px 0 0 !important;
    vertical-align: top !important;
}
body.checkout-index-index .opc-progress-bar-item._active::before {
    background: rgb(255, 85, 1) !important;
}
body.checkout-index-index .opc-progress-bar-item._active > span::after {
    background: rgb(255, 85, 1) !important;
    border-color: rgb(255, 85, 1) !important;
}
body.checkout-index-index .page-title-wrapper .page-title,
body.checkout-index-index h1.page-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
}
body.checkout-index-index .form.form-shipping-address .field,
body.checkout-index-index #shipping-new-address-form .field,
body.checkout-index-index #co-payment-form .field,
body.checkout-index-index #checkout-step-payment .field {
    margin-bottom: 14px !important;
}
body.checkout-index-index .page-main {
    padding: 0 10px 40px !important;
}

/* ==================================================================
   CHECKOUT-02: Order Summary sidebar parity with Demo 1.
   Live measurements:
     Demo 1: .opc-block-summary bg white, pad 22px 21px,
             border 2px solid rgb(231,231,231); title 16/700;
             continue button h 48, pad 0 17.
     Tenant: bg rgb(244,244,244) light grey, pad 22px 30px, no
             border; title 22; continue button h 43, pad 12 28.
   ================================================================== */
body.checkout-index-index .opc-block-summary {
    background: rgb(255, 255, 255) !important;
    border: 2px solid rgb(231, 231, 231) !important;
    padding: 22px 21px !important;
    border-radius: 0 !important;
}
body.checkout-index-index .opc-block-summary > .title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgb(34, 37, 41) !important;
    padding: 0 0 8px !important;
    margin: 0 0 8px !important;
    border-bottom: 1px solid rgb(231, 231, 231) !important;
}
body.checkout-index-index button.button.action.continue.primary,
body.checkout-index-index button[data-role="opc-continue"],
body.checkout-index-index button.action.primary.checkout {
    height: 48px !important;
    padding: 0 17px !important;
    line-height: 48px !important;
}

/* CONTACT-01: Contact Us page — 2-column layout matching Demo 1.
   Demo 1: flex row  col-md-8 (form 800px) + col-md-4 (Contact Details 400px)
           inside 1200px container. Form has fields + Submit button; right
           panel has Phone/Fax/Email/Skype with SVG icons.
   Fix: use flex on .column.main to place form + details panel side-by-side.
        The layout XML injects a .pt-contact-details-panel block after the form. */
body.contact-index-index .page-main {
    padding: 20px 10px 40px !important;
}
body.contact-index-index .column.main {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 20px !important;
}
body.contact-index-index .column.main > .form.contact,
body.contact-index-index .column.main > #contact-form {
    flex: 0 0 calc(66.666% - 10px) !important;
    max-width: calc(66.666% - 10px) !important;
    margin: 0 !important;
}
body.contact-index-index .pt-contact-details-panel {
    flex: 0 0 calc(33.333% - 10px) !important;
    max-width: calc(33.333% - 10px) !important;
    background: #f4f4f4 !important;
    padding: 30px !important;
}
body.contact-index-index .pt-contact-details-panel h3 {
    margin: 0 0 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #313131 !important;
}
body.contact-index-index .pt-contact-detail-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 15px !important;
}
body.contact-index-index .pt-contact-detail-item svg {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    margin-right: 12px !important;
}
body.contact-index-index .pt-contact-detail-item div {
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.5 !important;
}
body.contact-index-index .pt-contact-detail-item strong {
    color: #313131 !important;
}
body.contact-index-index #contact-form button.submit,
body.contact-index-index #contact-form button[type="submit"] {
    padding: 11px 28px !important;
    min-width: 112px !important;
}
/* Page title spans full width above the 2-col */
body.contact-index-index .column.main > .page-title-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* FORGOT-01: Forgot Password page parity with Demo 1.
   Live measurements:
     Demo 1: form w=590 margin 0 295 pad 40 0 0; button w=590 h=55
             pad 16 32; column.main w=1180.
     Tenant: form w=983 margin 0 128 pad 0 15 (too wide); button
             w=953 h=55; column.main w=1240.
   Fix: constrain form to 590px, restore top padding 40, drop inner
        horizontal pad. */
body.customer-account-forgotpassword .form.password.forget,
body.customer-account-forgotpassword #form-validate {
    width: 590px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 40px 0 0 !important;
}
body.customer-account-forgotpassword .actions-toolbar button.primary,
body.customer-account-forgotpassword .actions-toolbar button.action.submit {
    width: 100% !important;
    margin: 0 !important;
}

/* NOTFOUND-01: 404 Not Found page parity with Demo 1.
   Live measurements:
     Demo 1: page-main w=1200 pad 20 10 40; column.main w=1180 margin 0;
             h1 fs 70 fw 700 margin 70 0 20.
     Tenant: page-main w=1200 pad 20 20 40; column.main w=900
             margin 0 130 (artificially narrowed); h1 margin 0 0 10. */
body.cms-noroute-index .page-main {
    padding: 20px 10px 40px !important;
}
body.cms-noroute-index .column.main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body.cms-noroute-index .column.main h1,
body.cms-noroute-index h1.page-title {
    margin: 70px 0 20px !important;
}

/* CREATE-01: Create New Customer Account page parity with Demo 1.
   Live measurements:
     Demo 1: form w=983 margin 0 98 pad 40 0 0, bg transparent;
             title pad 0; 2 fieldsets, 6 fields.
     Tenant: form w=983 margin 0 128 pad 0 15 bg white;
             title pad 0 15; 3 fieldsets, 8 fields.
   Fix: strip white card off the form, add 40px top padding, remove
        horizontal pad on title. Field count diff is backend-driven
        (tenant has extra newsletter / dob fields) and left as-is. */
body.customer-account-create #form-validate {
    background: transparent !important;
    padding: 40px 0 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.customer-account-create .page-title-wrapper .page-title,
body.customer-account-create h1.page-title {
    padding: 0 !important;
}

/* BLOG-01: Blog page title — Demo 1 fs 20/700 Porto-blue.
   Tenant had 22px. */
body.blog-index-index .page-title-wrapper .page-title,
body.blog-index-index h1.page-title,
body.blog-post-view .page-title-wrapper .page-title {
    font-size: 20px !important;
}

/* PHONE-01: Header phone block — Demo 1 renders both label + number
   at 12.6px same color rgb(34,37,41). Tenant splits into 10px grey
   label + 15px dark number. Unify to match Demo 1. */
.pt-header__phone-label {
    font-size: 12px !important;
    color: rgb(34, 37, 41) !important;
    letter-spacing: 0.5px !important;
}
.pt-header__phone-number {
    font-size: 13px !important;
}

/* CARTEMPTY-01: Empty cart CTA — Demo 1 has a standalone dark 200x55
   "Continue Shopping" button. Tenant has "Click here to continue
   shopping" with "here" as a small 101px link. Restyle the link to
   look like a full-width button matching Demo 1. */
body.checkout-cart-index .cart-empty a,
body.pt-cart-page .cart-empty a {
    display: block !important;
    width: 200px !important;
    text-align: center !important;
    background: rgb(34, 37, 41) !important;
    color: rgb(255, 255, 255) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px 0 !important;
    margin: 20px 0 0 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
}
body.checkout-cart-index .cart-empty a:hover,
body.pt-cart-page .cart-empty a:hover {
    background: rgb(0, 136, 204) !important;
}

/* PDPQTY-01: PDP quantity input — Demo 1 is 44x48 fs16 fw700.
   Tenant is 177x32 fs13 fw600 (too wide, too short). */
body.catalog-product-view .field.qty input#qty,
body.catalog-product-view .input-text.qty {
    width: 44px !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 5px !important;
}

/* ==========================================================================
   PDP Layout Fixes — Porto Demo 1 Parity (v3)
   ========================================================================== */

/* --- Hide original page-level title on PDP (duplicate inside product-info-main) --- */
body.pt-product-page .page-main > .page-title-wrapper {
    display: none !important;
}

/* --- CSS Grid ordering to match Porto Demo 1 section sequence --- */
/* Grid allows ATC + wishlist/compare to share a single row (GAP-019) */
body.pt-product-page .product-info-main {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    align-items: start;
}
/* Each section spans full width by default */
body.pt-product-page .product-info-main > * {
    grid-column: 1 / -1;
}
/* GAP-022: Prev/Next arrows — top row, right-aligned */
body.pt-product-page .product-info-main .pt-product-prev-next {
    grid-column: 1 / -1;
    justify-self: end;
    order: 0;
    margin-bottom: -10px;
    position: relative;
    z-index: 2;
}
body.pt-product-page .product-info-main .pt-product-title-inline { order: 1; }
body.pt-product-page .product-info-main .product-reviews-summary   { order: 2; }
body.pt-product-page .product-info-main .product-info-price         { order: 3; }
body.pt-product-page .product-info-main .product.attribute.overview { order: 4; }
body.pt-product-page .product-info-main .product-info-stock-sku     { order: 5; }
/* GAP-019: ATC takes left column, wishlist/compare takes right column — SAME ROW */
body.pt-product-page .product-info-main .product-add-form {
    order: 6;
    grid-column: 1 / 2;
}
body.pt-product-page .product-info-main .product-social-links {
    order: 6;
    grid-column: 2 / 3;
    align-self: end;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}
body.pt-product-page .product-info-main .pt-product-social-share    { order: 8; }


/* --- Inline title styling --- */
body.pt-product-page .pt-product-title-inline {
    margin-bottom: 0;
}
body.pt-product-page .pt-product-title-inline .page-title {
    font-size: 25px;
    font-weight: 700;
    color: #222529;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 0;
    line-height: 1.3;
}

/* --- GAP-021: Reviews summary — Porto Demo 1 shows empty grey stars + separator line --- */
body.pt-product-page .product-info-main .product-reviews-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding-bottom: 0;
    position: relative;
    flex-wrap: wrap;
}
/* GAP-021: Show 5 empty grey stars when no reviews */
body.pt-product-page .product-info-main .product-reviews-summary.empty::before {
    content: "☆☆☆☆☆" !important;
    display: inline !important;
    font-size: 14px !important;
    color: #ccc !important;
    letter-spacing: 2px;
    order: 0;
}
/* GAP-020: Short dark separator line below reviews (40px wide, 2px) */
body.pt-product-page .product-info-main .product-reviews-summary::after {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 2px !important;
    background: #222529 !important;
    margin-top: 16px !important;
    flex-basis: auto;
    max-width: 40px;
    order: 10;
}
body.pt-product-page .product-info-main .product-reviews-summary .reviews-actions {
    order: 2;
}
body.pt-product-page .product-info-main .product-reviews-summary .reviews-actions .action.add {
    font-size: 13px;
    color: #999;
    text-decoration: none;
}
body.pt-product-page .product-info-main .product-reviews-summary .reviews-actions .action.add:hover {
    color: #2baab1;
}

/* --- Price section spacing --- */
body.pt-product-page .product-info-main .product-info-price {
    margin-top: 15px;
    margin-bottom: 10px;
}
body.pt-product-page .product-info-main .product-info-price .price {
    font-size: 24px;
    font-weight: 700;
    color: #222529;
}

/* --- Stock/SKU: match Porto Demo 1 exactly (12px uppercase, flex column) --- */
body.pt-product-page .product-info-main > .product-info-stock-sku {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 15px 0;
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
}
/* "Availability:" label + "In stock" value on one line */
body.pt-product-page .product-info-main > .product-info-stock-sku .stock {
    display: flex !important;
    align-items: baseline;
    gap: 0;
    width: 100%;
    white-space: nowrap;
}
body.pt-product-page .product-info-main > .product-info-stock-sku .stock::before {
    content: "Availability: " !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    color: #777 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    flex-shrink: 0;
}
body.pt-product-page .product-info-main > .product-info-stock-sku .stock span {
    font-weight: 600 !important;
    text-transform: uppercase;
    color: #222529 !important;
    font-size: 12px !important;
}
/* SKU row */
body.pt-product-page .product-info-main > .product-info-stock-sku .product.attribute.sku {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
body.pt-product-page .product-info-main > .product-info-stock-sku .product.attribute.sku .type {
    color: #777 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}
body.pt-product-page .product-info-main > .product-info-stock-sku .product.attribute.sku .type::after {
    content: ":" !important;
}
body.pt-product-page .product-info-main > .product-info-stock-sku .product.attribute.sku .value {
    font-weight: 600 !important;
    color: #222529 !important;
    font-size: 12px !important;
}

/* GAP-019: ATC + Wishlist + Compare ALL on the SAME row (Porto Demo 1) */
.product-info-main .product-add-form {
    margin-bottom: 0;
    display: flex !important;
    align-items: center;
}
.product-info-main .pt-addtocart.box-tocart {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 0;
}
/* Wishlist + Compare: same row as ATC — no top margin, inline */
.product-info-main .product-social-links {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0;
    margin-left: 10px !important;
}
.product-info-main .product-addto-links {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}
.product-info-main .product-addto-links .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid #e7e7e7;
    border-radius: 0;
    color: #777;
    background: transparent;
    transition: all .3s;
    padding: 0;
}
.product-info-main .product-addto-links .action:hover {
    color: #2baab1;
    border-color: #2baab1;
}
.product-info-main .product-addto-links .action span {
    /* hide text label, show only icon via ::before */
    font-size: 0;
    line-height: 0;
}
.product-info-main .product-addto-links .action.towishlist::before {
    content: "\e600";
    font-family: "icons-blank-theme";
    font-size: 18px;
    line-height: 1;
}
.product-info-main .product-addto-links .action.tocompare::before {
    content: "\e601";
    font-family: "icons-blank-theme";
    font-size: 18px;
    line-height: 1;
}

/* GAP 5: Social share icons — circular bordered, exact Porto Demo 1 match */
.pt-product-social-share {
    display: block;
    margin-top: 15px;
    margin-bottom: 0;
    padding-top: 0;
    border-top: none;
}
.pt-product-social-share__label {
    display: none;
}
.pt-product-social-share__links {
    display: block;
}
.pt-product-social-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid #e7e7e7 !important;
    border-radius: 50%;
    background: transparent !important;
    color: #222529 !important;
    margin: 3.7px 1.3px 3.7px 0;
    padding: 0;
    transition: all .25s;
    text-decoration: none !important;
}
.pt-product-social-share__link:hover {
    background: #2baab1 !important;
    border-color: #2baab1 !important;
    color: #fff !important;
    text-decoration: none !important;
}
.pt-product-social-share__link svg {
    width: 13px;
    height: 13px;
}

/* ATC button — cart icon spacing */
.pt-addtocart__cart-icon {
    margin-right: 6px;
    flex-shrink: 0;
}

/* GAP 6: Related/Upsell carousel — card styling matching Porto Demo 1 */
.pt-related-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e7e7e7;
}
.pt-related-section .block-title h2 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222529;
    margin-bottom: 20px;
}
.pt-related-section .pt-product-card--related {
    text-align: center;
    padding: 15px 10px;
    background: #fff;
    border: 1px solid #f4f4f4;
    transition: all .3s;
}
.pt-related-section .pt-product-card--related:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}
.pt-related-section .pt-product-card__image {
    margin-bottom: 10px;
}
.pt-related-section .pt-product-card__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.pt-related-section .pt-product-card__name {
    font-size: 14px;
    font-weight: 400;
    margin: 10px 0 5px;
    line-height: 1.4;
    min-height: 40px;
}
.pt-related-section .pt-product-card__name a {
    color: #222529;
    text-decoration: none;
}
.pt-related-section .pt-product-card__name a:hover {
    color: #2baab1;
}
/* Star ratings in related product cards */
.pt-related-section .pt-product-card__rating {
    margin: 5px 0;
    min-height: 20px;
}
.pt-related-section .pt-product-card__rating .rating-summary {
    display: inline-flex;
    align-items: center;
}
.pt-related-section .pt-product-card__rating .rating-result {
    width: 75px;
    position: relative;
    display: inline-block;
}
.pt-related-section .pt-product-card__rating .rating-result::before {
    content: "\2605\2605\2605\2605\2605";
    color: #ddd;
    font-size: 14px;
    letter-spacing: 2px;
}
.pt-related-section .pt-product-card__rating .rating-result > span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}
.pt-related-section .pt-product-card__rating .rating-result > span::before {
    content: "\2605\2605\2605\2605\2605";
    color: #fcb941;
    font-size: 14px;
    letter-spacing: 2px;
}
.pt-related-section .pt-product-card__price {
    font-size: 16px;
    font-weight: 700;
    color: #222529;
    margin-bottom: 10px;
}
.pt-related-section .pt-product-card__atc-form {
    margin-top: 8px;
}
.pt-related-section .pt-product-card__cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 24px;
    border: 2px solid #222529;
    background: transparent;
    color: #222529;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .3s;
}
.pt-related-section .pt-product-card__cart-btn:hover {
    background: #222529;
    border-color: #222529;
    color: #fff;
}

/* Swiper navigation for related/upsell — Porto Demo 1 style dots */
.pt-related-carousel .swiper-button-prev,
.pt-related-carousel .swiper-button-next {
    width: 30px;
    height: 30px;
    border: 1px solid #e7e7e7;
    border-radius: 50%;
    background: #fff;
    color: #222529;
    top: -40px;
    bottom: auto;
}
.pt-related-carousel .swiper-button-prev {
    right: 40px;
    left: auto;
}
.pt-related-carousel .swiper-button-next {
    right: 0;
    left: auto;
}
.pt-related-carousel .swiper-button-prev::after,
.pt-related-carousel .swiper-button-next::after {
    font-size: 12px;
}

/* ==========================================================================
   PDP Qty Widget — Match Porto Demo 1 Exactly
   Original: label hidden, input 44x48, buttons 30x48, stacked vertically
   ========================================================================== */
body.pt-product-page .pt-addtocart__qty {
    margin-bottom: 10px;
}
body.pt-product-page .pt-addtocart__qty-label {
    display: none !important;
}
body.pt-product-page .pt-addtocart__qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e1e1e1;
    border-radius: 0;
    overflow: visible;
    position: relative;
}
body.pt-product-page .pt-addtocart__qty-input {
    width: 44px !important;
    height: 48px !important;
    border: 0 !important;
    border-left: 1px solid #e1e1e1 !important;
    border-right: 1px solid #e1e1e1 !important;
    text-align: center;
    font-size: 16px !important;
    font-weight: 700;
    color: #222529;
    -moz-appearance: textfield;
}
body.pt-product-page .pt-addtocart__qty-btn {
    width: 30px !important;
    height: 48px !important;
    background: #fff !important;
    border: 0 !important;
    color: #222529;
    cursor: pointer;
}
body.pt-product-page .pt-addtocart__qty-btn:hover {
    background: #f4f4f4 !important;
}

/* ==========================================================================
   PDP Description Tab — Porto Demo 1 two-column styling
   ========================================================================== */
body.pt-product-page .product.attribute.description .value .row {
    display: flex;
    flex-wrap: wrap;
}
body.pt-product-page .product.attribute.description .value .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
}
body.pt-product-page .product.attribute.description .value h2 {
    font-size: 20px;
    font-weight: 700;
    color: #222529;
    margin-bottom: 15px;
}
body.pt-product-page .product.attribute.description .value p {
    font-size: 14px;
    line-height: 27px;
    color: #777;
    margin-bottom: 15px;
}

/* ==========================================================================
   PDP Custom Tab — Size guide table styling
   ========================================================================== */
body.pt-product-page .table-sizing-guide {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
body.pt-product-page .table-sizing-guide th,
body.pt-product-page .table-sizing-guide td {
    padding: 10px 15px;
    border: 1px solid #e7e7e7;
    text-align: center;
    font-size: 14px;
    color: #222529;
}
body.pt-product-page .table-sizing-guide th {
    background: #f4f4f4;
    font-weight: 700;
}
body.pt-product-page .table-sizing-guide td:first-child {
    font-weight: 600;
    text-align: left;
}

/* === PORTO DEMO 1 PARITY FIXES — 2026-04-12 === */

/* 1. Footer heading/title styling — PORTO-V2-P1-15: uppercase + 700 weight
   Porto V2 original uses uppercase column headings at 13-14px/700.
   (Porto Demo 1 used mixed-case 15px/600 — that was Demo 1-specific; V2 differs.) */
body .pt-footer-middle__title,
body .page-footer .block-title strong,
body .page-footer h4,
body .pt-footer-middle__col > h3,
body .pt-footer-middle h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 2. Footer background — dark wrapper must have #222529 bg
   The .pt-footer-middle container uses CSS custom property, ensure it has explicit bg */
body .pt-footer-middle {
    background-color: #222529 !important;
}

/* 3. Popular tags pills — match Porto Demo 1
   Original: 11px, 1px solid #313438, 6.6px padding, transparent bg, #a8a8a8 color
   Ours was: 12px (ok), 1px solid rgba(255,255,255,0.15), 4px 10px padding (too much)
   Affects: .pt-tag in footer context */
.pt-footer-middle .pt-tag,
.page-footer .pt-tag {
    font-size: 11px !important;
    border: 1px solid #313438 !important;
    padding: 6.6px !important;
    background-color: transparent !important;
    color: #a8a8a8 !important;
}

.pt-footer-middle .pt-tag:hover,
.page-footer .pt-tag:hover {
    border-color: #313438 !important;
    color: #a8a8a8 !important;
}

/* 4. Footer ribbon "Get in touch" banner
   Original: Poppins 20.8px, bg #0088cc, pos absolute, top:0 left:10px,
   padding 10px 20px 6px, border-radius:0, letter-spacing:0.065px
   Verified from m2.portotheme.com/demo1_en/ on 2026-04-12 */
body .pt-footer-middle {
    position: relative !important;
    padding-top: 0px !important;
}
body .pt-footer-middle .pt-footer-middle__row {
    padding-top: 64px !important;
    padding-bottom: 24px !important;
}
body .footer-ribbon {
    position: absolute !important;
    top: 0px !important;
    left: 10px !important;
    display: inline-block !important;
    background-color: #0088cc !important;
    color: #ffffff !important;
    font-size: 20.8px !important;
    font-weight: 400 !important;
    font-family: 'Poppins', sans-serif !important;
    padding: 10px 20px 6px !important;
    border-radius: 0 !important;
    z-index: 10 !important;
    line-height: 24px !important;
    letter-spacing: 0.065px !important;
    white-space: nowrap !important;
}

/* 5. Availability/SKU label styling — Porto Demo 1 precision
   Original: 12px, 400-600 weight (label 400, value 600), uppercase
   We have: 14px on .product-info-stock-sku
   Overrides already exist for text-transform (uppercase for SKU, none for stock)
   Fine-tune sizes and weight */
.pt-product-page .product-info-stock-sku,
body.catalog-product-view .product-info-stock-sku {
    font-size: 12px !important;
}

.pt-product-page .product-info-stock-sku .sku,
.pt-product-page .product-info-stock-sku .product.attribute.sku,
body.catalog-product-view .product-info-stock-sku .sku,
body.catalog-product-view .product-info-stock-sku .product.attribute.sku {
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

.pt-product-page .product-info-stock-sku .stock,
.pt-product-page .product-info-stock-sku .stock.available span,
body.catalog-product-view .product-info-stock-sku .stock,
body.catalog-product-view .product-info-stock-sku .stock.available span {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* 6. Qty selector buttons — Porto Demo 1 exact sizing
   Original: input 44px w x 48px h, buttons 44px+ w x 48px h, 16px font, center-aligned
   Ours was: input 44px (good), buttons 30px (too narrow)
   Already have: pt-addtocart__qty-btn styling, just ensure width is at least 44px */
body.pt-product-page .pt-addtocart__qty-btn {
    width: 44px !important;
    height: 48px !important;
}

body.pt-product-page .pt-addtocart__qty-input {
    width: 44px !important;
    height: 48px !important;
    font-size: 16px !important;
    text-align: center !important;
}

/* 7. PDP Tab content panel — override Magento's styles-l.css @media rule
   styles-l.css sets: .product.data.items > .item.content { float: right; margin-left: -100%; width: 100% }
   This is Magento's float-based horizontal tab stacking. The original Porto Demo 1 resets
   the active panel to margin-left: 0 and float: left. Without this override, the tab
   content is pushed -100% off-screen and invisible on narrower viewports.
   Verified from m2.portotheme.com/demo1_en/ — active panel has ml:0, float:left */
.product.data.items > .item.content {
    margin-left: 0 !important;
    float: none !important;
}
.product.data.items > .item.content[aria-hidden="true"] {
    display: none !important;
}

/* =====================================================
   GAP-023: Price bottom separator line (Porto Demo 1)
   Thin line between price and short description
   ===================================================== */
body.pt-product-page .product-info-main .product-info-price {
    padding-bottom: 15px !important;
    border-bottom: 1px solid #e7e7e7 !important;
    margin-bottom: 15px !important;
}

/* =====================================================
   GAP-025: Breadcrumb home icon instead of "HOME" text
   Porto Demo 1 shows a house icon for the home link
   ===================================================== */
body.pt-product-page .breadcrumbs .items > li:first-child a,
body.catalog-product-view .breadcrumbs .items > li:first-child a {
    font-size: 0 !important; /* hide text */
    display: inline-flex;
    align-items: center;
}
body.pt-product-page .breadcrumbs .items > li:first-child a::before,
body.catalog-product-view .breadcrumbs .items > li:first-child a::before {
    content: "" !important;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 14px;
}

/* =====================================================
   GAP-019 supplement: social-links margin fix
   ===================================================== */
body.pt-product-page .product-info-main .product-social-links {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.catalog-product-view .product-info-main .product-social-links {
    margin-top: 0 !important;
}

/* =====================================================
   GAP-022 supplement: prev/next link styling
   Show arrows even without JS category context
   ===================================================== */
body.pt-product-page .pt-product-prev-next .pt-product-prev-next__link {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    color: #999;
    font-size: 12px;
    text-decoration: none;
}
body.pt-product-page .pt-product-prev-next .pt-product-prev-next__link:hover {
    color: #222529;
}

/* === B1 HEADER FIXES 2026-04-17 === */

/* H1 — Hide switcher labels (Currency / Language) visually; keep for screen readers */
.pt-topbar__switcher-label {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * H2 — .pt-topbar__welcome visibility is controlled exclusively by KO's data-bind="visible".
 * KO sets display:none (inline style) when the observable is falsy (guest), and removes
 * the inline style when truthy (logged in). CSS must NOT set display:none here because
 * KO visible=true only removes the inline override — it cannot override a stylesheet rule.
 * The element renders as a flex list item via the parent ul's flex context.
 */

/* H3 — Cart badge: always rendered; dim when empty, bright when items present */
.pt-header__cart-badge--empty {
    opacity: 0.6;
}
.pt-header__cart-badge--visible {
    opacity: 1;
}

/* H4 — "Cart" text label next to cart icon */
.pt-header__tool-label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--pt-text-dark, #222529);
}

/* H5 — Compare counter parenthetical */
.pt-topbar__compare-count {
    font-size: inherit;
    color: inherit;
}

/* H6 — Pipe separator via CSS; hide any residual text content */
.pt-topbar__link-item--pipe {
    display: inline-flex;
    align-items: center;
    width: 1px;
    height: 14px;
    background: #3a4858;
    margin: 0 8px;
    padding: 0;
    overflow: hidden;
}
.pt-topbar__link-item--pipe span {
    display: none;
}

/* H7 — Simple-Line-Icons on nav top-level links */
.pt-nav__list > li > a > i {
    margin-right: 6px;
    font-size: 14px;
    vertical-align: middle;
}

/* === END B1 HEADER FIXES 2026-04-17 === */
/* === B2 FOOTER FIXES 2026-04-17 === */

/* F1 — White footer logo: invert colored logo on dark footer background */
.pt-footer-middle__logo-img {
    filter: brightness(0) invert(1);
    max-width: 202px;
    height: auto;
}

/* F2 — FontAwesome icons in Contact Info */
.pt-footer-middle__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 6px;
}
.pt-footer-middle__contact-item i {
    width: 20px;
    margin-right: 8px;
    color: #08c;
    flex-shrink: 0;
    margin-top: 2px;
}

/* F3 — Social icons: round icon-only buttons.
   R46: 40x40 with 20px border-radius (Porto Demo 1 reference, was 36x36 50%).
   Note: also overrides .pt-footer-middle__social-link base rule above (same
   specificity, this comes later in source order and wins via cascade). */
.pt-footer-middle__social-link--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #3a4858;
    border-radius: 20px;
    color: #fff;
    margin-right: 5px;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.pt-footer-middle__social-link--icon:hover {
    background: #08c;
    border-color: #08c;
    color: #fff;
}

/* F4 — Popular Tags variable font-size tag cloud */
.pt-footer-tags .pt-tag:nth-child(3n+1) { font-size: 22pt; }
.pt-footer-tags .pt-tag:nth-child(3n+2) { font-size: 14pt; }
.pt-footer-tags .pt-tag:nth-child(3n)   { font-size: 10pt; }
.pt-footer-tags .pt-tag:nth-child(4n)   { font-size: 18pt; }
.pt-footer-tags .pt-tag:nth-child(5n)   { font-size: 8pt; }

/* F5 — Back-to-top floating button */
#totop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #08c;
    color: #fff;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s, background 0.2s;
}
#totop.visible {
    display: flex;
}
#totop:hover {
    background: #0073aa;
    color: #fff;
}
#totop i {
    font-style: normal;
    line-height: 1;
}
/* === B3 TYPOGRAPHY + COLORS 2026-04-17 === */

/* T1 — Porto Demo 1 uses Poppins for both body and headings. Use Poppins sitewide. */
body, html, .main, .page-wrapper, p, li, a, input, textarea, select, button {
  font-family: 'Poppins', 'Open Sans', Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.pt-hero-slide__title, .pt-hero-slide__subtitle,
.pt-section-title, .widgettitle,
.pt-product-card__title,
.footer-ribbon {
  font-family: 'Poppins', 'Open Sans', Arial, sans-serif !important;
}

/* T2 — Heading weights matching Porto Demo 1 reference */
h1 { font-weight: 300; color: #222529; letter-spacing: -0.01em; }
h2 { font-weight: 300; }
h3 { font-weight: 600; }
h4, h5 { font-weight: 700; }

/* T3 — Topbar typography: Demo 1 uses ~14px, weight 400, color #ccc (not 11px/600/#bde1f5) */
.pt-topbar, .pt-topbar a, .pt-topbar__switcher, .pt-topbar__link-item a {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #ccc !important;
}
.pt-topbar a:hover { color: #08c !important; }

/* T4 — Letter-spacing utilities for slider headlines */
.ls-80  { letter-spacing: -0.08em; }
.ls-n-20 { letter-spacing: -0.02em; }
.ls-n-10 { letter-spacing: -0.01em; }
.ls-20  { letter-spacing: 0.02em; }
.ls-50  { letter-spacing: 0.05em; }

/* C1 — NEW badge: Demo 1 uses olive-green #62b959, not emerald #0CC485 */
.pt-badge--new, .product-label.new-label {
  background-color: #62b959 !important;
  color: #fff !important;
}

/* C2 — Product card image: 350×350 aspect ratio matching Demo 1 grid */
.pt-product-card__image-wrap, .product-item-photo {
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1 / 1;
}
.pt-product-card__image, .product-image-photo {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* === END B3 TYPOGRAPHY + COLORS 2026-04-17 === */
/* === B4 PDP CONTENT 2026-04-17 === */

/* P1 — Short description check-icon bullets */
.pt-pdp-features { list-style: none; padding: 0; margin: 15px 0; }
.pt-pdp-features li { padding: 6px 0; font-size: 14px; color: #555; }
.pt-pdp-features li i { color: #62b959; margin-right: 8px; }

/* P2 — Prev/next hover popup */
.pt-product-prev-next__link { position: relative; }
.pt-product-prev-next__popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e7e7e7;
    padding: 10px;
    width: 200px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pt-product-prev-next__link--prev .pt-product-prev-next__popup { right: auto; left: 0; }
.pt-product-prev-next__link:hover .pt-product-prev-next__popup { display: block; }
.pt-product-prev-next__popup-img { max-width: 100%; display: block; margin-bottom: 6px; }
.pt-product-prev-next__popup-name { font-size: 13px; font-weight: 600; margin: 0; color: #222529; }

/* P3 — Add to Cart button: enforce uppercase via CSS (text is now title-case in template) */
.product-info-main .action.primary.tocart,
.pt-product-info__add-to-cart button,
.pt-addtocart__submit span {
    text-transform: uppercase;
}

/* P5 — Availability: prefix label (template-injected class; CSS ::before already handles core block) */
.pt-availability-label { font-weight: 600; margin-right: 6px; color: #222529; }

/* P6 — Social share icon-only circular buttons */
.pt-product-social-share .share-facebook,
.pt-product-social-share .share-twitter,
.pt-product-social-share .share-linkedin,
.pt-product-social-share .share-whatsapp,
.pt-product-social-share .share-email {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 5px;
    color: #fff;
    border: none;
    text-decoration: none;
}
.pt-product-social-share .share-facebook { background: #3b5998; }
.pt-product-social-share .share-twitter  { background: #1da1f2; }
.pt-product-social-share .share-linkedin { background: #0077b5; }
.pt-product-social-share .share-whatsapp { background: #25d366; }
.pt-product-social-share .share-email    { background: #666; }
.pt-product-social-share .share-facebook:hover { background: #2d4373; }
.pt-product-social-share .share-twitter:hover  { background: #0d8ecf; }
.pt-product-social-share .share-linkedin:hover { background: #005885; }
.pt-product-social-share .share-whatsapp:hover { background: #1da851; }
.pt-product-social-share .share-email:hover    { background: #444; }
/* Hide the old SVG-based icon styles for share links now using FA */
.pt-product-social-share__link svg { display: none; }
/* === END B4 PDP CONTENT === */
/* === B5 NAV REBUILD 2026-04-17 =====================================
   Static 8-item Porto Demo 1 nav: icons on every top-level link,
   mega-dropdowns (650 / 580 px) on Categories / Products, simple
   dropdowns on Pages / Features. Reuses existing .pt-nav__* and
   .pt-megamenu__* BEM scaffolding from porto.css.
   Simple-Line-Icons are loaded via the @import at top of this file.
   =================================================================== */

/* Icon spacing on top-level nav links */
.pt-megamenu .pt-nav__list > .pt-nav__item > .pt-nav__link > i,
.pt-megamenu .pt-nav__list > .pt-nav__item > .pt-nav__link > [class^="icon-"],
.pt-megamenu .pt-nav__list > .pt-nav__item > .pt-nav__link > [class*=" icon-"] {
    margin-right: 6px;
    font-size: 14px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

/* BUY PORTO! highlight style (matches reference accent) */
.pt-megamenu .pt-nav__item--highlight > .pt-nav__link--highlight {
    color: #fcb941;
}
.pt-megamenu .pt-nav__item--highlight > .pt-nav__link--highlight:hover {
    color: #e09e1b;
}

/* Mega-dropdown layout for CATEGORIES (2-col + promo) and PRODUCTS (3-col) */
.pt-megamenu__dropdown--categories,
.pt-megamenu__dropdown--products {
    padding: 20px;
    background: #fff;
    border: 1px solid #e7e7e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pt-megamenu__dropdown--categories.is-open,
.pt-megamenu__dropdown--products.is-open,
.pt-nav__item--has-dropdown:hover > .pt-megamenu__dropdown--categories,
.pt-nav__item--has-dropdown:hover > .pt-megamenu__dropdown--products {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.pt-megamenu__col {
    flex: 1 1 160px;
    min-width: 160px;
}
.pt-megamenu__col .pt-megamenu__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222529;
    margin: 0 0 10px 0;
    letter-spacing: 0.2px;
}
.pt-megamenu__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pt-megamenu__col ul li {
    padding: 4px 0;
}
.pt-megamenu__col ul li a {
    color: #777;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.15s ease;
}
.pt-megamenu__col ul li a:hover {
    color: #08c;
}

/* Promo banner inside CATEGORIES dropdown */
.pt-megamenu__promo--nav {
    flex: 0 0 200px;
    align-self: stretch;
}
.pt-megamenu__promo--nav img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Simple dropdown for PAGES / FEATURES — narrow single-column list */
.pt-megamenu__dropdown--simple {
    min-width: 180px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e7e7e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pt-megamenu__dropdown--simple ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pt-megamenu__dropdown--simple ul li {
    padding: 6px 0;
}
.pt-megamenu__dropdown--simple ul li a {
    color: #777;
    font-size: 13px;
    text-decoration: none;
    display: block;
    transition: color 0.15s ease;
}
.pt-megamenu__dropdown--simple ul li a:hover {
    color: #08c;
}

/* Dropdown caret indicator on parent items */
.pt-megamenu .pt-nav__item--has-dropdown > .pt-nav__link--dropdown::after {
    content: "";
    display: inline-block;
    margin-left: 4px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    vertical-align: middle;
    opacity: 0.7;
}
/* === B6 HOMEPAGE SECTIONS 2026-04-17 === */

/* HP1 — 3-slide main banner */
.porto-home-slider .slide { display:flex; align-items:center; justify-content:center; text-align:center; padding: 40px; }
.porto-home-slider .slide-content { max-width: 600px; }
.porto-home-slider .slide h4 { font-size: 1.6em; opacity: 0.7; text-transform: uppercase; font-weight: 300; }
.porto-home-slider .slide h3 { font-size: 5.5em; font-weight: 700; color: #222529; line-height: 1; margin: 10px 0; }
.porto-home-slider .slide p { font-size: 1.4em; text-transform: uppercase; color: #777; }
.porto-home-slider .slide p sup { font-size: 60%; vertical-align: super; }

/* HP2 — Testimonials sidebar carousel */
.sidebar-testimonials { padding: 30px; background: #f4f4f4; margin: 40px 0; border-radius: 4px; }
.sidebar-testimonials .widgettitle { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: #222529; }
.testimonial p { font-style: italic; color: #555; margin-bottom: 10px; font-size: 14px; line-height: 1.6; }
.testimonial h4 { font-size: 14px; font-weight: 600; color: #222529; margin: 0; }
.testimonial h4 small { display: block; color: #777; font-weight: 400; font-size: 12px; margin-top: 2px; }

/* HP3 — Blog posts carousel */
.post-carousel { margin: 40px 0; }
.post-carousel .widgettitle { font-size: 20px; font-weight: 300; margin-bottom: 20px; color: #222529; }
.post { background: #fff; border: 1px solid #e7e7e7; }
.post-img img { width: 100%; display: block; }
.post-content { padding: 15px; }
.post-date { font-size: 11px; color: #777; text-transform: uppercase; }
.post-content h3 { font-size: 16px; font-weight: 600; margin: 8px 0; }
.post-content h3 a { color: #222529; }
.post-content p { font-size: 13px; color: #777; margin: 0; }

/* HP4 — Top Rated / Best Selling / Latest 3-col widget */
.home-widgets { margin: 40px 0; }
.home-widgets .widget { padding: 0 10px; }
.home-widgets .widgettitle { font-size: 18px; font-weight: 700; border-bottom: 1px solid #e7e7e7; padding-bottom: 10px; margin-bottom: 15px; color: #222529; text-transform: uppercase; }
.widget-list { list-style: none; padding: 0; }
.widget-list li { display: flex; padding: 10px 0; border-bottom: 1px solid #f4f4f4; gap: 10px; }
.widget-list li img { width: 60px; height: 60px; object-fit: cover; }
.widget-list li .info h3 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.widget-list li .info .price { color: #08c; font-weight: 700; font-size: 14px; }

/* HP5 — Brand logo carousel */
.porto-brand { border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; padding: 30px 0; margin: 40px 0; }
.porto-brand .brand { text-align: center; padding: 10px; }
.porto-brand .brand img { max-width: 100%; opacity: 0.7; transition: opacity .3s; filter: grayscale(100%); }
.porto-brand .brand img:hover { opacity: 1; filter: grayscale(0); }

/* HP6 — Stacked discount markup on Porto Watches banner */
.pt-promo-discount { font-size: 48px; font-weight: 700; color: #222529; line-height: 1; margin: 10px 0; }
.pt-promo-discount del { color: #999; font-size: 24px; font-weight: 400; }
.pt-promo-discount sup { font-size: 0.5em; vertical-align: super; color: #555; }
.pt-promo-discount__main { font-size: 1em; }

/* HP7 — Featured Products title with inline-title + line */
.section-title.slider-title { display: flex; align-items: center; gap: 15px; font-size: 20px; font-weight: 300; margin: 30px 0 20px; color: #222529; }
.section-title.slider-title .inline-title { flex: 0 0 auto; text-transform: uppercase; font-weight: 700; }
.section-title.slider-title .line { flex: 1; height: 1px; background: #e7e7e7; }
/* === B7 PDP STRUCTURE 2026-04-17 === */
/* PS1 — Custom Tab (3rd tab): sizing guide table */
.pt-custom-tab { padding: 20px 0; }
.pt-custom-tab h3 { font-size: 16px; font-weight: 700; margin-bottom: 15px; color: #222529; }
.pt-custom-tab .table-sizing-guide { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
.pt-custom-tab .table-sizing-guide th,
.pt-custom-tab .table-sizing-guide td { padding: 10px 12px; border: 1px solid #e7e7e7; text-align: center; font-size: 13px; }
.pt-custom-tab .table-sizing-guide th { background: #f4f4f4; font-weight: 700; color: #222529; }
.pt-custom-tab .table-sizing-guide td { color: #555; }
.pt-custom-tab__note { font-size: 13px; color: #777; font-style: italic; }
/* === B8 MINOR POLISH 2026-04-17 === */

/* B8-1: Featured Products hover overlay stripe */
.pt-product-card .pt-product-card__image-wrap,
.product-item-info { position: relative; overflow: hidden; }

.pt-product-card .pt-product-card__actions,
.product-item-info .product-item-inner {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(34, 37, 41, 0.9);
    padding: 12px;
    display: flex; gap: 10px; justify-content: center;
    opacity: 0; transform: translateY(100%);
    transition: opacity .3s, transform .3s;
    z-index: 5;
}
.pt-product-card:hover .pt-product-card__actions,
.product-item-info:hover .product-item-inner {
    opacity: 1; transform: translateY(0);
}
.pt-product-card__actions button, .pt-product-card__actions a,
.product-item-inner button, .product-item-inner a {
    color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.3);
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.pt-product-card__actions button:hover, .product-item-inner a:hover {
    background: #08c; border-color: #08c;
}

/* B8-2: Persistent Quickview label below price */
.pt-product-card__quickview,
.weltpixel-quickview {
    display: inline-flex; align-items: center;
    font-size: 11px; color: #777; text-transform: uppercase;
    margin-top: 6px; gap: 4px; cursor: pointer;
}
.pt-product-card__quickview:hover, .weltpixel-quickview:hover { color: #08c; }
.pt-product-card__quickview::before, .weltpixel-quickview em::before {
    content: "\1F441"; font-size: 12px;
}

/* B8-3: Details tab span wrap */
.product.data.items > .item.title > .switch,
.product.data.items > .item.title > .switch > span {
    text-transform: uppercase; font-weight: 700;
}

/* B8-4: Trust bar container border */
.pt-trustbar, .header-top-ads {
    border: 1px solid #e7e7e7;
    padding: 15px 0;
    margin: 15px 0;
    background: #fff;
}

/* B8-5: Trust bar column dividers */
.pt-trustbar > [class*="col-"],
.header-top-ads > [class*="col-"] {
    border-right: 1px solid #e7e7e7;
}
.pt-trustbar > [class*="col-"]:last-child,
.header-top-ads > [class*="col-"]:last-child {
    border-right: none;
}

/* B8-6: Trust bar title + subtitle typography */
.pt-trustbar__title, .header-top-ads h3 {
    font-size: 14px; font-weight: 700; line-height: 1; color: #222529;
    text-transform: none; margin-bottom: 4px;
}
.pt-trustbar__subtitle, .header-top-ads p {
    font-size: 13px; font-weight: 300; line-height: 1.2; color: #777;
    margin: 0;
}

/* B8-7: Trust bar icons */
.pt-trustbar__icon, .header-top-ads [class*="porto-icon-"] {
    font-size: 36px; color: #222529; margin-right: 12px;
}

/* B8-8: Sale badge */
.pt-badge--sale, .product-label.sale-label {
    background-color: #e27c7c !important; color: #fff !important;
}

/* B8-9: Button corner radius */
.btn, .action.primary, .action.tocart { border-radius: 0; }
.btn-sm, .btn-lg { border-radius: 0; }

/* B8-10: Link hover color */
a:hover, a:focus { color: #08c; text-decoration: none; }
.pt-topbar a:hover { color: #08c; }

/* B8-11: Breadcrumb separator styling */
.breadcrumbs .items > li + li::before {
    content: "/"; padding: 0 5px; color: #999;
}
.breadcrumbs .items > li { font-size: 12px; text-transform: uppercase; color: #142a46; }
.breadcrumbs .items > li a { color: #142a46; }

/* B8-12: Price styling parity */
.price-box .price, .product-info-price .price {
    font-size: 22px; font-weight: 700; color: #08c; line-height: 1;
}
.price-box .old-price .price {
    font-size: 14px; color: #999; font-weight: 400;
}

/* B8-13: Star rating color */
.rating-summary .rating-result > span::before,
.pt-rating-stars { color: #f7c405; }

/* B8-14: Percent-off badge style */
.pt-badge--discount, .product-label.onsale-label {
    background: #e27c7c !important; color: #fff !important;
    font-weight: 700; font-size: 11px;
    padding: 3px 8px; border-radius: 0;
}

/* B8-15: Newsletter button */
.pt-newsletter button, .block.newsletter .action.subscribe {
    background: #08c; color: #fff; text-transform: uppercase;
    font-weight: 700; padding: 0 20px; border: 0;
}
.pt-newsletter button:hover, .block.newsletter .action.subscribe:hover {
    background: #0099dd;
}

/* === END B8 MINOR POLISH 2026-04-17 === */

/* === R2 FIXES 2026-04-17 === */

/* F-R2-MOBILE1: Mobile horizontal overflow — sidebar collapses, grid goes 1-col */
@media (max-width: 768px) {
  .pt-homepage-sidebar { display: none !important; }
  .pt-homepage-grid, .pt-homepage__main { grid-template-columns: 1fr !important; width: 100% !important; }
  body { overflow-x: hidden; }
  .pt-main, .page-main { max-width: 100vw; overflow-x: hidden; }
}

/* F-R2-H1: switcher labels hide (Currency/Language text — visually hidden, accessible) */
.pt-topbar__switcher-label,
.pt-topbar .switcher .label,
.pt-topbar .switcher-label {
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* F-R2-TOPBAR: 14px / 400 / #ccc, not 11px/600/bde1f5 */
.pt-topbar,
.pt-topbar a,
.pt-topbar__link-item a,
.pt-topbar__switcher,
.pt-topbar__switcher a {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #cccccc !important;
}
.pt-topbar a:hover, .pt-topbar__switcher a:hover { color: #08c !important; }

/* F-R2-TAGS: variable font-size tag cloud, override uniform 11px */
.pt-tag, .pt-footer-tags .pt-tag, .pt-tag-cloud .pt-tag { font-size: 11pt; }
.pt-footer-tags .pt-tag:nth-child(3n+1) { font-size: 22pt !important; }
.pt-footer-tags .pt-tag:nth-child(3n+2) { font-size: 13pt !important; }
.pt-footer-tags .pt-tag:nth-child(3n+0) { font-size: 10pt !important; }
.pt-footer-tags .pt-tag:nth-child(4n+0) { font-size: 17pt !important; }
.pt-footer-tags .pt-tag:nth-child(5n+0) { font-size: 8pt !important; }
.pt-footer-tags .pt-tag:nth-child(7n+0) { font-size: 20pt !important; }

/* F-R2-STAR: gold rating stars */
.pt-product-card__stars-filled,
.rating-summary .rating-result > span,
.rating-summary .rating-result > span::before,
.product-reviews-summary .rating-result > span::before { color: #f7c405 !important; background-color: transparent !important; }

/* F-R2-PRICE: weight 700, color #08c */
.price, .price-box .price, .product-info-price .price, .special-price .price {
  font-weight: 700 !important;
  color: #08c !important;
}
/* Keep old price muted */
.old-price .price { color: #999 !important; font-weight: 400 !important; text-decoration: line-through; }

/* F-R2-TRUSTBAR: column dividers */
.pt-trustbar, .pt-trustbar__inner, .pt-trustbar__list { display: flex; border: 1px solid #e7e7e7; }
.pt-trustbar > [class*="col-"]:not(:last-child),
.pt-trustbar__item:not(:last-child),
.pt-trustbar__col:not(:last-child) { border-right: 1px solid #e7e7e7 !important; }

/* F-R2-HP7: Featured Products section title line rule */
.pt-section-header { display: flex !important; align-items: center !important; gap: 15px; }
.pt-section-header::after,
.pt-section-title::after {
  content: ""; flex: 1; height: 1px; background: #e7e7e7;
}

/* F-R2-H3: h3 weight 600 not 700 */
h3 { font-weight: 600 !important; }

/* F-R2-CARTBADGE: hide cart badge when count=0 */
.pt-header__cart-badge--empty,
.pt-header__tool-count--empty,
.counter.qty.empty,
.counter-number:empty { display: none !important; }

/* F-R2-HP4: 3-col widget list item layout */
.home-widgets { margin: 30px 0; }
.home-widgets .widget { padding: 0 10px; }
.home-widgets .widgettitle { font-size: 18px; font-weight: 700; border-bottom: 1px solid #e7e7e7; padding-bottom: 8px; margin-bottom: 15px; color: #222529; text-transform: uppercase; }
.home-widgets .widget-list { list-style: none; padding: 0; margin: 0; }
.home-widgets .widget-list li { display: flex; padding: 8px 0; border-bottom: 1px solid #f4f4f4; gap: 10px; align-items: center; }
.home-widgets .widget-list img { width: 60px; height: 60px; object-fit: cover; flex: 0 0 60px; }
.home-widgets .widget-list .info h3 { font-size: 13px; font-weight: 600; margin: 0 0 4px; line-height: 1.2; }
.home-widgets .widget-list .info h3 a { color: #222529; }
.home-widgets .widget-list .info .price { color: #08c; font-weight: 700; font-size: 14px; }

/* F-R2-CATEGORY-FILTERS: search results show filters */
.catalogsearch-result-index .sidebar,
.catalogsearch-result-index .block-layered-nav { display: block !important; }

/* === END R2 FIXES 2026-04-17 === */

/* === R3 SPECIFICITY + MEGAMENU + MOBILE 2026-04-17 === */

/* ============ R3 SPECIFICITY FIXES ============ */

/* R3-TOPBAR: force 14px/400/#ccc — R2 rules lost to base */
body .pt-topbar,
body .pt-topbar *,
html body .pt-topbar a,
html body .pt-topbar__link-item a,
html body .pt-topbar__switcher,
html body .pt-topbar__switcher a,
html body .pt-topbar__switcher button,
html body .pt-topbar .pt-topbar__link-item {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #cccccc !important;
}
html body .pt-topbar a:hover { color: #08c !important; }

/* R3-PRICE: force font-weight 700 + color #08c */
html body .price-box .price,
html body .product-info-price .price,
html body .price-container .price,
html body .price-wrapper .price,
html body span.price,
html body .price-final_price .price,
html body .normal-price .price,
html body .special-price .price,
html body .price-box span.price,
html body .pt-product-card__price .price,
html body .pt-product-card__price-current {
  font-weight: 700 !important;
  color: #08c !important;
}
html body .old-price .price,
html body .price-box .old-price .price {
  color: #999 !important;
  font-weight: 400 !important;
  text-decoration: line-through;
}

/* ============ R3 MEGAMENU HOVER ============ */

/* Megamenu panels were visibility:hidden / opacity:0 and never opened. */
.pt-nav__list > li > .megamenu,
.pt-nav__list > .nav-item > .megamenu,
.pt-megamenu > .nav-item > .megamenu,
nav .has-megamenu > .megamenu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in-out, visibility 0s linear .15s;
}
.pt-nav__list > li:hover > .megamenu,
.pt-nav__list > li.open > .megamenu,
.pt-nav__list > .nav-item:hover > .megamenu,
.pt-megamenu > .nav-item:hover > .megamenu,
nav .has-megamenu:hover > .megamenu,
nav .has-megamenu.open > .megamenu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

/* ============ R3 MOBILE HERO CLIP FIX ============ */

/* Audit saw hero slide content extending to 640px inside 375px viewport. */
@media (max-width: 767px) {
  .pt-hero-slide,
  .pt-hero-slide__content,
  .porto-home-slider .slide,
  .porto-home-slider .slide-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .pt-hero-slide__title,
  .pt-hero-slide__subtitle,
  .porto-home-slider .slide h3,
  .porto-home-slider .slide h4 {
    font-size: clamp(18px, 6vw, 38px) !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
  }
  .porto-home-slider .slide p {
    font-size: 14px !important;
  }
  .porto-home-slider .slide,
  .pt-hero-slide {
    min-height: 280px !important;
  }
}

/* ============ R3 FEATURED PRODUCTS SECTION LINE ============ */
/* R2 set ::after but display:none was computed — force visible */
.pt-section-header::after,
.pt-section-title::after,
.section-title.slider-title .line {
  display: block !important;
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: #e7e7e7 !important;
  margin-left: 15px !important;
}
.pt-section-header, .section-title.slider-title {
  display: flex !important;
  align-items: center !important;
}

/* ============ R3 ANNOUNCEMENT BAR (PORTO-V2-P1-16) ============ */
/* Blue announcement bar above topbar — matches Porto V2 Demo 1 reference. */
.pt-announcement-bar {
  background: #0188cc;
  color: #fff;
  font-size: 13px;
  padding: 8px 0;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pt-announcement-bar .pt-announcement-bar__text {
  margin: 0;
  color: #fff;
}
.pt-announcement-bar a { color: #fff; text-decoration: underline; }
.pt-announcement-bar strong { font-weight: 700; }

/* === END R3 FIXES 2026-04-17 === */

/* === R4 FIXES 2026-04-17 === */

/* ============ R4-1 MEGAMENU HOVER DROPDOWN ============ */
/*
 * R3 selectors targeted .pt-nav__list > li > .megamenu which doesn't exist.
 * The real structure: .pt-nav__item--has-dropdown > .pt-megamenu__dropdown,
 * opened by adding .is-open via mega-menu.js _openDropdown().
 * These CSS-only hover rules serve as a pure-CSS fallback in case JS
 * hasn't initialised yet, and broaden coverage to all likely selector shapes.
 */
.pt-megamenu__dropdown {
  visibility: hidden;
  opacity: 0;
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
/* JS-driven open (via mega-menu.js _openDropdown) */
.pt-megamenu__dropdown.is-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}
/* CSS-only hover fallback for browsers / pages where JS hasn't bound yet */
html body .pt-nav__item--has-dropdown:hover > .pt-megamenu__dropdown,
html body .pt-nav__item--has-dropdown.is-active > .pt-megamenu__dropdown,
html body .pt-megamenu .nav-item:hover > .pt-megamenu__sub,
html body .pt-megamenu .nav-item:hover > .megamenu,
html body .pt-megamenu .nav-item:hover > .sub-menu,
html body .pt-megamenu .has-megamenu:hover > .dropdown-menu,
html body nav .nav-item:hover > .megamenu,
html body nav .nav-item:hover > .sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
}
/* Broad sub-nav hidden state */
.pt-megamenu .nav-item > .pt-megamenu__sub,
.pt-megamenu .nav-item > .megamenu,
.pt-megamenu .nav-item > .sub-menu,
.pt-megamenu .has-megamenu > .dropdown-menu,
nav .nav-item > .megamenu,
nav .nav-item > .sub-menu {
  visibility: hidden;
  opacity: 0;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  transition: opacity .15s ease, visibility 0s linear .15s;
}

/* ============ R4-3 PDP / SEARCH PRICE ============ */
html body .product-info-main .price,
html body .product-info-main .price-wrapper .price,
html body .product-info-price .price,
html body .pt-product-info__price .price,
html body .catalogsearch-result-index .price,
html body .product-info-main span.price,
html body .product-info-main .price-final_price .price,
html body div.product-info-main .price {
  font-weight: 700 !important;
  color: #0088cc !important;
}
html body .product-info-main .old-price .price {
  color: #999 !important;
  font-weight: 400 !important;
}

/* ============ R4-4 STAR RATING GOLD ============ */
html body .rating-summary .rating-result > span::before,
html body .rating-result > span::before,
html body .review-item .rating-result > span::before,
html body .pt-product-card__rating .rating-result > span::before,
html body i.icon-star,
html body i.fa-star,
html body .pt-product-card__stars-filled,
html body .pt-product-card__stars-filled::before,
html body .star-rating > .filled,
html body .rating-result > span {
  color: #f7c405 !important;
}
/* Rating result uses background-colour technique in some themes — clear it */
html body .rating-summary .rating-result > span { background-color: transparent !important; }
/* Empty star track */
html body .rating-result { color: #d4d4d4; }

/* ============ R4-5 SERVICE BOX COLUMN DIVIDERS ============ */
html body .porto-service-box-container > [class*="col-"]:not(:last-child),
html body .porto-service-box-container .porto-service-box:not(:last-child),
html body .services-section > [class*="col-"]:not(:last-child),
html body .services-section .porto-service-box:not(:last-child) {
  border-right: 1px solid #e7e7e7 !important;
}
html body .porto-service-box-container,
html body .services-section {
  border: 1px solid #e7e7e7;
}

/* ============ R4-6 SECTION TITLE HORIZONTAL LINE ============ */
/*
 * R3 set ::after on .pt-section-header but .section-title h2 was missed.
 * Add stronger rules covering all title patterns with display:flex + flex line.
 */
html body h2.section-title,
html body .section-title h2,
html body .pt-section-title,
html body .pt-section-header h2 {
  display: flex !important;
  align-items: center !important;
  gap: 15px;
}
html body h2.section-title::after,
html body .section-title h2::after,
html body .pt-section-title::after,
html body .pt-section-header h2::after {
  content: "" !important;
  display: block !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: #e7e7e7 !important;
  margin-left: 0 !important;
}

/* ============ R4-7 PRODUCT CARD HOVER OVERLAY ============ */
html body .pt-product-card,
html body .product-item-info {
  position: relative;
  overflow: hidden;
}
html body .pt-product-card__hover-actions,
html body .product-item-info .hover-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: rgba(34, 37, 41, 0.9);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 5;
}
html body .pt-product-card:hover .pt-product-card__hover-actions,
html body .product-item-info:hover .hover-actions {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
html body .pt-product-card__hover-actions a,
html body .pt-product-card__hover-actions button,
html body .product-item-info .hover-actions a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: background .2s;
}
html body .pt-product-card__hover-actions a:hover {
  background: #08c;
  border-color: #08c;
}

/* === END R4 FIXES 2026-04-17 === */

/* === R5 FIXES 2026-04-17 === */

/* R5-1 service grid — add col-sm-4 if missing */
.porto-services-bottom .row,
.porto-service-boxes .row,
.services-bottom .row,
.porto-services .row {
  display: flex !important;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
.porto-services-bottom .col-sm-4,
.porto-service-boxes .col-sm-4,
.services-bottom .col-sm-4,
.porto-services .col-sm-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 0 10px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .porto-services-bottom .col-sm-4,
  .porto-service-boxes .col-sm-4,
  .services-bottom .col-sm-4,
  .porto-services .col-sm-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* R5-2 service box dividers — correct parent selectors */
html body .porto-services-bottom .row > [class*="col-"]:not(:last-child),
html body .porto-service-boxes .row > [class*="col-"]:not(:last-child),
html body .services-bottom .row > [class*="col-"]:not(:last-child),
html body .porto-services .row > [class*="col-"]:not(:last-child) {
  border-right: 1px solid #e7e7e7 !important;
}
html body .porto-services-bottom, html body .porto-service-boxes, html body .porto-services {
  border: 1px solid #e7e7e7;
  padding: 20px 0;
  margin: 20px 0;
}
@media (max-width: 767px) {
  html body .porto-services-bottom .row > [class*="col-"]:not(:last-child),
  html body .porto-service-boxes .row > [class*="col-"]:not(:last-child),
  html body .services-bottom .row > [class*="col-"]:not(:last-child),
  html body .porto-services .row > [class*="col-"]:not(:last-child) {
    border-right: none !important;
    border-bottom: 1px solid #e7e7e7 !important;
  }
}

/* R5-3 breadcrumb empty strong safety net */
html body .breadcrumbs .items li.item.current:has(strong:empty),
html body .breadcrumbs .items li.item.current strong:empty { display: none !important; }
/* Legacy browsers without :has: hide trailing empty li */
html body .breadcrumbs .items li.item.current strong:empty { visibility: hidden; }

/* R5-4 section title line enforcement */
html body h2.section-title,
html body .section-title h2,
html body h2.slider-title,
html body h2.section-title.slider-title,
html body .pt-section-title,
html body .pt-section-header h2 {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin-bottom: 20px;
}
html body h2.section-title > .inline-title,
html body .section-title h2 > .inline-title {
  flex: 0 0 auto;
  text-transform: uppercase;
  font-weight: 700;
}
html body h2.section-title > .line,
html body .section-title h2 > .line,
html body h2.section-title::after,
html body .section-title h2::after,
html body h2.pt-section-title::after {
  content: "";
  display: block !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: #e7e7e7 !important;
}

/* R5-safety: force R4 megamenu hover in case any later CSS reverts */
html body .pt-megamenu__dropdown.is-open,
html body .pt-megamenu .nav-item.is-open > .pt-megamenu__dropdown,
html body .pt-megamenu .nav-item:hover > .pt-megamenu__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* === END R5 FIXES 2026-04-17 === */

/* === R7 FIXES 2026-04-17 === */

/* R7-3 Featured Products carousel grid (CSS-only, no owl-carousel JS dependency) */
html body .porto-products-carousel.owl-carousel:not(.owl-loaded),
html body .porto-products-carousel:not(.owl-loaded) {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  html body .porto-products-carousel.owl-carousel:not(.owl-loaded),
  html body .porto-products-carousel:not(.owl-loaded) {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
@media (max-width: 767px) {
  html body .porto-products-carousel.owl-carousel:not(.owl-loaded),
  html body .porto-products-carousel:not(.owl-loaded) {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* When owl-carousel IS initialised, respect its layout */
html body .porto-products-carousel.owl-loaded {
  display: block;
}
html body .porto-products-carousel .product-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid #f0f0f0;
  background: #fff;
}
html body .porto-products-carousel .product-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* R7-6 Star rating — hide raw "Rating: 0%" text, show CSS star icons */
html body .porto-products-carousel .product-item > span:first-of-type {
  /* hides the first bare "Rating:" span */
  display: none !important;
}
/* Generic rating span hiding (Rating: / 0%) */
html body .product-item > span,
html body .porto-list-product > span {
  font-size: 13px;
  color: #777;
}
/* Star rating pseudo-element for items that have rating spans */
html body .product-item .pt-product-card__rating,
html body .pt-product-card__rating {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0;
  color: transparent;
}
html body .pt-product-card__rating::before {
  content: "\2605\2605\2605\2605\2605";
  color: #d4d4d4;
  font-size: 14px;
  letter-spacing: 2px;
}
/* Core Magento rating-summary stars */
html body .rating-summary .rating-result > span::before {
  content: "\2605\2605\2605\2605\2605" !important;
  color: #d4d4d4 !important;
  letter-spacing: 2px !important;
}
html body .rating-summary .rating-result > span::after {
  color: #f7c405 !important;
}
/* Hide bare Rating:/0% spans from CMS product items */
html body .porto-products-carousel .product-item > span:empty,
html body .porto-products-carousel .product-item > span:only-child {
  display: none !important;
}

/* === END R7 FIXES 2026-04-17 === */

/* === R8 FIXES 2026-04-17 === */

/* F-R8-1: Hero slider — show first slide before JS init, hide rest */
html body .porto-home-slider { position: relative; overflow: hidden; min-height: 428px; }
html body .porto-home-slider .slide { width: 100%; min-height: 428px; box-sizing: border-box; }
html body .porto-home-slider:not(.pt-slider-init) .slide { display: none; }
html body .porto-home-slider:not(.pt-slider-init) .slide:first-child { display: flex; }
html body .porto-home-slider.pt-slider-init .slide { display: none; }
html body .porto-home-slider.pt-slider-init .slide:first-child { display: flex; }

/* F-R8-2: Star rating — .rating-result CSS stars replacing bare Rating/0% spans */
html body .rating-result {
  width: 72px;
  height: 16px;
  position: relative;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}
html body .rating-result::before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 14px;
  color: #d4d4d4;
  letter-spacing: 2px;
  display: block;
  line-height: 1;
}
html body .rating-result > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  display: block;
}
html body .rating-result > span::before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 14px;
  color: #f7c405;
  letter-spacing: 2px;
  white-space: nowrap;
  line-height: 1;
  display: block;
}
html body .rating-result > span > span { display: none; }
html body .rating-summary .label { display: none; }
html body .product-reviews-summary.short { margin: 2px 0; }

/* F-R8-4: Product image placeholder — tinted gradient when CDN src is broken */
html body .product-item-info img[src*="placeholder"],
html body .product-item img[src*="Magento_Catalog/images/product/placeholder"],
html body .pt-product-card img[src*="placeholder"],
html body .porto-list-product img[src$="/placeholder.jpg"],
html body .porto-list-product img[src$="/placeholder.png"] {
  background: linear-gradient(135deg, #08c 0%, #005580 100%);
  min-height: 200px;
  object-fit: cover;
}
/* Ensure product card img box never collapses on 404 */
html body .product-item img,
html body .porto-list-product img {
  min-height: 120px;
  background-color: #f4f4f4;
  object-fit: cover;
}

/* === END R8 FIXES 2026-04-17 === */

/* === R9 FIXES 2026-04-17 === */

/* F-R9-1: Owl Carousel JS replacement — static grid and rotator classes */
/* Generic grid class applied by pt-carousels.js */
html body .pt-static-grid { display: grid !important; }

/* Brand logo carousel: 6 cols desktop */
html body .porto-brand .owl-carousel.pt-static-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: center;
}
@media (max-width: 991px) {
  html body .porto-brand .owl-carousel.pt-static-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 599px) {
  html body .porto-brand .owl-carousel.pt-static-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Blog post carousel: 3 cols desktop */
html body .post-carousel .pt-static-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 991px) {
  html body .post-carousel .pt-static-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  html body .post-carousel .pt-static-grid {
    grid-template-columns: 1fr;
  }
}

/* Featured products carousel: 5 cols desktop */
html body .porto-products-carousel.pt-static-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1199px) {
  html body .porto-products-carousel.pt-static-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 991px) {
  html body .porto-products-carousel.pt-static-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 599px) {
  html body .porto-products-carousel.pt-static-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Testimonials: show only first item until rotator JS takes over */
html body .sidebar-testimonials .owl-carousel:not(.pt-rotator-init) > *:not(:first-child) {
  display: none;
}

/* Prevent owl-carousel from showing all items as block/inline-block
   (owl adds 'owl-loaded' class which unhides items) */
html body .owl-carousel:not(.pt-static-grid):not(.pt-rotator-init):not(.pt-slider-init):not(.owl-loaded) {
  overflow: hidden;
}

/* F-R9-3: Promo cards 3-col layout */
/* The CMS HTML wraps items in .porto-promo-cards > .row > col-sm-4.
   Bootstrap col-sm-4 should give 3 cols already; belt-and-suspenders
   override ensures layout even if Bootstrap grid isn't active. */
html body .porto-promo-cards {
  container-type: inline-size;
}
html body .porto-promo-cards .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body .porto-promo-cards .row > [class*="col-"] {
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body .porto-promo-cards .porto-promo-item {
  display: block;
  position: relative;
  overflow: hidden;
}
html body .porto-promo-cards .porto-promo-item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 991px) {
  html body .porto-promo-cards .row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px) {
  html body .porto-promo-cards .row {
    grid-template-columns: 1fr;
  }
}

/* === END R9 FIXES 2026-04-17 === */

/* === R10 FINAL POLISH 2026-04-17 === */

/* R10-1 mobile product grid breakpoints */
@media (max-width: 991px) {
  html body .porto-products-carousel.pt-static-grid,
  html body .porto-products-list.pt-static-grid,
  html body .owl-carousel.porto-products-carousel {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  html body .post-carousel .owl-carousel.pt-static-grid,
  html body .post-carousel .pt-static-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  html body .porto-brand .owl-carousel.pt-static-grid,
  html body .porto-brand .pt-static-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  html body .porto-promo-cards > .row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 575px) {
  html body .porto-products-carousel.pt-static-grid,
  html body .porto-products-list.pt-static-grid,
  html body .owl-carousel.porto-products-carousel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  html body .post-carousel .owl-carousel.pt-static-grid,
  html body .post-carousel .pt-static-grid {
    grid-template-columns: 1fr !important;
  }
  html body .porto-brand .owl-carousel.pt-static-grid,
  html body .porto-brand .pt-static-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  html body .porto-promo-cards > .row {
    grid-template-columns: 1fr !important;
  }
  html body .home-widgets .row > .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* R10-1b Prevent page-level overflow from fixed-width children */
html body, html {
  overflow-x: hidden;
  max-width: 100vw;
}

/* R10-3 HP4 tabbed widget */
html body .home-widgets-tabbed .pt-tabs__nav {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  border-bottom: 1px solid #e7e7e7;
}
html body .home-widgets-tabbed .pt-tabs__tab {
  padding: 10px 4px;
  font-size: 16px;
  font-weight: 700;
  color: #777;
  cursor: pointer;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
html body .home-widgets-tabbed .pt-tabs__tab.is-active {
  color: #222529;
  border-bottom-color: #08c;
}
html body .home-widgets-tabbed .pt-tabs__panel { display: none; }
html body .home-widgets-tabbed .pt-tabs__panel.is-active { display: block; }

/* === I2 ECOMMPAAS BRANDING 2026-04-17 === */

/* Brand token overrides */
:root {
  --pt-primary: #0088cc !important;
  --pt-primary-dark: #0077b8 !important;
  --pt-primary-light: #5badd6 !important;
  --pt-info: #0088cc !important;
  --pt-text-dark: #222529 !important;
  --pt-text: #777777 !important;
  --pt-text-muted: #999999 !important;
  --ep-brand: #0088cc;
  --ep-brand-dark: #0077b8;
  --ep-brand-darker: #006ba8;
  --ep-brand-tint: #e6f4fa;
  --ep-text-1: #222529;
  --ep-text-2: #777777;
  --ep-text-3: #999999;
  --ep-bg: #f2f0fa;
}

/* Force-override remaining hardcoded #08c / #0088cc usages */
html body .price, html body .price-box .price, html body .product-info-price .price,
html body .pt-product-card__price .price, html body .pt-product-card__price-current,
html body .price-wrapper .price, html body span.price, html body .special-price .price {
  color: #0088cc !important;
}
html body .btn-primary, html body .action.primary, html body .pt-btn--primary,
html body .action.tocart, html body .btn.btn-primary {
  background: linear-gradient(135deg, #0088cc 0%, #006ba8 100%) !important;
  border-color: #0088cc !important;
  color: #fff !important;
}
html body .btn-primary:hover, html body .action.primary:hover, html body .action.tocart:hover {
  background: linear-gradient(135deg, #0077b8 0%, #4a4199 100%) !important;
}
html body a, html body .pt-link, html body .pt-topbar a:hover, html body .main-nav a:hover {
  color: #0088cc;
}
html body a:hover, html body .pt-link:hover { color: #006ba8; }
/* PORTO-V2-P1-16: purple announcement bar override removed — bar stays #0188cc per Porto V2 original */
html body .pt-newsletter button, html body .block.newsletter .action.subscribe {
  background: #0088cc !important;
}
html body .pt-newsletter button:hover, html body .block.newsletter .action.subscribe:hover {
  background: #0077b8 !important;
}
html body #totop { background: #0088cc !important; }
html body #totop:hover { background: #006ba8 !important; }
html body .pt-badge--sale, html body .product-label.sale-label { background-color: #0088cc !important; }
html body .home-widgets-tabbed .pt-tabs__tab.is-active {
  color: #222529 !important; border-bottom-color: #0088cc !important;
}
html body .section-title::after, html body h2.section-title::after {
  background: linear-gradient(to right, #0088cc 0%, transparent 100%) !important;
  height: 2px !important;
}

/* Slider slide text colours — background images come from inline style set by CMS */
html body .porto-home-slider .slide.slide-2 { color: #fff; }
html body .porto-home-slider .slide.slide-2 h3, html body .porto-home-slider .slide.slide-2 h4, html body .porto-home-slider .slide.slide-2 p { color: #fff !important; }

/* EcommPaaS text logo fallback */
html body .ep-logo {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0088cc 0%, #006ba8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  line-height: 1;
}
html body .pt-footer-middle .ep-logo {
  background: linear-gradient(135deg, #ffffff 0%, #e6f4fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 32px;
}

/* Product card hover override for brand color */
html body .pt-product-card__actions button:hover,
html body .product-item-inner a:hover {
  background: #0088cc !important;
  border-color: #0088cc !important;
}
html body .pt-product-card__quickview:hover,
html body .weltpixel-quickview:hover { color: #0088cc; }

/* Nav highlight item — GET STARTED */
html body .pt-nav__item--highlight .pt-nav__link--highlight {
  background: linear-gradient(135deg, #0088cc 0%, #006ba8 100%) !important;
  color: #fff !important;
  border-radius: 3px;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* About Us page accent color */
html body .pt-about-page [style*="color: #08c"],
html body .pt-about-page [style*="color:#08c"] {
  color: #0088cc !important;
}
html body .pt-about-page [style*="background: #08c"],
html body .pt-about-page [style*="background:#08c"],
html body .pt-about-page [style*="border-left: 4px solid #08c"],
html body .pt-about-page [style*="border-left:4px solid #08c"] {
  background: #0088cc !important;
  border-left-color: #0088cc !important;
}

/* Contact page accent */
html body .pt-contact-page [stroke="#08c"] { stroke: #0088cc !important; }

/* === R11 FIXES 2026-04-18 === */

/* G1 — removed: the global item.home hide was suppressing "Home > X" on category/CMS pages */

/* G2 — PDP price: remove horizontal decorator line under price block */
html body .product-info-main .price-box,
html body .product-info-main .product-info-price,
html body .product-info-main .price-final_price {
  border: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 10px !important;
  margin-bottom: 15px !important;
}
html body .product-info-main .price-box::after,
html body .product-info-main .product-info-price::after {
  display: none !important;
  content: none !important;
}

/* G3 — Prev/next product navigation: make subtle, position top-right */
html body .pt-product-prev-next,
html body .product-pager {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 4px;
}
html body .pt-product-prev-next a,
html body .pt-product-prev-next button,
html body .product-pager a {
  width: 28px;
  height: 28px;
  font-size: 12px;
  color: #777;
  background: transparent;
  border: 1px solid #e7e7e7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
html body .pt-product-prev-next a:hover,
html body .pt-product-prev-next button:hover {
  color: #0088cc;
  border-color: #0088cc;
}

/* G4 — Add-to-cart row: qty + ATC + wishlist/compare all inline */
html body .product-info-main .box-tocart,
html body .product-info-main .product-social-links,
html body .product-info-main .pt-product-info__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
}
html body .product-info-main .box-tocart .fieldset {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
html body .product-info-main .box-tocart .field.qty {
  flex: 0 0 auto;
  margin: 0;
}
html body .product-info-main .action.primary.tocart,
html body .product-info-main .pt-product-info__add-to-cart button {
  background: #222529 !important;
  color: #fff !important;
  padding: 0 30px !important;
  height: 48px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
html body .product-info-main .action.primary.tocart:hover {
  background: #0088cc !important;
}
html body .product-info-main .product-social-links .action.towishlist,
html body .product-info-main .product-social-links .action.tocompare,
html body .product-info-main .pt-product-info__wishlist,
html body .product-info-main .pt-product-info__compare {
  width: 44px;
  height: 44px;
  border: 1px solid #e7e7e7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #222529;
  padding: 0;
}
html body .product-info-main .product-social-links .action.towishlist:hover,
html body .product-info-main .product-social-links .action.tocompare:hover {
  border-color: #0088cc;
  color: #0088cc;
}

/* G5 — Thumbnail strip: subtle active-state border (no heavy blue box) */
html body .fotorama__nav__frame--thumb.fotorama__active .fotorama__thumb,
html body .pt-product-gallery__thumb--active,
html body .pt-product-thumbnails .active,
html body .gallery-placeholder .fotorama__active {
  border: 1px solid #0088cc !important;
  outline: none !important;
  box-shadow: none !important;
}
html body .fotorama__nav__frame.fotorama__nav__frame--thumb {
  border: 1px solid transparent;
  transition: border-color .15s;
}

/* G7 — Scope section-title ::after decorator to NOT apply on related products block title */
html body .products-related .block-title::after,
html body .block-products-list.block-products-list--related .block-title::after,
html body .catalog-product-view .block-title::after,
html body .products-related h2.block-title::after,
html body .products-related .title::after {
  display: none !important;
  content: none !important;
}

/* G8 — Hide empty 5-star rating placeholder on product cards when rating is 0 */
html body .product-item-info .rating-summary[data-rating="0"],
html body .product-reviews-summary.empty,
html body .product-item-info .product-reviews-summary:has(.rating-result > span[style*="width: 0"]),
html body .pt-product-card .rating-summary:has(.rating-result > span[style*="width: 0"]) {
  display: none !important;
}
html body .pt-product-card__rating:empty,
html body .rating-summary.rating-summary--empty { display: none !important; }
html body .products-related .rating-result::before,
html body .products-related .pt-product-card__rating::before,
html body .block-products-list .rating-result::before {
  display: none !important;
  content: "" !important;
}

/* === ITER-1 T7 BRANDING POLISH 2026-04-18 === */

/* I-1-10: Footer ribbon bg purple */
html body .footer-ribbon,
html body .pt-footer-middle .footer-ribbon {
  background: #0088cc !important;
  color: #ffffff !important;
}
html body .footer-ribbon::before {
  border-color: #006ba8 transparent transparent transparent !important;
}

/* I-1-13: Account save button purple */
html body .customer-account-edit button.action.save.primary,
html body .customer-account-edit .action.save.primary,
html body .account button.action.save.primary,
html body button.action.primary:not(.tocart):not(.add-to-cart) {
  background: #0088cc !important;
  color: #fff !important;
  border-color: #0088cc !important;
}
html body .customer-account-edit button.action.save.primary:hover,
html body .account button.action.save.primary:hover,
html body button.action.primary:not(.tocart):not(.add-to-cart):hover {
  background: #006ba8 !important;
  border-color: #006ba8 !important;
}

/* I-1-14: Standardize quickview ATC color to match PDP (black) */
html body .pt-quickview__atc-btn,
html body .weltpixel-quickview .action.primary.tocart,
html body .modal-content .action.primary.tocart {
  background: #222529 !important;
  color: #ffffff !important;
  border-color: #222529 !important;
}
html body .pt-quickview__atc-btn:hover,
html body .weltpixel-quickview .action.primary.tocart:hover {
  background: #0088cc !important;
  border-color: #0088cc !important;
}

/* Cart "Continue Shopping" button — fix invisible white-on-white */
html body .cart-empty .action.continue,
html body .cart.empty .action.continue,
html body .checkout-cart-index .action.continue,
html body a.action.continue,
html body .continue-shopping {
  background: #222529 !important;
  color: #ffffff !important;
  border: 1px solid #222529 !important;
  padding: 12px 24px !important;
  display: inline-block !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
html body .cart-empty .action.continue:hover,
html body .checkout-cart-index .action.continue:hover {
  background: #0088cc !important;
  border-color: #0088cc !important;
  color: #ffffff !important;
}

/* I-1-8: Body color dial-back — less purple, more neutral for readability */
html body,
html body p,
html body li,
html body span:not([class]),
html body label {
  color: #777777 !important;
}
html body .product-info-main,
html body .product.info.detailed,
html body .product-description {
  color: #777777 !important;
}

/* === ITER-2 T6 SLIDER DOTS + PREV-NEXT 2026-04-18 === */
html body .porto-home-slider .pt-slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
html body .porto-home-slider .pt-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}
html body .porto-home-slider .pt-slider-dot.is-active {
  background: #0088cc;
  border-color: #0088cc;
  transform: scale(1.3);
}
html body .porto-home-slider .pt-slider-dot:hover {
  background: #0088cc;
}
html body .pt-product-prev-next a[href="#"] {
  display: none !important;
}

/* === END R11 FIXES === */

/* === ITER-2 T3 GLOBAL PRIMARY BUTTON PURPLE 2026-04-18 === */

/* Global primary button — Orbit purple */
html body button.action.primary,
html body button.primary,
html body .action.primary,
html body a.action.primary,
html body .btn-primary,
html body button.btn-primary,
html body a.btn-primary,
html body .amcart-primary-button,
html body .porto-btn-primary,
html body .cart.main.actions button.update,
html body .cart.main.actions button.continue,
html body .action.tocompare,
html body .action.towishlist,
html body .checkout-cart-index button.action.primary.checkout,
html body .action.primary.checkout,
html body .action.action-apply,
html body button[type="submit"].primary {
  background-color: #0088cc !important;
  background-image: linear-gradient(135deg, #0088cc 0%, #006ba8 100%) !important;
  color: #ffffff !important;
  border: 1px solid #0088cc !important;
  transition: all .2s ease !important;
}

html body button.action.primary:hover,
html body button.primary:hover,
html body .action.primary:hover,
html body a.action.primary:hover,
html body .btn-primary:hover,
html body button.btn-primary:hover,
html body a.btn-primary:hover,
html body .action.primary.checkout:hover {
  background-color: #006ba8 !important;
  background-image: linear-gradient(135deg, #006ba8 0%, #453c9f 100%) !important;
  border-color: #006ba8 !important;
  color: #ffffff !important;
}

html body button.action.primary:disabled,
html body .action.primary:disabled {
  background-color: #b3aadf !important;
  background-image: none !important;
  border-color: #b3aadf !important;
  cursor: not-allowed !important;
}

/* EXCEPTION: PDP Add to Cart button stays dark (#222529) per Porto reference visual style */
html body .product-info-main button.action.primary.tocart,
html body .product-info-main .action.primary.tocart,
html body .product-info-main .pt-product-info__add-to-cart button {
  background-color: #222529 !important;
  background-image: none !important;
  border-color: #222529 !important;
}
html body .product-info-main button.action.primary.tocart:hover {
  background-color: #0088cc !important;
  background-image: linear-gradient(135deg, #0088cc 0%, #006ba8 100%) !important;
  border-color: #0088cc !important;
}

/* === END ITER-2 T3 === */

/* === ITER-4 T3 PROMO IMAGE LAYERING 2026-04-18 === */

/* T3: Fix promo card image display — image as background, no Magento placeholder */

html body .porto-promo-cards .porto-promo-item,
html body .porto-promo-cards > .row > * {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 220px;
  border-radius: 4px;
}

html body .porto-promo-cards .porto-promo-item img,
html body .porto-promo-cards .promo-img,
html body .porto-promo-cards img.porto-promo-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  display: block !important;
}

/* Content overlay (title/text) sits on top of image */
html body .porto-promo-cards .porto-promo-content,
html body .porto-promo-cards .porto-promo-item-content,
html body .porto-promo-cards .porto-promo-caption {
  position: relative !important;
  z-index: 2 !important;
  padding: 30px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Kill Magento product-image-placeholder pseudo-element bleeding through */
html body .porto-promo-cards .product-image-placeholder,
html body .porto-promo-cards .product-image-wrapper::before,
html body .porto-promo-cards .product-image-wrapper::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* If the img has broken src, fall back to gradient per card */
html body .porto-promo-cards .porto-promo-item:nth-child(1) { background: linear-gradient(135deg, #0088cc 0%, #006ba8 100%); }
html body .porto-promo-cards .porto-promo-item:nth-child(2) { background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); }
html body .porto-promo-cards .porto-promo-item:nth-child(3) { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); }

/* === END ITER-4 T3 === */

/* === RECOVERY A2 SIDEBAR + TIMEPIECES + FEATURED 2026-04-18 === */

/* ---- Fix 1: Left sidebar 2-column layout ---- */
html body .porto-home-container > .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
html body .porto-home-container .col-lg-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
html body .porto-home-container .col-lg-9 {
  flex: 0 0 75%;
  max-width: 75%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (max-width: 991px) {
  html body .porto-home-container .col-lg-3,
  html body .porto-home-container .col-lg-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

html body .porto-sidebar-widget {
  background: #fff;
  border: 1px solid #e7e7e7;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-sizing: border-box;
}
html body .porto-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #222529;
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e7e7e7;
}
html body .porto-sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
html body .porto-sidebar-nav li {
  padding: 8px 0;
  border-bottom: 1px solid #f4f4f4;
}
html body .porto-sidebar-nav li:last-child { border-bottom: 0; }
html body .porto-sidebar-nav a {
  color: #222529;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
html body .porto-sidebar-nav a:hover { color: #0088cc; }
html body .porto-sidebar-nav i { font-size: 16px; color: #0088cc; }

html body .porto-sidebar-sale {
  background: linear-gradient(135deg, #0088cc 0%, #006ba8 100%);
  color: #fff;
  text-align: center;
  padding: 30px 20px;
  border: 0;
}
html body .porto-sale-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 15px 25px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}
html body .porto-sale-badge small { font-size: 11px; }
html body .porto-sale-pct {
  font-size: 13px;
  margin: 15px 0;
  color: #fff;
}
html body .porto-sale-pct strong {
  display: block;
  font-size: 42px;
  line-height: 1;
  color: #fff;
}
html body .porto-sidebar-sale p {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 15px;
}
html body .porto-sidebar-sale .btn-dark {
  background: #222529;
  color: #fff;
  display: inline-block;
  padding: 10px 30px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 0;
}

html body .porto-sidebar-newsletter input[type="email"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e7e7e7;
  margin-bottom: 8px;
  font-size: 13px;
  box-sizing: border-box;
}
html body .porto-sidebar-newsletter button {
  width: 100%;
  padding: 10px;
  background: #0088cc;
  color: #fff;
  border: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 1px;
}

html body .porto-sidebar-testimonial blockquote {
  margin: 0;
  padding: 0;
  font-style: italic;
  color: #555;
  font-size: 13px;
  line-height: 1.6;
}
html body .porto-sidebar-testimonial footer {
  margin-top: 10px;
  color: #222529;
  font-size: 12px;
}

html body .porto-sidebar-blog p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}
html body .porto-sidebar-blog a {
  color: #0088cc;
  font-weight: 700;
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  text-decoration: none;
}
html body .porto-sidebar-blog a:hover { text-decoration: underline; }

/* ---- Fix 2: Timepieces stacked discount — fix overlap ---- */
html body .pt-promo-discount,
html body .porto-promo-item .porto-promo-discount {
  display: flex;
  align-items: flex-start;
  line-height: 1;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  flex-wrap: nowrap;
  gap: 2px;
}
html body .pt-promo-discount sup:first-child,
html body .porto-promo-item .porto-promo-discount sup:first-child {
  font-size: 0.45em;
  vertical-align: top;
  margin-top: 4px;
  align-self: flex-start;
  opacity: 0.7;
  flex-shrink: 0;
}
html body .pt-promo-discount del,
html body .porto-promo-item .porto-promo-discount del {
  font-size: 1em;
  text-decoration: line-through;
  opacity: 0.7;
  font-weight: 700;
}
html body .pt-promo-discount__main,
html body .porto-promo-item .porto-promo-discount__main {
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
html body .pt-promo-discount sup:last-child,
html body .porto-promo-item .porto-promo-discount sup:last-child {
  font-size: 0.35em;
  vertical-align: top;
  margin-top: 6px;
  align-self: flex-start;
  flex-shrink: 0;
}

/* === FIX-FEATURED-GRID 2026-04-18 === */
/* Featured Products: clean grid layout with proper spacing */
html body .porto-section.products.product-grid .products-grid,
html body .porto-section.products.product-grid .widget-new-list,
html body .porto-section.products.product-grid .widget-product-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
@media (max-width: 1199px) {
  html body .porto-section.products.product-grid .products-grid,
  html body .porto-section.products.product-grid .widget-new-list,
  html body .porto-section.products.product-grid .widget-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 991px) {
  html body .porto-section.products.product-grid .products-grid,
  html body .porto-section.products.product-grid .widget-new-list,
  html body .porto-section.products.product-grid .widget-product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 575px) {
  html body .porto-section.products.product-grid .products-grid,
  html body .porto-section.products.product-grid .widget-new-list,
  html body .porto-section.products.product-grid .widget-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

html body .porto-section.products.product-grid .product-item {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  list-style: none;
}
html body .porto-section.products.product-grid .product-item-info {
  padding: 12px;
  text-align: center;
  border: 1px solid #f4f4f4;
  border-radius: 4px;
  transition: box-shadow .2s;
}
html body .porto-section.products.product-grid .product-item-info:hover {
  box-shadow: 0 2px 10px rgba(0,136,204,0.15);
}
html body .porto-section.products.product-grid .product-item-photo {
  display: block;
  margin-bottom: 10px;
}
html body .porto-section.products.product-grid .product-image-container,
html body .porto-section.products.product-grid .product-image-wrapper {
  width: 100% !important;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}
html body .porto-section.products.product-grid .product-image-photo {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
html body .porto-section.products.product-grid .product-item-name {
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0;
  color: #222529;
  min-height: 2.6em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html body .porto-section.products.product-grid .product-item-name a { color: #222529; text-decoration: none; }
html body .porto-section.products.product-grid .product-item-name a:hover { color: #0088cc; }
html body .porto-section.products.product-grid .price-box { margin: 5px 0; }
html body .porto-section.products.product-grid .price {
  font-size: 15px;
  font-weight: 700;
  color: #0088cc;
}

/* Section title above Featured Products */
html body .porto-section.products.product-grid > .section-title,
html body .porto-section.products.product-grid > h2.section-title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #222529;
  border-bottom: 2px solid #e7e7e7;
  padding-bottom: 10px;
  margin: 30px 0 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}
html body .porto-section.products.product-grid > .section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e7e7e7;
}

/* === END RECOVERY A2 === */

/* === FIX-SIDEBAR CONTENT 2026-04-18 === */
html body .porto-home-sidebar .porto-sidebar-widget {
  background: #fff;
  border: 1px solid #e7e7e7;
  padding: 18px 20px;
  margin-bottom: 20px;
  border-radius: 4px;
}
html body .porto-home-sidebar .porto-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #222529;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e7e7e7;
  letter-spacing: 0.5px;
}

/* Nav widget */
html body .porto-sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
html body .porto-sidebar-nav li {
  border-bottom: 1px solid #f4f4f4;
}
html body .porto-sidebar-nav li:last-child { border-bottom: 0; }
html body .porto-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  color: #222529;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color .15s;
}
html body .porto-sidebar-nav a:hover { color: #0088cc; }
html body .porto-sidebar-nav i { font-size: 18px; color: #0088cc; width: 20px; text-align: center; }

/* SALE widget */
html body .porto-sidebar-sale {
  background: linear-gradient(135deg, #0088cc 0%, #006ba8 100%) !important;
  color: #fff;
  text-align: center;
  border: 0 !important;
  padding: 30px 20px !important;
}
html body .porto-sidebar-sale .porto-sale-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  width: 90px;
  height: 90px;
  margin-bottom: 15px;
}
html body .porto-sidebar-sale .porto-sale-badge span {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
html body .porto-sidebar-sale .porto-sale-badge small {
  font-size: 10px;
  color: #fff;
  opacity: 0.9;
  margin-top: 3px;
}
html body .porto-sidebar-sale .porto-sale-pct {
  font-size: 14px;
  margin: 10px 0;
  line-height: 1.2;
}
html body .porto-sidebar-sale .porto-sale-pct strong {
  display: block;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  margin: 5px 0;
}
html body .porto-sidebar-sale .porto-sale-pct span {
  font-size: 20px;
  margin-left: 4px;
}
html body .porto-sidebar-sale p {
  font-size: 12px;
  opacity: 0.9;
  margin: 10px 0 15px;
}
html body .porto-sidebar-sale .porto-sale-btn {
  display: inline-block;
  background: #222529;
  color: #fff !important;
  padding: 10px 25px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  border-radius: 2px;
}
html body .porto-sidebar-sale .porto-sale-btn:hover { background: #000; }

/* Newsletter widget */
html body .porto-sidebar-newsletter p {
  font-size: 13px;
  color: #777;
  margin: 0 0 12px;
  line-height: 1.5;
}
html body .porto-sidebar-newsletter-form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e7e7e7;
  margin-bottom: 10px;
  font-size: 13px;
  box-sizing: border-box;
}
html body .porto-sidebar-newsletter-form button {
  width: 100%;
  padding: 11px;
  background: #0088cc;
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.5px;
}
html body .porto-sidebar-newsletter-form button:hover { background: #006ba8; }

/* Testimonial */
html body .porto-sidebar-testimonial .porto-testimonial-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
html body .porto-sidebar-testimonial .porto-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0088cc 0%, #006ba8 100%);
  flex-shrink: 0;
}
html body .porto-sidebar-testimonial strong {
  font-size: 14px;
  color: #222529;
  display: block;
}
html body .porto-sidebar-testimonial small {
  font-size: 11px;
  color: #777;
}
html body .porto-sidebar-testimonial blockquote {
  margin: 0;
  padding: 0;
  font-style: italic;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* Blog */
html body .porto-sidebar-blog p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 10px;
}
html body .porto-sidebar-blog-more {
  color: #0088cc;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
html body .porto-sidebar-blog-more:hover { color: #006ba8; }
/* === END FIX-SIDEBAR CONTENT === */

/* ==================================================================
   PORTO-V2-P1-07 — Create Account: two-column layout
   Personal Information (left) + Sign-in Information (right) at ≥769px.
   The .customer-two-cols wrapper is added by the theme template override
   in Magento_Customer/templates/form/register.phtml.
   At ≤768px both columns stack vertically (mobile-first fallback).
   Inputs inside each column inherit the pill styling already defined
   via the body.customer-account-create selectors above (P1-05).
   ================================================================== */
body.customer-account-create .form-create-account .customer-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
/* Address fieldset (shown only when getShowAddressFields() is true) spans
   both columns so it never displaces the Sign-in fieldset into a 3rd cell. */
body.customer-account-create .form-create-account .customer-two-cols .fieldset.address {
    grid-column: 1 / -1;
}
@media (max-width: 768px) {
    body.customer-account-create .form-create-account .customer-two-cols {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
}
/* fieldset inside two-cols: remove bottom margin so the gap drives spacing.
   Scoped to .fieldset.info and .fieldset.create to avoid touching address. */
body.customer-account-create .form-create-account .customer-two-cols .fieldset.info,
body.customer-account-create .form-create-account .customer-two-cols .fieldset.create {
    margin-bottom: 0 !important;
}

/* ==================================================================
   R9 — Address New/Edit: two-column layout
   Contact Information (left) + Address (right) at ≥769px on
   /customer/address/new/ and /customer/address/edit/.
   The .customer-address-two-cols wrapper is added by the theme template
   override in Magento_Customer/templates/address/edit.phtml.
   At ≤768px both columns stack vertically (mobile-first fallback).
   ================================================================== */
body.customer-address-form .form-address-edit .customer-address-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 24px;
}
@media (max-width: 768px) {
    body.customer-address-form .form-address-edit .customer-address-two-cols {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
}
/* Remove bottom margin on fieldsets inside the two-cols wrapper so the
   gap controls spacing exclusively. */
body.customer-address-form .form-address-edit .customer-address-two-cols .fieldset.info,
body.customer-address-form .form-address-edit .customer-address-two-cols .fieldset.address {
    margin-bottom: 0 !important;
}

/* ==================================================================
   PORTO-V2-P1-11 — Standard Magento product-item markup on PLP
   The category list (list.phtml) now emits:
     <ol class="products list items product-items pt-product-grid ...">
       <li class="product-item pt-product-grid__item">
         <div class="product-item-info pt-product-card">
           <div class="product-item-photo pt-product-card__image">
           <div class="product-item-details pt-product-card__info">
             <strong class="product-item-name pt-product-card__name">
             <div class="product-item-inner">   ← price + ATC
   Existing .pt-product-card rules handle all visual styling via dual
   classes. These rules correct conflicts from generic product-item*
   rules added in previous sprints.
   ================================================================== */

/* Reset the B8-1 overlay that slides .product-item-inner up as a dark
   hover stripe. In our PLP markup product-item-inner is a plain wrapper
   div (price + ATC), not a hover overlay. Strictly scoped to the PLP
   grid so cart/minicart/checkout product-item-inner overlays are intact. */
.pt-product-grid .product-item-info {
    position: relative;
    overflow: hidden;
}
.pt-product-grid .product-item-info .product-item-inner {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
    display: block !important;
}

/* Reset the L88 fixed-width 225px on product-item in the PLP. Our grid
   uses CSS Grid with var(--pt-grid-cols) set on .pt-filter-grid /
   .pt-product-grid, so fixed widths break the layout. */
.pt-product-grid .product-item {
    width: auto !important;
    min-width: 0 !important;
}

/* product-item-photo is the image container (mirrors pt-product-card__image).
   Reset any max-width that Magento's base CSS may impose so images fill
   the card as expected. */
.pt-product-grid .product-item-info .product-item-photo {
    max-width: none !important;
    width: 100% !important;
    display: block !important;
}

/* product-item-details mirrors pt-product-card__info — no extra padding. */
.pt-product-grid .product-item-info .product-item-details {
    padding: 0 !important;
}

/* product-item-name mirrors pt-product-card__name — font is handled by
   pt-product-card__name but reset Magento's default margins here. */
.pt-product-grid .product-item-info .product-item-name {
    margin: 0 !important;
    font-weight: 400 !important;
}

/* product-price-and-add is our custom wrapper div for price inside
   product-item-inner. Mirror pt-product-card__price display. */
.pt-product-grid .product-item-info .product-price-and-add {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* ATC button in PLP: preserve the 36x36 circular blue icon button.
   The button now carries action tocart primary pt-btn pt-btn--primary
   pt-btn--sm pt-product-card__cart. The rule at line ~11982 already
   targets .products-grid .product-item .action.tocart with !important,
   but we also scope it to .pt-product-grid to be explicit.
   font-size:0 hides the text so it renders as an icon-only circle. */
.pt-product-grid .product-item .action.tocart {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgb(0, 136, 204) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 0 !important;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease,
                background-color var(--pt-transition);
}
.pt-product-grid .product-item:hover .action.tocart,
.pt-product-grid .product-item-info:hover .action.tocart,
.pt-product-grid .product-item-info:focus-within .action.tocart {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.pt-product-grid .product-item .action.tocart:hover {
    background-color: #0073aa !important;
}

/* product-item-actions (the wrapper div for the ATC form) — no extra layout. */
.pt-product-grid .product-item-info .product-item-inner .product-item-actions {
    margin-top: 6px;
}

/* Ensure the ol/li list reset so the product-items ol and product-item li
   have no default list bullets or margins. */
.products.product-items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.pt-product-grid.product-items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* grid layout is inherited from .pt-product-grid rules */
}

/* ==================================================================
   PORTO-V2-P1-04 — Cart CTA + Layout Polish
   Changes:
   1. "Proceed to Checkout" button → black #222529 (overrides purple brand gradient)
   2. "CONTINUE SHOPPING" + "UPDATE SHOPPING CART" → hidden (main.actions removed
      via layout XML display="false"; belt-and-suspenders CSS safety net below)
   3. Discount coupon block → always-open inline form (no accordion)
   4. Cart summary title: 11px → 16px
   5. Order Total row: 16px → 22px bold
   6. Row item actions: pencil icon for edit, × icon for delete (text hidden)
   ================================================================== */

/* ── 1. Proceed to Checkout button — black (beat the purple brand gradient) ─ */
html body.checkout-cart-index .checkout-methods-items .action.primary.checkout,
html body.checkout-cart-index button.action.primary.checkout,
html body.checkout-cart-index button[data-role="proceed-to-checkout"],
html body.checkout-cart-index .cart-summary button.checkout,
html body.checkout-cart-index .cart-summary .checkout-methods-items button.primary {
    background: #222529 !important;
    background-image: none !important;
    background-color: #222529 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 20px !important;
    height: auto !important;
    min-height: 50px !important;
    width: 100% !important;
    line-height: 1 !important;
    transition: background 0.2s ease !important;
}
html body.checkout-cart-index .checkout-methods-items .action.primary.checkout::after,
html body.checkout-cart-index button.action.primary.checkout::after {
    content: " \2192" !important;
}
html body.checkout-cart-index .checkout-methods-items .action.primary.checkout:hover,
html body.checkout-cart-index button.action.primary.checkout:hover,
html body.checkout-cart-index button[data-role="proceed-to-checkout"]:hover {
    background: #3a3d42 !important;
    background-color: #3a3d42 !important;
    background-image: none !important;
}

/* ── 2. Safety-net: hide main.actions row (layout XML is primary gate) ────── */
body.checkout-cart-index .cart.main.actions {
    display: none !important;
}

/* ── 3. Discount coupon — always-open inline form (no accordion toggle) ───── */
/* Show the content immediately — remove collapsible/accordion behaviour */
body.checkout-cart-index .cart-summary .block.discount,
body.pt-cart-page .cart-summary .block.discount {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
/* Hide the accordion title trigger (the clickable "Discount Code" heading) */
body.checkout-cart-index .cart-summary .block.discount > .title,
body.pt-cart-page .cart-summary .block.discount > .title {
    display: none !important;
}
/* Always show the discount content (no collapsed state) */
body.checkout-cart-index .cart-summary .block.discount .content,
body.pt-cart-page .cart-summary .block.discount .content {
    display: block !important;
    padding: 0 0 12px !important;
}
/* Inline layout: input + button side-by-side */
body.checkout-cart-index .cart-summary .block.discount .fieldset,
body.pt-cart-page .cart-summary .block.discount .fieldset {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}
body.checkout-cart-index .cart-summary .block.discount .field,
body.pt-cart-page .cart-summary .block.discount .field {
    flex: 1 1 auto !important;
    margin: 0 !important;
}
/* "Enter discount code" placeholder label hidden — placeholder text suffices */
body.checkout-cart-index .cart-summary .block.discount .field .label,
body.pt-cart-page .cart-summary .block.discount .field .label {
    display: none !important;
}
body.checkout-cart-index .cart-summary .block.discount .field .control input,
body.pt-cart-page .cart-summary .block.discount .field .control input {
    width: 100% !important;
    height: 40px !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: Poppins, sans-serif !important;
    color: #555 !important;
    background: #fff !important;
}
body.checkout-cart-index .cart-summary .block.discount .actions-toolbar,
body.pt-cart-page .cart-summary .block.discount .actions-toolbar {
    flex: 0 0 auto !important;
    margin: 0 !important;
}
body.checkout-cart-index .cart-summary .block.discount .action.apply,
body.pt-cart-page .cart-summary .block.discount .action.apply {
    height: 40px !important;
    padding: 0 14px !important;
    background: #222529 !important;
    background-image: none !important;
    background-color: #222529 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: Poppins, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 40px !important;
}
body.checkout-cart-index .cart-summary .block.discount .action.apply:hover,
body.pt-cart-page .cart-summary .block.discount .action.apply:hover {
    background: #3a3d42 !important;
    background-color: #3a3d42 !important;
    background-image: none !important;
}

/* ── 4. Cart summary title: 16px ─────────────────────────────────────────── */
body.checkout-cart-index .cart-summary > .title,
body.pt-cart-page .cart-summary > .title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #222529 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e7e7e7 !important;
}

/* ── 5. Order Total (grand total row): 22px bold ─────────────────────────── */
body.checkout-cart-index .cart-totals .grand .mark,
body.checkout-cart-index .cart-totals .grand .amount,
body.pt-cart-page .cart-totals .grand .mark,
body.pt-cart-page .cart-totals .grand .amount {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #222529 !important;
    border-top: 2px solid #222529 !important;
    padding-top: 12px !important;
    line-height: 1.2 !important;
}

/* ── 6. Row item actions: icon-only pencil (edit) and × (delete) ─────────── */
/* Hide the text content of both action links */
body.checkout-cart-index .cart.items .actions-toolbar .action-edit span,
body.checkout-cart-index .cart.items .actions-toolbar .action.action-delete span,
body.checkout-cart-index .cart.items .item-actions .action-edit span,
body.checkout-cart-index .cart.items .item-actions .action.action-delete span,
body.checkout-cart-index .item-actions .action-edit span,
body.checkout-cart-index .item-actions .action.action-delete span {
    display: none !important;
}
/* Pencil icon for edit */
body.checkout-cart-index .cart.items .actions-toolbar .action-edit::before,
body.checkout-cart-index .cart.items .item-actions .action-edit::before,
body.checkout-cart-index .item-actions .action-edit::before {
    content: "\270E" !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #777 !important;
    font-style: normal !important;
}
body.checkout-cart-index .cart.items .actions-toolbar .action-edit:hover::before,
body.checkout-cart-index .cart.items .item-actions .action-edit:hover::before,
body.checkout-cart-index .item-actions .action-edit:hover::before {
    color: #222529 !important;
}
/* × icon for delete (overrides existing action-delete::before which already uses '×') */
body.checkout-cart-index .cart.items .actions-toolbar .action.action-delete::before,
body.checkout-cart-index .cart.items .item-actions .action.action-delete::before,
body.checkout-cart-index .item-actions .action.action-delete::before {
    content: "\00D7" !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: #999 !important;
    font-style: normal !important;
}
body.checkout-cart-index .cart.items .actions-toolbar .action.action-delete:hover::before,
body.checkout-cart-index .cart.items .item-actions .action.action-delete:hover::before,
body.checkout-cart-index .item-actions .action.action-delete:hover::before {
    color: #e74c3c !important;
}
/* Compact icon button base styles */
body.checkout-cart-index .item-actions .action-edit,
body.checkout-cart-index .item-actions .action.action-delete,
body.checkout-cart-index .cart.items .item-actions .action-edit,
body.checkout-cart-index .cart.items .item-actions .action.action-delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border: 1px solid #e1e1e1 !important;
    background: #fff !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    vertical-align: middle !important;
    margin: 0 2px !important;
}
body.checkout-cart-index .item-actions .action-edit:hover,
body.checkout-cart-index .item-actions .action.action-delete:hover,
body.checkout-cart-index .cart.items .item-actions .action-edit:hover,
body.checkout-cart-index .cart.items .item-actions .action.action-delete:hover {
    border-color: #222529 !important;
    background: #f7f7f7 !important;
}
/* === END PORTO-V2-P1-04 === */

/* === BEGIN PORTO-V2-P1-03: Minicart dropdown === */

/* --- Outer wrapper: positions the dropdown anchor --- */
.pt-minicart-wrapper,
.pt-header__tool-item--cart .minicart-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* --- Trigger: cart icon + counter + label --- */
.pt-minicart-trigger,
.pt-header__tool-item--cart .action.showcart {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #222529 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.pt-minicart-trigger__icon,
.pt-header__tool-item--cart .action.showcart svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

/* Counter badge — hidden when cart is empty */
.pt-minicart-trigger__counter,
.pt-header__tool-item--cart .counter.qty {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    background-color: var(--pt-primary, #0088cc) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

.pt-minicart-trigger__counter.empty,
.pt-header__tool-item--cart .counter.qty.empty {
    display: none !important;
}

.pt-minicart-trigger__label,
.pt-header__tool-item--cart .pt-minicart-trigger__label {
    font-size: 13px !important;
    font-weight: 400 !important;
    font-family: Poppins, sans-serif !important;
    color: #222529 !important;
}

/* --- Dropdown panel --- */
.pt-minicart-dropdown,
.pt-header__tool-item--cart .block-minicart {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 300px !important;
    background: #ffffff !important;
    box-shadow: rgba(0, 0, 0, 0.15) 0 5px 8px !important;
    border: 1px solid #e7e7e7 !important;
    padding: 0 !important;
    margin-top: 8px !important;
}

/* Panel visible when wrapper has .active class (set by dropdownDialog widget) */
.pt-minicart-wrapper.active .pt-minicart-dropdown,
.pt-header__tool-item--cart .minicart-wrapper.active .block-minicart {
    display: block !important;
}

/* --- KO minicart content inner layout --- */

/* Panel header: "SHOPPING CART" title */
.pt-header__tool-item--cart .block-minicart .block-title,
.pt-minicart-dropdown .block-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e7e7e7 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: Poppins, sans-serif !important;
    color: #222529 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.pt-header__tool-item--cart .block-minicart .block-title .qty,
.pt-minicart-dropdown .block-title .qty {
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #777 !important;
    text-transform: none !important;
}

/* Item list */
.pt-header__tool-item--cart .block-minicart .minicart-items-wrapper,
.pt-minicart-dropdown .minicart-items-wrapper {
    max-height: 280px !important;
    overflow-y: auto !important;
    padding: 8px 0 !important;
}

/* Each product row */
.pt-header__tool-item--cart .block-minicart .product-item,
.pt-minicart-dropdown .product-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Product image: 60px × 60px */
.pt-header__tool-item--cart .block-minicart .product-item-photo,
.pt-minicart-dropdown .product-item-photo {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
}

.pt-header__tool-item--cart .block-minicart .product-image-photo,
.pt-minicart-dropdown .product-image-photo {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
}

/* Product details column */
.pt-header__tool-item--cart .block-minicart .product-item-details,
.pt-minicart-dropdown .product-item-details {
    flex: 1 !important;
    min-width: 0 !important;
}

.pt-header__tool-item--cart .block-minicart .product-item-name,
.pt-minicart-dropdown .product-item-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: Poppins, sans-serif !important;
    color: #222529 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 4px !important;
}

.pt-header__tool-item--cart .block-minicart .product-item-name a,
.pt-minicart-dropdown .product-item-name a {
    color: #222529 !important;
    text-decoration: none !important;
}

.pt-header__tool-item--cart .block-minicart .product-item-name a:hover,
.pt-minicart-dropdown .product-item-name a:hover {
    color: var(--pt-primary, #0088cc) !important;
}

/* Qty × price */
.pt-header__tool-item--cart .block-minicart .details-qty,
.pt-minicart-dropdown .details-qty {
    font-size: 12px !important;
    color: #777 !important;
    margin-bottom: 2px !important;
}

.pt-header__tool-item--cart .block-minicart .price-container .price,
.pt-minicart-dropdown .price-container .price {
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: Poppins, sans-serif !important;
    color: #222529 !important;
}

/* Remove (✕) button */
.pt-header__tool-item--cart .block-minicart .action.delete,
.pt-minicart-dropdown .action.delete {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    color: #aaa !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.pt-header__tool-item--cart .block-minicart .action.delete:hover,
.pt-minicart-dropdown .action.delete:hover {
    color: #222529 !important;
}

/* Subtotal row */
.pt-header__tool-item--cart .block-minicart .subtotal,
.pt-minicart-dropdown .subtotal {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border-top: 1px solid #e7e7e7 !important;
    font-size: 13px !important;
    font-family: Poppins, sans-serif !important;
}

.pt-header__tool-item--cart .block-minicart .subtotal .label,
.pt-minicart-dropdown .subtotal .label {
    font-weight: 600 !important;
    color: #222529 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}

.pt-header__tool-item--cart .block-minicart .subtotal .price,
.pt-minicart-dropdown .subtotal .price {
    font-weight: 700 !important;
    color: #222529 !important;
    font-size: 14px !important;
}

/* Actions area */
.pt-header__tool-item--cart .block-minicart .actions,
.pt-minicart-dropdown .actions {
    padding: 12px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Black "Go to Checkout" CTA */
.pt-header__tool-item--cart .block-minicart .action.primary.checkout,
.pt-minicart-dropdown .action.primary.checkout {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: #222529 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: Poppins, sans-serif !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.pt-header__tool-item--cart .block-minicart .action.primary.checkout:hover,
.pt-minicart-dropdown .action.primary.checkout:hover {
    background: #0088cc !important;
}

/* "View Cart" secondary link */
.pt-header__tool-item--cart .block-minicart .action.viewcart,
.pt-minicart-dropdown .action.viewcart {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    font-family: Poppins, sans-serif !important;
    color: #777 !important;
    text-decoration: none !important;
}

.pt-header__tool-item--cart .block-minicart .action.viewcart:hover,
.pt-minicart-dropdown .action.viewcart:hover {
    color: #222529 !important;
    text-decoration: underline !important;
}

/* Empty cart message */
.pt-header__tool-item--cart .block-minicart .subtitle.empty,
.pt-minicart-dropdown .subtitle.empty {
    padding: 24px 16px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #777 !important;
    font-family: Poppins, sans-serif !important;
}

/* --- Mobile: minicart trigger always visible, panel full-width on xs --- */
@media (max-width: 767px) {
    .pt-minicart-dropdown,
    .pt-header__tool-item--cart .block-minicart {
        right: -8px !important;
        width: 290px !important;
    }
}

/* === END PORTO-V2-P1-03 === */

/* ===================================================================
   PORTO-V2-P1-02 — Homepage Left Sidebar
   Styles for TOP CATEGORIES widget + HUGE SALE CTA banner rendered
   inside sidebar.main on cms_index_index (homepage only).
   Mobile (<992px): sidebar stacks below main content, matching Porto Demo 1.
=================================================================== */

/* --- Sidebar widget wrapper --- */
.pt-homepage .sidebar-main,
.cms-index-index .sidebar-main {
    padding-right: 0;
}

.pt-home-sidebar-widget {
    margin-bottom: 20px;
}

/* --- TOP CATEGORIES heading --- */
.pt-home-top-categories .pt-home-sidebar-widget__heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pt-text-dark, #222529);
    padding: 0 0 10px;
    margin: 0 0 5px;
    border-bottom: 2px solid var(--pt-primary, #0088cc);
}

/* --- Category list --- */
.pt-home-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pt-home-category-list__item {
    border-bottom: 1px solid var(--pt-border-light, #e8e8e8);
}

.pt-home-category-list__item:last-child {
    border-bottom: 0;
}

.pt-home-category-list__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px 10px 0;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: color 0.15s ease;
}

.pt-home-category-list__link:hover,
.pt-home-category-list__link:focus {
    color: var(--pt-primary, #0088cc);
    text-decoration: none;
}

.pt-home-category-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    color: var(--pt-primary, #0088cc);
}

.pt-home-category-list__name {
    flex: 1;
}

/* --- HUGE SALE CTA banner --- */
.pt-home-huge-sale {
    margin-top: 20px;
}

.pt-home-huge-sale__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    background: #222529;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.15s ease;
}

.pt-home-huge-sale__link:hover,
.pt-home-huge-sale__link:focus {
    background: #333840;
    color: #fff;
    text-decoration: none;
}

.pt-home-huge-sale__label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pt-home-huge-sale__discount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.pt-home-huge-sale__upto {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.85;
}

.pt-home-huge-sale__pct {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.pt-home-huge-sale__pct sup {
    font-size: 20px;
    font-weight: 700;
    vertical-align: super;
}

.pt-home-huge-sale__off {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    align-self: flex-end;
    padding-bottom: 4px;
}

.pt-home-huge-sale__cta {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
    border-top: 1px solid rgba(255,255,255,0.3);
    padding-top: 8px;
    width: 100%;
    text-align: center;
}

/* --- Mobile: sidebar stacks below main (matches Porto Demo 1 at <992px) --- */
@media (max-width: 991px) {
    .cms-index-index .sidebar-main {
        display: none;
    }
}

/* === END PORTO-V2-P1-02 === */

/* =============================================================
   PORTO-V2-P1-01 — Homepage main column: banner grid + brand logos
   ============================================================= */

/* --- Banner grid: image-based promo tiles (Porto Demo 2 style) --- */
.porto-banner-grid {
    margin-bottom: 20px;
}

/* Row = flex container, 10px gap between tiles */
.pt-banner-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 10px;
}

.pt-banner-row:last-child {
    margin-bottom: 0;
}

/* Column width variants */
.pt-banner-col {
    flex: 0 0 auto;
    min-width: 0;
}

.pt-banner-col--25 {
    width: calc(25% - 5px);
}

.pt-banner-col--50 {
    width: calc(50% - 5px);
}

/* The anchor tile itself */
.pt-banner-box {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    min-height: 280px;
    padding: 0;
    text-decoration: none;
    color: #222;
    background-color: #eee;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    position: relative;
    transition: opacity 0.2s;
}

.pt-banner-box:hover {
    opacity: 0.92;
    text-decoration: none;
    color: inherit;
}

/* Per-tile fallback background colors (shown while image loads) */
.pt-banner-box--watches    { background-color: #f6f7f9; }
.pt-banner-box--electronics { background-color: #1a2533; }
.pt-banner-box--flash      { background-color: #2a2a2a; }
.pt-banner-box--trending   { background-color: #dae0e4; }
.pt-banner-box--shoes      { background-color: #e8e3e1; }
.pt-banner-box--collection { background-color: #f6f7f9; }

/* Content overlay positioned inside the tile */
.pt-banner-box__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.5em;
    display: flex;
    flex-direction: column;
}

.pt-banner-box__content--right {
    align-items: flex-end;
    text-align: right;
}

.pt-banner-box__content--left {
    align-items: flex-start;
    text-align: left;
}

.pt-banner-box__content--center {
    align-items: center;
    text-align: center;
}

.pt-banner-box__content--top {
    align-self: flex-start;
    margin-top: auto;
}

/* Circular percentage badge (40% OFF) */
.pt-sale-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #222529;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5em;
}

.pt-sale-circle sup {
    font-size: 45%;
    line-height: 1;
    top: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.pt-sale-circle small {
    display: block;
    font-size: 10px;
    opacity: 0.5;
    font-weight: 400;
    letter-spacing: -0.025em;
}

/* Price display */
.pt-banner-old-price {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    margin: 0 0 2px;
    line-height: 1;
}

.pt-banner-price {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 4px;
    line-height: 1;
}

.pt-banner-category {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    margin: 0;
    line-height: 1;
}

/* Large headline for dark-bg tiles (Electronic Deals) */
.pt-banner-heading {
    font-size: 2.6em;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 0.5em;
}

/* Dark-background tile heading */
.pt-banner-heading-dark {
    font-size: 1.8em;
    line-height: 1.1;
    font-weight: 700;
    color: #222;
    margin: 0 0 0.4em;
}

/* Coupon label strip */
.pt-coupon-label {
    display: block;
    background: #fff;
    color: #222;
    font-size: 1.2em;
    font-weight: 700;
    padding: 6px 10px;
    margin-bottom: 4px;
    text-align: right;
}

.pt-coupon-discount {
    display: block;
    background: #e8e3e1;
    color: #222;
    font-size: 1.1em;
    font-weight: 700;
    padding: 6px 10px;
    margin-bottom: 1em;
    position: relative;
}

.pt-coupon-discount strong {
    font-size: 1.2em;
}

/* Flash sale text */
.pt-banner-subtitle-accent {
    font-size: 16px;
    line-height: 1;
    color: #08c;
    text-transform: uppercase;
    margin: 0 0 4px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.pt-banner-subtitle {
    font-size: 14px;
    color: #999;
    line-height: 1.25;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.pt-banner-starting {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 1em;
    letter-spacing: -0.02em;
}

.pt-banner-starting sup {
    font-size: 60%;
    top: -0.3em;
}

/* Starting at for dark text tiles */
.pt-banner-starting-accent {
    font-size: 13px;
    font-weight: 600;
    color: #08c;
    text-transform: uppercase;
    margin: 0 0 0.8em;
}

/* Shoes big discount */
.pt-banner-big-discount {
    font-size: 3em;
    font-weight: 700;
    text-transform: uppercase;
    color: #222;
    margin: 0 0 0.5em;
    line-height: 1;
}

/* CTA button wrapper */
.pt-banner-cta {
    margin-top: 4px;
}

.pt-banner-cta--bottom {
    position: absolute;
    bottom: 1.5em;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0 1em;
}

/* Amazing Collection tile typography */
.pt-collection-tag {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 4px;
    border-top: 1px solid #e0e2e4;
    border-bottom: 1px solid #e0e2e4;
    padding: 4px 0;
}

.pt-collection-title {
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    color: #222;
    margin: 8px 0;
}

.pt-collection-divider {
    width: 40px;
    border: none;
    border-top: 1px solid #e0e2e4;
    margin: 4px auto 8px;
}

.pt-collection-subtitle {
    font-size: 11px;
    color: rgba(34,37,41,0.7);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 3em;
}

/* Responsive: stack to single column on mobile */
@media (max-width: 767px) {
    .pt-banner-row {
        flex-wrap: wrap;
    }

    .pt-banner-col--25,
    .pt-banner-col--50 {
        width: 100%;
    }

    .pt-banner-box {
        min-height: 220px;
    }
}

/* --- Brand logos row (5 placeholder slots) --- */
.porto-brand {
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.pt-brand-logos {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
}

.pt-brand-logo {
    flex: 0 0 auto;
    padding: 10px 15px;
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.pt-brand-logo:hover {
    opacity: 1;
}

.pt-brand-logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

@media (max-width: 767px) {
    .pt-brand-logos {
        justify-content: center;
    }
}

/* === END PORTO-V2-P1-01 === */

/* ===================================================================
   PORTO-V2-P1-09 — About Us: WHO WE ARE hero + counters + timeline
   =================================================================== */

/* ── WHO WE ARE hero ───────────────────────────────────────────── */
.who-we-are {
    background: #f4f4f4 url('../images/demo1/about/hero-collage.jpg') center / cover no-repeat;
    padding: 100px 20px;
    text-align: center;
    margin-bottom: 0;
    position: relative;
}
.who-we-are::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
}
.who-we-are__inner {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
}
.who-we-are__heading {
    font-size: 42px;
    font-weight: 800;
    color: #222529;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.who-we-are__subheading {
    font-size: 18px;
    font-weight: 400;
    color: #0088cc;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px;
}
.who-we-are__body {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

/* ── Stat counters ─────────────────────────────────────────────── */
.about-counters {
    background: #222529;
    padding: 50px 20px;
}
.about-counters__row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.about-counters__item {
    flex: 1 1 160px;
    text-align: center;
    padding: 20px 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.about-counters__item:last-child {
    border-right: none;
}
.stat-counter {
    font-size: 48px;
    font-weight: 800;
    color: #0088cc;
    line-height: 1;
    margin-bottom: 8px;
}
.about-counters__label {
    font-size: 13px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 640px) {
    .about-counters__item {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .about-counters__item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    .about-counters__item:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* ── OUR HISTORY vertical timeline ────────────────────────────── */
.our-history {
    padding: 80px 20px;
    background: #fff;
}
.our-history__title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #222529;
    margin: 0 0 60px;
}
.our-history__timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.our-history__timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e1e1e1;
    transform: translateX(-50%);
}
.our-history__item {
    display: flex;
    width: 100%;
    margin-bottom: 50px;
}
.our-history__item--left {
    justify-content: flex-start;
    padding-right: calc(50% + 40px);
}
.our-history__item--right {
    justify-content: flex-end;
    padding-left: calc(50% + 40px);
}
.our-history__content {
    background: #f9f9f9;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 24px 28px;
    position: relative;
    width: 100%;
}
.our-history__item--left .our-history__content::after,
.our-history__item--right .our-history__content::after {
    content: '';
    position: absolute;
    top: 24px;
    width: 14px;
    height: 14px;
    background: #0088cc;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #0088cc;
}
.our-history__item--left .our-history__content::after {
    right: -47px;
}
.our-history__item--right .our-history__content::after {
    left: -47px;
}
.our-history__year {
    display: inline-block;
    background: #0088cc;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 2px;
    margin-bottom: 8px;
}
.our-history__event {
    font-size: 16px;
    font-weight: 700;
    color: #222529;
    margin: 0 0 8px;
}
.our-history__content p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .our-history__timeline::before {
        left: 20px;
    }
    .our-history__item--left,
    .our-history__item--right {
        justify-content: flex-end;
        padding-left: 60px;
        padding-right: 0;
    }
    .our-history__item--left .our-history__content::after,
    .our-history__item--right .our-history__content::after {
        left: -47px;
        right: auto;
    }
}

/* === PORTO-V2-P1-15 FOOTER POLISH === */

/* 1. Hide the separate light-gray newsletter top band (now inside footer-middle dark section).
      The pt-footer-top block is no longer injected via layout; this rule guards against
      any cached layout that still renders it. */
body .pt-footer-top {
    display: none !important;
}

/* 2. Hide footer-ribbon element — not in Porto V2 original. */
body .footer-ribbon {
    display: none !important;
}

/* 3. Remove padding-top offset that was added to accommodate the ribbon. */
body .pt-footer-middle {
    padding-top: 0 !important;
    position: static !important;
}
body .pt-footer-middle .pt-footer-middle__row {
    padding-top: 30px !important;
    padding-bottom: 10px !important;
}

/* 4. Newsletter band inside footer-middle dark section */
.pt-footer-middle__newsletter-band {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 0;
}

.pt-footer-middle__newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pt-footer-middle__newsletter-text {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.pt-footer-middle__newsletter-icon {
    flex-shrink: 0;
    color: var(--pt-primary, #08c);
}

.pt-footer-middle__newsletter-form {
    flex: 1;
    max-width: 500px;
}

.pt-footer-middle__newsletter-fields {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--pt-radius-sm, 2px);
    overflow: hidden;
}

body .pt-footer-middle__newsletter-fields .pt-footer-middle__newsletter-input,
body input.pt-footer-middle__newsletter-input[type="email"],
body input.pt-footer-middle__newsletter-input {
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    height: 46px !important;
    padding: 0 15px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

.pt-footer-middle__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.pt-footer-middle__newsletter-input:focus,
.pt-footer-middle__newsletter-input:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.12) !important;
}

.pt-footer-middle__newsletter-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 46px;
    padding: 0 22px;
    background: var(--pt-primary, #08c);
    color: #ffffff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--pt-transition, 0.3s ease);
    white-space: nowrap;
}

.pt-footer-middle__newsletter-btn:hover,
.pt-footer-middle__newsletter-btn:focus {
    background: #0073aa;
    color: #ffffff;
}

/* 5. CONTACT INFO subheadings (ADDRESS / PHONE / EMAIL / WORKING DAYS) — white, not gray */
.pt-footer-middle__contact-label {
    color: #ffffff !important;
    font-weight: 600;
    margin-right: 4px;
}

/* 6. Footer column headings — uppercase + 700 (already set via override at line ~17944,
      but repeat here for specificity cascade clarity) */
body .pt-footer-middle__col > h3.pt-footer-middle__title {
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
}

/* 7. Newsletter band responsive */
@media (max-width: 991px) {
    .pt-footer-middle__newsletter-inner {
        flex-direction: column;
        text-align: center;
    }

    .pt-footer-middle__newsletter-form {
        max-width: 100%;
        width: 100%;
    }

    .pt-footer-middle__newsletter-text {
        white-space: normal;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .pt-footer-middle__newsletter-fields {
        flex-direction: column;
    }

    .pt-footer-middle__newsletter-btn {
        height: 44px;
    }
}

/* === END PORTO-V2-P1-15 FOOTER POLISH === */

/* === END PORTO-V2-P1-09 === */

/* ===================================================================
   PORTO-V2-V1 — Blue header: white icons, text, and cart trigger
   The main header background is #0088cc; every foreground element
   (icons, text, search border, cart trigger, minicart label) must be
   white so they remain readable on the coloured band.
   =================================================================== */

/* Cart trigger icon and label — override the dark-color !important rules */
html body .pt-header .pt-header__tool-item--cart .action.showcart,
html body .minicart-wrapper .action.showcart,
html body .pt-cart .action.showcart,
html body .pt-minicart {
    color: #ffffff !important;
}

html body .pt-header .pt-header__tool-item--cart .action.showcart svg,
html body .pt-header .pt-header__tool-item--cart svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

html body .pt-header .pt-minicart-trigger__label,
html body .pt-header .pt-header__tool-item--cart .pt-minicart-trigger__label {
    color: #ffffff !important;
}

/* Search bar — keep white background for readability on blue */
html body .pt-header .pt-header__search-inner {
    background: #ffffff !important;
}

/* === END PORTO-V2-V1 BLUE HEADER === */

/* ===============================================================
   PORTO-V2 FIX#2 — Homepage service/trust bar (Demo 2)
   Ported from Porto Demo 2: 3-column row below the hero slider.
   =============================================================== */
.pt-home-services {
    background: #ffffff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 28px 0;
    margin: 0;
}
.pt-home-services__row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
}
.pt-home-services__item {
    flex: 1 1 calc(33.333% - 24px);
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 220px;
}
.pt-home-services__icon {
    color: #222529;
    flex: 0 0 auto;
}
.pt-home-services__icon svg {
    display: block;
}
.pt-home-services__text {
    flex: 1 1 auto;
}
.pt-home-services__title {
    font-size: 11px;
    font-weight: 600;
    color: #777777;
    margin: 0 0 2px 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.pt-home-services__desc {
    font-size: 11px;
    font-weight: 400;
    color: #999999;
    margin: 0;
    line-height: 1.4;
}

/* ===============================================================
   PORTO-V2 ITER2 FIXES — clean rebuild after rebase corruption
   Iter2 issue: prior force-pushed rebases left git conflict markers
   inside porto.css which broke CSS parsing (depth +4) and made every
   rule after line 22482 inert. Reasserting all blocks here clean.
   =============================================================== */

/* FIX#3 — Kill ~310px white gap above footer on homepage */
.cms-index-index .page-main, .cms-home .page-main { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.cms-index-index .columns, .cms-home .columns { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.cms-index-index .column.main, .cms-home .column.main { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.cms-index-index .pt-homepage, .cms-home .pt-homepage { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* FIX#5 — Login width + cart Continue Shopping nowrap (covers <a> + <span>) */
body.customer-account-login .login-container { max-width: 1170px; margin: 0 auto; }
a.action.continue, a.action.continue.primary, a.action.continue span,
a.action.continue.primary span, .cart-empty a.action.continue,
.cart-empty a.action.continue span, button.action.continue, button.action.continue span {
    white-space: nowrap !important;
}
a.action.continue.primary, .cart-empty a.action.continue {
    min-width: 220px !important; padding-left: 24px !important; padding-right: 24px !important;
}

/* FIX#9 — Category sidebar moved to RIGHT (high specificity to beat styles-l) */
@media (min-width: 768px) {
    html body.catalog-category-view.page-layout-2columns-left .columns {
        display: flex !important; flex-direction: row !important;
    }
    html body.catalog-category-view.page-layout-2columns-left .columns .column.main {
        order: 1 !important; flex: 1 1 auto !important; width: auto !important; float: none !important; padding-right: 30px;
    }
    html body.catalog-category-view.page-layout-2columns-left .columns .sidebar-main {
        order: 2 !important; flex: 0 0 280px !important; width: 280px !important; float: none !important; padding: 0 !important;
    }
}

/* FIX#11 — PDP Fotorama thumbnails strip visible (multi-image only) */
.catalog-product-view .fotorama[data-nav="thumbs"] .fotorama__nav-wrap,
.catalog-product-view .fotorama[data-nav="thumbs"] .fotorama__nav { display: block !important; visibility: visible !important; opacity: 1 !important; }

/* FIX#12 — PDP Add to Cart text label restored */
.product-info-main .box-tocart .action.tocart, .product-info-main button#product-addtocart-button {
    font-size: 14px !important; text-indent: 0 !important; padding: 14px 30px !important;
}
.product-info-main .box-tocart .action.tocart span, .product-info-main button#product-addtocart-button span {
    display: inline-block !important; font-size: 14px !important; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff !important; text-indent: 0 !important;
}
.product-info-main .box-tocart .action.tocart:not(.loading)::before,
.product-info-main button#product-addtocart-button:not(.loading)::before,
.product-info-main .box-tocart .action.tocart > svg.pt-cart-icon,
.product-info-main button#product-addtocart-button > svg.pt-cart-icon { display: none !important; }

/* FIX#13 — Cart summary + checkout btn */
.checkout-cart-index .cart-summary { background: #ffffff !important; border: 1px solid #ececec; padding: 20px; }
.checkout-cart-index .cart-summary > .summary.title, .checkout-cart-index .cart-summary > strong.summary.title {
    font-size: 16px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding-bottom: 12px; border-bottom: 1px solid #ececec;
}
.checkout-cart-index .cart-summary .grand.totals .amount { font-size: 22px !important; font-weight: 700 !important; }
.checkout-cart-index .cart-summary .grand.totals .mark { font-size: 16px !important; font-weight: 600; }
.checkout-cart-index button.action.checkout.primary, .checkout-cart-index button.action.primary.checkout {
    background: #222529 !important; border-color: #222529 !important; color: #ffffff !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 20px;
}
.checkout-cart-index button.action.checkout.primary:hover, .checkout-cart-index button.action.primary.checkout:hover {
    background: #0088cc !important; border-color: #0088cc !important;
}
.checkout-cart-index .cart-discount .content { display: block !important; }

/* FIX#14 — Checkout input bg + UPPERCASE summary */
.checkout-index-index button.action.primary.continue, .checkout-index-index button.action.primary.checkout {
    background: #0088cc !important; border-color: #0088cc !important; color: #ffffff !important;
}
.checkout-index-index .form input[type="text"], .checkout-index-index .form input[type="email"],
.checkout-index-index .form input[type="tel"], .checkout-index-index .form select { background-color: transparent !important; }
.checkout-index-index .opc-block-summary > .title, .checkout-index-index .opc-progress-bar-item > span {
    text-transform: uppercase !important; letter-spacing: 0.04em; font-weight: 700;
}

/* FIX#15 — Login pill inputs + Create Account 2-col */
body.customer-account-login .login-container input[type="email"],
body.customer-account-login .login-container input[type="password"],
body.customer-account-login .login-container input[type="text"] {
    border-radius: 24px 0 0 24px !important; background: #f4f4f4 !important; border: 0 !important; padding: 10px 18px !important;
}
body.customer-account-create .form-create-account { max-width: 1170px; margin: 0 auto; }
body.customer-account-create .form-create-account > .fieldset {
    display: inline-block; width: 49%; vertical-align: top; padding: 0 15px; box-sizing: border-box;
}
body.customer-account-create .form-create-account > .fieldset.info, body.customer-account-create .form-create-account > .fieldset.create.info { padding-left: 0; }
body.customer-account-create .form-create-account > .fieldset.account, body.customer-account-create .form-create-account > .fieldset.create.account { padding-right: 0; }
body.customer-account-create .form-create-account .actions-toolbar { clear: both; padding-top: 20px; }
@media (max-width: 767px) {
    body.customer-account-create .form-create-account > .fieldset { display: block; width: 100%; padding: 0; }
}

/* FIX#16 — Contact Maps full-width band */
body.contact-index-index .pt-contact-map, body.contact-index-index .contact-map, body.contact-index-index #contact-map,
body.contact-index-index iframe[src*="maps.google"], body.contact-index-index iframe[src*="google.com/maps"] {
    display: block !important; width: 100% !important; max-width: 100% !important; height: 330px !important; margin: 0 0 40px 0 !important; border: 0;
}

/* FIX#17 — Footer UPPERCASE 700 + contact labels white */
.page-footer .pt-footer-widget__title, .page-footer .pt-footer__heading, .page-footer .footer-column-heading,
.page-footer h4, .page-footer h3 { text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: 0.02em; }
.page-footer .pt-footer-contact strong, .page-footer .pt-footer-contact dt, .page-footer .pt-contact-info strong { color: #ffffff !important; }
.page-footer .pt-footer-widget a { font-weight: 400; }

/* FIX#19 — 404 document icon (R23: blank-page SVG matching reference — lines removed) */
.cms-no-route .page-title-wrapper .page-title, body.cms-no-route h1.page-title {
    display: flex; align-items: center; justify-content: center; gap: 24px;
}
.cms-no-route .page-title-wrapper .page-title::after {
    content: ""; display: inline-block; width: 88px; height: 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 100' fill='none' stroke='%23222529' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M14 6h44l20 20v64a6 6 0 0 1-6 6H14a6 6 0 0 1-6-6V12a6 6 0 0 1 6-6z'/><polyline points='58,6 58,26 78,26'/></svg>");
    background-repeat: no-repeat; background-size: contain; flex: 0 0 auto;
}

/* FIX#20 REVERTED (iter5-final) — was hiding the legitimate BUY PORTO! item
   because the .pt-nav__item--highlight class is shared with the GET STARTED
   CTA that no longer exists in the topmenu template (item #8 = BUY PORTO!).
   Hiding GET STARTED is now a no-op since it isn't rendered. */

/* FIX#9c — sidebar still wraps below main because main column ignores
   flex-shrink due to default min-width:auto. Force nowrap + min-width:0. */
@media (min-width: 768px) {
    html body.catalog-category-view.page-layout-2columns-left .columns {
        flex-wrap: nowrap !important;
    }
    html body.catalog-category-view.page-layout-2columns-left .columns .column.main {
        min-width: 0 !important;
        max-width: calc(100% - 310px) !important;
    }
}

/* =====================================================================
 * ITER3 PLP + PDP gap fixes — 2026-04-25
 * Closes gaps identified in porto-v2-compare/reaudit2/ audit.
 * ===================================================================== */

/* --- ITER3-CAT-01: Sidebar width 295px (was 280px) ---
 * Original Demo 2 sidebar measured at 295px.
 * --pt-sidebar-width is set to 280px in :root; override here for
 * category and product pages only to avoid touching global var. */
.pt-category-page .sidebar.sidebar-main,
body.catalog-category-view .sidebar.sidebar-main {
    width: 295px !important;
    min-width: 295px !important;
    flex: 0 0 295px !important;
}

/* --- ITER3-CAT-01b: column.main takes remaining width after 295px sidebar ---
 * Without this, the main column may not shrink correctly on 2-col layouts
 * and leaves a visual gap between sidebar and product grid. */
body.catalog-category-view .column.main {
    width: calc(100% - 295px) !important;
}

/* --- ITER3-CAT-02: Remove promo-banners section visibility ---
 * The promo-banners block is no longer registered in the layout XML,
 * but guard with display:none in case any cached layout still outputs it. */
.pt-category-promo-banners {
    display: none !important;
}

/* --- ITER3-PDP-01: Breadcrumb separator — > not / ---
 * Multiple prior rules set content: "/" — this final rule wins via
 * higher specificity and !important. Scoped to catalog pages only to
 * avoid stomping CMS/checkout breadcrumbs. */
.pt-category-page .breadcrumbs .item:not(:last-child)::after,
.pt-product-page .breadcrumbs .item:not(:last-child)::after,
body.catalog-category-view .breadcrumbs .item:not(:last-child)::after,
body.catalog-product-view .breadcrumbs .item:not(:last-child)::after {
    content: "\003E" !important; /* > */
    margin: 0 8px !important;
    font-size: 12px !important;
    color: rgb(142, 142, 142) !important;
    font-weight: 400 !important;
}

/* --- ITER3-PDP-02: Stock label — sentence case, not uppercase ---
 * Multiple prior rules apply text-transform:uppercase to .stock.available.
 * Porto Demo 2 shows "In stock" (Magento default, no text-transform).
 * Use maximum specificity to win over the earlier !important declarations. */
html body.catalog-product-view .product-info-main .stock.available,
html body.catalog-product-view .product-info-main .stock.available span,
html body.pt-product-page .product-info-main .stock.available,
html body.pt-product-page .product-info-main .stock.available span,
html body.catalog-product-view .product-info-stock-sku .stock,
html body.catalog-product-view .product-info-stock-sku .stock.available span,
html body.pt-product-page .product-info-stock-sku .stock,
html body.pt-product-page .product-info-stock-sku .stock.available span {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: rgb(34, 37, 41) !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* --- ITER3-PDP-03: Hide prev/next navigation ---
 * The pt-product-prev-next block is no longer registered in layout XML.
 * Guard with display:none in case cached layout still emits the markup. */
.pt-product-prev-next {
    display: none !important;
}

/* --- ITER3-CAT-03: Add to Cart button on grid card — Porto style ---
 * Pixel audit 2026-05-04: reference Demo 1 card ATC is white bg with
 * 1px solid rgb(221,221,221) gray border and dark text (not blue).
 * Blue on hover. */
.pt-product-card .product-item-actions .tocart.pt-btn--primary {
    width: auto !important;
    height: auto !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #dddddd !important;
    color: #333 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pt-product-card .product-item-actions .tocart.pt-btn--primary:hover {
    background: #0088cc !important;
    background-color: #0088cc !important;
    background-image: none !important;
    border-color: #0088cc !important;
    color: #fff !important;
}
/* ===================================================================
   iter3 gap fixes — Cart / Login / Account / About / 404
   =================================================================== */

/* FIX-ITER3-01: Login form — single-column centred when new-customers
   block is hidden. Porto Demo 2 shows only the Registered Customers form
   centred at full container width, not squeezed into the left half of a
   2-column grid. */
.pt-login-page.pt-login-page--single-col .login-container,
body.customer-account-login.pt-login-page--single-col .login-container {
    display: block !important;
    max-width: 600px !important;
    margin: 40px auto 60px !important;
}

.pt-login-page.pt-login-page--single-col .block-customer-login,
body.customer-account-login.pt-login-page--single-col .block-customer-login {
    padding: 0 !important;
}

.pt-login-page.pt-login-page--single-col .field .control input,
body.customer-account-login.pt-login-page--single-col .field .control input {
    width: 100% !important;
}

/* FIX-ITER3-02: Login/Register block-title — remove the short purple
   underline bar. The original Porto Demo 2 heading has a plain horizontal
   rule (border-bottom) without the coloured accent bar. */
.pt-login-page .block-customer-login .block-title::after,
.pt-login-page .block-new-customer .block-title::after,
body.customer-account-login .block-customer-login .block-title::after,
body.customer-account-login .block-new-customer .block-title::after {
    display: none !important;
}

.pt-register-page .form.create.account .legend::after,
body.customer-account-create .form.create.account .legend::after {
    display: none !important;
}

/* FIX-ITER3-03: Empty-cart "Continue Shopping" button — prevent text
   from wrapping to two lines (CONTINUE / SHOPPING). */
.pt-cart-page .cart-empty .action.continue span,
body.checkout-cart-index .cart-empty .action.continue span {
    white-space: nowrap;
}

.pt-cart-page .cart-empty .action.continue,
body.checkout-cart-index .cart-empty .action.continue {
    white-space: nowrap;
}

/* FIX-ITER3-04: 404 page numeral colour — original Porto Demo 2 renders
   "404" in medium dark grey (~#555), not in the purple/violet primary
   colour. Reset to neutral dark grey for visual parity. */
.pt-page-404 .pt-404-number,
body.cms-no-route .pt-404-number,
body.cms-noroute-index .pt-404-number {
    color: #555555 !important;
    font-size: clamp(5rem, 12vw, 9rem) !important;
    font-weight: 700 !important;
}
/* === ITER3 GAP FIXES (2026-04-25) === */

/* [7] Service bar (trust badges) — 3-column row below the promo banner grid.
   The template trust-badges.phtml uses .pt-trust-badges classes which differ
   from the older .pt-trustbar classes already in this file. */
.pt-trust-badges {
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding: 20px 0;
    background: #fff;
}
.pt-trust-badges__grid {
    display: flex;
    align-items: stretch;
}
.pt-trust-badges__item {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    padding: 12px 20px;
}
.pt-trust-badges__item + .pt-trust-badges__item {
    border-left: 1px solid #e8e8e8;
}
.pt-trust-badges__icon {
    flex-shrink: 0;
    color: #08c;
}
.pt-trust-badges__icon svg {
    display: block;
}
.pt-trust-badges__text h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 4px;
    color: #222529;
    letter-spacing: 0.03em;
}
.pt-trust-badges__text p {
    font-size: 12px;
    color: #777;
    margin: 0;
}
@media (max-width: 767px) {
    .pt-trust-badges__grid {
        flex-direction: column;
    }
    .pt-trust-badges__item + .pt-trust-badges__item {
        border-left: none;
        border-top: 1px solid #e8e8e8;
    }
}

/* [6] Sidebar "HUGE SALE 70% OFF" button must be dark/black, not red.
   Override the #cc1111 background set in the .pt-home-huge-sale__link block. */
html body .pt-home-huge-sale__link {
    background: #222529 !important;
}
html body .pt-home-huge-sale__link:hover,
html body .pt-home-huge-sale__link:focus {
    background: #111316 !important;
}

/* [11] Remove the large empty white gap between the brands row and footer.
   The .porto-brand wrapper has margin: 20px 0 which stacks up with padding on
   .column.main. Force the bottom margin to 0 on homepage. */
html body.cms-index-index .porto-brand,
html body.cms-index-index .porto-section.porto-brand {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
html body.cms-index-index .column.main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
html body.cms-index-index .page-main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
html body.cms-index-index .page-wrapper > .page-main {
    margin-bottom: 0 !important;
}
/* [11b] Also zero featured products section bottom margin/padding.
   The HP3 porto-section.products.product-grid has default padding from Porto base CSS. */
html body.cms-index-index .porto-section.products.product-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* [11c] Zero any bottom margin on the last child of column.main on homepage */
html body.cms-index-index .column.main > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* [11d] Ensure page-footer abuts the content with no top gap */
html body.cms-index-index .page-footer {
    margin-top: 0 !important;
}
html body.cms-index-index .page-wrapper {
    padding-bottom: 0 !important;
}

/* [4] Hide nav icons from all nav items. The original Porto Demo 2 nav does not
   show Simple-Line-Icons on top-level items. GET STARTED is already hidden via FIX#20. */
html body .pt-megamenu .pt-nav__list > .pt-nav__item > .pt-nav__link > i[class^="icon-"],
html body .pt-megamenu .pt-nav__list > .pt-nav__item > .pt-nav__link > i[class*=" icon-"] {
    display: none !important;
}

/* [1] Announcement bar layout — add flex support for left/right/center layout */
html body .pt-announcement-bar .pt-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
html body .pt-announcement-bar .pt-announcement-bar__left {
    font-size: 12px;
    color: #fff;
    opacity: 0.85;
    white-space: nowrap;
}
html body .pt-announcement-bar .pt-announcement-bar__text {
    flex: 1;
    text-align: center;
}
html body .pt-announcement-bar .pt-announcement-bar__right {
    font-size: 12px;
    color: #fff;
    opacity: 0.85;
    white-space: nowrap;
}

/* [2] Hide currency/language switchers from the topbar left side.
   The original Porto Demo 2 does not show them there — they appear in the
   topbar right. Keep them hidden on the left until a proper store-level
   switcher is configured. */
html body .pt-topbar__left {
    display: none !important;
}

/* [12] Footer middle — 4-column layout matching Porto Demo 2.
   Previously the grid was 3-col (About Us / Contact / Customer Service).
   Now: Contact Info | Subscribe Newsletter | Customer Service | About Us. */
html body .pt-footer-middle__row {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* "Get in touch" accent tab at the top of the dark footer section.
 * Reference: .footer-ribbon on m2.portotheme.com/demo1_en/
 * Span uses "Shadows Into Light" cursive (loaded via @import at top of file).
 * Font: 20px/400/normal — matches Porto Demo 1 exactly. */
.pt-footer-middle__get-in-touch {
    background-color: var(--pt-primary, #08c);
    display: inline-block;
    padding: 10px 20px 6px;
    margin-left: 0;
}
.pt-footer-middle__get-in-touch span {
    color: #fff;
    font-family: "Shadows Into Light", cursive;
    font-size: 20px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Newsletter description text inside column 2 */
.pt-footer-middle__newsletter-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Adjust grid gap for 4-col layout */
@media (max-width: 1199px) {
    html body .pt-footer-middle__row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 767px) {
    html body .pt-footer-middle__row {
        grid-template-columns: 1fr !important;
    }
}
/* === auth-pages iter4 === */
/* Gap fixes for authenticated customer account pages.
 * Identified in iter4 audit (2026-04-25). Scope: Magento_Customer, Magento_Sales,
 * Magento_Wishlist, Magento_Review, Magento_Newsletter, Magento_Downloadable, Magento_Vault.
 * DO NOT touch home/header/footer/category/PDP/cart/checkout/login/create selectors here.
 */

/* C-01: Account sidebar nav box — transparent bg/no-border bug.
 * Root cause: CSS at line 7738 targets .account-nav but DOM class is .block-collapsible-nav.
 * Fix: target the actual DOM class used by Magento_Customer nav block.
 */
body.pt-account-page .block-collapsible-nav,
body.account .block-collapsible-nav {
    background-color: #fff !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 0 !important;
}
body.pt-account-page .block-collapsible-nav .block-collapsible-nav-title,
body.account .block-collapsible-nav .block-collapsible-nav-title {
    display: none !important;
}
body.pt-account-page .block-collapsible-nav .nav.items,
body.account .block-collapsible-nav .nav.items {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body.pt-account-page .block-collapsible-nav .nav.item,
body.account .block-collapsible-nav .nav.item {
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
}
body.pt-account-page .block-collapsible-nav .nav.item a,
body.account .block-collapsible-nav .nav.item a,
body.pt-account-page .block-collapsible-nav .nav.item strong,
body.account .block-collapsible-nav .nav.item strong {
    display: block !important;
    padding: 8px 18px 8px 15px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #777 !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    line-height: 1.4 !important;
    transition: color 0.15s, background-color 0.15s !important;
}
body.pt-account-page .block-collapsible-nav .nav.item a:hover,
body.account .block-collapsible-nav .nav.item a:hover {
    color: #0088cc !important;
    background-color: #f7f7f7 !important;
}
body.pt-account-page .block-collapsible-nav .nav.item.current a,
body.account .block-collapsible-nav .nav.item.current a,
body.pt-account-page .block-collapsible-nav .nav.item.current strong,
body.account .block-collapsible-nav .nav.item.current strong {
    color: #0088cc !important;
    font-weight: 400 !important;
    border-left-color: #0088cc !important;
    background-color: transparent !important;
}
/* Separator items (empty) — hide the HR-like empty li separators */
body.pt-account-page .block-collapsible-nav .nav.item:empty,
body.account .block-collapsible-nav .nav.item:empty {
    border-bottom: 2px solid #e7e7e7 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 4px 0 !important;
}

/* C-02: Dashboard account info boxes side-by-side layout.
 * Original Porto Demo 2: Contact Information and Newsletters appear in 2 columns.
 * DOM: .block-dashboard-info .block-content contains .box.box-information + .box.box-newsletter.
 */
body.customer-account-index .block-dashboard-info .block-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
}
body.customer-account-index .block-dashboard-addresses .block-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
}
@media (max-width: 767px) {
    body.customer-account-index .block-dashboard-info .block-content,
    body.customer-account-index .block-dashboard-addresses .block-content {
        grid-template-columns: 1fr !important;
    }
}

/* M-01: Box styling — Contact Information and Newsletters boxes inside dashboard.
 * Give each box a clear bordered card appearance to match original.
 */
body.customer-account-index .block-dashboard-info .box,
body.customer-account-index .block-dashboard-addresses .box {
    border: 1px solid #e7e7e7 !important;
    padding: 20px !important;
    background: #fff !important;
}
body.customer-account-index .block-dashboard-info .box .box-title,
body.customer-account-index .block-dashboard-addresses .box .box-title {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #555 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
body.customer-account-index .block-dashboard-info .box .box-content,
body.customer-account-index .block-dashboard-addresses .box .box-content {
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.6 !important;
}
body.customer-account-index .block-dashboard-info .box .box-actions,
body.customer-account-index .block-dashboard-addresses .box .box-actions {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f0f0f0 !important;
}
body.customer-account-index .block-dashboard-info .box .box-actions a,
body.customer-account-index .block-dashboard-addresses .box .box-actions a {
    font-size: 13px !important;
    color: #0088cc !important;
    text-decoration: none !important;
    margin-right: 12px !important;
}
body.customer-account-index .block-dashboard-info .box .box-actions a:hover,
body.customer-account-index .block-dashboard-addresses .box .box-actions a:hover {
    color: #006ba8 !important;
    text-decoration: underline !important;
}

/* C-03: Page title banner — extend to missing auth pages.
 * Missing from existing rule at line 16842: review, newsletter, downloadable, vault.
 * Body classes: review-customer-index, newsletter-manage-index,
 *               downloadable-customer-products, vault-cards-listaction.
 */
body.review-customer-index .page-title-wrapper,
body.newsletter-manage-index .page-title-wrapper,
body.downloadable-customer-products .page-title-wrapper,
body.vault-cards-listaction .page-title-wrapper {
    background-color: rgb(244, 244, 244) !important;
    padding: 60px 0 !important;
    margin: 0 0 30px !important;
    text-align: center !important;
}
body.review-customer-index .page-title-wrapper > .page-title,
body.newsletter-manage-index .page-title-wrapper > .page-title,
body.downloadable-customer-products .page-title-wrapper > .page-title,
body.vault-cards-listaction .page-title-wrapper > .page-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    padding: 0 15px !important;
}

/* M-05: Newsletter Subscription SAVE button — Porto dark button style. */
body.newsletter-manage-index .action.save,
body.newsletter-manage-index .action.primary,
body.newsletter-manage-index .actions-toolbar .action.save,
body.newsletter-manage-index .actions-toolbar .action.primary {
    background: rgb(34, 37, 41) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 13px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
}
body.newsletter-manage-index .action.save:hover,
body.newsletter-manage-index .action.primary:hover,
body.newsletter-manage-index .actions-toolbar .action.save:hover,
body.newsletter-manage-index .actions-toolbar .action.primary:hover {
    background: #0088cc !important;
}

/* Account edit SAVE button */
body.customer-account-edit .action.save,
body.customer-account-edit .action.primary,
body.customer-account-edit .actions-toolbar .action.save,
body.customer-account-edit .actions-toolbar .action.primary {
    background: rgb(34, 37, 41) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 13px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
}
body.customer-account-edit .action.save:hover,
body.customer-account-edit .action.primary:hover,
body.customer-account-edit .actions-toolbar .action.save:hover,
body.customer-account-edit .actions-toolbar .action.primary:hover {
    background: #0088cc !important;
}

/* Address book form SAVE ADDRESS button (new + edit) */
body.customer-address-form .action.save,
body.customer-address-form .action.primary,
body.customer-address-form .actions-toolbar .action.save,
body.customer-address-form .actions-toolbar .action.primary {
    background: rgb(34, 37, 41) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 13px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
}
body.customer-address-form .action.save:hover,
body.customer-address-form .action.primary:hover,
body.customer-address-form .actions-toolbar .action.save:hover,
body.customer-address-form .actions-toolbar .action.primary:hover {
    background: #0088cc !important;
}

/* High-specificity overrides for account-page SAVE buttons.
 * "html body button.action.primary:not(.tocart):not(.add-to-cart)" at line ~20019
 * has specificity (0,4,3). These rules use the same (0,4,3) specificity and
 * appear LATER in the file, so they win the cascade for account save buttons. */
html body.newsletter-manage-index button.action.save.primary,
html body.newsletter-manage-index button.action.save,
html body.newsletter-manage-index button.action.primary {
    background: rgb(34, 37, 41) !important;
    background-image: none !important;
    border-color: rgb(34, 37, 41) !important;
    color: #fff !important;
}
html body.newsletter-manage-index button.action.save.primary:hover,
html body.newsletter-manage-index button.action.primary:hover {
    background: #0088cc !important;
    background-image: none !important;
    border-color: #0088cc !important;
}
html body.customer-account-edit button.action.save.primary,
html body.customer-account-edit button.action.save,
html body.customer-account-edit button.action.primary {
    background: rgb(34, 37, 41) !important;
    background-image: none !important;
    border-color: rgb(34, 37, 41) !important;
    color: #fff !important;
}
html body.customer-account-edit button.action.save.primary:hover,
html body.customer-account-edit button.action.primary:hover {
    background: #0088cc !important;
    background-image: none !important;
    border-color: #0088cc !important;
}
html body.customer-address-form button.action.save.primary,
html body.customer-address-form button.action.save,
html body.customer-address-form button.action.primary {
    background: rgb(34, 37, 41) !important;
    background-image: none !important;
    border-color: rgb(34, 37, 41) !important;
    color: #fff !important;
}
html body.customer-address-form button.action.save.primary:hover,
html body.customer-address-form button.action.primary:hover {
    background: #0088cc !important;
    background-image: none !important;
    border-color: #0088cc !important;
}

/* My Reviews, My Downloadable Products, Newsletter — empty state notice box.
 * The amber/yellow notice box already styled via Luma defaults, but ensure
 * it has the correct padding/margin to match the original.
 */
body.review-customer-index .message.notice,
body.newsletter-manage-index .message.notice,
body.downloadable-customer-products .message.notice,
body.wishlist-index-index .message.notice,
body.sales-order-history .message.notice {
    padding: 15px 20px !important;
    margin: 0 0 20px !important;
    background-color: #fdf0d5 !important;
    border-color: #f5c779 !important;
    color: #6d4c10 !important;
    font-size: 14px !important;
}

/* Breadcrumb on account pages — uppercase small text */
body.pt-account-page .breadcrumbs,
body.account .breadcrumbs {
    padding: 10px 0 !important;
    margin-bottom: 0 !important;
}
body.pt-account-page .breadcrumbs .item,
body.account .breadcrumbs .item {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #999 !important;
}

/* === end auth iter4 === */

/* === iter5-cycle1: pt-trust-badges — service icons below hero slider === */
/* Mirrors original Porto Demo 2 "home-bar" row with border + margin */
.pt-trust-badges {
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    margin: 20px 0;
    padding: 18px 0;
    background: #fff;
}
.pt-trust-badges .pt-container {
    max-width: var(--pt-max-width, 1200px);
    margin: 0 auto;
    padding: 0 15px;
}
.pt-trust-badges__grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.pt-trust-badges__item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 200px;
}
.pt-trust-badges__icon {
    flex-shrink: 0;
    color: #222529;
}
.pt-trust-badges__icon svg {
    width: 40px;
    height: 40px;
    stroke: #222529;
}
.pt-trust-badges__text h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222529;
    margin: 0 0 3px;
    letter-spacing: 0.03em;
}
.pt-trust-badges__text p {
    font-size: 12px;
    color: #777;
    margin: 0;
}

/* === iter5-cycle3: homepage visual parity fixes (2026-04-25) === */

/* C3-01: Trust badge bar — match original Porto Demo 2 gray bg, no border/margin.
   Override the white bg from iter3/iter5-c1 blocks above. */
.pt-trust-badges {
    background: #f5f5f5 !important;
    border-top: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 18px 0 !important;
}
.pt-trust-badges__item + .pt-trust-badges__item {
    border-left: none !important;
}

/* C3-02: Hero slide — cursive script title variant (Summer Sale) */
.pt-hero-slide__title--cursive {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 2.5rem;
    font-weight: 400;
    text-transform: none;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}
/* C3-03: Hero slide headline — large % OFF display text */
.pt-hero-slide__headline {
    font-size: 4.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
/* C3-04: Hero slide CTA row — inline price badge + dark button */
.pt-hero-slide__cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pt-hero-slide__starting {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.08em;
}
.pt-hero-slide__price-badge {
    background: #fff;
    color: #e53935;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 2px;
    line-height: 1.2;
}
.pt-hero-slide__price-badge sup {
    font-size: 0.7em;
    vertical-align: super;
}

/* === iter5-cycle4: slide 1 text color fix (white on blue bg) === */
/* The pt-hero-slide--dark modifier sets color:#fff but doesn't cover
   the new pt-hero-slide__headline and pt-hero-slide__cta-row classes */
.pt-hero-slide--dark .pt-hero-slide__headline {
    color: #fff;
}
.pt-hero-slide--dark .pt-hero-slide__starting {
    color: rgba(255,255,255,0.9);
}
.pt-hero-slide--dark .pt-hero-slide__title--cursive {
    color: #fff;
}

/* === iter5-final-compress: reduce homepage section gaps to match 2843px reference ===
   Pre-fix measured height: 3132px (incl. 245px popup in normal flow).
   After popup removed (dev-33a374e1): 2887px.
   Target: 2843px. Need to trim 44px from legitimate section gaps.
   Measurements taken at 1440x900 on test-protov2-01 (dev-3344d05).

   Gap analysis:
     page-main padding-top:       20px  → 10px  = −10px
     hero slider margin-bottom:   20px  → 10px  = −10px
     trust-badges padding (each): 18px  → 13px  = −10px (both top+bottom −5px each)
     banner-grid margin-bottom:   20px  → 10px  \
     products margin-top:         30px  → 16px  / margin-collapse: max(10,16)=16 vs 30 = −14px
   Total trimmed: 44px → 2887 − 44 = 2843px
*/

/* 1. Reduce page-main top padding on homepage (header→hero gap: 20px → 10px) */
html body.cms-index-index .page-main,
html body.cms-home .page-main {
    padding-top: 10px !important;
}

/* 2. Reduce hero slider bottom margin (hero→trust gap: 20px → 10px) */
html body.cms-index-index .swiper.pt-hero-slider,
html body.cms-home .swiper.pt-hero-slider {
    margin-bottom: 10px !important;
}

/* 3. Reduce trust badges vertical padding (service bar height: 128px → 108px) */
html body.cms-index-index .pt-trust-badges,
html body.cms-home .pt-trust-badges {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

/* 4. Reduce banner-grid bottom margin + products top margin
      (banner→products gap: 30px → 16px via margin collapse) */
html body.cms-index-index .porto-section.porto-banner-grid,
html body.cms-home .porto-section.porto-banner-grid {
    margin-bottom: 10px !important;
}
html body.cms-index-index .porto-section.products.product-grid,
html body.cms-home .porto-section.products.product-grid {
    margin-top: 16px !important;
}

/* === end iter5-final-compress === */

/* === iter6-cycle1 ===
   Three targeted fixes:
   1. Cursive font for Summer Sale hero title — original Porto Demo 2 uses "Segoe Script","Savoye LET".
      Our rule .pt-hero-slide__title--cursive { font-family: Georgia,...serif } is overridden by the
      higher-specificity "html body h2, ...html body .pt-hero-slide__title" rule that sets Plus Jakarta
      Sans. Adding html body prefix beats that rule.
   2. btn-dark global fix — banner grid .btn-dark buttons compute to rgb(242,242,242) (light) because
      the only existing .btn-dark rule is scoped to .porto-sidebar-sale. Porto V2 original has
      btn-dark = dark bg / white text everywhere.
   3. initialSlide:0 is set in cms_pages.json (same PR) so this note is informational.
*/

/* 1. Override high-specificity heading rule to restore cursive font on Summer Sale slide title */
html body .pt-hero-slide__title--cursive,
html body h2.pt-hero-slide__title--cursive {
    font-family: "Segoe Script", "Savoye LET", Georgia, cursive !important;
}

/* 2. Restore btn-dark dark appearance outside .porto-sidebar-sale context */
html body .btn.btn-dark,
html body button.btn-dark {
    background-color: #222529 !important;
    color: #fff !important;
    border-color: #222529 !important;
}
html body .btn.btn-dark:hover,
html body button.btn-dark:hover {
    background-color: #3a3f44 !important;
    border-color: #3a3f44 !important;
    color: #fff !important;
}

/* === end iter6-cycle1 === */

/* === iter7 ===
   Three architectural deltas closed:

   1. Header height +25px — The announcement bar (pt-announcement-bar) is not present in
      the original Porto V2 Demo 1 reference (original header = topbar+header+nav only).
      Hide it via display:none. With the bar gone (−40px) and --pt-header-height raised
      from 98px to 113px (+15px), net page-header = topbar(40) + header(113) + nav(48) = 201px ✓.

   2. Footer y +35px — cascades from #1; no separate fix needed.

   3. Hero x +63px — homepage sidebar floated at 16.6667% of 1160px columns container
      = 193px. Original Porto V2 Demo 1 sidebar = 257px (derived: hero x=420 − container
      left=140 − inner padding≈23 = 257px). Overriding with explicit 257px here.
*/

/* iter13 REVERT — actual Porto Demo 2 DOES have the announcement bar with
   "FREE RETURNS. STANDARD SHIPPING ORDERS $99+". Restore visibility.
   Was hidden in iter7 because we mis-targeted Demo 1 header height calculation. */
.pt-announcement-bar { display: flex !important; }

/* iter13 — pt-nl-popup must not consume document-flow space when closed.
   Default it to display:none; .pt-is-open toggles to display:flex centred overlay. */
.pt-nl-popup { display: none !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001; }
.pt-nl-popup.pt-is-open { display: flex !important; align-items: center; justify-content: center; }
.pt-nl-popup__backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); }
.pt-nl-popup__dialog { position: relative; background: #fff; max-width: 580px; width: 90%; padding: 30px; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.22); }

/* Delta 3: Fix sidebar width on homepage to match original Porto V2 Demo 1 (257px).
   Scoped to cms-home only to avoid affecting category/product pages.
   Without this the sidebar floats at 16.6667% × 1160px = 193px,
   pushing hero to x=357 instead of original x=420. */
body.cms-home .sidebar.sidebar-main,
body.cms-index-index .sidebar.sidebar-main {
    width: 257px !important;
    max-width: 257px !important;
    flex: 0 0 257px !important;
    flex-basis: 257px !important;
}

/* === end iter7 === */

/* === iter7-cycle3 ===
   Two remaining fixes after cycle2 deployed:
   1. .pt-header min-height stuck at 98px — a later CSS block (porto-v2 init rules) hardcodes
      "min-height: 98px" which overrides var(--pt-header-height). Force 113px !important.
      Result: topbar(40) + header(113) + nav(48) = 201px ✓  (original Porto V2 Demo 1).
   2. Hero x still at 357 — sidebar set to 257px but .column.main is float:right at 83.3% width
      (966px), so it starts at container_right − 966 = 333, not 140+257=397.
      Fixing main column width to calc(100% − 257px) = 903px → x = 1300−903 = 397 → hero x = 397+23 = 420 ✓.
*/

/* Fix 1: Force .pt-header to 113px — overrides hardcoded 98px from earlier init block */
body .pt-header,
html body .pt-header {
    min-height: 113px !important;
}

/* Fix 2: Resize main column on homepage to match sidebar=257px float-left layout.
   float:right + width=calc(100%-257px) → main x = container_right − 903 = 1300−903 = 397
   Hero is inside with paddingLeft≈23px → hero x = 397+23 = 420 ✓ (original Porto V2 Demo 1). */
body.cms-home .column.main,
body.cms-index-index .column.main {
    width: calc(100% - 257px) !important;
}

/* === end iter7-cycle3 === */

/* === iter8 ===
   Two metrics remain off after iter7 architectural fix (which moved footer y from 2421→2396
   and shrunk total height from 2843→2818):

   1. Footer y = 2396 (target 2386 ±3): content above footer is 10px too tall.
      Fix: reduce .porto-brand padding-top from 32px → 22px.
      Brand section height: 32+224 → 22+224 = 246px.
      Brand section bottom: 2138+246 = 2384 ≈ 2386 (within ±3 tolerance) ✓

   2. Footer height = 422px (target 457px, so total 2843): footer is 35px too short.
      Fix: add padding-top: 35px to .pt-footer-middle.
      Footer height: 359+35=394 (middle) + 63 (bottom) = 457px ✓
      Total: 2386+457 = 2843 ✓

   No changes to topbar, .pt-header, or .pt-megamenu — header=201 must remain.
   No changes to hero x — sidebar remains 257px.
*/

/* Fix 1: Reduce .porto-brand top padding by 10px to move footer y from 2396 to ~2386 */
body.cms-home .porto-brand,
body.cms-index-index .porto-brand {
    padding-top: 22px !important;
}

/* Fix 2: Add 35px top padding to .pt-footer-middle to restore original footer height (457px) */
body.cms-home .pt-footer-middle,
body.cms-index-index .pt-footer-middle {
    padding-top: 35px !important;
}

/* === end iter8 === */

/* === iter9 — logo white card panel === */
/* Wraps the PORTO logo in a white card-shape panel inside the blue header,
   matching Porto V2 Demo 2 where the logo sits on a white background with
   a notched bottom edge inside the blue header band. */
body.cms-index-index .pt-header__logo,
body.cms-index-index .pt-header__logo.logo {
    background-color: #fff !important;
    padding: 14px 22px 18px 22px !important;
    /* Notched bottom edge — bottom corners cut to suggest a tag shape */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)) !important;
    align-self: flex-start !important;
    margin-top: 0 !important;
    z-index: 2 !important;
    position: relative !important;
}
body.cms-index-index .pt-header__logo img {
    filter: none !important;
}
/* === end iter9 === */

/* === iter10 — missing sections: product tabs, testimonial+blog, info cards, footer popular tags === */

/* ---- HP5: Product Tabs ---- */
.porto-product-tabs {
    background: #fff;
    padding: 50px 0 40px;
}
.pt-product-tabs__wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.pt-product-tabs__tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e8e8e8;
    margin-bottom: 30px;
}
.pt-product-tabs__tab {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #777;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    text-transform: uppercase;
}
.pt-product-tabs__tab--active,
.pt-product-tabs__tab:hover {
    color: #0088cc;
    border-bottom-color: #0088cc;
}
.pt-product-tabs__panel {
    display: none;
}
.pt-product-tabs__panel--active {
    display: block;
}
.pt-product-tabs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pt-product-tabs__card {
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    transition: box-shadow 0.2s;
}
.pt-product-tabs__card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.pt-product-tabs__card-img-link {
    display: block;
    overflow: hidden;
    background: #f5f5f5;
    height: 200px;
}
.pt-product-tabs__card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.pt-product-tabs__card-body {
    padding: 16px 12px;
}
.pt-product-tabs__card-rating {
    color: #d4af37;
    font-size: 14px;
    margin-bottom: 8px;
}
.pt-star--empty { color: #ddd; }
.pt-product-tabs__card-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #333;
}
.pt-product-tabs__card-name a {
    color: inherit;
    text-decoration: none;
}
.pt-product-tabs__card-name a:hover { color: #0088cc; }
.pt-product-tabs__card-price {
    font-size: 14px;
    color: #0088cc;
    margin: 0;
}
.pt-product-tabs__card-price del {
    color: #aaa;
    margin-right: 6px;
}

/* ---- HP6: Testimonial + Blog Teaser Row ---- */
.porto-testimonial-blog-row {
    background: #f4f4f4;
    padding: 50px 0;
}
.pt-two-col-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
/* Testimonial Card */
.pt-testimonial-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    padding: 36px 32px 28px;
    position: relative;
}
.pt-testimonial-card__quote-icon {
    font-size: 72px;
    line-height: 1;
    color: #0088cc;
    font-family: Georgia, serif;
    position: absolute;
    top: 12px;
    left: 28px;
    opacity: 0.4;
}
.pt-testimonial-card__text {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin: 24px 0 20px;
    font-style: italic;
}
.pt-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.pt-testimonial-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0088cc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.pt-testimonial-card__avatar-initials {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.pt-testimonial-card__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}
.pt-testimonial-card__role {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.pt-testimonial-card__pagination {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.pt-testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    display: inline-block;
}
.pt-testimonial-dot--active {
    background: #0088cc;
}
/* Blog Teaser */
.pt-blog-teaser {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    overflow: hidden;
}
.pt-blog-teaser__img-wrap {
    position: relative;
    overflow: hidden;
    height: 220px;
    background: #e8e4dc;
}
.pt-blog-teaser__img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.pt-blog-teaser__date-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #fff;
    color: #333;
    padding: 8px 10px;
    text-align: center;
    line-height: 1.2;
    border-radius: 1px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    min-width: 44px;
}
.pt-blog-teaser__date-day {
    display: block;
    font-size: 18px;
    font-weight: 700;
}
.pt-blog-teaser__date-month {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pt-blog-teaser__body {
    padding: 24px 24px 20px;
}
.pt-blog-teaser__heading {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #333;
}
.pt-blog-teaser__heading a {
    color: inherit;
    text-decoration: none;
}
.pt-blog-teaser__heading a:hover { color: #0088cc; }
.pt-blog-teaser__excerpt {
    font-size: 13px;
    line-height: 1.7;
    color: #777;
    margin: 0 0 14px;
}
.pt-blog-teaser__read-more {
    font-size: 13px;
    font-weight: 600;
    color: #0088cc;
    text-decoration: none;
}
.pt-blog-teaser__read-more:hover { text-decoration: underline; }

/* ---- HP7: Info Cards (Customer Support / Secured Payment / Returns) ---- */
.porto-info-cards {
    background: #fff;
    padding: 50px 0;
    border-top: 1px solid #e8e8e8;
}
.pt-info-cards__row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.pt-info-card {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    transition: box-shadow 0.2s;
}
.pt-info-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.pt-info-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    width: 72px;
    height: 72px;
}
.pt-info-card__icon {
    display: block;
}
.pt-info-card__heading {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #333;
    margin: 0 0 6px;
    text-transform: uppercase;
}
.pt-info-card__subheading {
    font-size: 13px;
    font-weight: 600;
    color: #0088cc;
    margin: 0 0 10px;
}
.pt-info-card__desc {
    font-size: 13px;
    line-height: 1.7;
    color: #777;
    margin: 0;
}

/* ---- Footer Popular Tags (Col 4) ---- */
.pt-footer-middle__col--tags .pt-footer-middle__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.pt-footer-tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1.5;
}
.pt-footer-tag:hover {
    background: #0088cc;
    border-color: #0088cc;
    color: #fff;
}

/* ---- About Us footer col ---- */
.pt-footer-middle__about-logo {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}
.pt-footer-middle__about-wordmark {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.1em;
    font-style: italic;
}
.pt-footer-middle__about-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pt-footer-middle__about-text {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    margin: 0 0 12px;
}
.pt-footer-middle__about-more {
    font-size: 12px;
    color: #0088cc;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 16px;
}
.pt-footer-middle__about-more:hover { text-decoration: underline; }

/* === end iter10 === */

/* === iter11-cycle1 === */
/* Fix 1: Remove incorrect white card from logo — original Demo2 logo sits on blue header, no white box */
body.cms-index-index .pt-header__logo,
body.cms-index-index .pt-header__logo.logo {
    background-color: transparent !important;
    padding: 0 !important;
    clip-path: none !important;
    align-self: center !important;
    margin-top: 0 !important;
    z-index: auto !important;
    position: static !important;
}

/* Fix 2: Category list link text color — force dark #555 over global a{color:var(--pt-primary)} cascade */
body.cms-index-index .pt-home-category-list__link {
    color: #555555 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 6px 10px 6px !important;
    gap: 8px !important;
}
body.cms-index-index .pt-home-category-list__link:hover,
body.cms-index-index .pt-home-category-list__link:focus {
    color: #0088cc !important;
}

/* Fix 3: Category icon color — dark grey to match original's porto-icon-category-* color: #555 */
body.cms-index-index .pt-home-category-list__icon {
    color: #555555 !important;
}
body.cms-index-index .pt-home-category-list__link:hover .pt-home-category-list__icon,
body.cms-index-index .pt-home-category-list__link:focus .pt-home-category-list__icon {
    color: #0088cc !important;
}

/* Fix 4: Categories widget — add white card background + grey heading to match original porto-links-block */
body.cms-index-index .pt-home-top-categories {
    background-color: #ffffff !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
}
body.cms-index-index .pt-home-top-categories .pt-home-sidebar-widget__heading {
    background-color: #f6f7f9 !important;
    color: #222529 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}
body.cms-index-index .pt-home-category-list {
    padding: 0 10px !important;
}
body.cms-index-index .pt-home-category-list__item {
    border-bottom: 1px solid #ebebeb !important;
}
body.cms-index-index .pt-home-category-list__item:last-child {
    border-bottom: 0 !important;
}

/* Fix 5: HUGE SALE banner — collapse to simple single-line dark button style matching original */
body.cms-index-index .pt-home-huge-sale {
    margin-top: 0 !important;
    padding: 10px 20px 20px !important;
    background-color: #ffffff !important;
}
body.cms-index-index .pt-home-huge-sale__link {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    background: #222529 !important;
}
body.cms-index-index .pt-home-huge-sale__label {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    display: inline !important;
}
body.cms-index-index .pt-home-huge-sale__discount,
body.cms-index-index .pt-home-huge-sale__cta {
    display: none !important;
}
body.cms-index-index .pt-home-huge-sale__label::after {
    content: " \2013 70% OFF" !important;
    font-weight: 700 !important;
}
/* === end iter11-cycle1 === */

/* === iter12-revert === */
/* (d) Header: white background, dark text/icons — matches Porto Demo 2 white header.
   Override the blue header from base rules (line 793-798) and iter9 logo card. */
.pt-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
}
/* Dark text/icons on white header */
.pt-header .pt-header__tool-item {
    color: #333333 !important;
}
.pt-header .pt-header__tool-item:hover {
    color: #0088cc !important;
}
.pt-header .pt-header__tool-icon {
    color: #333333 !important;
    stroke: #333333 !important;
}
.pt-header .pt-header__phone-label {
    color: #777777 !important;
}
.pt-header .pt-header__phone-number {
    color: #333333 !important;
}
.pt-header .pt-header__hamburger-line {
    background-color: #333333 !important;
}
/* Remove iter9 logo white card (no longer needed — header is already white) */
body.cms-index-index .pt-header__logo,
body.cms-index-index .pt-header__logo.logo {
    background-color: transparent !important;
    padding: 0 !important;
    clip-path: none !important;
    align-self: auto !important;
    margin-top: 0 !important;
}
body.cms-index-index .pt-header__logo img {
    filter: none !important;
}
/* (d) Nav bar: dark background #222529 with white links — matches Demo 2 black nav */
.pt-nav {
    background-color: #222529 !important;
}
.pt-nav__link {
    color: #ffffff !important;
}
.pt-nav__link:hover,
.pt-nav__item--active .pt-nav__link {
    color: #0088cc !important;
}
/* (e) Hero slider: ensure autoplay delay is long enough that first paint shows slide 0 */
/* The data-mage-init in CMS already sets initialSlide:0 — no CSS needed here */
/* === end iter12-revert === */

/* === iter14 === */

/* ---- (a) Black promo bar at very top ---- */
.pt-promo-bar {
    background: #222529;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    padding: 10px 0;
    position: relative;
    z-index: 1010;
    text-align: center;
}
.pt-promo-bar .pt-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.pt-promo-bar__content {
    flex: 1;
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.pt-promo-bar__sep {
    color: rgba(255,255,255,0.4);
    margin: 0 4px;
}
.pt-promo-bar__link {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}
.pt-promo-bar__link:hover { color: #0088cc; }
.pt-promo-bar__note {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    margin-left: 6px;
}
.pt-promo-bar__close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.pt-promo-bar__close:hover { opacity: 1; }
@media (max-width: 767px) { .pt-promo-bar { display: none; } }

/* ---- (c) BROWSE CATEGORIES sidebar nav ---- */
.pt-home-browse-categories {
    background: #fff;
    margin-bottom: 10px;
}
.pt-home-browse-categories .pt-home-sidebar-widget__heading {
    background: #f6f7f9;
    color: #222529;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 20px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0;
    border-bottom: 0;
}
.pt-home-nav-list {
    list-style: none;
    margin: 0;
    padding: 0 10px;
}
.pt-home-nav-list__item {
    border-bottom: 1px solid #ebebeb;
}
.pt-home-nav-list__item:last-child { border-bottom: 0; }
.pt-home-nav-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 10px;
    color: #555;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.15s;
}
.pt-home-nav-list__link:hover,
.pt-home-nav-list__link:focus { color: #0088cc; }
.pt-home-nav-list__arrow {
    font-size: 16px;
    color: #aaa;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}
/* Icon + name layout for sidebar browse-categories (homepage only — scoped to cms-index-index) */
body.cms-index-index .pt-home-nav-list__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #555;
}
body.cms-index-index .pt-home-nav-list__icon svg {
    width: 18px;
    height: 18px;
}
body.cms-index-index .pt-home-nav-list__name { flex: 1; }

/* ---- (d) Sidebar SALE 50% OFF blue-circle banner ---- */
.pt-sidebar-sale {
    background: #fff;
    padding: 20px;
    margin-bottom: 10px;
    text-align: center;
    border: 1px solid #ebebeb;
}
.pt-sidebar-sale__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0088cc;
    color: #fff;
    margin: 0 auto 10px;
}
.pt-sidebar-sale__label {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
    display: block;
}
.pt-sidebar-sale__heading {
    font-size: 18px;
    font-weight: 700;
    color: #222529;
    margin: 0 0 6px;
    line-height: 1.2;
}
.pt-sidebar-sale__up { font-size: 13px; vertical-align: middle; }
.pt-sidebar-sale__pct { font-size: 36px; font-weight: 900; color: #0088cc; vertical-align: middle; }
.pt-sidebar-sale__off { font-size: 16px; font-weight: 700; vertical-align: middle; }
.pt-sidebar-sale__desc { font-size: 13px; color: #777; margin: 0 0 12px; line-height: 1.5; }
.pt-sidebar-sale-pagination { margin-top: 10px; }
/* Swiper pagination dots for sidebar sale */
.pt-sidebar-sale .swiper-pagination-bullet { background: #0088cc; opacity: 0.4; }
.pt-sidebar-sale .swiper-pagination-bullet-active { opacity: 1; }

/* ---- (e) Sidebar SUBSCRIBE NEWSLETTER form ---- */
.pt-sidebar-newsletter {
    background: #fff;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid #ebebeb;
    text-align: center;
}
.pt-sidebar-newsletter__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222529;
    margin: 0 0 8px;
}
.pt-sidebar-newsletter p {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0 0 12px;
}
.pt-sidebar-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pt-sidebar-newsletter__form .pt-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    font-size: 13px;
    border-radius: 0;
    box-sizing: border-box;
}
.pt-sidebar-newsletter__form .pt-btn {
    width: 100%;
}

/* ---- (g) 3-tile category banners row ---- */
.pt-category-banners {
    margin-bottom: 20px;
}
.pt-category-banners__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.pt-category-banner {
    position: relative;
    min-height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #f6f7f9;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.pt-category-banner__content {
    background: rgba(0,0,0,0.55);
    width: 100%;
    padding: 14px 18px;
    color: #fff;
    text-align: center;
}
.pt-category-banner__content h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.2;
}
.pt-category-banner__content h4 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin: 0 0 8px;
    line-height: 1.2;
}
.pt-category-banner__content h4 del { color: rgba(255,255,255,0.5); margin-right: 4px; }
.pt-category-banner__content .pt-btn--sm {
    font-size: 11px;
    padding: 5px 14px;
    background: #0088cc;
    color: #fff;
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.pt-category-banner__content .pt-btn--sm:hover { background: #006fa8; }
@media (max-width: 640px) {
    .pt-category-banners__grid { grid-template-columns: 1fr; }
}

/* ---- (j) HP5 Product Tabs (TOP RATED / BEST SELLING / LATEST) ---- */
.porto-product-tabs {
    margin: 30px 0;
}
.pt-product-tabs__wrapper {
    border: 1px solid #ebebeb;
}
.pt-product-tabs__tabs-nav {
    display: flex;
    border-bottom: 1px solid #ebebeb;
    background: #fff;
}
.pt-product-tabs__tab {
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #777;
    cursor: pointer;
    border-right: 1px solid #ebebeb;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}
.pt-product-tabs__tab:last-child { border-right: 0; }
.pt-product-tabs__tab:hover { color: #0088cc; }
.pt-product-tabs__tab--active {
    color: #0088cc;
    background: #fff;
    border-bottom: 2px solid #0088cc;
    margin-bottom: -1px;
}
.pt-product-tabs__panels { background: #fff; }
.pt-product-tabs__panel {
    display: none;
    padding: 20px;
}
.pt-product-tabs__panel--active { display: block; }
.pt-product-tabs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.pt-product-tabs__card { text-align: center; }
.pt-product-tabs__card-img-link { display: block; }
.pt-product-tabs__card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: #f6f7f9;
    display: block;
}
.pt-product-tabs__card-body { padding: 10px 0; }
.pt-product-tabs__card-rating { margin-bottom: 4px; }
.pt-star { color: #ffc107; font-size: 14px; }
.pt-star--empty { color: #ddd; }
.pt-product-tabs__card-name {
    font-size: 13px;
    font-weight: 400;
    color: #555;
    margin: 0 0 4px;
}
.pt-product-tabs__card-name a { color: inherit; text-decoration: none; }
.pt-product-tabs__card-name a:hover { color: #0088cc; }
.pt-product-tabs__card-price { font-size: 14px; color: #555; margin: 0; }
.pt-product-tabs__card-price strong { color: #0088cc; }
.pt-product-tabs__card-price del { color: #aaa; margin-right: 4px; }

/* ---- (k) HP6 Testimonial + Blog Teaser ---- */
.porto-testimonial-blog-row { margin: 30px 0; }
.pt-two-col-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
@media (max-width: 767px) { .pt-two-col-row { grid-template-columns: 1fr; } }
/* Testimonial card */
.pt-testimonial-card {
    background: #fff;
    border: 1px solid #ebebeb;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
}
.pt-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.pt-testimonial-card__avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.pt-testimonial-card__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #222529;
}
.pt-testimonial-card__role {
    display: block;
    font-size: 12px;
    color: #888;
}
.pt-testimonial-card__mark {
    font-size: 40px;
    color: #0088cc;
    line-height: 0.8;
    display: block;
    margin-bottom: 8px;
}
.pt-testimonial-card__quote {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    margin: 0 0 14px;
    border: none;
    padding: 0;
}
.pt-testimonial-card__pagination {
    display: flex;
    gap: 6px;
    align-items: center;
}
.pt-testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    display: inline-block;
}
.pt-testimonial-dot--active { background: #0088cc; }
/* Blog teaser */
.pt-blog-teaser {
    background: #fff;
    border: 1px solid #ebebeb;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.pt-blog-teaser__img-wrap { position: relative; overflow: hidden; }
.pt-blog-teaser__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.pt-blog-teaser__date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #0088cc;
    color: #fff;
    padding: 6px 10px;
    text-align: center;
    line-height: 1.1;
}
.pt-blog-teaser__date-day { display: block; font-size: 20px; font-weight: 700; }
.pt-blog-teaser__date-month { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.pt-blog-teaser__body { padding: 16px 18px; }
.pt-blog-teaser__heading {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}
.pt-blog-teaser__heading a { color: #222529; text-decoration: none; }
.pt-blog-teaser__heading a:hover { color: #0088cc; }
.pt-blog-teaser__excerpt { font-size: 13px; color: #777; line-height: 1.6; margin: 0 0 10px; }
.pt-blog-teaser__read-more { font-size: 12px; color: #0088cc; text-decoration: none; font-weight: 600; }
.pt-blog-teaser__read-more:hover { text-decoration: underline; }

/* ---- (l) HP7 Info Cards (CUSTOMER SUPPORT / SECURED PAYMENT / RETURNS) ---- */
.porto-info-cards { margin: 30px 0; }
.pt-info-cards__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 767px) { .pt-info-cards__row { grid-template-columns: 1fr; } }
.pt-info-card {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border: 1px solid #ebebeb;
}
.pt-info-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.pt-info-card__icon { display: block; }
.pt-info-card__heading {
    font-size: 14px;
    font-weight: 700;
    color: #222529;
    text-transform: uppercase;
    margin: 0 0 4px;
    letter-spacing: 0.03em;
}
.pt-info-card__subheading {
    font-size: 13px;
    color: #555;
    margin: 0 0 8px;
    font-style: italic;
}
.pt-info-card__desc {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin: 0;
}

/* ---- (m) Footer POPULAR TAGS col 4 ---- */
.pt-footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pt-footer-tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1.5;
}
.pt-footer-tag:hover {
    background: #0088cc;
    border-color: #0088cc;
    color: #fff;
}

/* === end iter14 === */

/* === PDP-3-DEFECTS FIX 2026-04-29 === */

/* FIX-1: Wishlist + Compare buttons on PDP — override the global blue-primary rule
   (line ~20161: html body .action.tocompare, .action.towishlist { background: #0088cc !important })
   PDP buttons must be transparent/outlined 40×40px icons inline next to ATC, NOT blue squares. */
body.catalog-product-view .product-info-main .product-addto-links .action.towishlist,
body.catalog-product-view .product-info-main .product-addto-links .action.tocompare,
body.pt-product-page .product-info-main .product-addto-links .action.towishlist,
body.pt-product-page .product-info-main .product-addto-links .action.tocompare {
    background-color: transparent !important;
    background-image: none !important;
    color: #222529 !important;
    border: 1px solid #e7e7e7 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}
body.catalog-product-view .product-info-main .product-addto-links .action.towishlist:hover,
body.catalog-product-view .product-info-main .product-addto-links .action.tocompare:hover,
body.pt-product-page .product-info-main .product-addto-links .action.towishlist:hover,
body.pt-product-page .product-info-main .product-addto-links .action.tocompare:hover {
    border-color: #0088cc !important;
    color: #0088cc !important;
    background-color: transparent !important;
    background-image: none !important;
}
/* Position addto-links inline after ATC button using flexbox row */
body.catalog-product-view .product-info-main .product-addto-links,
body.pt-product-page .product-info-main .product-addto-links {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
    position: static !important;
    float: none !important;
    vertical-align: middle !important;
}
/* Wrap ATC + addto-links in a flex row */
body.catalog-product-view .product-info-main .box-tocart,
body.catalog-product-view .product-info-main .pt-addtocart,
body.pt-product-page .product-info-main .box-tocart,
body.pt-product-page .product-info-main .pt-addtocart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* FIX-2: PDP reviews summary empty state — override the G8 hide rule
   (line ~20021: html body .product-reviews-summary.empty { display: none !important })
   On the PDP, an empty reviews row MUST be visible ("Be the first to review"). */
body.catalog-product-view .product-info-main .product-reviews-summary.empty,
body.pt-product-page .product-info-main .product-reviews-summary.empty {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 16px !important;
}
/* Show 5 empty grey stars before the "Be the first" link */
body.catalog-product-view .product-info-main .product-reviews-summary.empty::before,
body.pt-product-page .product-info-main .product-reviews-summary.empty::before {
    content: "☆☆☆☆☆" !important;
    display: inline !important;
    font-size: 14px !important;
    color: #ccc !important;
    letter-spacing: 2px !important;
}
body.catalog-product-view .product-info-main .product-reviews-summary.empty .reviews-actions .action.add,
body.pt-product-page .product-info-main .product-reviews-summary.empty .reviews-actions .action.add {
    font-size: 12px !important;
    color: #888 !important;
    text-decoration: underline !important;
}

/* === end PDP-3-DEFECTS FIX === */

/* ============================================================
   Fix L: Breadcrumb text-transform — enforce UPPERCASE on catalog/CMS pages.
   Porto Demo 1 reference uses uppercase breadcrumbs on category, product, and CMS pages.
   Scoped selectors below include catalog-category-view, catalog-product-view, cms-page-view.
   Excluded: checkout, customer-account, catalogsearch (user-typed strings must not be ALL-CAPS).
   ============================================================ */
body.catalog-category-view .breadcrumbs a,
body.catalog-product-view .breadcrumbs a,
body.cms-page-view .breadcrumbs a,
body.cms-about-us .breadcrumbs a,
body.catalog-category-view .breadcrumbs .items a,
body.catalog-product-view .breadcrumbs .items a,
body.cms-page-view .breadcrumbs .items a,
body.catalog-category-view .breadcrumbs li a,
body.catalog-product-view .breadcrumbs li a,
body.cms-page-view .breadcrumbs li a {
    text-transform: uppercase !important;
    font-weight: 400 !important;
}
body.catalog-category-view .breadcrumbs .items li strong,
body.catalog-category-view .breadcrumbs .item strong,
body.catalog-product-view .breadcrumbs .items li strong,
body.catalog-product-view .breadcrumbs .item strong,
body.cms-page-view .breadcrumbs .items li strong,
body.cms-page-view .breadcrumbs .item strong,
body.cms-about-us .breadcrumbs .item strong {
    text-transform: uppercase !important;
}

/* ============================================================
   Fix E: Cart icon badge "0" — always visible even when count=0.
   Ensure .hp-header__icon-badge is never hidden by porto.css rules.
   ============================================================ */
.hp-header__icon-badge {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================
   Fix G: Checkout page — section titles 16px/600/uppercase,
   labels stacked above inputs (not inline), no card border on
   shipping address section.
   ============================================================ */
body.checkout-index-index .step-title,
body.checkout-index-index .opc-block-summary > .title {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.checkout-index-index #shipping .field .label,
body.checkout-index-index #opc-new-shipping-address .field .label,
body.checkout-index-index #checkout-step-shipping .field .label,
body.checkout-index-index #co-shipping-form .field .label {
    display: block !important;
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
}

body.checkout-index-index .field .control {
    width: 100% !important;
    float: none !important;
}

body.checkout-index-index #shipping .fieldset.address {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ============================================================
   Fix J: Order Tracking — heading Porto blue, full-width form,
   labels above inputs.
   ============================================================ */
body.sales-guest-form .page-title,
body.sales-guest-form h1 {
    color: #0088cc !important;
}

body.sales-guest-form .form .field .label {
    display: block !important;
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    margin-bottom: 4px !important;
}

body.sales-guest-form .form .field .control {
    width: 100% !important;
    float: none !important;
}

body.sales-guest-form .form {
    max-width: 780px !important;
    margin: 0 auto !important;
}


/* ============================================================
   Fix I: Forgot Password — widen captcha label column.
   ============================================================ */
body.customer-account-forgotpassword .captcha .label {
    width: 280px !important;
    min-width: 280px !important;
}

/* ============================================================
   Fix H: Contact page — suppress orphan map/details elements
   that may render outside the ct-* wrapper due to cached layout.
   The .contact-map div from contact-map.phtml and .pt-contact-details-panel
   from contact-details.phtml are removed via layout XML but may still render
   if block removal is late. Force display:none as belt-and-suspenders.
   ============================================================ */
body.contact-index-index .contact-map,
body.contact-index-index .pt-contact-details-panel,
body.contact-index-index .pt-contact-map-placeholder {
    display: none !important;
}

/* Ensure .ct-map is always edge-to-edge with no horizontal gap */
body.contact-index-index .ct-map {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: block !important;
}

body.contact-index-index .ct-map iframe {
    display: block !important;
    width: 100% !important;
}

/* === end SITEWIDE PIXEL-PERFECT FIX === */

/* ============================================================
   14-PAGE AUDIT FIXES — 2026-05-02
   Measured against m2.portotheme.com/demo1_en/ at 1920x1080.
   ============================================================ */

/* ---- ADVSEARCH-FULLWIDTH: advanced search form stretches to
        full column width, matching Demo 1 reference (730px+).
        Magento default constrains the form to its natural width
        (~620px) because it has no display:block + width:100%. ---- */
body.catalogsearch-advanced-index form.form.search.advanced {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ---- FOOTER-SOCIAL-FLAT: remove circular grey bg from footer
        social links in dark footer. Demo 1 shows flat plain icons
        on the dark bg with no bg circle. ---- */
.pt-footer-middle__social-link--icon {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
}
.pt-footer-middle__social-link--icon:hover {
    background-color: var(--pt-primary, #0088cc) !important;
    color: #fff !important;
}
/* R48: winning rule is `body .pt-footer-middle .pt-footer-middle__col a` (spec 0,2,2).
   Need spec 0,3,1 to override. Social links sit inside .pt-footer-middle__col. */
body .pt-footer-middle .pt-footer-middle__col .pt-footer-middle__social-link--icon {
    color: #ffffff !important;
}

/* ---- TOPBAR-HEIGHT: hp-topbar 40px to match Demo 1 main-panel-top.
        The hp-topbar inner is already 40px; ensure the outer element
        does not collapse due to porto.css .pt-topbar height rules. ---- */
.hp-topbar {
    min-height: 40px !important;
}

/* ---- NAV-SHADOW: porto.css adds no shadow to .hp-nav but Demo 1
        .nav-sections has box-shadow 0 1px 2px rgba(0,0,0,0.1). ---- */
.hp-nav {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ---- SEARCH-ADVSEARCH-FIELDS: ensure all input/select fields in
        advanced search are full-width and 50px height. ---- */
body.catalogsearch-advanced-index .fieldset.fieldset {
    width: 100% !important;
    display: block !important;
}

/* === end 14-PAGE AUDIT FIXES === */

/* === FOOTER RIBBON: position + color fix ===
 * Problem 1 — position: ribbon was outside .pt-container, rendering at x=0.
 *   Fix: moved inside .pt-container (footer-middle.phtml); position:absolute
 *   relative to .pt-container (position:relative). top:-10px bridges the
 *   content section above and the dark footer (matches Porto .footer-ribbon).
 * Problem 2 — color: html body span:not([class]) (specificity 0,1,3) beat
 *   our span rule (0,1,1). Fix: added class pt-git-label to the span so
 *   span:not([class]) no longer matches — no !important needed.
 * Verified against m2.portotheme.com/demo1_en/ footer-ribbon. */

.pt-footer-middle .pt-container {
    position: relative;
}

/* Later in the file → cascade wins over earlier .pt-footer-middle__get-in-touch rule */
.pt-footer-middle__get-in-touch {
    position: absolute;
    top: -10px;
    left: 10px;
}

/* .pt-git-label class breaks the html body span:not([class]) match — no !important */
.pt-footer-middle__get-in-touch .pt-git-label {
    color: #fff;
}
/* === end FOOTER RIBBON fix === */

/* === GLOBAL BREADCRUMB: suppress duplicate ::before separator ===
   porto.css L18861: .breadcrumbs .items > li + li::before { content: "/" }
   porto.css L16321: body .breadcrumbs .items > li:not(:last-child)::after { content: "/" }
   Both selectors match every breadcrumb separator on every page simultaneously,
   producing "Home / / Page Title" instead of "Home / Page Title".
   The catalog-page-specific fix in category-clean.css only covers catalog-category-view
   and catalog-product-view. This rule suppresses ::before globally so the ::after
   rule (L16321) remains the single source of the "/" separator on all pages.
   Verified: My Orders, Dashboard, Wishlist, About Us, Search, Cart, Checkout all fixed. */
body .breadcrumbs .items > li + li::before {
    content: none !important;
}
/* === end GLOBAL BREADCRUMB fix === */

/* === VAULT PAGE TITLE HERO ===
   porto.css L23095 already styles body.vault-cards-listaction .page-title-wrapper with
   grey background (rgb(244,244,244)), 60px padding, and centred text — matching all other
   account page titles (My Orders, My Wish List, etc.).
   BUT: styles-m.css (Magento base) adds:
     .account.vault-cards-listaction .page-title-wrapper { display: none; }
   which hides the Porto-styled wrapper because the vault module renders its own heading
   via h1.account-section__title-label.
   Fix: re-show the Porto wrapper (it already has the correct grey hero styling) and hide
   the vault module's duplicate heading to avoid two "Stored Payment Methods" H1s. */
body.vault-cards-listaction .page-title-wrapper {
    display: block !important;
}
body.vault-cards-listaction h1.account-section__title-label {
    display: none !important;
}
/* === end VAULT PAGE TITLE HERO === */

/* === ACCOUNT SIDEBAR: heading + SVG icons (C-03) ===
   Porto Demo 1 account sidebar shows:
   - "MY ACCOUNT" section heading above nav items (gray text, transparent bg)
   - Small SVG icon prefix on each of the 9 nav links
   Current state: heading is hidden (display:none), no icons on any item.
   Fix: show heading on desktop as a static label; add ::before SVG icons per nth-child.

   Nav item order (with empty-li separators at positions 5 and 9):
   1=My Account  2=My Orders  3=My Downloadable Products  4=My Wish List
   5=[sep]  6=Address Book  7=Account Information  8=Stored Payment Methods
   9=[sep]  10=My Product Reviews  11=Newsletter Subscriptions
*/

/* Show heading on desktop as Porto gray label */
@media (min-width: 768px) {
    body.pt-account-page .block-collapsible-nav .block-collapsible-nav-title,
    body.account .block-collapsible-nav .block-collapsible-nav-title {
        display: block !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #777 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        padding: 12px 15px 10px !important;
        background: transparent !important;
        border-bottom: 1px solid #e7e7e7 !important;
        cursor: default !important;
        pointer-events: none !important;
    }
    /* Hide the toggle arrow on desktop (only needed on mobile) */
    body.pt-account-page .block-collapsible-nav .block-collapsible-nav-title::after,
    body.account .block-collapsible-nav .block-collapsible-nav-title::after {
        display: none !important;
    }
}

/* SVG icon prefix — shared setup */
body.pt-account-page .block-collapsible-nav .nav.item a,
body.account .block-collapsible-nav .nav.item a,
body.pt-account-page .block-collapsible-nav .nav.item strong,
body.account .block-collapsible-nav .nav.item strong {
    padding-left: 20px !important;
    position: relative !important;
}
body.pt-account-page .block-collapsible-nav .nav.item a::before,
body.account .block-collapsible-nav .nav.item a::before,
body.pt-account-page .block-collapsible-nav .nav.item strong::before,
body.account .block-collapsible-nav .nav.item strong::before {
    content: '' !important;
    position: absolute !important;
    left: 0px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.55 !important;
}

/* 1 — My Account (dashboard / house) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(1) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(1) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(1) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(1) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") !important;
}

/* 2 — My Orders (list/clipboard) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(2) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(2) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(2) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(2) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E") !important;
}

/* 3 — My Downloadable Products (download/arrow) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(3) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(3) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(3) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(3) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") !important;
}

/* 4 — My Wish List (heart) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(4) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(4) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(4) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(4) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
}

/* 6 — Address Book (map-pin / location) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(6) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(6) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(6) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(6) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}

/* 7 — Account Information (user) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(7) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(7) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(7) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(7) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* 8 — Stored Payment Methods (credit card) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(8) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(8) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(8) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(8) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E") !important;
}

/* 10 — My Product Reviews (star) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(10) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(10) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(10) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(10) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") !important;
}

/* 11 — Newsletter Subscriptions (mail) */
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(11) a::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(11) a::before,
body.pt-account-page .block-collapsible-nav .nav.items > .nav.item:nth-child(11) strong::before,
body.account .block-collapsible-nav .nav.items > .nav.item:nth-child(11) strong::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important;
}
/* === end ACCOUNT SIDEBAR: heading + SVG icons (C-03) === */

/* === ADVANCED SEARCH: SUBMIT button Porto blue style (C-04) ===
   Porto Demo 1 advanced search page shows a Porto-blue "SEARCH" button.
   Magento default renders an unstyled small gray button. Fix to match. */
body.catalogsearch-advanced-index .actions-toolbar .action.search,
body.catalogsearch-advanced-index .actions-toolbar .action.submit,
body.catalogsearch-advanced-index form .action.search,
body.catalogsearch-advanced-index form button[type="submit"] {
    background-color: #0088cc !important;
    border: none !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 28px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.15s !important;
}
body.catalogsearch-advanced-index .actions-toolbar .action.search:hover,
body.catalogsearch-advanced-index .actions-toolbar .action.submit:hover,
body.catalogsearch-advanced-index form button[type="submit"]:hover {
    background-color: #006699 !important;
}
/* === end ADVANCED SEARCH: SUBMIT button === */

/* === GUEST ORDER FORM: legend heading reference parity ===
   Reference Porto Demo 1: "ORDER INFORMATION" legend is rendered as
   a blue, uppercase, left-aligned section label (16px/700/tracking 0.07em).
   Browser UA stylesheet defaults render <legend> as centered gray text.
   Override: display block + full-width + left-align defeats UA defaults.
   Source: pixel audit 2026-05-04 vs m2.portotheme.com/demo1_en/sales/guest/form
   R38 (2026-05-07): bumped 14px → 16px to match getComputedStyle on reference
*/
body.sales-guest-form .fieldset .legend,
body.sales-guest-form fieldset legend {
    display: block !important;
    width: 100% !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0088cc !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    text-align: left !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border: none !important;
    float: none !important;
}
body.sales-guest-form .fieldset .legend span,
body.sales-guest-form fieldset legend span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
/* === end GUEST ORDER FORM === */

/* R16 — Advanced Search page-main max-width: 1280px → 1200px.
   An upstream rule (base theme or Magento layout) applies 1280px;
   override to match the 1200px Porto Demo 1 container width. */
body.catalogsearch-advanced-index .page-main {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* === end R16 === */

/* R101: Footer bottom min-height 88px — Porto Demo 1 .footer-bottom is 118px total
   (15px padding top + 88px content + 15px padding bottom). Our single-row flex bar
   renders at 63px because inner content is only 32px (image height). Adding min-height
   to the inner container matches the reference height. */
body .pt-footer-bottom__inner {
    min-height: 88px;
}
/* === end R101 === */