/*
Theme Name: Cosmora
Theme URI: https://cosmora.info/
Description: The official theme for Cosmora - The Essence of Your Inner Glow. A child theme of Blocksy, styled to the Cosmora brand identity (Royal Elegance green, Desert Luxury gold, Gentle Radiance rose on a Pure Foundation off-white) with Bodoni MT serif display and Montserrat body. Built to pair with WooCommerce for a luxury fragrance store in Egypt.
Author: Cosmora
Version: 1.6.0
Template: blocksy
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cosmora
*/

/* =====================================================================
   COSMORA - brand design tokens (official identity)
   ===================================================================== */
:root{
  --cos-bg:        #F5F5F5;  /* Pure Foundation - page background  */
  --cos-surface:   #FFFFFF;  /* cards / surfaces                   */
  --cos-ink:       #1C2C26;  /* primary text (deep green-black)    */
  --cos-muted:     #6E6A63;  /* secondary text                     */
  --cos-green:     #004D40;  /* Royal Elegance - primary brand     */
  --cos-green-dark:#00382E;  /* hover green                        */
  --cos-gold:      #C5A059;  /* Desert Luxury - accent             */
  --cos-gold-dark: #A8843F;  /* hover gold                         */
  --cos-rose:      #AC706B;  /* Gentle Radiance - soft accent      */
  --cos-line:      #E5E0D6;  /* hairlines / borders                */
  --cos-sale:      #9B2C2C;  /* sale / out-of-stock red            */
  --cos-success:   #004D40;  /* in-stock / free gift -> brand green*/
  --cos-display:  "Bodoni MT", "Bodoni Moda", Didot, Georgia, "Times New Roman", serif;
  --cos-body:     "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================================
   Base typography
   ===================================================================== */
body,
.entry-content,
.ct-container,
p, li, td, th, input, select, textarea, button{
  font-family: var(--cos-body);
}
body{
  background-color: var(--cos-bg);
  color: var(--cos-ink);
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,
.entry-title,
.ct-module-heading,
.woocommerce-loop-product__title,
.product_title{
  font-family: var(--cos-display);
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--cos-ink);
}
h1,.entry-title{ font-size: clamp(2rem, 4vw, 3.1rem); line-height:1.1; }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* Section headings like "OUR CATEGORIES / BEST SELLERS" */
.cos-section-eyebrow{
  display:block; text-align:center;
  font-family: var(--cos-body);
  text-transform: uppercase;
  letter-spacing: 3px; font-size: .72rem;
  color: var(--cos-gold);
  margin-bottom: .35rem;
}
.cos-section-title{
  text-align:center;
  margin: 0 0 1.8rem;
  position: relative;
  color: var(--cos-green);
}
.cos-section-title:after{
  content:""; display:block; width:54px; height:2px;
  background: var(--cos-gold); margin: .7rem auto 0;
}

/* =====================================================================
   Announcement / top bar (free shipping message)
   ===================================================================== */
.cos-announcement,
[data-row="top"] .ct-topbar{
  background: var(--cos-green);
  color: #fff;
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cos-announcement{ text-align:center; padding: 8px 12px; }

/* =====================================================================
   Buttons
   ===================================================================== */
.wp-element-button,
.wp-block-button__link,
.button, button, [type="submit"],
.ct-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background-color: var(--cos-green) !important;
  color: #fff !important;
  border: 1px solid var(--cos-green) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: .78rem;
  font-weight: 500;
  padding: .9em 1.8em;
  transition: all .25s ease;
}
.wp-element-button:hover,
.button:hover, button:hover, [type="submit"]:hover,
.ct-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background-color: var(--cos-gold) !important;
  border-color: var(--cos-gold) !important;
  color: #fff !important;
}
/* Outline / secondary button helper */
.cos-btn-outline{
  background: transparent !important;
  color: var(--cos-green) !important;
  border: 1px solid var(--cos-green) !important;
}
.cos-btn-outline:hover{
  background: var(--cos-green) !important;
  color:#fff !important;
}

