/* =====================================================
   PHOTON – CUSTOM.CSS (Structured)
   Theme: photon (parent: classic)
   Goal: 1:1 visual output, clean structure, no duplicates
   Notes:
   - Edit only in /themes/photon/
   - Keep sections below as single source of truth
   ===================================================== */

/* =====================================================
   TABLE OF CONTENTS
   -----------------------------------------------------
   00) Core Variables (colors, radius, shadows)
   01) Global & Layout (background, typography, helpers)
   02) Header Banner
   03) Legal Pages
   04) Home Tiles
   05) Product Page – Policy Links (reassurance)
   06) Product Page – Social Sharing (hover + X icon)
   ===================================================== */

/* =========================
   PHOTON – Core Variables
   ========================= */
   :root{
    --ph-bg-1:#fbf7f1;
    --ph-bg-2:#f3eadf;
  
    --ph-gold-1:#f6e3b5;
    --ph-gold-2:#d7b26e;
  
    --ph-brown-1:#3f2a18;
    --ph-brown-2:#7a4f2a;
  
    --ph-card: rgba(255,255,255,.86);
    --ph-stroke: rgba(210,170,110,.22);
  
    --ph-r12:12px;
    --ph-r16:16px;
    --ph-r18:18px;
    --ph-r22:22px;
  
    --ph-shadow-1: 0 10px 26px rgba(0,0,0,.14);
    --ph-shadow-2: 0 18px 40px rgba(0,0,0,.14);
    --ph-shadow-3: 0 22px 55px rgba(0,0,0,.12);
  }
  
  /* =========================
     GLOBAL BACKGROUND (no seam)
     - махаме repeat, махаме “граница”
     ========================= */
  
  /* 1) базов тон (гладък, без ръбове) */
  html, body{
    background: radial-gradient(circle at top center, var(--ph-bg-1) 0%, var(--ph-bg-2) 100%);
  }
  
  /* 2) “пелена” с картинка – FIXED + NO-REPEAT + COVER => няма шев */
  body{
    position: relative;
    background-attachment: fixed;
  }
  
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    background: url('/img/cms/photon-section.png') center top / cover no-repeat;
    opacity: .18;                 /* 0.12–0.25 */
    pointer-events: none;
    z-index: 0;
  }
  
  /* 3) всичко реално да е над пелената */
  #header, #wrapper, #footer, main, .page-home, .page-content{
    position: relative;
    z-index: 1;
  }
  
  /* 4) махаме бели плочи от контейнери */
  #content, #wrapper, .page-content, .container{
    background: transparent !important;
  }
  
  /* =========================
     HEADER (no white plate) + MENU glow
     ========================= */
  #header,
  #header .header-top,
  #header .header-nav,
  #header .header-top > .container,
  #header .header-nav > .container{
    background: transparent !important;
  }
  
  #header{
    background: linear-gradient(
      to bottom,
      rgba(252,247,239,0.92),
      rgba(252,247,239,0.68)
    ) !important;
  }
  
  /* mobile menu wrapper */
  #mobile_top_menu_wrapper,
  #mobile_top_menu_wrapper .container{
    background: transparent !important;
  }
  
  /* MENU – subtle glow + underline */
  #header .header-nav a,
  #header .header-top a{
    position: relative;
    transition: color .25s ease, text-shadow .25s ease;
  }
  
  #header .header-nav a:hover,
  #header .header-top a:hover{
    color: #b68a3a;
    text-shadow:
      0 0 6px rgba(182, 138, 58, .35),
      0 0 12px rgba(182, 138, 58, .22);
  }
  
  #header .header-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-6px;
    width:0;
    height:2px;
    transform: translateX(-50%);
    background: linear-gradient(to right, transparent, #d4af37, transparent);
    transition: width .28s ease;
  }
  
  #header .header-nav a:hover::after,
  #header .header-nav a.active::after{
    width:60%;
  }
  
  #header .header-nav a.active{
    color:#a97c2e;
    font-weight: 500;
  }
  
  @media (max-width:768px){
    #header .header-nav a:hover{ text-shadow:none; }
  }
  
  /* =========================
     SECTION: Custom text block (home cards)
     ========================= */
  #custom-text{ padding: 0 !important; }
  
  .photon-container-bg{
    background-image: url('/img/cms/photon-section.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  
    border-radius: var(--ph-r18);
    overflow: hidden;
  
    box-shadow:
      0 30px 60px rgba(0,0,0,.18),
      0 10px 25px rgba(0,0,0,.10);
  
    position: relative;
  }
  
  /* inner shadow */
  .photon-container-bg::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    box-shadow: inset 0 0 70px rgba(255,255,255,.38);
    pointer-events:none;
  }
  
  .photon-inner{
    padding: 22px 14px;
    text-align:center;
    position: relative;
  }
  
  /* =========================
     TITLES (remove uppercase + gold line)
     ========================= */
  .products-section-title{
    text-transform:none !important;
    position:relative;
    padding-bottom:14px;
    margin-bottom:30px;
  }
  
  .products-section-title::after{
    content:"";
    display:block;
    width:92px;
    height:2px;
    margin:14px auto 0;
    background: linear-gradient(90deg, transparent, #d4af37, #f5e6a8, #d4af37, transparent);
    border-radius:2px;
    filter: drop-shadow(0 0 10px rgba(212,175,55,.22));
  }
  
  /* =========================
     BUTTON (gold pill)
     ========================= */
  .photon-btn{
    display:inline-block;
    padding:12px 18px;
    border-radius:999px;
    text-decoration:none !important;
    font-weight:700;
    font-size:14px;
    letter-spacing:.3px;
  
    background: linear-gradient(180deg, var(--ph-gold-1), var(--ph-gold-2));
    color: var(--ph-brown-1);
    border:1px solid rgba(255,255,255,.35);
  
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .photon-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,.16);
    filter: brightness(1.03);
  }
  
  /* =========================
     HOME “CARDS” (your 3 images)
     IMPORTANT: .art-frame is on IMG => use box-shadow/border on img itself
     ========================= */
  .art-frame{
    width: 400px;
    height: 400px;
    border-radius: var(--ph-r12);
    box-shadow:
      0 12px 30px rgba(0,0,0,.35);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .art-frame:hover{
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 20px 45px rgba(0,0,0,.45);
  }
  
  /* =========================
     PRODUCT LIST (grid cards)
     - махаме “колонния” вид между тях
     ========================= */
  
  /* “под” зад grid-а */
  #products .products,
  .featured-products .products,
  .products{
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(210,170,110,.12);
    padding: 18px 14px;
    border-radius: var(--ph-r22);
    box-shadow: 0 16px 38px rgba(0,0,0,.05);
  }
  
  /* spacing */
  #products .products > .row > [class*="col-"],
  .featured-products .products > .row > [class*="col-"],
  .products > .row > [class*="col-"]{
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 18px;
    background: transparent !important; /* важно за “колоната” */
  }
  
  /* the card */
  #products .product-miniature .thumbnail-container,
  .featured-products .product-miniature .thumbnail-container,
  .products .product-miniature .thumbnail-container{
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ph-shadow-1);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  
  #products .product-miniature:hover .thumbnail-container,
  .featured-products .product-miniature:hover .thumbnail-container,
  .products .product-miniature:hover .thumbnail-container{
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0,0,0,.22);
  }
  
  /* =========================
     PRODUCT PAGE (polish)
     ========================= */
  #product #wrapper{ padding-top: 18px; }
  
  #product #content-wrapper{
    background: rgba(255,255,255,0.45);
    border: 1px solid var(--ph-stroke);
    border-radius: var(--ph-r22);
    padding: 22px;
    box-shadow: var(--ph-shadow-3);
    position: relative;
    overflow: hidden;
    animation: photonFadeUp .45s ease both;
  }
  
  #product #content-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    box-shadow: inset 0 0 55px rgba(255,255,255,0.55);
    pointer-events:none;
  }
  
  #product .product-cover{
    border-radius: var(--ph-r18);
    background: rgba(255,255,255,0.55);
    padding: 10px;
    border: 1px solid var(--ph-stroke);
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  }
  #product .product-cover img{ border-radius: 14px; }
  
  #product .product-images>li img{
    border-radius: 12px;
    border: 1px solid var(--ph-stroke);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  #product .product-images>li img:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.14);
  }
  
  #product .h1{
    font-weight: 800;
    letter-spacing: .4px;
    margin-bottom: 8px;
    position: relative;
    padding-bottom: 12px;
    text-transform: none !important;
  }
  #product .h1:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(215,178,110,0), rgba(215,178,110,0.95), rgba(215,178,110,0));
  }
  
  #product .current-price span{
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .3px;
    color: var(--ph-brown-2) !important;
  }
  
  #product .add-to-cart{
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 22px !important;
    font-weight: 900 !important;
    letter-spacing: .4px;
  
    background: linear-gradient(180deg, var(--ph-gold-1), var(--ph-gold-2)) !important;
    color: var(--ph-brown-1) !important;
  
    box-shadow: 0 16px 34px rgba(0,0,0,0.14);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  #product .add-to-cart:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(0,0,0,0.18);
    filter: brightness(1.03);
  }
  
  /* reassurance */
  #product #block-reassurance{
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(210,170,110,0.20);
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  }
  
  /* =========================
     FOOTER NEWSLETTER (fix “that ugly field”)
     ========================= */
  #footer .block_newsletter{
    background: rgba(255,255,255,0.55) !important;
    border: 1px solid rgba(210,170,110,.18) !important;
    border-radius: var(--ph-r22) !important;
    box-shadow: 0 18px 40px rgba(90,58,30,0.10),
                inset 0 1px 0 rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 18px 18px !important;
    max-width: 980px;
    margin: 28px auto 18px !important;
  }
  
  #footer .block_newsletter .row{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0 !important;
  }
  
  #footer .block_newsletter [class*="col-"]{ padding:0 !important; }
  
  #footer .block-newsletter-label{
    margin:0 !important;
    font-size:16px;
    line-height:1.35;
    color: rgba(63,42,24,0.88);
    max-width:360px;
  }
  
  #footer .block_newsletter form{ width:auto !important; margin:0 !important; }
  #footer .block_newsletter form .row{
    display:flex !important;
    align-items:center;
    gap:10px;
    margin:0 !important;
  }
  
  #footer .block_newsletter input[type="email"]{
    width: 360px;
    max-width: 58vw;
    border-radius: 999px !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(180,140,90,0.35) !important;
    background: rgba(255,255,255,0.86) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
  }
  
  #footer .block_newsletter button,
  #footer .block_newsletter input[type="submit"]{
    border-radius: 999px !important;
    padding: 14px 22px !important;
    border: none !important;
    font-weight: 800;
    letter-spacing: .35px;
  
    background: linear-gradient(135deg,#f1d08a,#cfa24a) !important;
    color: #3f2a18 !important;
  
    box-shadow: 0 10px 22px rgba(160,120,50,0.26);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  
  #footer .block_newsletter button:hover,
  #footer .block_newsletter input[type="submit"]:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(160,120,50,0.35);
    filter: brightness(1.03);
  }
  
  @media (max-width:768px){
    #footer .block_newsletter .row{ flex-direction:column; align-items:stretch; }
    #footer .block-newsletter-label{ max-width:none; text-align:center; }
    #footer .block_newsletter input[type="email"]{ width:100%; max-width:100%; }
    #footer .block_newsletter button,
    #footer .block_newsletter input[type="submit"]{ width:100%; }
  }
  /* =========================
   FOOTER NEWSLETTER – compact override (ONLY this block)
   Target: #blockEmailSubscription_displayFooterBefore
   ========================= */

