/*
Theme Name: The Gesture
Theme URI: https://malik7mb7.com/
Author: Malik AlBalasmeh
Author URI: https://malik7mb7.com/
Description: Custom theme for The Gesture By Farah — brown/cream brand, Crimson Text, mobile-first, WooCommerce-ready. Designed & developed by Malik AlBalasmeh (malik7mb7.com).
Version: 1.2.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: thegesture
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   Design tokens — brand palette (brown/cream) kept, shades tuned.
   ========================================================================= */
:root{
  --ink:#3b2a23;          /* brand brown (text, buttons) */
  --ink-2:#5a473d;        /* softer brown */
  --muted:#8a786c;        /* muted brown for secondary text */
  --cream:#fdf8f3;        /* brand cream */
  --cream-2:#f6efe6;      /* panel / section tint */
  --cream-3:#efe5d8;      /* deeper cream */
  --line:#e7dccf;         /* hairline */
  --bg:#ffffff;
  --gold:#b0836b;         /* warm terracotta accent (from brand family) */
  --ok:#3b5a46;
  --radius:14px;
  --radius-lg:20px;
  --maxw:1200px;
  --pad:clamp(16px,4vw,40px);
  --serif:'Crimson Text', Georgia, 'Times New Roman', serif;
  --shadow:0 10px 30px rgba(59,42,35,.08);
}

/* =========================================================================
   Base
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(34px,6vw,56px)}
h2{font-size:clamp(28px,4.4vw,44px)}
h3{font-size:clamp(20px,2.6vw,26px)}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
/* Visually hidden without pushing the page sideways — an off-canvas offset
   (left:-9999px) creates a 10,000px horizontal scroll area on RTL pages. */
.skip-link{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:fixed!important;inset-inline-start:8px;top:8px;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:8px;z-index:1000}

/* Layout helpers */
.tg-container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.tg-section{padding:clamp(32px,4.5vw,60px) 0}
.tg-section--tint{background:var(--cream)}
.tg-center{text-align:center}
.tg-eyebrow{display:block;text-transform:uppercase;letter-spacing:.28em;font-size:13px;color:var(--gold);margin-bottom:14px}
.tg-lead{color:var(--muted);font-size:clamp(17px,2.2vw,20px);max-width:60ch;margin:0 auto}

/* Buttons */
.tg-btn,.button,.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-block;background:var(--ink);color:var(--cream);
  font-family:var(--serif);font-size:17px;font-weight:600;line-height:1;
  padding:15px 34px;border:1px solid var(--ink);border-radius:999px;cursor:pointer;
  transition:opacity .2s,background .2s,color .2s;text-align:center;
}
.tg-btn:hover,.button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:#2c1f19;color:var(--cream);opacity:1}
.tg-btn--ghost{background:transparent;color:var(--ink)}
.tg-btn--ghost:hover{background:var(--ink);color:var(--cream)}

/* =========================================================================
   Header
   ========================================================================= */
.tg-header{position:sticky;top:0;z-index:200;background:var(--cream);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.tg-header.is-scrolled{box-shadow:0 6px 20px rgba(59,42,35,.07)}
.tg-page-wrap{padding:clamp(10px,2vw,24px) 0}
.tg-split__copy .tg-eyebrow{color:var(--gold)}
.tg-header__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:78px;grid-template-areas:"logo nav actions"}
.tg-logo{grid-area:logo;justify-self:start}
.tg-nav{grid-area:nav;justify-self:center}
.tg-actions{grid-area:actions;justify-self:end}
.tg-burger{grid-area:burger}
/* Logo: the trimmed wordmark carries no padding, so it can be set by height. */
.tg-logo img,.tg-logo .custom-logo{height:48px;max-height:none;width:auto}
.tg-logo a{display:inline-flex;align-items:center;font-size:22px;font-weight:700}
.tg-nav{display:flex;align-items:center;gap:30px}
.tg-nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}
.tg-nav a{font-size:18px;letter-spacing:.02em;position:relative;padding:6px 0}
.tg-nav a:hover{color:var(--gold)}
.tg-nav .current-menu-item>a::after,.tg-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)}
.tg-actions{display:flex;align-items:center;gap:18px}
.tg-cart{position:relative;display:inline-flex;align-items:center;color:var(--ink)}
.tg-cart__count{position:absolute;top:-8px;right:-10px;background:var(--ink);color:var(--cream);font-size:11px;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.tg-icon-btn{background:none;border:0;color:var(--ink);cursor:pointer;display:inline-flex;padding:4px}
.tg-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.tg-burger span{width:24px;height:2px;background:var(--ink);display:block;transition:.25s}
.tg-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tg-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tg-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav panel */
.tg-mobile-nav{display:none;position:fixed;inset:78px 0 0;background:var(--cream);z-index:190;padding:24px var(--pad);overflow-y:auto}
.tg-mobile-nav.is-open{display:block}
.tg-mobile-nav ul{list-style:none;margin:0;padding:0}
.tg-mobile-nav li{border-bottom:1px solid var(--line)}
.tg-mobile-nav a{display:block;padding:16px 4px;font-size:22px}
.tg-mobile-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.tg-mobile-top .tg-search{display:inline-flex;align-items:center;gap:8px;font-size:18px;padding:0}
.tg-mobile-top .tg-lang{font-size:15px}

/* =========================================================================
   Hero (home) — fixed & responsive (was broken on mobile)
   ========================================================================= */
.tg-hero{position:relative;background:var(--cream-2);overflow:hidden}
.tg-hero__inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,5vw,64px);min-height:min(72vh,620px);padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,48px)}
.tg-hero__copy .tg-eyebrow{color:var(--gold)}
.tg-hero__title{font-size:clamp(40px,7vw,72px);margin-bottom:.25em}
.tg-hero__text{color:var(--ink-2);font-size:clamp(17px,2.2vw,21px);max-width:46ch;margin-bottom:1.4em}
.tg-hero__media{position:relative}
.tg-hero__media img{width:100%;border-radius:var(--radius-lg);aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow)}

