/*
Theme Name: Golden Woo Theme
Theme URI: https://khaledmgroup.com/
Author: KhaledMGroup
Author URI: https://khaledmgroup.com/
Description: A premium, conversion-optimized WooCommerce theme with a mobile-first responsive layer, full RTL support using CSS logical properties, and accessible navigation patterns.
Version: 2.9.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: goldenwootheme
Domain Path: /languages
Tags: e-commerce, custom-colors, right-to-left-language, translation-ready, grid-layout, custom-menu, custom-logo
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    --gwt-primary: #10979e;
    --gwt-primary-dark: #007178;
    --gwt-primary-light: #36bdc4;
    --gwt-secondary: #e5a242;
    --gwt-secondary-hover: #c4822f;
    --gwt-bg-color: #ffffff;
    --gwt-text-color: #053033;
    --gwt-muted-color: #6c7a7b;
    --gwt-border-color: #eeeeee;
    --gwt-bg-tint: #f6f9f9;
    --gwt-shadow: rgba(27, 162, 166, 0.08);
    --gwt-shadow-hover: rgba(27, 162, 166, 0.15);

    --gwt-font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --gwt-border-radius: 14px;
    --gwt-border-radius-card: 24px 12px 24px 12px;
    --gwt-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Fluid spacing — scales itself between mobile and desktop */
    --gwt-gutter: clamp(14px, 4vw, 20px);
    --gwt-section-space: clamp(36px, 7vw, 60px);
    --gwt-grid-gap: clamp(12px, 2.5vw, 24px);

    /* Live header height, kept in sync by theme.js for sticky offsets */
    --gwt-header-h: 76px;
    --gwt-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--gwt-header-h) + 16px);
}

body {
    font-family: var(--gwt-font-family);
    background-color: var(--gwt-bg-color);
    color: var(--gwt-text-color);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevents iOS Safari zooming on any focused field below 16px */
    font-size: 16px;
}

a { color: var(--gwt-primary); text-decoration: none; transition: var(--gwt-transition); }
a:hover { color: var(--gwt-primary-dark); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    max-width: 100%;
}

/* Never let a long Arabic word or a raw URL blow out the layout on a phone */
h1, h2, h3, h4, p, li, td, th, .gwt-prod-title, .gwt-cat-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Visible keyboard focus — was completely missing before */
:focus-visible {
    outline: 3px solid var(--gwt-primary-light);
    outline-offset: 2px;
    border-radius: 6px;
}

.gwt-skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--gwt-primary);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    font-weight: 700;
}
.gwt-skip-link:focus { inset-inline-start: 0; color: #fff; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
.gwt-container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--gwt-gutter);
}

.gwt-grid { display: grid; gap: var(--gwt-grid-gap); }
.gwt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gwt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gwt-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gwt-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .gwt-grid-4, .gwt-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gwt-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones keep TWO columns for products/categories — a single giant card per
   row is the main reason the old build felt broken on mobile. */
@media (max-width: 768px) {
    .gwt-grid-3, .gwt-grid-4, .gwt-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gwt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .gwt-grid-2, .gwt-grid-3, .gwt-grid-4, .gwt-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Text-heavy blocks still go full width */
    .gwt-grid-2.gwt-grid-text, .gwt-features-grid, .gwt-testimonials-grid { grid-template-columns: 1fr; }
}