#footer #blockEmailSubscription_displayFooterBefore.block_newsletter{
  padding: 14px 16px !important;
  margin: 18px auto 14px !important;
  max-width: 980px !important;
}

/* Text tighter */
#footer #blockEmailSubscription_displayFooterBefore .newsletter-intro,
#footer #blockEmailSubscription_displayFooterBefore .block-newsletter-label{
  font-size: 14px !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
  max-width: 560px !important;
}

/* The “unsubscribe anytime” line (usually next p) */
#footer #blockEmailSubscription_displayFooterBefore .newsletter-intro + p{
  font-size: 13px !important;
  margin: 0 0 10px !important;
  opacity: .82;
}

/* Input + button slimmer */
#footer #blockEmailSubscription_displayFooterBefore input[type="email"]{
  padding: 10px 14px !important;
  height: 38px !important;
  width: 320px !important;
  max-width: 56vw !important;
}

#footer #blockEmailSubscription_displayFooterBefore button,
#footer #blockEmailSubscription_displayFooterBefore input[type="submit"]{
  padding: 10px 16px !important;
  height: 38px !important;
}

/* Keep row compact on desktop */
@media (min-width: 992px){
  #footer #blockEmailSubscription_displayFooterBefore .row{
    gap: 10px !important;
    align-items: center !important;
  }
}