/* =========================================================================
   Home sections
   ========================================================================= */
.tg-sechead{text-align:center;max-width:720px;margin:0 auto clamp(20px,3vw,34px)}
.tg-grid{display:grid;gap:24px}
.tg-grid--4{grid-template-columns:repeat(4,1fr)}
.tg-grid--3{grid-template-columns:repeat(3,1fr)}
.tg-grid--2{grid-template-columns:repeat(2,1fr)}

/* Split feature (image + text) */
.tg-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.tg-split__media img{width:100%;border-radius:var(--radius-lg);aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow)}
.tg-split--reverse .tg-split__media{order:2}

/* Video / feature band */
.tg-videowrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--ink)}
.tg-videowrap video,.tg-videowrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* Meet Farah */
.tg-farah{align-items:center}
.tg-farah__media img{border-radius:var(--radius-lg);aspect-ratio:3/4;object-fit:cover;box-shadow:var(--shadow)}

/* =========================================================================
   WooCommerce — product loop & single (styled Woo defaults)
   ========================================================================= */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(3,1fr);gap:28px;margin:0;padding:0;list-style:none}
/* WooCommerce adds ::before/::after clearfix — as a grid they become empty cells
   (first row showed only 2 items pushed right). Remove them. */
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important}
.woocommerce ul.products li.product{position:relative;width:auto!important;margin:0!important;float:none!important;text-align:center;background:#fff;border:none;border-radius:18px;box-shadow:0 6px 18px rgba(59,42,35,.08);overflow:hidden;display:flex;flex-direction:column;padding-bottom:22px;transition:transform .35s ease,box-shadow .35s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(59,42,35,.14)}
.woocommerce ul.products li.product > a:first-child{display:block;overflow:hidden}
.woocommerce ul.products li.product a img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0;margin:0;display:block;transition:transform .8s ease}
.woocommerce ul.products li.product:hover a img{transform:scale(1.05)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.35;color:var(--ink);text-align:center;padding:0 20px;margin:22px 0 10px}
.woocommerce ul.products li.product .price{color:var(--ink);font-size:18px;font-weight:600;display:block;text-align:center;margin:0 0 18px;padding:0 20px}
.woocommerce ul.products li.product .price del{color:var(--muted);font-weight:400;font-size:15px;margin-inline-end:6px}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .star-rating{margin:0 auto 14px;font-size:14px}
/* Full-width add-to-cart, pinned to the card bottom (equal across the row) */
.woocommerce ul.products li.product .button{display:flex;align-items:center;justify-content:center;width:calc(100% - 40px);margin:auto auto 0!important;padding:13px 20px;font-size:14px;letter-spacing:.02em;opacity:1;visibility:visible}
.woocommerce ul.products li.product .added_to_cart{margin:10px auto 0;font-size:13px}
.woocommerce .star-rating{color:var(--gold)}
.woocommerce span.onsale{background:var(--gold);color:var(--cream);border-radius:999px;padding:5px 14px;min-height:0;min-width:0;line-height:1.5;top:12px;left:12px;margin:0;font-size:12px;font-weight:600}
/* Home: constrain the [products] shortcode block to match the section width */
.tg-page-wrap .woocommerce{max-width:1140px;margin:0 auto;padding:0 clamp(16px,4vw,34px)}
@media(max-width:768px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px;padding:0 12px;margin-top:18px}
  .woocommerce ul.products li.product .price{font-size:16px;margin-bottom:14px}
  .woocommerce ul.products li.product .button{width:calc(100% - 24px);padding:12px 15px;font-size:13px}
}