/* =====================================================================
   WooCommerce - product grid / cards (brand-led)
   ===================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background: var(--cos-surface);
  border: 1px solid var(--cos-line);
  border-radius: 2px;
  padding: 14px 14px 22px;
  text-align: center;
  transition: box-shadow .3s ease, transform .3s ease;
}
.woocommerce ul.products li.product:hover{
  box-shadow: 0 14px 34px rgba(0,77,64,.12);
  transform: translateY(-4px);
}
.woocommerce ul.products li.product img{
  background:#fff;
  mix-blend-mode: multiply;        /* flattens white packshot backgrounds */
  margin-bottom: 1rem;
}
/* Brand line injected above the title via functions.php */
.cos-loop-brand{
  display:block;
  font-family: var(--cos-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .68rem;
  color: var(--cos-gold);
  margin-bottom: .25rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 1.12rem;
  line-height: 1.25;
  min-height: 2.6em;
  padding: 0 .25rem .35rem;
  color: var(--cos-ink);
}
.woocommerce ul.products li.product .price{
  color: var(--cos-ink);
  font-family: var(--cos-body);
  font-weight: 500;
  font-size: 1rem;
}
.woocommerce ul.products li.product .price del{ color: var(--cos-muted); font-weight:400; opacity:.8; }
.woocommerce ul.products li.product .price ins{ color: var(--cos-sale); text-decoration:none; }

/* Add-to-cart on cards */
.woocommerce ul.products li.product .button{
  margin-top: .9rem;
  display:inline-block;
}

/* =====================================================================
   Badges (Sale / Best Seller / Out of Stock / Free Gift)
   ===================================================================== */
.woocommerce span.onsale{
  background: var(--cos-sale);
  color:#fff;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size:.65rem;
  font-weight:600;
  min-height:auto; min-width:auto;
  line-height:1; padding:.5em .8em;
  top:10px; left:10px; margin:0;
}
.cos-badge{
  position:absolute; z-index:3; top:10px; left:10px;
  font-family:var(--cos-body); text-transform:uppercase;
  letter-spacing:1.4px; font-size:.62rem; font-weight:600;
  padding:.5em .8em; color:#fff;
}
.cos-badge--bestseller{ background:var(--cos-gold); }
.cos-badge--gift{ background:var(--cos-green); }
.cos-badge--oos{ background:#8a8a8a; }
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title:after{
  content:" \2014 Out of Stock";
  color: var(--cos-sale);
  font-family:var(--cos-body);
  font-size:.7rem; letter-spacing:1px; text-transform:uppercase;
}

/* =====================================================================
   Single product page polish
   ===================================================================== */
.woocommerce div.product .product_title{ font-size: clamp(1.8rem,3vw,2.6rem); }
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: var(--cos-green); font-family:var(--cos-body); font-weight:500;
  font-size: 1.5rem;
}
.woocommerce div.product .woocommerce-product-rating{ margin-bottom:1rem; }
.single-product .cos-loop-brand{ font-size:.8rem; margin-bottom:.5rem; }
.woocommerce div.product form.cart .quantity .qty{
  border:1px solid var(--cos-line); border-radius:0; padding:.6em;
}
.woocommerce .woocommerce-tabs ul.tabs li.active{
  border-bottom-color: var(--cos-gold);
}
/* tidy the HTML description blocks from our CSV (Top/Heart/Base notes) */
.woocommerce-product-details__short-description ul,
.woocommerce-Tabs-panel ul{ list-style: none; padding-left:0; }
.woocommerce-Tabs-panel li strong{ color: var(--cos-gold); }

/* =====================================================================
   Brand logo grid (niche brands strip)
   ===================================================================== */
.cos-brand-grid{
  display:grid; gap:1px; background:var(--cos-line);
  grid-template-columns: repeat(2,1fr); border:1px solid var(--cos-line);
}
@media(min-width:640px){ .cos-brand-grid{ grid-template-columns: repeat(4,1fr);} }
@media(min-width:1000px){ .cos-brand-grid{ grid-template-columns: repeat(6,1fr);} }
.cos-brand-grid a{
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:1.6rem 1rem; transition: background .25s ease;
}
.cos-brand-grid a:hover{ background:var(--cos-bg); }
.cos-brand-grid img{ max-height:46px; width:auto; filter: grayscale(1); opacity:.75; transition:all .25s; }
.cos-brand-grid a:hover img{ filter:none; opacity:1; }

/* =====================================================================
   Category tiles ("Explore collection")
   ===================================================================== */
.cos-cat-tiles{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media(min-width:760px){ .cos-cat-tiles{ grid-template-columns:repeat(3,1fr);} }
.cos-cat-tile{
  position:relative; overflow:hidden; border:1px solid var(--cos-line);
  background:#fff; text-align:center; padding:2.4rem 1.2rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cos-cat-tile:hover{ border-color: var(--cos-rose); box-shadow:0 10px 26px rgba(172,112,107,.14); }
.cos-cat-tile h3{ margin:.4rem 0 1rem; color:var(--cos-green); }
.cos-cat-tile a.cos-explore{
  display:inline-block; text-transform:uppercase; letter-spacing:2px;
  font-size:.72rem; color:var(--cos-ink); border-bottom:1px solid var(--cos-gold);
  padding-bottom:3px;
}
.cos-cat-tile a.cos-explore:hover{ color:var(--cos-rose); border-color:var(--cos-rose); }

/* =====================================================================
   Newsletter band
   ===================================================================== */
.cos-newsletter{
  background: var(--cos-green); color:#fff; text-align:center;
  padding: 3.2rem 1.2rem;
}
.cos-newsletter h2{ color:#fff; }
.cos-newsletter .cos-section-eyebrow{ color: var(--cos-gold); }
.cos-newsletter input[type="email"]{
  border:1px solid rgba(255,255,255,.3); background:#00372D; color:#fff;
  padding:.9em 1em; min-width:min(420px,80vw); border-radius:0;
}

/* =====================================================================
   Footer
   ===================================================================== */
footer.ct-footer{ background: var(--cos-green); color:#d8e4df; }
footer.ct-footer a{ color:#d8e4df; }
footer.ct-footer a:hover{ color: var(--cos-gold); }
footer.ct-footer h3{ color:#fff; letter-spacing:1px; }

/* =====================================================================
   Misc: links, focus, selection
   ===================================================================== */
a{ color: var(--cos-green); }
a:hover{ color: var(--cos-gold); }
::selection{ background: var(--cos-gold); color:#fff; }
.woocommerce-message, .woocommerce-info{ border-top-color: var(--cos-gold); }
.woocommerce .star-rating span{ color: var(--cos-gold); }

/* =====================================================================
   v1.3 - Light & airy overrides (fix green body bg set in Customizer,
   hide duplicate text title, boutique polish)
   ===================================================================== */
body{ background-color: var(--cos-bg) !important; }
.site-title{ display:none !important; }

/* shop grid breathing room + soft cards on light bg */
.woocommerce ul.products{ row-gap: 1.6rem; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  border: 1px solid #ECE7DD;
  box-shadow: 0 2px 10px rgba(27,27,27,.04);
}
.woocommerce ul.products li.product:hover{
  box-shadow: 0 16px 38px rgba(0,77,64,.14);
  border-color: var(--cos-gold);
}

/* page titles: serif, green, centered, airy */
.page-title, .entry-header .entry-title{
  color: var(--cos-green);
}

/* hero/page header band: soft ivory instead of grey */
[data-prefix="woo_categories"] .hero-section,
.hero-section{ background: #FBF8F1; }

/* sale & badges sit nicely on light bg */
.woocommerce span.onsale{ box-shadow: 0 2px 8px rgba(155,44,44,.25); }

/* footer: deep green stays as the single dark anchor of the page */

/* ============== v1.4 - announcement bar, rich footer, mobile ============== */
.cos-announcement{
  background: var(--cos-green); color:#F4EFE3;
  text-align:center; padding:10px 14px;
  font-size:.8rem; letter-spacing:1.6px; text-transform:uppercase;
}
.cos-announcement strong{ color: var(--cos-gold); font-weight:600; letter-spacing:2px; }

.cos-footer{ background: var(--cos-green); color:#D8E4DF; padding:56px 28px 40px; }
.cos-footer-inner{ max-width:1240px; margin:0 auto; display:grid; gap:40px; grid-template-columns:1.2fr 1fr 1fr; }
.cos-footer h4{ color:#fff; font-family:var(--cos-body); text-transform:uppercase; letter-spacing:2px; font-size:.8rem; margin:0 0 1em; }
.cos-footer ul{ list-style:none; margin:0; padding:0; }
.cos-footer li{ margin:0 0 .6em; color:#D8E4DF; }
.cos-footer a{ color:#D8E4DF; text-decoration:none; }
.cos-footer a:hover{ color: var(--cos-gold); }
.cos-footer p{ color:#B9CCC5; line-height:1.7; margin:0 0 1em; }
.cos-footer img.cos-footer-logo{ max-width:200px; height:auto; margin-bottom:14px; }
footer.ct-footer [data-row="bottom"]{ border-top:1px solid rgba(255,255,255,.12); }
.ct-footer-copyright{ color:#9FB8B0 !important; font-size:.78rem; letter-spacing:.5px; }

/* mobile & touch (Google mobile-first) */
@media (max-width:760px){
  .cos-footer-inner{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .cos-announcement{ font-size:.68rem; letter-spacing:1px; }
  .entry-content section{ background-position: 78% center !important; }
  .entry-content section h1{ font-size:2rem !important; }
  .wp-element-button, .button{ padding:1em 1.6em; min-height:44px; }
  .woocommerce ul.products{ row-gap:1rem; }
}
img{ height:auto; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--cos-gold); outline-offset:2px; }

/* ============== v1.5 - kill default blue palette, green mobile drawer ============== */
:root{
  --theme-palette-color-1: #004D40;
  --theme-palette-color-2: #00382E;
  --theme-palette-color-3: #1C2C26;
  --theme-palette-color-4: #C5A059;
  --theme-link-initial-color: #004D40;
  --theme-link-hover-color: #C5A059;
  --theme-text-color: #1C2C26;
  --theme-headings-color: #1C2C26;
}
/* mobile offcanvas drawer + search modal: brand green */
.ct-panel, .ct-panel-inner, .ct-panel-content{ background-color: var(--cos-green) !important; }
#offcanvas .ct-panel-content a, #offcanvas .ct-menu a, .ct-panel-content .menu a{
  color:#F4EFE3 !important; font-family: var(--cos-body);
}
#offcanvas .current-menu-item > a, #offcanvas [aria-current] ,
.ct-panel-content .current-menu-item > a, .ct-panel-content [aria-current]{
  color: var(--cos-gold) !important;
}
#offcanvas .ct-toggle-close, .ct-panel .ct-toggle-close{ color:#F4EFE3 !important; }
/* product page tabs: green text, gold active underline (desktop + mobile) */
.woocommerce-tabs ul.tabs li a{ color: var(--cos-green) !important; }
.woocommerce-tabs ul.tabs li.active a{ color: var(--cos-green) !important; }
.woocommerce-tabs ul.tabs li.active{ border-color: var(--cos-gold) !important; }
.woocommerce-tabs ul.tabs li.active:after, .woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color: var(--cos-gold) !important; }
/* any leftover blue accents (buttons/links from palette) */
.wp-block-button__link, .ct-button{ background-color: var(--cos-green) !important; }

/* ============== v1.6 - hero overlay + mobile CTA, image category tiles ============== */
/* hero: subtle dark gradient for text legibility (stronger on mobile) */
.home .entry-content section:first-of-type{ position:relative; isolation:isolate; }
.home .entry-content section:first-of-type::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(12,18,15,.38) 0%, rgba(12,18,15,.18) 45%, rgba(12,18,15,0) 70%);
}
.home .entry-content section:first-of-type > div{ position:relative; z-index:1; }
@media (max-width:760px){
  .home .entry-content section:first-of-type{ min-height:78vh; }
  .home .entry-content section:first-of-type::before{
    background:linear-gradient(180deg, rgba(10,14,12,.55) 0%, rgba(10,14,12,.35) 55%, rgba(10,14,12,.55) 100%);
  }
  .home .entry-content section:first-of-type h1{ color:#F7F2E7 !important; }
  .home .entry-content section:first-of-type p{ color:#EDE7DB !important; }
  /* CTA pinned bottom-left on mobile */
  .home .entry-content section:first-of-type .wp-element-button{
    position:absolute; left:20px; bottom:22px; z-index:2;
    background: var(--cos-gold) !important; border-color: var(--cos-gold) !important;
  }
}
/* category tiles: imagery + dark overlay + light text */
.cos-cat-tile{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:240px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  background-size:cover; background-position:center; border:none !important; border-radius:2px;
}
.cos-cat-tile::before{ content:""; position:absolute; inset:0; z-index:0; background:rgba(8,16,13,.48); transition:background .3s ease; }
.cos-cat-tile:hover::before{ background:rgba(8,16,13,.32); }
.cos-cat-tile > *{ position:relative; z-index:1; }
.cos-cat-tile h3{ color:#fff !important; font-size:1.7rem; }
.cos-cat-tile a.cos-explore{ color:#F4EFE3 !important; border-bottom-color: var(--cos-gold); }
.cos-cat-tile a.cos-explore:hover{ color: var(--cos-gold) !important; }
.cos-cat-tiles .cos-cat-tile:nth-of-type(1){ background-image:url('https://cosmora.info/wp-content/uploads/dior-sauvage.jpg'); }
.cos-cat-tiles .cos-cat-tile:nth-of-type(2){ background-image:url('https://cosmora.info/wp-content/uploads/miss-dior-rose-n-roses.jpg'); }
.cos-cat-tiles .cos-cat-tile:nth-of-type(3){ background-image:url('https://cosmora.info/wp-content/uploads/tom-ford-oud-minerale.jpg'); }
.cos-cat-tiles .cos-cat-tile:nth-of-type(4){ background-image:url('https://cosmora.info/wp-content/uploads/lattafa-badee-al-oud-noble-blush.jpg'); }