/* Mobile: stacked, but not tall */
@media (max-width: 768px){
  #footer #blockEmailSubscription_displayFooterBefore input[type="email"]{
    width: 100% !important;
    max-width: 100% !important;
  }
  #footer #blockEmailSubscription_displayFooterBefore button,
  #footer #blockEmailSubscription_displayFooterBefore input[type="submit"]{
    width: 100% !important;
  }
}
/* =========================
   PHOTON – Footer links (TEXT ONLY, elegant)
   ========================= */

   #footer a{
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 0 !important;
    margin: 6px 0;
    border-radius: 0 !important;
  
    color: rgba(63,42,24,0.82);
    font-weight: 400;
    font-size: 14px;
    text-decoration: none !important;
  
    position: relative;
    transition: color .25s ease, text-shadow .25s ease;
  }
  
  /* Hover color + glow */
  #footer a:hover{
    color: #b68a3a;
    text-shadow:
      0 0 6px rgba(182,138,58,.35),
      0 0 12px rgba(182,138,58,.18);
  }
  
  /* Gold underline (same philosophy as header) */
  #footer a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:1px;
    background: linear-gradient(
      90deg,
      transparent,
      #d4af37,
      #f5e6a8,
      #d4af37,
      transparent
    );
    transition: width .28s ease;
  }
  
  /* Show underline on hover */
  #footer a:hover::after{
    width:100%;
  }
  
  /* Kill blue focus/active */
  #footer a:focus,
  #footer a:active{
    outline: none !important;
    box-shadow: none !important;
  }
  

  /* =========================
     CATEGORY PAGE – Header + Left column + Subcategories
     (single clean version, no duplicates)
     ========================= */
  
  /* Category header block */
  #js-product-list-header .block-category.card.card-block{
    border: 0;
    border-radius: var(--ph-r22);
    background: rgba(255,255,255,0.62);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
    padding: 26px 28px;
    margin-bottom: 18px;
  }
  
  #js-product-list-header .block-category h1{
    margin: 0 0 14px;
    font-family: "Playfair Display", serif;
    font-size: 38px;
    letter-spacing: .4px;
    text-transform: none !important;
    color: #3f2a18;
    position: relative;
    padding-bottom: 12px;
  }
  
  #js-product-list-header .block-category h1::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width: 120px;
    height: 2px;
    background: linear-gradient(to right, transparent, #d4af37, transparent);
    opacity:.9;
  }
  
  /* Left column */
  #category #left-column{
    position: sticky;
    top: 18px;
    align-self: start;
  }
  
  /* Left column panels */
  #category #left-column .block-categories,
  #category #left-column #search_filters_wrapper,
  #category #left-column #search_filters_brands,
  #category #left-column .facet{
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(0,0,0,0.12),
                inset 0 1px 0 rgba(255,255,255,0.65);
    padding: 16px !important;
    margin-bottom: 16px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  
  #category #left-column .block-categories:hover,
  #category #left-column #search_filters_wrapper:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(0,0,0,0.16),
                inset 0 1px 0 rgba(255,255,255,0.65);
  }
  
  #category #left-column a{
    color:#3f2a18;
    text-decoration:none;
    transition: color .2s ease, text-shadow .2s ease;
  }
  #category #left-column a:hover{
    color:#b68a3a;
    text-shadow: 0 0 10px rgba(182, 138, 58, 0.25);
  }
  
  /* Facet title “Марки” */
  #category #left-column .facet > a.facet-label.h6{
    text-transform:none !important;
    font-family:"Playfair Display", serif;
    font-size:18px;
    color:#3f2a18;
    display:inline-block;
    position:relative;
    padding-bottom:10px;
    margin-bottom:10px;
  }
  #category #left-column .facet > a.facet-label.h6::after{
    content:"";
    position:absolute;
    left:0;
    bottom:2px;
    width:120px;
    height:2px;
    background: linear-gradient(to right, rgba(212,175,55,0), rgba(212,175,55,0.95), rgba(212,175,55,0));
    opacity:.85;
  }
  
  /* Subcategories – compact boutique grid */
  #category #subcategories{
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 26px;
  }
  
  #category #subcategories .subcategories-list{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 18px;
  }
  
  #category #subcategories .subcategories-list li{
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 12px 10px 14px;
    text-align: center;
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    border: 1px solid transparent;
  }
  
  #category #subcategories .subcategories-list li:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(0,0,0,0.16);
    border-color: rgba(212,175,55,0.65);
  }
  
  #category #subcategories .subcategory-image img{
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.16);
    transition: transform .3s ease;
  }
  
  #category #subcategories .subcategories-list li:hover img{
    transform: scale(1.05);
  }
  
  #category #subcategories h5{
    margin-top: 10px;
    font-family: "Playfair Display", serif;
    font-size: 15px;
    color: #3f2a18;
    letter-spacing: .3px;
    text-transform:none !important;
  }
  
  @media (max-width: 992px){
    #category #left-column{ position: static; top:auto; }
  }
  
  /* =========================
     Animations
     ========================= */
  @keyframes photonFadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
  /* =========================
   CATEGORY: Subcategories – compact grid (no overlap)
   ========================= */

#category #subcategories{
  margin: 0 0 22px !important;
}

#category #subcategories .subcategories-list{
  /* force clean layout */
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;

  /* kill legacy flex/float issues */
  align-items: stretch;
}

#category #subcategories .subcategories-list li{
  float: none !important;
  width: auto !important;
  margin: 0 !important;

  /* card */
  background: rgba(255,255,255,0.58);
  border-radius: 16px;
  padding: 12px 12px 14px;
  border: 1px solid rgba(212,175,55,0.12);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);

  text-align: center;
  overflow: hidden;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#category #subcategories .subcategories-list li:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.14);
  border-color: rgba(212,175,55,0.60);
}

/* image box */
#category #subcategories .subcategory-image{
  margin: 0 auto 10px !important;
  display: block;
}

#category #subcategories .subcategory-image a{
  display: block;
  border-radius: 14px;
  overflow: hidden;
}

#category #subcategories .subcategory-image img{
  width: 100% !important;
  height: 120px !important;     /* компактно */
  object-fit: cover;
  border-radius: 14px;
  display: block;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  transition: transform .22s ease;
}

#category #subcategories .subcategories-list li:hover img{
  transform: scale(1.03);
}