/* Single product */
.single-product div.product{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.single-product div.product .woocommerce-product-gallery,
.single-product div.product div.images{width:100%!important;float:none!important;margin:0;position:sticky;top:96px}
.single-product div.product .summary,
.single-product div.product .entry-summary{width:100%!important;float:none!important;margin:0;padding-top:4px}
.single-product .woocommerce-product-gallery__wrapper{margin:0}
.single-product .woocommerce-product-gallery__image img,
.single-product div.product div.images img{width:100%!important;height:auto;border-radius:16px;box-shadow:0 12px 34px rgba(59,42,35,.12)}
.single-product .woocommerce-product-gallery .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.single-product .woocommerce-product-gallery .flex-control-thumbs li{width:72px;margin:0}
.single-product .woocommerce-product-gallery .flex-control-thumbs img{border-radius:10px;opacity:.6;transition:opacity .2s;cursor:pointer}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1}
.single-product .woocommerce-product-gallery__trigger{top:14px;right:14px}
.single-product div.product .product_title{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:0 0 12px}
.single-product div.product p.price,.single-product div.product span.price{color:var(--ink);font-size:26px;font-weight:600;margin:0 0 18px}
.single-product .woocommerce-product-details__short-description{color:var(--muted);line-height:1.85;margin-bottom:24px}
.single-product form.cart{margin:0 0 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.single-product form.cart .quantity input.qty{border:1px solid var(--line);border-radius:10px;padding:12px 10px;width:78px;height:auto;font-size:16px;background:#fff}
.single-product .single_add_to_cart_button{border-radius:999px!important;padding:14px 34px!important;font-size:16px!important}
.single-product .product_meta{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;color:var(--muted);font-size:14px;line-height:2}
.single-product .product_meta a{color:var(--ink)}
.single-product table.variations{margin:0 0 18px}
.single-product table.variations td,.single-product table.variations th{padding:6px 0;vertical-align:middle}
/* Tabs (Description / Additional info) */
.single-product .woocommerce-tabs{grid-column:1/-1;margin-top:36px}
.woocommerce div.product .woocommerce-tabs ul.tabs{border:none!important;padding:0!important;margin:0 0 24px!important;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent!important;border:1px solid var(--line)!important;border-radius:999px!important;margin:0!important;padding:0!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none!important;border:none!important;content:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--ink)!important;border-color:var(--ink)!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--ink)!important;padding:9px 22px!important;font-size:15px;display:block}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--cream)!important}
.single-product .woocommerce-Tabs-panel{max-width:820px;margin:0 auto;line-height:1.9}
.single-product .woocommerce-Tabs-panel h2{font-size:22px;margin-bottom:14px}
/* Related / up-sells — one row of 3 */
.single-product .related.products,.single-product .up-sells.products{grid-column:1/-1;margin-top:40px;border-top:1px solid var(--line);padding-top:30px}
.single-product .related.products>h2,.single-product .up-sells.products>h2{text-align:center;font-size:26px;margin:0 0 30px}
.single-product .related.products ul.products,.single-product .up-sells.products ul.products{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){
  .single-product div.product{grid-template-columns:1fr}
  .single-product div.product .woocommerce-product-gallery,.single-product div.product div.images{position:static}
  .single-product .related.products ul.products,.single-product .up-sells.products ul.products{grid-template-columns:1fr 1fr}
}

/* Cart / Checkout / Account — light styling, structure untouched */
.woocommerce table.shop_table{border-radius:var(--radius);border-color:var(--line)}
.woocommerce-cart table.cart img{width:72px;border-radius:8px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce-account .woocommerce form .form-row input.input-text,
.select2-container--default .select2-selection--single{
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--serif);font-size:16px;background:var(--bg)
}
.woocommerce #payment,.woocommerce-checkout #payment{background:var(--cream);border-radius:var(--radius)}
.woocommerce .woocommerce-message,.woocommerce-info{border-top-color:var(--gold)}
.woocommerce .woocommerce-message::before,.woocommerce-info::before{color:var(--gold)}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb{color:var(--muted);font-size:15px;margin-bottom:20px}

/* Woo content wrapper (from woocommerce.php) */
.tg-shopwrap{padding:clamp(20px,3.5vw,40px) 0}
.tg-shopwrap .woocommerce-products-header__title,.tg-shopwrap h1.entry-title{text-align:center;margin-bottom:24px}

/* =========================================================================
   Blog
   ========================================================================= */