/* Content + sidebar shell used by index.php / single.php */
.gwt-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
@media (max-width: 992px) {
    .gwt-with-sidebar { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* Applied when the blog sidebar has no widgets configured, so the content
   takes the full width instead of leaving an empty reserved column next to
   it (grid-template-columns still allots space to a track even when no
   grid item occupies it). */
.gwt-with-sidebar.gwt-no-sidebar { grid-template-columns: minmax(0, 1fr); }

.gwt-hide-mobile { display: initial; }
.gwt-show-mobile { display: none !important; }

@media (max-width: 992px) {
    /* This class was used across header/footer/banner but never defined —
       that is why phone layouts overflowed. */
    .gwt-hide-mobile { display: none !important; }
    .gwt-show-mobile { display: flex !important; }
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.gwt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    min-height: 44px; /* WCAG-friendly tap target */
    border-radius: var(--gwt-border-radius);
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--gwt-transition);
    text-align: center;
    line-height: 1.3;
}

.gwt-btn-primary { background-color: var(--gwt-primary); color: #fff; }
.gwt-btn-secondary { background-color: var(--gwt-secondary); color: #fff; }
.gwt-btn-outline { background-color: transparent; border-color: var(--gwt-primary); color: var(--gwt-primary); }

@media (hover: hover) {
    .gwt-btn-primary:hover { background-color: var(--gwt-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px var(--gwt-shadow); }
    .gwt-btn-secondary:hover { background-color: var(--gwt-secondary-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(229, 162, 66, 0.2); }
    .gwt-btn-outline:hover { background-color: var(--gwt-primary); color: #fff; transform: translateY(-2px); }
}
.gwt-btn:active { transform: translateY(0); }

/* ==========================================================================
   5. TOP BAR
   ========================================================================== */
.gwt-top-bar {
    background-color: var(--gwt-secondary);
    color: #fff;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    position: relative;
}

.gwt-top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.gwt-top-contact { display: flex; gap: 16px; flex-shrink: 0; }
.gwt-top-contact a { color: #fff; white-space: nowrap; }

.gwt-marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.gwt-marquee span {
    display: inline-block;
    padding-inline-start: 100%;
    animation: gwt-marquee-anim 28s linear infinite;
    will-change: transform;
}
/* RTL text must travel the other way or it reads backwards */
[dir="rtl"] .gwt-marquee span { animation-name: gwt-marquee-anim-rtl; }

@keyframes gwt-marquee-anim {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}
@keyframes gwt-marquee-anim-rtl {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(100%, 0, 0); }
}

/* Animation switched off in the Customizer: the notice sits still and centred.
   The 100% start-padding used by the scrolling variant must be dropped too,
   otherwise the static text is pushed right off the edge of the bar. */
.gwt-marquee-static { text-align: center; }
.gwt-marquee-static span {
    animation: none !important;
    padding-inline-start: 0;
    white-space: normal;
}

@media (max-width: 768px) {
    .gwt-top-bar { font-size: 12px; }
    .gwt-top-contact { gap: 10px; }
    .gwt-marquee-static span { font-size: 11px; line-height: 1.5; }
}

/* ==========================================================================
   6. MAIN HEADER  (mobile-first rebuild)
   ========================================================================== */
.gwt-main-header {
    background-color: #fff;
    border-bottom: 1px solid var(--gwt-border-color);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.25s ease;
}
.gwt-main-header.gwt-sticky-active { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); }

.gwt-header-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gwt-logo { flex-shrink: 0; }
.gwt-logo img { height: 55px; width: auto; object-fit: contain; }
.gwt-site-title h2 { font-size: 20px; color: var(--gwt-text-color); }

.gwt-search-form {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 500px;
    position: relative;
}

.gwt-search-form input {
    width: 100%;
    padding-block: 12px;
    padding-inline: 20px 48px;
    border: 1px solid var(--gwt-border-color);
    border-radius: var(--gwt-border-radius);
    background-color: var(--gwt-bg-tint);
    transition: var(--gwt-transition);
    font-size: 16px; /* below 16px iOS zooms the page on focus */
}

.gwt-search-form input:focus {
    border-color: var(--gwt-primary);
    background-color: #fff;
    box-shadow: 0 0 0 3px var(--gwt-shadow);
}

/* Logical positioning: the icon and its padding always agree, in LTR and RTL */
.gwt-search-form button {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gwt-primary);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.gwt-header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    flex-shrink: 0;
}

.gwt-icon-btn {
    font-size: 20px;
    color: var(--gwt-text-color);
    position: relative;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 12px;
}
.gwt-icon-btn:hover { background: var(--gwt-bg-tint); color: var(--gwt-primary); }

.gwt-icon-btn span.count {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    background-color: var(--gwt-secondary);
    color: #fff;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

/* Hamburger — shown by CSS, not by JS, so there is no flash on load.
   Threshold matches where the quick-links bar (below) switches off, so
   there is never a gap where neither navigation is reachable. */
.gwt-mobile-toggle { display: none; }

@media (max-width: 1100px) {
    .gwt-mobile-toggle { display: inline-flex; }
    .gwt-header-nav { flex-wrap: wrap; row-gap: 10px; }
    .gwt-logo { margin-inline-end: auto; }
    .gwt-logo img { height: 44px; }
    /* Search drops to its own full-width row instead of being crushed */
    .gwt-search-form { order: 10; flex: 1 0 100%; max-width: none; }
    .gwt-header-icons { margin-inline-start: 0; }
}

@media (max-width: 480px) {
    .gwt-main-header { padding: 10px 0; }
    .gwt-logo img { height: 38px; }
    .gwt-header-nav { gap: 6px; }
}

/* ==========================================================================
   7. QUICK LINKS BAR
   ========================================================================== */
.gwt-quick-links {
    background-color: #fff;
    border-bottom: 1px solid var(--gwt-border-color);
    padding: 8px 0;
    position: relative;
    z-index: 400;
}

.gwt-quick-links-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.gwt-quick-links-list > li { position: relative; }

.gwt-quick-links-list a {
    font-weight: 700;
    color: var(--gwt-text-color);
    font-size: 15px;
    display: inline-block;
    padding: 6px 2px;
}
.gwt-quick-links-list a:hover { color: var(--gwt-primary); }

/* --- Dropdown caret + panel (desktop only — see breakpoint note below) --- */
.gwt-quick-links-list li.gwt-has-dropdown > a {
    display: inline-flex;
    align-items: center;
}

.gwt-quick-links-list .gwt-menu-caret {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 4px;
    margin-inline-start: 2px;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.gwt-quick-links-list .gwt-menu-caret i { display: inline-block; transition: transform 0.25s ease; }

.gwt-quick-links-list .gwt-sub-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--gwt-border-color);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    padding: 8px;
    margin-top: 6px;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.gwt-quick-links-list li.gwt-has-dropdown:hover > .gwt-sub-menu,
.gwt-quick-links-list li.gwt-has-dropdown:focus-within > .gwt-sub-menu,
.gwt-quick-links-list li.gwt-has-dropdown.gwt-dropdown-open > .gwt-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gwt-quick-links-list li.gwt-has-dropdown:hover > .gwt-menu-caret i,
.gwt-quick-links-list li.gwt-has-dropdown.gwt-dropdown-open > .gwt-menu-caret i {
    transform: rotate(180deg);
}

.gwt-quick-links-list .gwt-sub-menu li { list-style: none; }
.gwt-quick-links-list .gwt-sub-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.gwt-quick-links-list .gwt-sub-menu a:hover { background: var(--gwt-bg-tint); color: var(--gwt-primary); }

/* Grandchild level flies out sideways instead of stacking under its parent */
.gwt-quick-links-list .gwt-sub-menu .gwt-sub-menu {
    top: 0;
    inset-inline-start: 100%;
    margin-top: 0;
    margin-inline-start: 6px;
}

/* Only real desktop-width pointer screens get the hover/dropdown bar. Below
   this the bar used to switch to a horizontally-scrolling strip, but that
   container needs overflow-y:auto to scroll sideways at all, which clips
   any dropdown panel taller than the bar itself — the panel was unusable
   exactly where touch users (who can't hover anyway) needed it most. The
   hamburger + drawer below now covers every width under this breakpoint
   with a proper tap-to-expand accordion instead. */
@media (max-width: 1100px) {
    .gwt-quick-links { display: none; }
}

/* ==========================================================================
   8. MOBILE DRAWER
   ========================================================================== */
.gwt-mobile-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(320px, 86vw);
    max-width: 320px;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    overscroll-behavior: contain;
}
[dir="rtl"] .gwt-mobile-panel { transform: translateX(-100%); }
.gwt-mobile-panel.is-open { transform: translateX(0); visibility: visible; }

.gwt-mobile-panel-head {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gwt-border-color);
    flex-shrink: 0;
}
.gwt-mobile-panel-head b { font-size: 16px; }

.gwt-mobile-panel-body {
    padding: 12px 20px calc(24px + var(--gwt-safe-b));
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

.gwt-mobile-menu-list li { border-bottom: 1px solid var(--gwt-border-color); }
.gwt-mobile-menu-list li:last-child { border-bottom: none; }
.gwt-mobile-menu-list > li { display: flex; flex-wrap: wrap; align-items: center; }
.gwt-mobile-menu-list a {
    display: block;
    padding: 14px 4px;
    font-weight: 700;
    color: var(--gwt-text-color);
    font-size: 15px;
    flex: 1 1 auto;
}
.gwt-mobile-menu-list a:hover { color: var(--gwt-primary); }

/* Accordion toggle. No max-height:0 by default in CSS — if JS fails to load,
   the list simply stays fully expanded (safe fallback) instead of hiding
   content with no way to reveal it. theme.js sets the collapsed height on
   init and animates it on toggle. */
.gwt-mobile-menu-list .gwt-menu-caret {
    background: none;
    border: none;
    color: var(--gwt-muted-color);
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
}
.gwt-mobile-menu-list .gwt-menu-caret i { transition: transform 0.25s ease; }
.gwt-mobile-menu-list li.gwt-dropdown-open > .gwt-menu-caret i { transform: rotate(180deg); }

.gwt-mobile-menu-list .sub-menu {
    flex: 1 0 100%;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-inline-start: 16px;
}
.gwt-mobile-menu-list .sub-menu li { border-bottom: 1px dashed var(--gwt-border-color); }
.gwt-mobile-menu-list .sub-menu li:last-child { border-bottom: none; }
.gwt-mobile-menu-list .sub-menu a { font-weight: 600; font-size: 14px; color: var(--gwt-muted-color); padding-block: 11px; }

.gwt-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gwt-mobile-overlay.is-open { opacity: 1; visibility: visible; }

body.gwt-drawer-open { overflow: hidden; }

/* ==========================================================================
   9. SECTION HEADINGS
   ========================================================================== */
.gwt-section { padding-block: var(--gwt-section-space); }
.gwt-homepage-section { padding-block: var(--gwt-section-space); }

.gwt-section-title-wrap {
    text-align: center;
    margin-bottom: clamp(24px, 5vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: var(--gwt-gutter);
}

.gwt-section-badge {
    background-color: var(--gwt-bg-tint);
    border: 1px solid var(--gwt-border-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gwt-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.gwt-ping-dot {
    position: relative;
    display: inline-flex;
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: var(--gwt-primary);
    flex-shrink: 0;
}
.gwt-ping-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--gwt-primary);
    animation: gwt-ping-anim 1.5s ease-in-out infinite;
}
@keyframes gwt-ping-anim {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Fluid type — no more 32px headline squeezed into a 360px screen */
.gwt-section-title {
    font-size: clamp(20px, 4.4vw, 32px);
    font-weight: 800;
    color: var(--gwt-text-color);
    line-height: 1.35;
}
.gwt-section-desc {
    font-size: clamp(13px, 3.2vw, 16px);
    color: var(--gwt-muted-color);
    margin-top: 8px;
}

/* ==========================================================================
   10. BLOG / PAGE CONTENT
   ========================================================================== */
.gwt-blog-card { background: #fff; border: 1px solid var(--gwt-border-color); border-radius: var(--gwt-border-radius); overflow: hidden; box-shadow: 0 4px 10px var(--gwt-shadow); transition: var(--gwt-transition); }
.gwt-blog-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px var(--gwt-shadow-hover); }
.gwt-blog-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gwt-blog-body { padding: 18px; }
.gwt-entry-title { font-size: clamp(22px, 5vw, 32px); font-weight: 800; color: var(--gwt-text-color); line-height: 1.4; }

.entry-content { font-size: 16px; line-height: 1.9; }
.entry-content > * + * { margin-top: 1em; }
.entry-content img { border-radius: var(--gwt-border-radius); }
.entry-content ul, .entry-content ol { padding-inline-start: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

/* Tables and embeds inside post content are the classic mobile overflow source */
.entry-content table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.entry-content iframe, .entry-content video { max-width: 100%; }
.entry-content pre { overflow-x: auto; padding: 16px; background: var(--gwt-bg-tint); border-radius: 10px; }

.gwt-sidebar-widget { margin-bottom: 24px; padding: 20px; background: var(--gwt-bg-tint); border-radius: var(--gwt-border-radius); }
.gwt-widget-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.gwt-sidebar-widget ul li { padding: 7px 0; border-bottom: 1px solid var(--gwt-border-color); }
.gwt-sidebar-widget ul li:last-child { border-bottom: none; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.gwt-main-footer {
    background-color: var(--gwt-bg-tint);
    padding: var(--gwt-section-space) 0 20px;
    border-top: 1px solid var(--gwt-border-color);
}

.gwt-footer-grid {
    display: grid;
    gap: 40px;
    margin-bottom: 40px;
}

/* Column count comes from footer.php's data-footer-cols attribute — it only
   reflects columns actually switched on in the Customizer, so turning one
   off re-splits the remaining columns evenly instead of leaving a gap. The
   middle (brand) column gets a little extra room at 3 columns since it
   holds the most content (logo, bio text, social icons). */
.gwt-footer-grid[data-footer-cols="1"] { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; text-align: center; }
.gwt-footer-grid[data-footer-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gwt-footer-grid[data-footer-cols="3"] { grid-template-columns: 1fr 1.2fr 1fr; }
.gwt-footer-grid[data-footer-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 992px) {
    .gwt-footer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 30px; text-align: center; }
    .gwt-footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
    .gwt-footer-menu li { margin-bottom: 0; }
}

.gwt-footer-col h3 { font-size: 18px; font-weight: 800; margin-bottom: 20px; }
.gwt-footer-col p { color: var(--gwt-muted-color); font-size: 15px; line-height: 1.8; margin-bottom: 20px; }
.gwt-footer-menu li { margin-bottom: 12px; }
.gwt-footer-menu a { color: var(--gwt-muted-color); font-weight: 600; }
/* No padding shift on hover — that used to nudge the whole column */
.gwt-footer-menu a:hover { color: var(--gwt-primary); }

.gwt-footer-contact li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--gwt-muted-color); }
@media (max-width: 992px) { .gwt-footer-contact li { justify-content: center; } }
.gwt-footer-contact i { color: var(--gwt-primary); width: 20px; text-align: center; flex-shrink: 0; }

/* justify-content:center always — text-align on the parent column has no
   effect on a flex row's own positioning, so with fewer than the max icon
   count the row was hugging the edge instead of sitting centered under the logo. */
.gwt-social-icons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.gwt-social-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px var(--gwt-shadow);
    color: var(--gwt-primary);
}
.gwt-social-btn:hover { background-color: var(--gwt-primary); color: #fff; transform: translateY(-3px); }

.gwt-footer-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 24px 0;
    border-block: 1px solid var(--gwt-border-color);
}

.gwt-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fff;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid var(--gwt-border-color);
}
.gwt-badge-item i { font-size: 24px; color: var(--gwt-primary); }
.gwt-badge-text p { font-size: 11px; color: var(--gwt-muted-color); margin: 0; }
.gwt-badge-text b { font-size: 13px; }

.gwt-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 24px;
    font-size: 14px;
    color: var(--gwt-muted-color);
}

.gwt-payments { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gwt-payments img { height: 25px; border-radius: 4px; }
.gwt-payment-badge {
    background: #fff;
    border: 1px solid var(--gwt-border-color);
    border-radius: 4px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    height: 26px;
}
.gwt-payments i { font-size: 28px; }

@media (max-width: 768px) {
    .gwt-footer-bottom { flex-direction: column; text-align: center; }
    .gwt-payments { justify-content: center; }
    .gwt-footer-badges { gap: 12px; }
    .gwt-badge-item { padding: 8px 14px; }
}

/* Template helpers (replaces the inline styles removed from the PHP files) */
.gwt-section-tinted { background-color: var(--gwt-bg-tint); }
.page-header { margin-bottom: clamp(20px, 4vw, 40px); }
.entry-header { margin-bottom: clamp(18px, 3.5vw, 30px); }
.entry-thumbnail { margin-bottom: 30px; border-radius: var(--gwt-border-radius); overflow: hidden; }
.entry-thumbnail img { width: 100%; height: auto; }
.gwt-comments-wrap { margin-top: clamp(30px, 6vw, 50px); }

.gwt-meta { font-size: 13px; color: var(--gwt-muted-color); }
.gwt-meta-cat { color: var(--gwt-primary); font-weight: 700; }
.gwt-blog-card-title { font-size: clamp(15px, 3.4vw, 18px); font-weight: 700; margin: 10px 0; line-height: 1.45; }
.gwt-blog-card-title a { color: var(--gwt-text-color); }
.gwt-blog-card-title a:hover { color: var(--gwt-primary); }
.gwt-blog-excerpt { font-size: 14px; color: var(--gwt-muted-color); margin-bottom: 15px; }
.gwt-readmore { font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* Comment list should never overflow on a phone */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gwt-border-color);
    border-radius: 10px;
    margin-top: 6px;
}
.comment-list, .comment-list .children { padding-inline-start: 0; }
.comment-list .children { padding-inline-start: clamp(10px, 4vw, 30px); }

/* Footer brand column + payment badges (inline styles moved out of footer.php) */
.gwt-footer-col-brand { text-align: center; }
.gwt-footer-logo { margin-bottom: 20px; }
.gwt-footer-logo img { margin-inline: auto; }

.gwt-payments .gwt-badge-label { font-size: 12px; margin-inline-end: 8px; }
.gwt-pay-icon { font-size: 28px; }
.fa-cc-apple-pay.gwt-pay-icon { color: var(--gwt-text-color); }
.fa-cc-visa.gwt-pay-icon { color: #1a1f71; }
.fa-cc-mastercard.gwt-pay-icon { color: #eb001b; }
.fa-cc-paypal.gwt-pay-icon { color: #003087; }

.gwt-payment-badge.gwt-pay-mada { padding-inline: 8px; }
.gwt-payment-badge.gwt-pay-tabby,
.gwt-payment-badge.gwt-pay-tamara {
    font-family: system-ui, sans-serif;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 0;
}
.gwt-payment-badge.gwt-pay-tabby { background: #1ffd8e; color: #000; }
.gwt-payment-badge.gwt-pay-tamara { background: #ffede0; color: #ff805d; }

/* --- Bottom credit bar -------------------------------------------------
   Full-bleed dark strip below the footer: store copyright on the reading-start
   edge, design/development credit on the end edge. Colours come from the
   Customizer via the inline stylesheet. */
.gwt-credit-bar {
    background-color: #0e1622;
    color: #c8d2dd;
    font-size: 14px;
    padding: 16px 0;
    /* Sits clear of the floating WhatsApp button on phones */
    padding-bottom: calc(16px + var(--gwt-safe-b));
}

.gwt-credit-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    flex-wrap: wrap;
}

.gwt-credit-rights { line-height: 1.7; }

.gwt-credit-dev {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.gwt-credit-prefix { opacity: 0.85; }

.gwt-credit-dev a { text-decoration: none; display: inline-flex; align-items: center; }

.gwt-credit-dev-name {
    color: #e5a242;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: opacity 0.25s ease;
}
.gwt-credit-dev a:hover .gwt-credit-dev-name { opacity: 0.8; }

@media (max-width: 768px) {
    .gwt-credit-bar { font-size: 12.5px; padding-top: 14px; }
    .gwt-credit-inner { flex-direction: column; text-align: center; gap: 8px; }
    .gwt-credit-dev { white-space: normal; justify-content: center; flex-wrap: wrap; }
}

/* WhatsApp float — respects the iOS home indicator instead of sitting under it */
.gwt-whatsapp-float {
    position: fixed;
    bottom: calc(24px + var(--gwt-safe-b));
    inset-inline-start: 20px;
    width: 56px; height: 56px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 900;
    transition: var(--gwt-transition);
}
.gwt-whatsapp-float:hover { transform: scale(1.08); background-color: #20ba5a; color: #fff; }
@media (max-width: 480px) {
    .gwt-whatsapp-float { width: 50px; height: 50px; font-size: 25px; bottom: calc(16px + var(--gwt-safe-b)); inset-inline-start: 14px; }
}

/* ==========================================================================
   12. WOOCOMMERCE
   ========================================================================== */
.woocommerce-loop-product__title {
    font-family: var(--gwt-font-family);
    font-weight: 700;
    color: var(--gwt-text-color);
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.price { font-family: var(--gwt-font-family); color: var(--gwt-primary) !important; font-weight: 800; font-size: 17px; }
.price del { color: var(--gwt-muted-color) !important; font-size: 14px; font-weight: 500; margin-inline-end: 5px; }
.price ins { text-decoration: none; }

.onsale {
    background-color: var(--gwt-secondary) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 4px 12px !important;
    top: 12px !important;
    inset-inline-end: 12px !important;
    inset-inline-start: auto !important;
    left: auto !important;
    right: auto !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.woocommerce-product-gallery { border-radius: var(--gwt-border-radius); overflow: hidden; }
.woocommerce-tabs ul.tabs { border-bottom: 2px solid var(--gwt-border-color) !important; }
.woocommerce-tabs ul.tabs li { background: none !important; border: none !important; }
.woocommerce-tabs ul.tabs li.active a { color: var(--gwt-primary) !important; border-bottom: 3px solid var(--gwt-primary); }

/* --- Shop archive: CSS grid replaces WooCommerce's float layout, which is
       what caused the ragged/overlapping product columns on phones. --- */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    gap: var(--gwt-grid-gap);
    margin: 0 0 30px !important;
    padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
    display: flex;
    flex-direction: column;
}
.woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; margin-bottom: 12px !important; }
.woocommerce ul.products li.product .button { margin-top: auto; width: 100%; }

.woocommerce ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Shop toolbar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 20px; }
@media (max-width: 600px) {
    .woocommerce .woocommerce-ordering,
    .woocommerce .woocommerce-ordering select { width: 100%; float: none !important; }
    .woocommerce .woocommerce-ordering select { padding: 10px; border-radius: 10px; border: 1px solid var(--gwt-border-color); }
    .woocommerce .woocommerce-result-count { float: none !important; display: block; }
}

/* --- Single product --- */
@media (max-width: 768px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
        margin: 0 0 24px !important;
    }
    .woocommerce div.product .product_title { font-size: 22px; line-height: 1.4; }
    .woocommerce div.product form.cart .quantity,
    .woocommerce div.product form.cart .button { float: none !important; }
    .woocommerce div.product form.cart {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .woocommerce div.product form.cart .button { flex: 1 1 auto; min-height: 48px; }
    .woocommerce-tabs ul.tabs {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 !important;
        scrollbar-width: none;
    }
    .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
    .woocommerce-tabs ul.tabs li { float: none !important; flex: 0 0 auto; margin: 0 !important; }
    .woocommerce-tabs ul.tabs::before { display: none !important; }
}

/* --- Cart: the desktop table becomes stacked cards on phones.
       Previously it just overflowed horizontally. --- */
@media (max-width: 768px) {
    .woocommerce table.shop_table_responsive,
    .woocommerce-page table.shop_table_responsive { border: 0; }
    .woocommerce table.shop_table_responsive thead,
    .woocommerce-page table.shop_table_responsive thead { display: none; }
    .woocommerce table.shop_table_responsive tr,
    .woocommerce-page table.shop_table_responsive tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--gwt-border-color);
        border-radius: var(--gwt-border-radius);
        padding: 10px;
        background: #fff;
    }
    .woocommerce table.shop_table_responsive tr td,
    .woocommerce-page table.shop_table_responsive tr td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: start !important;
        border: 0;
        border-bottom: 1px dashed var(--gwt-border-color);
        padding: 10px 4px;
    }
    .woocommerce table.shop_table_responsive tr td:last-child { border-bottom: 0; }
    .woocommerce table.shop_table_responsive tr td::before {
        content: attr(data-title) ": ";
        font-weight: 700;
        color: var(--gwt-muted-color);
        float: none !important;
    }
    .woocommerce table.shop_table_responsive tr td.product-remove::before,
    .woocommerce table.shop_table_responsive tr td.product-thumbnail::before { content: none; }
    .woocommerce table.shop_table_responsive tr td.product-thumbnail img { width: 70px; height: 70px; object-fit: cover; border-radius: 10px; }
    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-page .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
    .woocommerce .cart .actions .coupon { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .woocommerce .cart .actions .coupon .input-text { flex: 1 1 140px; width: auto !important; padding: 10px; }
    .woocommerce .cart .actions .button { width: 100%; }
}

/* --- Checkout / account forms --- */
@media (max-width: 768px) {
    .woocommerce-checkout #customer_details .col-1,
    .woocommerce-checkout #customer_details .col-2,
    .woocommerce-page #customer_details .col-1,
    .woocommerce-page #customer_details .col-2 { width: 100% !important; float: none !important; margin-bottom: 20px; }
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last { width: 100% !important; float: none !important; margin-inline-end: 0 !important; }
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; float: none !important; }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        white-space: nowrap;
        padding-bottom: 8px;
        margin-bottom: 20px;
        scrollbar-width: none;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
    .woocommerce-account .woocommerce-MyAccount-navigation li {
        border: 1px solid var(--gwt-border-color);
        border-radius: 20px;
        padding: 8px 14px;
        flex: 0 0 auto;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--gwt-primary); }
    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #fff; }
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gwt-border-color);
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--gwt-primary) !important;
    color: #fff !important;
    border-radius: var(--gwt-border-radius) !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    min-height: 44px;
    line-height: 1.3 !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background-color: var(--gwt-primary-dark) !important; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
    border-top-color: var(--gwt-primary) !important;
    border-radius: 10px;
}
@media (max-width: 600px) {
    .woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { float: none !important; margin: 0 !important; }
}

/* Woo breadcrumb + pagination */
.woocommerce .woocommerce-breadcrumb { font-size: 13px; color: var(--gwt-muted-color); margin-bottom: 18px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--gwt-border-color);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--gwt-primary); color: #fff; border-color: var(--gwt-primary); }

/* ==========================================================================
   13. LOOSE ENDS — classes that were emitted by PHP but had no rule at all
   ========================================================================== */
.gwt-app-wrapper { display: flow-root; }
.gwt-wc-content-wrapper, .gwt-woocommerce-main { min-width: 0; }
.gwt-copyright { display: inline-block; }

.gwt-no-prods {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gwt-muted-color);
    padding: 30px 10px;
}

.gwt-price { display: inline-block; font-weight: 800; color: var(--gwt-primary); font-size: clamp(14px, 3.4vw, 17px); }
.gwt-price .price { font-size: inherit; }
.gwt-price del { font-size: 0.8em; }

.gwt-footer-widget { margin-bottom: 24px; }
.gwt-footer-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }

.gwt-tabs-section, .gwt-tabs-content { min-width: 0; }
.gwt-stat-info { min-width: 0; }

/* Anything WordPress or a plugin injects into content must stay inside the
   viewport — a final guard against horizontal scroll on phones. */
@media (max-width: 768px) {
    .gwt-app-wrapper, .gwt-app-wrapper * { max-width: 100%; }
    .gwt-app-wrapper table { max-width: none; }
}