/* title */
#category #subcategories h5{
  margin: 8px 0 0 !important;
  font-family: "Playfair Display", serif;
  font-size: 14px;
  letter-spacing: .25px;
  text-transform: none !important;
  color: #3f2a18;
}

/* responsive */
@media (max-width: 768px){
  #category #subcategories .subcategories-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
  }
  #category #subcategories .subcategory-image img{
    height: 110px !important;
  }
}
/* Subcategory title – elegant neutral color */
#category #subcategories h5,
#category #subcategories h5 a {
  color: #5a3a1e !important;   /* топъл кафяво-златист */
  text-decoration: none !important;
}

/* Hover – лек златен акцент */
#category #subcategories li:hover h5,
#category #subcategories li:hover h5 a {
  color: #b8943b !important;   /* меко злато */
}
/* REMOVE default blue focus / hover border */
#category #subcategories a:focus,
#category #subcategories a:active,
#category #subcategories img:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Subcategory image card */
#category #subcategories .subcategories-list li {
  transition: all 0.35s ease;
}

/* Image frame */
#category #subcategories .subcategory-image img {
  border-radius: 14px;
  border: 1px solid rgba(184, 148, 59, 0.15);
  transition: all 0.35s ease;
}

/* Hover – PHOTON style */
#category #subcategories li:hover .subcategory-image img {
  border-color: #b8943b;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(184, 148, 59, 0.35);
  transform: translateY(-3px);
}
.photon-category-description {
  background-size: cover;
  background-position: center;
  position: relative;
}

.photon-category-description::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82); /* ключовото */
  border-radius: 18px;
}

.photon-category-description > * {
  position: relative;
  z-index: 1;
}


/* =========================
   PHOTON – Header banner (single source of truth)
   ========================= */

/* 1) Hide default logo (we have logo inside the banner) 
#header .logo,
#header .header-logo,
#header .site-logo,
#header .logo-container,
#_desktop_logo {
  display: none !important;
} */

/* 2) Desktop: remove the padding that "cuts" the banner width */
@media (min-width: 768px) {
  #header .header-top {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 3) Kill Bootstrap gutters only inside header-top */
  #header .header-top .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4) Make the banner column take full width */
  #header .header-top-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 5) Banner image fills the available width */
  #header .ps-banner,
  #header .ps-banner img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}
/* ===== Banner shadow – same style as custom text block ===== */
#header .ps-banner img {
  display: block;
  border-radius: 12px; /* ако картите имат заобляне */
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.12);
}
#header .ps-banner img {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

#header .ps-banner:hover img {
  box-shadow:
    0 26px 50px rgba(0, 0, 0, 0.22),
    0 12px 24px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}
/* Smooth hover effect for homepage slider */
.homeslider-container {
  overflow: hidden;
}

.homeslider-container img {
  transition: transform 0.6s ease, filter 0.6s ease;
}

.homeslider-container:hover img {
  transform: scale(1.05);
  filter: brightness(0.95) contrast(1.05);
}
.homeslider-container {
  cursor: pointer;
}
.homeslider-container .homeslider-title {
  color: #4A3A2F;
}
.homeslider-container .homeslider-description {
  color: #6B5A4E;
}
.homeslider-container .homeslider-title,
.homeslider-container .homeslider-description {
  text-shadow: 0 1px 2px rgba(255,255,255,0.25);
}
/* MOBILE: make slider text readable */
@media (max-width: 768px) {

  /* Try to catch the caption container (different themes/modules name it differently) */
  .homeslider-container .homeslider-caption,
  .homeslider-container .caption,
  .homeslider-container .homeslider-description {
    background: rgba(255, 248, 240, 0.82); /* топла светла подложка */
    padding: 14px 14px;
    border-radius: 14px;
    display: inline-block;
    max-width: 92%;
  }

  .homeslider-container .homeslider-title {
    color: #3A2A20;       /* тъмно топло кафяво */
    text-shadow: none;
    margin-bottom: 6px;
  }

  .homeslider-container .homeslider-description {
    color: #5C4B40;       /* по-меко кафяво */
    text-shadow: none;
  }
}
.product-prices {
  font-size: 1.4rem;
  font-weight: 500;
}
.current-price span {
  color: #8a6a3f; /* по-мек златист */
}


/* Product tabs full-width visual hack (Classic 8.2.x) */
@media (min-width: 768px) {
  /* tabs wrapper */
  #product #main .product-information .tabs {
    box-sizing: border-box;
    width: calc(200% + 30px);        /* 2 cols + gutters */
    margin-left: calc(-100% - 15px); /* pull to the left edge */
    margin-top: 24px;
  }
}
.newsletter-intro {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.block_newsletter input[type="email"] {
  border-radius: 6px;
}

.newsletter-submit {
  background: transparent;
  color: #000;
  border: 1px solid #ccc;
  padding: 6px 14px;
  font-size: 13px;
}

.newsletter-submit:hover {
  border-color: #000;
}

/* =========================
   PHOTON – Legal pages style
   Works for: .photon-legal (Privacy, Terms, Legal, etc.)
   ========================= */

.photon-legal{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 22px;
  border-radius: var(--ph-r22);
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(210,170,110,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}

/* soft inner glow */
.photon-legal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 65px rgba(255,255,255,0.55);
  pointer-events:none;
  z-index:0;
}

.photon-legal > *{ position: relative; z-index:1; }

/* Headings */
.photon-legal h1{
  font-family: "Playfair Display", serif;
  font-size: 40px;
  letter-spacing: .3px;
  color: var(--ph-brown-1);
  margin: 6px 0 14px;
  text-transform: none !important;
}

.photon-legal h2{
  font-family: "Playfair Display", serif;
  font-size: 22px;
  color: var(--ph-brown-1);
  margin: 22px 0 10px;
  padding-bottom: 10px;
  position: relative;
  text-transform: none !important;
}

/* gold divider under each H2 */
.photon-legal h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, #f5e6a8, #d4af37, transparent);
  border-radius: 2px;
  filter: drop-shadow(0 0 10px rgba(212,175,55,.18));
  opacity: .95;
}

/* Paragraphs */
.photon-legal p{
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  line-height: 1.85;
  color: rgba(63,42,24,.88);
  margin: 0 0 12px;
}

/* Strong accents */
.photon-legal strong{
  color: rgba(63,42,24,.95);
  font-weight: 700;
}