.tg-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tg-post-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.tg-post-card__img{aspect-ratio:3/2;object-fit:cover;width:100%}
.tg-post-card__body{padding:20px;display:flex;flex-direction:column;gap:10px}
.tg-post-card__meta{color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.1em}
.tg-page-hero{background:var(--cream);text-align:center;padding:clamp(26px,4vw,48px) 0}
.entry-content{max-width:760px;margin:0 auto}
.entry-content img{border-radius:var(--radius)}

/* Pagination */
.tg-pagination{display:flex;gap:10px;justify-content:center;margin-top:28px}
.tg-pagination .page-numbers{border:1px solid var(--line);border-radius:8px;padding:8px 14px;color:var(--ink)}
.tg-pagination .current{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* =========================================================================
   Footer
   ========================================================================= */
.tg-footer{background:var(--ink);color:var(--cream);padding:clamp(34px,4.5vw,56px) 0 22px}
.tg-footer a{color:var(--cream)}
.tg-footer a:hover{color:var(--gold)}
.tg-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px}
.tg-footer__brand p{color:#e9ddd1;max-width:none}
.tg-footer h4{color:var(--cream);font-size:20px;margin-bottom:16px}
.tg-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tg-footer__contact p{color:#e9ddd1;margin:0 0 8px}
.tg-social{display:flex;gap:14px;margin-top:14px}
.tg-social a{width:40px;height:40px;border:1px solid rgba(253,248,243,.35);border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.tg-social a:hover{background:var(--cream);color:var(--ink)}
.tg-social svg{width:18px;height:18px}
.tg-footer__bottom{border-top:1px solid rgba(253,248,243,.2);margin-top:28px;padding-top:18px;text-align:center;color:#d9cabb;font-size:14px}

/* Floating WhatsApp (optional; shown only if data attr set later).
   Logical inset so it mirrors on the RTL /ar/ side. */
.tg-wa{position:fixed;inset-inline-end:18px;bottom:18px;z-index:300;width:54px;height:54px;border-radius:999px;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}

/* =========================================================================
   Responsive
   ========================================================================= */
@media(max-width:1024px){
  .tg-grid--4{grid-template-columns:repeat(2,1fr)}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .tg-footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .tg-header__bar{grid-template-columns:auto 1fr auto;grid-template-areas:"burger logo actions"}
  .tg-nav,.tg-actions .tg-search,.tg-actions .tg-lang{display:none}
  .tg-burger{display:flex;justify-self:start}
  .tg-logo{justify-self:center}
  .tg-logo img,.tg-logo .custom-logo{height:40px}
  .tg-actions{gap:12px}
  .tg-hero__inner{grid-template-columns:1fr;min-height:auto;text-align:center}
  .tg-hero__copy .tg-lead,.tg-hero__text{margin-left:auto;margin-right:auto}
  .tg-hero__media{order:-1}
  .tg-hero__media img{aspect-ratio:16/10;max-height:360px}
  .tg-split,.tg-farah{grid-template-columns:1fr}
  .tg-split--reverse .tg-split__media{order:0}
  .tg-posts{grid-template-columns:1fr}
  .tg-grid--3{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{font-size:17px}
  .tg-grid--2,.tg-grid--3,.tg-grid--4{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:1fr 1fr;gap:14px}
  .woocommerce ul.products li.product{padding:10px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px}
  .tg-footer__grid{grid-template-columns:1fr;gap:28px}
}

/* =========================================================================
   WooCommerce presentation tweaks (ported from old Additional CSS,
   stack-independent — logic lives in the shopthegesture-core plugin)
   ========================================================================= */
/* Sale badge always visible (no hover needed) */
.woocommerce ul.products li.product .onsale,
.woocommerce .product .onsale{opacity:1!important;visibility:visible!important;transform:none!important;display:inline-block!important}

/* Brand-coloured notices (shown normally site-wide; checkout hides its own) */
.woocommerce-message,.woocommerce-info{background:#fdfcf8!important;border-top:none;border-left:2px dotted var(--ink)!important;color:var(--ink)!important;border-radius:10px}
.woocommerce-message::before,.woocommerce-info::before{color:var(--gold)!important}

/* Fix glitchy hover animation on variable-product add-to-cart buttons */
.single-product .woocommerce-variation-add-to-cart .button,
.single-product .variations_button .button{transition:none!important;transform:none!important;overflow:hidden!important}
.single-product .woocommerce-variation-add-to-cart .button::before,
.single-product .woocommerce-variation-add-to-cart .button::after,
.single-product .variations_button .button::before,
.single-product .variations_button .button::after{display:none!important;content:none!important}

/* Cart totals: rename "Shipping" → "Delivery", tidy list, right-align amount */
.woocommerce-cart ul#shipping_method,.woocommerce-cart ul.woocommerce-shipping-methods{list-style:none!important;padding-left:0!important;margin-left:0!important}
.woocommerce-cart ul#shipping_method li,.woocommerce-cart ul.woocommerce-shipping-methods li{list-style:none!important}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th{font-size:0!important}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th::after{content:"Delivery"!important;font-size:19px!important}
.woocommerce-cart .cart_totals label{display:flex;justify-content:space-between;width:100%}
.woocommerce-cart .cart_totals label .woocommerce-Price-amount{margin-inline-start:auto;text-align:end}
.woocommerce-cart .woocommerce-shipping-destination{display:none!important}

/* Thank-you / order details: hide Pay/Cancel actions row */
.woocommerce-order table.order_details tfoot tr:has(th.order-actions--heading),
.woocommerce-order table.order_details tfoot tr:has(td a.pay),
.woocommerce-order table.order_details tfoot tr:has(td a.cancel){display:none!important}

/* JOD currency label spacing (from plugin's price wrapping) */
.price-currency{font-size:.86em;margin-inline-start:2px}

/* Secondary WooCommerce buttons (Apply coupon / Update cart / Continue shopping) — outline, lighter than primary */
.woocommerce button[name="apply_coupon"],.woocommerce input[name="apply_coupon"],
.woocommerce button[name="update_cart"],.woocommerce input[name="update_cart"],
.woocommerce a.button.wc-backward,.woocommerce .cart .button:not(.checkout-button):not([name="add-to-cart"]){
  background:transparent;color:var(--ink);border:1px solid var(--line);padding:12px 24px;font-size:15px}
.woocommerce button[name="apply_coupon"]:hover,.woocommerce button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover{background:var(--cream);color:var(--ink);border-color:var(--ink)}
/* Primary cart CTA (Proceed to checkout) stays solid */
.woocommerce .wc-proceed-to-checkout a.checkout-button{background:var(--ink);color:var(--cream);border:1px solid var(--ink);font-size:17px;padding:15px 30px}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover{background:#2c1f19;color:var(--cream)}

/* Footer payment icons */
.tg-pay{display:flex;gap:10px;align-items:center;margin-top:16px}
.tg-pay span{color:#d9cabb;font-size:13px;letter-spacing:.04em}
.tg-pay svg{height:26px;width:auto;border-radius:4px;background:#fff;padding:2px}

/* =========================================================================
   WooCommerce UX polish — shop header, cart, my-account (by Malik)
   ========================================================================= */
/* Shop header: centered result count + ordering pill */
.woocommerce .woocommerce-products-header{text-align:center;margin-bottom:8px}
.woocommerce .woocommerce-result-count{float:none;text-align:center;color:var(--muted);font-size:14px;margin:0 0 8px}
.woocommerce .woocommerce-ordering{float:none;text-align:center;margin:0 auto 30px}
.woocommerce .woocommerce-ordering select{border:1px solid var(--line);border-radius:999px;padding:9px 18px;background:#fff;font-family:var(--serif);font-size:15px;color:var(--ink)}

/* Cart */
.woocommerce-cart .woocommerce{max-width:1140px;margin:0 auto}
.woocommerce-cart table.cart{border:1px solid var(--line);border-radius:16px;border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce-cart table.cart thead th{background:var(--cream);border:none;padding:16px;font-family:var(--serif);font-size:15px}
.woocommerce-cart table.cart td{border-top:1px solid var(--line);padding:18px 16px;vertical-align:middle}
.woocommerce-cart table.cart img{width:84px;border-radius:10px}
.woocommerce-cart .product-name a{color:var(--ink);font-family:var(--serif);font-size:17px}
.woocommerce-cart td.actions{background:var(--cream)}
.woocommerce-cart td.product-remove{text-align:center}
.woocommerce a.remove{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);color:var(--ink)!important;font-size:18px;line-height:1;font-weight:400;text-decoration:none}
.woocommerce a.remove:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}
/* Coupon + update row */
.woocommerce-cart td.actions{background:var(--cream);display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px}
.woocommerce-cart td.actions .coupon{display:flex;gap:10px;align-items:center;margin:0}
.woocommerce-cart td.actions .coupon .input-text,.woocommerce #coupon_code{width:240px!important;max-width:60vw;border:1px solid var(--line)!important;border-radius:10px!important;padding:12px 14px!important;font-size:15px;background:#fff}
.woocommerce-cart td.actions .coupon .button{white-space:nowrap;padding:12px 22px}
.woocommerce-cart td.actions button[name="update_cart"]{margin-inline-start:auto}
.woocommerce .cart-collaterals{margin-top:34px;display:flex;justify-content:flex-end}
.woocommerce .cart-collaterals .cart_totals{float:none;width:420px;max-width:100%;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:24px}
.woocommerce .cart-collaterals .cart_totals h2{font-size:22px;margin:0 0 14px}
.woocommerce .cart_totals table{border:none;margin:0;width:100%}
.woocommerce .cart_totals table tr{border-bottom:1px solid var(--line)}
.woocommerce .cart_totals table tr:last-child{border-bottom:none}
.woocommerce .cart_totals table th{text-align:start;font-weight:600;color:var(--ink);padding:13px 0;border:none;width:45%;vertical-align:middle}
.woocommerce .cart_totals table td{text-align:end;padding:13px 0;border:none;vertical-align:middle}
.woocommerce .cart_totals table td .amount{font-weight:600}
.woocommerce .cart_totals .woocommerce-shipping-methods,.woocommerce .cart_totals .shipping-calculator-button{margin:0}
.woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{font-size:19px;padding-top:15px}
.woocommerce .cart_totals .checkout-button{display:block;text-align:center;border-radius:999px;padding:15px;font-size:16px;margin-top:18px}
@media(max-width:640px){.woocommerce .cart-collaterals{justify-content:stretch}.woocommerce .cart-collaterals .cart_totals{width:100%}}

/* My account — dashboard + login/register/lost-password */
.woocommerce-account .woocommerce{max-width:1080px;margin:0 auto}
.woocommerce-account .woocommerce-MyAccount-navigation{width:26%;float:left}
.woocommerce-account .woocommerce-MyAccount-content{width:70%;float:right;line-height:1.8}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:13px 18px;color:var(--ink);text-decoration:none}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active{background:var(--cream)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{font-weight:600}
.woocommerce .u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:30px;float:none;width:100%}
.woocommerce .u-columns .u-column1,.woocommerce .u-columns .u-column2{width:100%!important;float:none!important;margin:0}
.woocommerce form.woocommerce-form-login,.woocommerce form.woocommerce-form-register,.woocommerce .woocommerce-ResetPassword{border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 8px 24px rgba(59,42,35,.06);background:#fff;max-width:520px;margin:0 auto}
.woocommerce-account h2{font-size:22px;margin-bottom:16px}
.woocommerce form .form-row label{margin-bottom:5px;display:block}
.woocommerce .woocommerce-form-login__submit,.woocommerce .woocommerce-form-register__submit,.woocommerce .woocommerce-ResetPassword button{border-radius:999px;padding:12px 28px}
@media(max-width:768px){
  .woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}
  .woocommerce-account .woocommerce-MyAccount-content{margin-top:20px}
  .woocommerce .u-columns.col2-set{grid-template-columns:1fr}
}

/* Blog: a touch more air */
.tg-posts{gap:34px}
.tg-post-card__body{padding:22px}

/* =========================================================================
   Cart table — v1.2.0
   Rows are laid out as a CSS grid so the columns keep sane widths, the
   product photo is big enough to recognise, and the remove (×) sits at the
   row end (right in LTR, left in RTL) instead of floating in the first
   column. Because grid items paint their own borders and backgrounds, the
   row separator and the header strip are applied to the row, not the cells.
   ========================================================================= */
.woocommerce-cart table.cart thead tr,
.woocommerce-cart table.cart tr.cart_item{
  display:grid;
  grid-template-columns:134px minmax(0,1fr) 110px 132px 118px 56px;
  align-items:stretch;
}
.woocommerce-cart table.cart thead tr{background:var(--cream)}
.woocommerce-cart table.cart thead th{background:none;display:flex;align-items:center}
.woocommerce-cart table.cart tr.cart_item{border-top:1px solid var(--line)}
.woocommerce-cart table.cart tr.cart_item td{border-top:none;display:flex;align-items:center;gap:6px}
.woocommerce-cart table.cart .product-thumbnail{order:1}
.woocommerce-cart table.cart .product-name{order:2}
.woocommerce-cart table.cart .product-price{order:3}
.woocommerce-cart table.cart .product-quantity{order:4}
.woocommerce-cart table.cart .product-subtotal{order:5}
.woocommerce-cart table.cart .product-remove{order:6;justify-content:flex-end}
.woocommerce-cart table.cart img{width:112px;border-radius:12px}
.woocommerce-cart table.cart td.product-thumbnail{padding:14px 16px}
.woocommerce-cart table.cart .product-quantity .quantity input.qty{width:74px;border:1px solid var(--line);border-radius:10px;padding:10px 8px;background:#fff}

/* Phones: stacked card — photo left, details stacked, × in the top corner.
   Breakpoint matches WooCommerce's own responsive-table breakpoint (768px),
   because the "Price:" / "Quantity:" labels this layout relies on come from
   woocommerce-smallscreen.css, which is loaded at max-width:768px. */
@media(max-width:768px){
  .woocommerce-cart table.cart thead{display:none}
  .woocommerce-cart table.cart tr.cart_item{
    grid-template-columns:96px minmax(0,1fr) 40px;
    align-items:start;
    row-gap:4px;
    padding:14px 12px;
  }
  .woocommerce-cart table.cart tr.cart_item td{padding:0;background:none!important}
  .woocommerce-cart table.cart img{width:88px}
  .woocommerce-cart table.cart td.product-thumbnail{display:block!important;grid-column:1;grid-row:1 / span 4;padding:0}
  /* Woo's small-screen rules force text-align:right!important, which is wrong
     in LTR and wrong for this layout, so these have to match its weight. */
  .woocommerce-cart table.cart tr.cart_item td{text-align:start!important}
  .woocommerce-cart table.cart td.product-name{grid-column:2}
  .woocommerce-cart table.cart td.product-remove{grid-column:3;grid-row:1;justify-content:flex-end}
  .woocommerce-cart table.cart td.product-price,
  .woocommerce-cart table.cart td.product-quantity,
  .woocommerce-cart table.cart td.product-subtotal{grid-column:2}
  /* Woo's data-title labels: keep them, but inline and quiet. */
  .woocommerce-cart table.cart td::before{float:none!important;font-weight:600;color:var(--ink-2)}
  .woocommerce-cart table.cart td.product-name::before,
  .woocommerce-cart table.cart td.product-thumbnail::before,
  .woocommerce-cart table.cart td.product-remove::before{content:none!important}
  .woocommerce-cart td.actions{flex-direction:column;align-items:stretch}
  .woocommerce-cart td.actions .coupon{width:100%}
  .woocommerce-cart td.actions .coupon .input-text,.woocommerce #coupon_code{width:100%!important;max-width:none}
  .woocommerce-cart td.actions button[name="update_cart"]{margin-inline-start:0;width:100%}
  .woocommerce .cart-collaterals .cart_totals{width:100%}
}

/* Between 769px and 860px the grid still has 6 columns but the product photo
   and long names get tight, so drop the two money columns' fixed widths. */
@media(max-width:920px) and (min-width:769px){
  .woocommerce-cart table.cart thead tr,
  .woocommerce-cart table.cart tr.cart_item{grid-template-columns:104px minmax(0,1fr) 92px 104px 96px 48px}
  .woocommerce-cart table.cart img{width:88px}
}

/* Terms & Conditions are inlined at checkout inside a 200px scroll box; the
   page's own hero styling (eyebrow, huge centred title, big padding) wastes
   almost all of it. */
.woocommerce-terms-and-conditions .tg-legal{padding:8px 12px}
.woocommerce-terms-and-conditions .tg-legal .eyebrow,
.woocommerce-terms-and-conditions .tg-legal .divider{display:none}
.woocommerce-terms-and-conditions .tg-legal .tg-title{font-size:19px;text-align:start;margin:0 0 6px}
.woocommerce-terms-and-conditions .tg-legal .lead{text-align:start;margin:0 0 10px;font-size:15px}
.woocommerce-terms-and-conditions .tg-legal h2{font-size:16px;margin:14px 0 6px}

/* =========================================================================
   Mobile fixes — v1.2.1 (client review, 20 Sep 2026)
   ========================================================================= */

/* 1) Single product: FlexSlider measures the gallery before the image has
   loaded and leaves a stale inline height on .flex-viewport, so the photo
   overflowed its box and the title/price/thumbnails overlapped each other. */
.single-product .woocommerce-product-gallery .flex-viewport{height:auto!important}
.single-product .woocommerce-product-gallery__wrapper{height:auto!important}
.single-product .woocommerce-product-gallery{overflow:hidden}
.single-product .woocommerce-product-gallery .flex-control-thumbs{clear:both;position:relative;z-index:2}
/* Keep the main image's box known before it loads (no jump, no overlap). */
.single-product .woocommerce-product-gallery__image{display:block}
.single-product .woocommerce-product-gallery__image img{width:100%!important;height:auto!important;display:block}

@media(max-width:860px){
  .single-product div.product{display:block}
  .single-product .woocommerce-product-gallery{margin-bottom:18px}
  .single-product .woocommerce-product-gallery .flex-control-thumbs li{width:60px}
}

/* 2) Shop grid on phones: one frame for every photo (they are shot at
   different zoom levels), shorter image box, and titles clamped to two
   lines so prices and buttons line up across the row. */
@media(max-width:560px){
  .woocommerce ul.products{gap:12px}
  .woocommerce ul.products li.product{padding:8px 8px 16px}
  .woocommerce ul.products li.product > a:first-child{background:#fff;border-radius:12px}
  .woocommerce ul.products li.product a img{aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:12px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:2.7em;font-size:15px;line-height:1.35;padding:0 6px;margin:12px 0 6px;
  }
  .woocommerce ul.products li.product .price{font-size:15px;margin-bottom:12px;padding:0 6px}
  .woocommerce ul.products li.product .button{width:calc(100% - 12px);padding:11px 10px;font-size:13px}
}

/* 3) Footer on phones: two columns instead of one long scroll. */
@media(max-width:560px){
  .tg-footer{padding:34px 0 18px}
  .tg-footer__grid{grid-template-columns:1fr 1fr;gap:22px 18px}
  .tg-footer__brand{grid-column:1 / -1}
  .tg-footer__brand p{margin:0 0 12px;font-size:15px;line-height:1.55}
  .tg-footer h4{font-size:17px;margin-bottom:10px}
  .tg-footer ul{gap:7px}
  .tg-footer ul a{font-size:15px}
  .tg-footer__contact{grid-column:1 / -1}
  .tg-footer__contact p{margin:0 0 6px;font-size:15px}
  .tg-footer__bottom{margin-top:22px;padding-top:14px;font-size:12.5px}
}

/* 4) Home benefits strip: icon tiles on phones instead of a long text list. */
.tg-home .why .ico{display:block;margin:0 auto 10px;width:30px;height:30px;color:var(--gold)}
.tg-home .why .ico svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){
  .tg-home .why{grid-template-columns:1fr 1fr!important;gap:14px 10px}
  .tg-home .why > div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 10px}
  .tg-home .why h3{font-size:16px;line-height:1.3;margin:0}
  .tg-home .why p{display:none}
  .tg-home .why .ico{width:26px;height:26px;margin-bottom:8px}
}

/* 5) About page. The page heading and the three value cards stay centred; the
   story itself ("A different kind of gifting", "The Dream We Made Real",
   "What We Believe In") reads from the start edge — left in English, right in
   Arabic — as the client asked on 24 Sep 2026 (it was centred before). */
.page-id-4697 .tg-legal .cards .card{text-align:center}
.page-id-4697 .tg-legal .col-text,
.page-id-4697 .tg-legal .col-text h2,
.page-id-4697 .tg-legal .panel,
.page-id-4697 .tg-legal .panel h2{text-align:start}
.page-id-4697 .tg-legal .col-text p,
.page-id-4697 .tg-legal .panel p{margin-inline:0;max-width:70ch}

/* 6) "Added to your cart" confirmation: dark green instead of brown,
   with a green tick. */
.woocommerce-message{border-color:var(--ok)!important;border-left-color:var(--ok)!important}
.woocommerce-message::before{color:#4e8a63!important;background:none!important}
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-message a.wc-forward{background:var(--ok)!important;border-color:var(--ok)!important;color:#fff!important}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-message a.wc-forward:hover{background:#2f4a39!important;border-color:#2f4a39!important}
.woocommerce-info{border-color:var(--gold)}

/* 1b) The real cause of the product-page overlap on phones:
   WooCommerce's own `.woocommerce div.product div.images.woocommerce-product-gallery
   {position:relative}` is more specific than our mobile reset, so the gallery stayed
   positioned and kept the desktop `top:96px` — painting the photo 96px lower than its
   place in the flow, right on top of the title and the price. */
@media(max-width:860px){
  .single-product div.product div.images.woocommerce-product-gallery,
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product div.images{position:static!important;top:auto!important}
}

/* --- v1.2.4 (client review, 24 Sep 2026) --------------------------------- */

/* 7) Less empty space on the content pages too (their spacing lives in each
   page's own <style>, so it is tightened from here). */
.tg-page-wrap .tg-legal{padding-top:clamp(18px,3.5vw,38px);padding-bottom:clamp(18px,3.5vw,38px)}
.tg-page-wrap .tg-legal .two-col{margin-top:clamp(24px,4vw,36px);margin-bottom:clamp(24px,4vw,36px)}
.tg-page-wrap .tg-legal .cards{margin-top:clamp(22px,3.5vw,32px);margin-bottom:clamp(22px,3.5vw,32px)}
.tg-page-wrap .tg-legal .cta{margin-top:clamp(24px,3.5vw,32px)}

/* 8) "Added to your cart" notice on phones. WooCommerce floats each button to the
   right on its own line, so "View cart" and "Checkout" sat edge to edge and read
   as one block overlapping itself. Side by side under the message instead. */
@media(max-width:560px){
  .woocommerce-message .button,
  .woocommerce-message a.button,
  .woocommerce-message a.wc-forward{float:none!important;display:inline-block!important;margin:12px 0 0!important;margin-inline-end:8px!important;padding:10px 18px!important;font-size:15px!important;line-height:1.3!important}
}

/* 9) Search results: a product card shows its price instead of a publish date. */
.tg-post-card__meta .woocommerce-Price-amount{font-weight:600;color:var(--ink)}