/* Links */
.photon-legal a{
  color: #b68a3a;
  text-decoration: none;
  border-bottom: 1px solid rgba(182,138,58,.35);
  transition: color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
.photon-legal a:hover{
  color: #8a6a3f;
  border-color: rgba(182,138,58,.65);
  text-shadow: 0 0 10px rgba(182,138,58,.20);
}

/* Lists */
.photon-legal ul{
  margin: 10px 0 14px 0;
  padding-left: 18px;
}

.photon-legal li{
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(63,42,24,.86);
  margin: 6px 0;
}

/* subtle bullet */
.photon-legal li::marker{
  color: rgba(212,175,55,.85);
}

/* nicer spacing between sections */
.photon-legal h2 + p{
  margin-top: 2px;
}

/* Mobile */
@media (max-width: 768px){
  .photon-legal{
    padding: 20px 16px;
    border-radius: 18px;
  }
  .photon-legal h1{
    font-size: 30px;
  }
  .photon-legal h2{
    font-size: 19px;
  }
  .photon-legal p,
  .photon-legal li{
    font-size: 17px;
    line-height: 1.75;
  }
}



/* =========================
   PHOTON – HOME TILES (FINAL)
   ========================= */

/* GRID CONTAINER */
.photon-tiles{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;

  max-width: 1200px;
  margin: 0 auto !important;
  padding: 10px 22px;

  background: transparent;
  border: none;
  box-shadow: none;
}

/* TILE BASE – product card feel */
.photon-tile{
  position: relative;
  overflow: hidden;
  padding: 34px 28px;

  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(210,170,110,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10),
    0 4px 10px rgba(0,0,0,0.06);

  transition: transform .18s ease,
              box-shadow .18s ease,
              border-color .18s ease;
}

.photon-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(90,58,30,0.25),
    0 0 0 1px rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,.55);
}
/* =========================
   PHOTON – HOME TILES floating (stronger, premium depth)
   ========================= */

/* Idle floating state */
.photon-tile{
  transform: translateY(-6px);
  box-shadow:
    0 24px 60px rgba(60,40,20,0.18),
    0 8px 18px rgba(0,0,0,0.10);
  transition: all .35s ease;
}

/* Hover – subtle lift, not aggressive */
.photon-tile:hover{
  transform: translateY(-10px);
  box-shadow:
    0 36px 80px rgba(60,40,20,0.24),
    0 14px 28px rgba(0,0,0,0.14);
}
.photon-tile{
  border-radius: 22px;
}


/* Gentle floating animation */
@keyframes photonFloat {
  0%   { transform: translateY(-4px); }
  50%  { transform: translateY(-7px); }
  100% { transform: translateY(-4px); }
}

.photon-tile{
  animation: photonFloat 7s ease-in-out infinite;
}

/* Stop animation on hover (feels intentional) */
.photon-tile:hover{
  animation: none;
  transform: translateY(-9px);
}

  /* Photon category tiles - premium readability */

.photon-tile h3 {
  color: #3a2a1c !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.photon-tile p {
  color: #4a3a2a !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.20);
}


/* =========================
   LAYERS
   ========================= */

/* 1) BACKGROUND IMAGE */
.photon-tile::after{
  content:"";
  position:absolute;
  inset:0;

  background: center / cover no-repeat;
  opacity: .85; /* контролираш видимостта на фона */
  filter: saturate(1.15) contrast(1.10);
  transform: scale(1.03);

  z-index: 0;
  pointer-events:none;

  transition: opacity .35s ease, transform .35s ease;
}

/* individual backgrounds */
.tile-jewelry::after{ background-image: url('/img/cms/tile-jewelry.png'); }
.tile-art::after{     background-image: url('/img/cms/tile-art.png'); }
.tile-astro::after{   background-image: url('/img/cms/tile-astro.png'); }

/* 2) GLASS + LIGHT LAYER */
.photon-tile::before{
  content:"";
  position:absolute;
  inset:0;

  z-index: 1;
  pointer-events:none;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,225,150,0), transparent 55%),
    rgba(255,255,255,.52);

  box-shadow: inset 0 0 55px rgba(255,255,255,0.35);
  background-size: 160% 160%, auto;
  background-position: 0% 0%, center;

  transition: background .25s ease, box-shadow .25s ease;
}

/* =========================
   CONTENT
   ========================= */

.photon-tile h3,
.photon-tile p{
  position: relative;
  z-index: 2;
  text-align: center;
}

.photon-tile h3{
  font-family: "Playfair Display", serif;
  font-size: 26px;
  color: #5a3a1e;
  margin: 0 0 10px;
}

.photon-tile p{
  font-family: "Cormorant Garamond", serif;
  font-size: 22.5px;        /* ⬅️ ключовото */
  line-height: 1.65;
  color: rgba(63,42,24,.88);
}

/* WHOLE TILE CLICKABLE */
.photon-tile-link{
  position:absolute;
  inset:0;
  z-index: 3;
  text-decoration:none !important;
}

/* =========================
   HOVER MAGIC – LIGHT SWEEP
   ========================= */

.photon-tile:hover::after{
  opacity: .70;
  transform: scale(1.07);
}

.photon-tile:hover::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,225,150,.40), transparent 55%),
    rgba(255,255,255,.45);
  animation: photonLightSweep 3.8s linear infinite;
}

@keyframes photonLightSweep{
  0%   { background-position: 0% 0%, center; }
  50%  { background-position: 100% 70%, center; }
  100% { background-position: 0% 0%, center; }
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px){
  .photon-tiles{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 22px 14px;
  }
}


/* === HOME: kill the white plate behind the tiles section (Classic theme) === */
body#index #custom-text,
body#index #custom-text .container,
body#index #custom-text .row,
body#index #custom-text .col-md-12,
body#index #custom-text .col-xs-12,
body#index #custom-text .custom-text,
body#index #custom-text .page-content,
body#index #custom-text section,
body#index #custom-text div{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* === Ensure the tiles wrapper itself is fully transparent === */
body#index #custom-text .photon-tiles{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* (optional) tighten spacing so it doesn’t look like a separate block */
body#index #custom-text{
  margin-top: 18px !important;
  padding-top: 0 !important;
}

/* HOME tiles text – force readable size */
.page-home .photon-tile h3{
  font-size: 28px;
  line-height: 1.25;
text-shadow:
    0 1px 1px rgba(255,255,255,0.65),   /* светъл lift */
    0 0 6px rgba(212,175,55,0.28);      /* меко злато */
}

.page-home .photon-tile p{
  font-size: 20px !important;
  line-height: 1.7;
  max-width: 90%;
  margin: 0 auto;
text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 4px rgba(212,175,55,0.18);
}
/* HOME – emotional bridge between tiles and products */
.page-home .photon-bridge{
  max-width: 760px;
  margin: 70px auto 80px;   /* въздух = ключът */
  text-align: center;
}

.page-home #custom-text.photon-bridge p{
  font-family: "Cormorant Garamond", serif;
  font-size: 26px !important;
  line-height: 1.8;
  color: rgba(63,42,24,0.92); /* по-плътен */
    text-shadow:
      0 1px 0 rgba(255,255,255,0.7),
      0 0 8px rgba(212,175,55,0.14);
}
.photon-divider{
  display:block;
  width: 120px;
  height: 2px;
  margin: 22px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    #d4af37,
    #f5e6a8,
    #d4af37,
    transparent
  );
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(212,175,55,0.25);
}

@media (max-width:768px){
  .page-home .photon-bridge{
    margin: 50px 18px 60px;
  }
  .page-home .photon-bridge p{
    font-size: 18px;
  }
}
/* HOME – breathing space between sections */
.page-home .photon-tiles{
  margin-bottom: 90px !important;
}

.page-home .featured-products,
.page-home #products{
  margin-top: 70px !important;
}
@media (max-width:768px){
  .page-home .photon-tiles{
    margin-bottom: 60px !important;
  }
  .page-home #products{
    margin-top: 50px !important;
  }
}
/* =====================================================
   PHOTON – Product Page Policy Links Decorations
   ===================================================== */

/* Целият кликаем блок */
.blockreassurance_product > div[onclick] {
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Леко повдигане */
.blockreassurance_product > div[onclick]:hover {
  transform: translateY(-2px);
}

/* Заглавие */
.blockreassurance_product .block-title {
  transition: all 0.25s ease;
}

/* Подчертаване на заглавието */
.blockreassurance_product > div[onclick]:hover .block-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Икона */
.blockreassurance_product .item-product {
  opacity: 0.75;
  transition: all 0.25s ease;
}

/* Икона при hover */
.blockreassurance_product > div[onclick]:hover .item-product {
  opacity: 1;
  filter: brightness(1.15) sepia(20%) saturate(120%);
}

/* Photon линия */
.blockreassurance_product > div[onclick]::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255, 200, 100, 0.6);
  transition: width 0.3s ease;
}

.blockreassurance_product > div[onclick]:hover::after {
  width: 100%;
}

/* =====================================================
   PHOTON – Product Page / Custom Social Sharing Block
   ===================================================== */

   .photon-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0 6px;
  }
  
  .photon-social__label {
    font-size: 14px;
    opacity: .9;
  }
  
  .photon-social__list {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .photon-social__link {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: .75;
    transition: all .25s ease;
  }
  
  .photon-social__link:hover {
    transform: translateY(-2px);
    opacity: 1;
  }
  
  .photon-icon {
    width: 18px;
    height: 18px;
    display: block;
    background: #000;
    transition: all .25s ease;
  }
  
  /* Masks (icons) */
  .photon-icon--fb {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.2-1.5 1.5-1.5H16.7V5c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6V11H7v3h2.5v8h4z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.2-1.5 1.5-1.5H16.7V5c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6V11H7v3h2.5v8h4z'/></svg>") no-repeat center / contain;
  }
  
  .photon-icon--x {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2H21.57l-7.27 8.31L22.8 22h-6.53l-5.11-6.64L5.47 22H2.14l7.78-8.9L1.8 2h6.7l4.62 6.02L18.24 2z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2H21.57l-7.27 8.31L22.8 22h-6.53l-5.11-6.64L5.47 22H2.14l7.78-8.9L1.8 2h6.7l4.62 6.02L18.24 2z'/></svg>") no-repeat center / contain;
  }
  
  .photon-icon--pin {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 .1-2.9l1.2-5.1s-.3-.6-.3-1.6c0-1.5.9-2.6 2-2.6.9 0 1.3.7 1.3 1.5 0 .9-.6 2.3-.9 3.6-.2 1 .5 1.8 1.6 1.8 2 0 3.6-2.1 3.6-5.1 0-2.7-2-4.6-4.8-4.6-3.3 0-5.2 2.5-5.2 5 0 1 .4 2 .9 2.6.1.1.1.3.1.4l-.3 1.3c-.1.4-.3.5-.7.3-1.3-.6-2.1-2.5-2.1-4.1 0-3.3 2.4-6.4 7-6.4 3.7 0 6.5 2.6 6.5 6.1 0 3.6-2.3 6.5-5.5 6.5-1.1 0-2.1-.6-2.4-1.2l-.7 2.6c-.3 1-1 2.2-1.5 2.9A10 10 0 1 0 12 2z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 .1-2.9l1.2-5.1s-.3-.6-.3-1.6c0-1.5.9-2.6 2-2.6.9 0 1.3.7 1.3 1.5 0 .9-.6 2.3-.9 3.6-.2 1 .5 1.8 1.6 1.8 2 0 3.6-2.1 3.6-5.1 0-2.7-2-4.6-4.8-4.6-3.3 0-5.2 2.5-5.2 5 0 1 .4 2 .9 2.6.1.1.1.3.1.4l-.3 1.3c-.1.4-.3.5-.7.3-1.3-.6-2.1-2.5-2.1-4.1 0-3.3 2.4-6.4 7-6.4 3.7 0 6.5 2.6 6.5 6.1 0 3.6-2.3 6.5-5.5 6.5-1.1 0-2.1-.6-2.4-1.2l-.7 2.6c-.3 1-1 2.2-1.5 2.9A10 10 0 1 0 12 2z'/></svg>") no-repeat center / contain;
  }
  
  .photon-icon--tt {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 8.1c-1.5 0-3-.5-4.2-1.4v7.3c0 3.1-2.5 5.7-5.7 5.7S5.4 17.1 5.4 14s2.5-5.7 5.7-5.7c.3 0 .7 0 1 .1v3a2.6 2.6 0 1 0 1.8 2.5V2h3.1c.2 1.5 1 2.9 2.2 3.8.8.6 1.8.9 2.8 1v2.3z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 8.1c-1.5 0-3-.5-4.2-1.4v7.3c0 3.1-2.5 5.7-5.7 5.7S5.4 17.1 5.4 14s2.5-5.7 5.7-5.7c.3 0 .7 0 1 .1v3a2.6 2.6 0 1 0 1.8 2.5V2h3.1c.2 1.5 1 2.9 2.2 3.8.8.6 1.8.9 2.8 1v2.3z'/></svg>") no-repeat center / contain;
  }
  
  /* Hover accent */
  .photon-social__link:hover .photon-icon {
    background: #caa25a;
    filter: drop-shadow(0 0 4px rgba(202, 162, 90, .35));
  }
  
/* =====================================================
   PHOTON – Footer cookie settings link
   Allows # link to open Klaro
   ===================================================== */

   document.addEventListener("click", function (e) {
    const link = e.target.closest('a[href="#"]');
    if (!link) return;
  
    if (link.textContent.toLowerCase().includes("бисквит") ||
        link.textContent.toLowerCase().includes("cookie")) {
      e.preventDefault();
      if (window.klaro && typeof klaro.show === "function") {
        klaro.show();
      }
    }
  });
/* Hide Klaro "powered by" line (and its placeholder text) */
.klaro .powered-by,
.klaro .cm-powered-by,
.klaro [class*="powered"] {
  display: none !important;
}

/* =====================================================
   PHOTON – Category TOP block (title + short desc)
   Target: .block-category.card.card-block
   ===================================================== */

   .block-category.card.card-block {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 0 !important;
    border-radius: 18px !important;
    padding: 30px 34px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(6px);
  }
  
  /* Photon section title + gold divider */
  .block-category.card.card-block h1,
  .block-category.card.card-block h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    color: #2b2b2b !important;
    margin: 0 0 10px !important;
    position: relative;
  }
  
  .block-category.card.card-block h1::after,
  .block-category.card.card-block h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 8px;
    background: linear-gradient(90deg, #e6c36a, #d4a84f, #e6c36a);
    border-radius: 2px;
  }
  
  /* Short description typography */
  .block-category.card.card-block p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #4a4a4a !important;
    margin: 0 !important;
  }
  /* =========================
   PHOTON – Main menu (kill blue, gold style)
   ========================= */

/* Base menu links */
#header .header-nav a,
#header .header-top a{
  color: rgba(63,42,24,0.85) !important;
  transition: color .25s ease, text-shadow .25s ease;
}

/* Hover */
#header .header-nav a:hover,
#header .header-top a:hover{
  color: #b68a3a !important;
  text-shadow:
    0 0 6px rgba(182,138,58,.35),
    0 0 12px rgba(182,138,58,.18);
}

/* Active (current category / page) */
#header .header-nav a.active,
#header .header-nav a[aria-current="page"],
#header .header-nav .current > a{
  color: #a97c2e !important;
  font-weight: 500;
  text-shadow:
    0 0 6px rgba(182,138,58,.25);
}

/* Remove default blue focus */
#header .header-nav a:focus,
#header .header-nav a:active{
  outline: none !important;
  box-shadow: none !important;
  color: #b68a3a !important;
}
#header .header-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:0;
  height:2px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    #d4af37,
    #f5e6a8,
    #d4af37,
    transparent
  );
  transition: width .28s ease;
}

#header .header-nav a:hover::after,
#header .header-nav a.active::after{
  width:60%;
}
/* =========================
   PHOTON – Header banner (a.banner) floating + rounded
   ========================= */

   /* Banner aligned with wrapper/container */
#header .header-top a.banner{
  display:block;
  width: 100%;
  max-width: none;          /* махаме 1200px */
  margin: 16px 0 22px;      /* махаме auto центриране */
  padding: 0;               /* махаме вътрешния offset 16px */
}

  
  #header .header-top a.banner img{
    display: block;
    width: 100%;
    height: auto;
  
    border-radius: var(--ph-r18);
    border: 1px solid rgba(210,170,110,.22);
  
    box-shadow:
      0 22px 46px rgba(0,0,0,.18),
      0 8px 18px rgba(0,0,0,.12);
  
    transition: transform .35s ease, box-shadow .35s ease;
  }
  
  #header .header-top a.banner:hover img{
    transform: translateY(-4px);
    box-shadow:
      0 30px 60px rgba(0,0,0,.22),
      0 12px 24px rgba(0,0,0,.16);
  }

  /* HERO row aligns with header container */
#header .ph-hero-row{
  margin: 16px 0 22px;     /* без auto, защото вече сме в container */
}

#header .ph-hero-link{
  display:block;
}

#header .ph-hero-img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius: var(--ph-r18);
}

  /* =========================
   PHOTON – Subcategories: hard kill any blue ring
   ========================= */

/* Kill focus styles on ANY element inside subcategories */
#js-product-list-header #subcategories *:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* Also kill parent focus-within rings (common Bootstrap/theme trick) */
#js-product-list-header #subcategories li:focus-within,
#js-product-list-header #subcategories .subcategory-image:focus-within,
#js-product-list-header #subcategories .card:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: remove mobile tap highlight (often cyan/blue) */
#js-product-list-header #subcategories a{
  -webkit-tap-highlight-color: transparent;
}

/* Bring back Photon focus for keyboard users only */
#js-product-list-header #subcategories a:focus-visible img{
  box-shadow:
    0 0 0 3px rgba(212,175,55,0.45),
    0 12px 28px rgba(0,0,0,0.16) !important;
  border-radius: 14px;
}

/* =========================================
   PHOTON – MOBILE HEADER (final, simple, stable)
   Logo + tagline on top, search on second row
   ========================================= */

   @media (max-width: 767px){

    /* Overall breathing room */
    #header .header-top{
      padding-top: 14px !important;
      padding-bottom: 14px !important;
    }
  
    /* Logo block centered */
    #_mobile_logo{
      text-align: center !important;
      margin: 6px 0 18px !important; /* space below logo+tagline */
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
    }
  
    #_mobile_logo img{
      max-height: 110px !important;
      height: auto !important;
      width: auto !important;
    }
  
    /* Tagline (under logo) */
    #_mobile_logo::after{
      content: "A spark of light in every piece";
      display: block !important;
      margin-top: 8px !important;
    
      font-size: 13px !important;   /* ⬅ увеличено */
      line-height: 1.3 !important;
      letter-spacing: 0.6px !important;
      opacity: 0.80 !important;     /* леко по-видим */
      font-family: Georgia, serif !important;
    }
    
  
    /* Search on second row + centered look */
    #_mobile_search_bar,
    #header #search_widget,
    #header .search-widget{
      margin-top: 80px !important; /* space after logo+tagline */
    }
  
    #_mobile_search_bar form,
    #search_widget form{
      width: 100% !important;
    }
  
    #_mobile_search_bar input,
    #search_widget input{
      height: 44px !important;
      border-radius: 14px !important;
    }
  
    /* Optional: make search look slightly narrower (more premium) */
    #_mobile_search_bar,
    #search_widget{
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
  }
   /* =========================================
   SUBCATEGORIES – fix overlap (mobile) [GRID version]
   markup: ul.subcategories-list (grid)
   ========================================= */
@media (max-width: 767px){

  /* Title breathing room */
  .subcategory-heading{
    margin-bottom: 18px !important;
  }

  /* The grid itself */
  ul.subcategories-list{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 18px !important;           /* real spacing */
    align-items: stretch !important;
    align-content: start !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Each tile */
  ul.subcategories-list > li{
    margin: 0 !important;                /* avoid double spacing */
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;          /* kills any floating overlap */
  }

  /* Clickable card wrapper */
  ul.subcategories-list > li a{
    display: block !important;
    padding: 14px !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Image area + name spacing */
  .subcat-card .subcategory-image{
    margin-bottom: 12px !important;
  }

  .subcat-card h5{
    margin: 0 !important;
    padding-top: 6px !important;
  }
}
/* =========================================
   PRODUCTS LISTING – 2 columns on mobile (Bootstrap layout)
   markup: #products .products.row > .js-product.product.col-xs-12...
   ========================================= */
   @media (max-width: 767px){

    /* Make each product take half width */
    #products .products.row > .js-product.product.col-xs-12,
    #js-product-list .products.row > .js-product.product.col-xs-12{
      flex: 0 0 50% !important;
      max-width: 50% !important;
    }
  
    /* Add grid-like spacing */
    #products .products.row,
    #js-product-list .products.row{
      margin-left: -8px !important;
      margin-right: -8px !important;
    }
  
    #products .products.row > .js-product.product,
    #js-product-list .products.row > .js-product.product{
      padding-left: 8px !important;
      padding-right: 8px !important;
      margin-bottom: 16px !important;
    }
  
    /* Make cards a bit more compact */
    #products .product-miniature .product-description,
    #js-product-list .product-miniature .product-description{
      padding: 10px 10px 12px !important;
    }
  
    #products .product-title,
    #js-product-list .product-title{
      font-size: 13px !important;
      line-height: 1.2 !important;
      margin-bottom: 6px !important;
    }
  
    #products .price,
    #js-product-list .price{
      font-size: 15px !important;
    }
  
    /* Slightly reduce flag + wishlist so they don't dominate */
    #products .product-flags,
    #js-product-list .product-flags{
      transform: scale(0.92) !important;
      transform-origin: top left !important;
    }
  
    #products .wishlist-button,
    #js-product-list .wishlist-button{
      transform: scale(0.92) !important;
    }
  }
  /* HOME - product lists (New / Best sellers / etc.) -> 2 columns on mobile */
@media (max-width: 575.98px){
  /* wrapper-ите на home секциите */
  #index .featured-products .products .js-product,
  #index .product-accessories .products .js-product,
  #index .products-section .products .js-product{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  /* ако има проблем с реденето (рядко), подсигуряваме wrap */
  #index .featured-products .products,
  #index .product-accessories .products,
  #index .products-section .products{
    flex-wrap: wrap !important;
  }
}

/* =========================
   PHOTON – PRODUCT CARD REFINEMENT
   ========================= */

/* --- NEW Badge (златен Photon стил) --- */
.product-flags li.product-flag.new {
  background: linear-gradient(135deg, #d4af37, #f3d27a) !important;
  color: #3a2a1a !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 12px;
  box-shadow: 0 6px 14px rgba(90,58,30,0.18);
  border: none !important;
}

/* --- Product Price (по-бутикова визия) --- */
.product-price {
  color: #5a3a1e;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.3px;
}
  /* --- Fix for stuck product image modal (theme.css has .modal, .modal-open { overflow:hidden }) --- */

/* Modal itself should NOT be overflow:hidden */
.modal { overflow: visible !important; }

/* Lock must apply ONLY to body when modal is open */
body.modal-open { overflow: hidden !important; }

/* When modal is NOT open, ensure page is scrollable/clickable */
body:not(.modal-open) {
  overflow: auto !important;
  padding-right: 0 !important;
}

/* Mobile: hide the default header logo block to avoid duplication */
@media (max-width: 767.98px){
  #header #_mobile_logo{
    display: none !important;
  }
}
/* =========================
   MOBILE: compact hero + reduce top air
   ========================= */
   
  
   @media (max-width: 767.98px){

    /* Hero row да не прави въздух */
    .ph-hero-row{
      padding: 6px 0 10px !important;
      margin: 0 !important;
      line-height: 0;                 /* маха “фантомна” височина от inline spacing */
    }
  
    /* снимката да не държи височина */
    .ph-hero-img{
      display:block;
      width:100%;
      height:auto !important;
      max-height: 110px;              /* пробвай 95–120px */
      object-fit: contain;
    }
  
    /* линкът да не добавя височина */
    .ph-hero-link{
      display:block;
      line-height: 0;
    }
  }
  
  @media (max-width: 767.98px){

    /* 1) убиваме въздуха около search блока */
    #header #search_widget.search-widgets{
      margin: 0 !important;
      padding: 0 !important;
    }
  
    /* 2) понякога формата вътре държи margin */
    #header #search_widget.search-widgets form{
      margin: 0 !important;
    }
  
    /* 3) ако input-а има високи padding-и – само леко го стягаме */
    #header #search_widget.search-widgets input[type="text"]{
      margin: 0 !important;
    }
  
    /* 4) редът в header-top да не раздува височината */
    #header .header-top .row{
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
  
    /* 5) hero да залепне след search-а (минимален въздух) */
    .ph-hero-row{
      margin-top: 8px !important;
    }
  }
/* Hero global max control */
.ph-hero-row{
  display: flex;
  justify-content: center;
}

.ph-hero-img{
  width: 100%;
  max-width: 1100px;   /* тук контролираш реалния размер */
  height: auto;
}
  
@media (hover: none) and (pointer: coarse) {
  .images-container .product-cover {
    touch-action: pan-y; /* скролът си работи, хоризонтално го хваща JS */
  }
}
@media (hover: none) and (pointer: coarse) {
  .images-container { touch-action: pan-y; }
}