/*
Theme Name:  SirsiRuchi
Theme URI:   https://sirsiruchi.in
Description: Custom child theme for SirsiRuchi, built on GeneratePress.
Author:      SirsiRuchi
Version:     1.0.0
Template:    generatepress
Text Domain: sirsiruchi
*/

/* Fonts (abhi @import se; baad me performance ke liye self-host karenge) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Jost:wght@400;500;600&display=swap');

/* =========================================================
   SIRSIRUCHI DESIGN SYSTEM
   (yahi humne static design me banaya tha)
   ========================================================= */

/* ============================================================
   DESIGN TOKENS  (locked to brief: red #E12713 + white system)
   ============================================================ */
.ck {
   --g: #2F4A2E;
   --g2: #233823;
   --gold: #B8863B;
   --gold2: #D9B26C;
   --cream: #F5E6D8;
   --paper: #FBF5EE;
   --ink: #22301F;
   --mut: #6B7566;
   --r: 18px;
   font-family: 'Jost', system-ui, sans-serif;
   color: var(--ink);
   background: var(--paper);
   line-height: 1.6;
   font-size: 16px;
   overflow-x: clip
}

body {
   margin: 0
}

.ck *,
.ck *::before,
.ck *::after {
   box-sizing: border-box
}

.ck [hidden] {
   display: none !important
}

.ck img {
   max-width: 100%;
   display: block
}

.ck a {
   color: inherit;
   text-decoration: none
}

.ck h1,
.ck h2,
.ck h3,
.ck h4 {
   font-family: 'Cormorant Garamond', Georgia, serif;
   font-weight: 600;
   line-height: 1.1;
   margin: 0;
   letter-spacing: -.01em
}

.ck p,
.ck ul {
   margin: 0;
   padding: 0
}

.ck ul {
   list-style: none
}

.ck button {
   font: inherit;
   cursor: pointer
}

.ck :focus-visible {
   outline: 3px solid var(--gold);
   outline-offset: 2px
}

.ck .wrap {
   width: min(1180px, 100% - 40px);
   margin-inline: auto
}

.ck .sec {
   padding: 56px 0
}

.ck .sec-h {
   margin-bottom: 28px
}

.ck .sec-h h2 {
   font-size: clamp(2rem, 6vw, 3rem);
   color: var(--g)
}

.ck .sec-h p {
   color: var(--mut);
   margin-top: 8px;
   max-width: 46ch
}

.ck .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 48px;
   padding: 0 26px;
   border-radius: 999px;
   border: 1.5px solid var(--gold);
   background: var(--gold);
   color: #fff;
   font-weight: 500;
   transition: .2s;
   cursor: pointer;
   text-align: center
}

.ck .btn:hover {
   background: var(--g2);
   border-color: var(--g2);
   color: #fff
}

.ck .btn.ghost {
   background: transparent;
   color: var(--cream);
   border-color: rgba(245, 230, 216, .5)
}

.ck .btn.ghost:hover {
   background: var(--cream);
   color: var(--g)
}

.ck .btn.dark {
   background: var(--g);
   border-color: var(--g)
}

.ck .btn.dark:hover {
   background: var(--gold);
   border-color: var(--gold)
}

.ck .btn.line {
   background: transparent;
   color: var(--g);
   border-color: var(--g)
}

.ck .btn.line:hover {
   background: var(--g);
   color: #fff
}

.ck .ann {
   background: var(--g2);
   color: var(--gold2);
   text-align: center;
   font-size: .85rem;
   padding: 8px 12px
}

.ck .top {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(251, 245, 238, .95);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(47, 74, 46, .1)
}

body.admin-bar .ck .top {
   top: 32px
}

.ck .bar {
   display: grid;
   grid-template-columns: 48px 1fr 48px;
   align-items: center;
   height: 68px
}

.ck .bar .custom-logo-link,
.ck .logo-t {
   justify-self: center;
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.6rem;
   font-weight: 600;
   color: var(--g)
}

.ck .bar .custom-logo {
   max-height: 46px;
   width: auto
}

.ck .ib {
   position: relative;
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 0;
   background: transparent;
   color: var(--g);
   padding: 0
}

.ck .ib svg {
   width: 24px;
   height: 24px
}

.ck .cart-btn {
   justify-self: end;
   border: 1.5px solid var(--g)
}

.ck .cart-btn b {
   position: absolute;
   top: -5px;
   right: -5px;
   min-width: 20px;
   height: 20px;
   padding: 0 5px;
   border-radius: 10px;
   background: var(--gold);
   color: #fff;
   font-size: .72rem;
   display: grid;
   place-items: center
}

.ck .nav {
   display: none;
   gap: 34px;
   font-weight: 500;
   justify-self: center
}

.ck .nav a {
   padding: 6px 0;
   border-bottom: 2px solid transparent
}

.ck .nav a:hover {
   color: var(--gold);
   border-color: var(--gold)
}

.ck .mm {
   display: none;
   padding: 6px 0 18px;
   border-top: 1px solid rgba(47, 74, 46, .1)
}

.ck .mm a {
   display: block;
   padding: 14px 4px;
   font-size: 1.1rem;
   font-weight: 500;
   border-bottom: 1px solid rgba(47, 74, 46, .08)
}

.ck.mopen .mm {
   display: block
}

.ck .hero {
   background: var(--g);
   color: var(--cream);
   padding: 44px 0 60px
}

.ck .hero .wrap {
   display: grid;
   gap: 40px;
   align-items: center
}

.ck .hero h1 {
   font-size: clamp(2.9rem, 12vw, 5.4rem);
   color: var(--cream)
}

.ck .hero h1 em {
   color: var(--gold2);
   font-style: italic
}

.ck .hero .lead {
   margin: 18px 0 26px;
   font-size: 1.08rem;
   max-width: 44ch;
   color: rgba(245, 230, 216, .85)
}

.ck .cta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
}

.ck .arch {
   position: relative;
   justify-self: center;
   width: min(300px, 78%);
   aspect-ratio: 3/4;
   border-radius: 999px 999px 24px 24px;
   border: 1.5px solid var(--gold2);
   padding: 10px
}

.ck .arch-in {
   width: 100%;
   height: 100%;
   border-radius: 999px 999px 16px 16px;
   overflow: hidden;
   background: #2a4128
}

.ck .arch-in img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.ck .hero-note {
   position: absolute;
   left: -14px;
   bottom: 36px;
   background: var(--cream);
   color: var(--g);
   padding: 10px 16px;
   border-radius: 14px;
   font-weight: 500;
   font-size: .88rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .25)
}

.ck .trust {
   background: var(--cream);
   color: var(--g);
   font-weight: 500;
   font-size: .92rem
}

.ck .trust .wrap {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px 16px;
   padding: 16px 0
}

.ck .trust span {
   display: flex;
   align-items: center;
   gap: 8px
}

.ck .trust i {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--gold);
   flex: none
}

.ck .cats {
   display: flex;
   gap: 14px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding: 4px 20px 14px;
   margin: 0 -20px;
   scrollbar-width: none
}

.ck .cats::-webkit-scrollbar,
.ck .quotes::-webkit-scrollbar {
   display: none
}

.ck .cat {
   flex: 0 0 140px;
   scroll-snap-align: start;
   text-align: center;
   background: none;
   border: 0;
   padding: 0;
   color: inherit
}

.ck .cat-img {
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--cream);
   border: 2px solid transparent;
   overflow: hidden;
   transition: .2s;
   display: grid;
   place-items: center;
   font-size: 2.2rem
}

.ck .cat-img img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.ck .cat:hover .cat-img,
.ck .cat.on .cat-img {
   border-color: var(--gold);
   transform: translateY(-3px)
}

.ck .cat span {
   display: block;
   margin-top: 10px;
   font-weight: 500
}

.ck .cat small {
   color: var(--mut)
}

.ck .grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px;
   transition: opacity .2s
}

.ck .grid.busy {
   opacity: .45;
   pointer-events: none
}

.ck .card {
   background: #fff;
   border-radius: var(--r);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(47, 74, 46, .08)
}

.ck .card-img {
   position: relative;
   display: block;
   aspect-ratio: 1;
   background: var(--cream)
}

.ck .card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.ck .tag {
   position: absolute;
   top: 10px;
   left: 10px;
   background: var(--gold);
   color: #fff;
   font-size: .75rem;
   font-weight: 500;
   padding: 3px 10px;
   border-radius: 999px
}

.ck .tag.out {
   background: var(--mut)
}

.ck .card-b {
   padding: 12px 12px 14px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1
}

.ck .card h3 {
   font-size: 1.25rem;
   line-height: 1.2
}

.ck .price {
   font-weight: 600;
   color: var(--g)
}

.ck .price del {
   color: var(--mut);
   font-weight: 400;
   margin-right: 6px;
   font-size: .9em
}

.ck .price ins {
   text-decoration: none
}

.ck .card .btn {
   margin-top: auto;
   min-height: 44px;
   padding: 0 12px;
   font-size: .92rem;
   width: 100%
}

.ck .card .added_to_cart {
   display: none
}

.ck .card .btn.loading {
   opacity: .6;
   pointer-events: none
}

.ck .card .btn.added::after {
   content: " ✓"
}

.ck .empty {
   grid-column: 1/-1;
   text-align: center;
   color: var(--mut);
   padding: 30px 0
}

.ck .more {
   text-align: center;
   margin-top: 30px
}

.ck .tst {
   background: var(--g);
   color: var(--cream)
}

.ck .tst .sec-h h2 {
   color: var(--cream)
}

.ck .tst .sec-h p {
   color: rgba(245, 230, 216, .75)
}

.ck .quotes {
   display: flex;
   gap: 14px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding: 0 20px 8px;
   margin: 0 -20px;
   scrollbar-width: none
}

.ck .q {
   flex: 0 0 min(84%, 340px);
   scroll-snap-align: start;
   background: rgba(245, 230, 216, .08);
   border: 1px solid rgba(217, 178, 108, .35);
   border-radius: var(--r);
   padding: 24px
}

.ck .stars {
   color: var(--gold2);
   letter-spacing: 3px
}

.ck .q p {
   margin: 12px 0 18px;
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.3rem;
   line-height: 1.35
}

.ck .q b {
   display: block;
   font-weight: 500
}

.ck .q small {
   color: rgba(245, 230, 216, .65)
}

.ck .contact .wrap {
   display: grid;
   gap: 32px
}

.ck .info {
   display: grid;
   gap: 14px;
   margin-top: 22px
}

.ck .info a {
   display: flex;
   gap: 12px;
   align-items: center;
   font-weight: 500
}

.ck .info i {
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--cream);
   color: var(--g);
   font-style: normal
}

.ck form.cf {
   background: #fff;
   border-radius: 24px;
   padding: 22px;
   display: grid;
   gap: 14px;
   border: 1px solid rgba(47, 74, 46, .1)
}

.ck .f label {
   display: block;
   font-size: .9rem;
   font-weight: 500;
   margin-bottom: 6px
}

.ck .f input,
.ck .f textarea {
   width: 100%;
   padding: 13px 14px;
   border-radius: 12px;
   border: 1.5px solid #dccfbf;
   background: var(--paper);
   font: inherit;
   color: var(--ink)
}

.ck .f textarea {
   min-height: 110px;
   resize: vertical
}

.ck .f input:focus,
.ck .f textarea:focus {
   outline: none;
   border-color: var(--gold)
}

.ck .fmsg {
   font-size: .92rem;
   color: var(--g);
   min-height: 1.4em
}

.ck footer {
   background: var(--g2);
   color: rgba(245, 230, 216, .78);
   font-size: .95rem
}

.ck .fg {
   display: grid;
   gap: 34px;
   padding: 52px 0 36px
}

.ck footer h4 {
   color: var(--cream);
   font-size: 1.4rem;
   margin-bottom: 14px
}

.ck footer li {
   margin-bottom: 9px
}

.ck footer a:hover {
   color: var(--gold2)
}

.ck .soc {
   display: flex;
   gap: 10px;
   margin-top: 18px;
   flex-wrap: wrap
}

.ck .soc a {
   border: 1px solid rgba(217, 178, 108, .5);
   border-radius: 999px;
   padding: 6px 16px;
   font-size: .88rem
}

.ck .soc a:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff
}

.ck .fb {
   border-top: 1px solid rgba(245, 230, 216, .14);
   padding: 18px 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
   font-size: .85rem;
   color: rgba(245, 230, 216, .6)
}

/* drawer */
.ck-ov {
   position: fixed;
   inset: 0;
   background: rgba(20, 30, 18, .55);
   opacity: 0;
   pointer-events: none;
   transition: opacity .25s;
   z-index: 99998
}

.ck-drawer {
   position: fixed;
   top: 0;
   right: 0;
   height: 100%;
   height: 100dvh;
   width: min(420px, 100%);
   background: #FBF5EE;
   z-index: 99999;
   transform: translateX(105%);
   visibility: hidden;
   transition: transform .3s ease, visibility .3s;
   display: flex;
   flex-direction: column;
   box-shadow: -10px 0 40px rgba(0, 0, 0, .2);
   font-family: 'Jost', system-ui, sans-serif;
   color: #22301F
}

body.ck-open .ck-ov {
   opacity: 1;
   pointer-events: auto
}

body.ck-open .ck-drawer {
   transform: none;
   visibility: visible
}

.ck-dh {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   border-bottom: 1px solid rgba(47, 74, 46, .12)
}

.ck-dh h2 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.8rem;
   color: #2F4A2E;
   margin: 0
}

.ck-x {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 0;
   background: #F5E6D8;
   font-size: 1.2rem;
   color: #2F4A2E;
   cursor: pointer;
   padding: 0
}

.ck-body {
   flex: 1;
   overflow-y: auto;
   padding: 6px 20px;
   display: flex;
   flex-direction: column
}

.ck-body .widget_shopping_cart_content {
   display: flex;
   flex-direction: column;
   flex: 1
}

.ck-body ul.woocommerce-mini-cart {
   list-style: none;
   margin: 0;
   padding: 0;
   flex: 1
}

.ck-body .woocommerce-mini-cart-item {
   position: relative;
   display: block;
   padding: 16px 30px 16px 0;
   border-bottom: 1px solid rgba(47, 74, 46, .08);
   min-height: 88px
}

.ck-body .woocommerce-mini-cart-item a:not(.remove) {
   display: block;
   font-weight: 500;
   line-height: 1.3;
   color: #22301F;
   text-decoration: none
}

.ck-body .woocommerce-mini-cart-item img {
   float: left;
   width: 72px;
   height: 72px;
   object-fit: cover;
   border-radius: 12px;
   margin: 0 12px 0 0
}

.ck-body .woocommerce-mini-cart-item a.remove {
   position: absolute;
   top: 14px;
   right: 0;
   width: 24px;
   height: 24px;
   line-height: 22px;
   text-align: center;
   border-radius: 50%;
   background: #F5E6D8;
   color: #2F4A2E !important;
   font-size: 1.1rem;
   text-decoration: none
}

.ck-body .woocommerce-mini-cart-item a.remove:hover {
   background: #B8863B;
   color: #fff !important
}

.ck-body .quantity {
   display: block;
   color: #6B7566;
   margin-top: 4px;
   font-size: .95rem
}

.ck-body .woocommerce-mini-cart__total {
   display: flex;
   justify-content: space-between;
   font-weight: 600;
   font-size: 1.1rem;
   margin: 16px 0 12px;
   padding-top: 14px;
   border-top: 1px solid rgba(47, 74, 46, .12)
}

.ck-body .woocommerce-mini-cart__buttons {
   display: grid;
   gap: 10px;
   margin: 0 0 20px
}

.ck-body .woocommerce-mini-cart__buttons a {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 48px;
   border-radius: 999px;
   border: 1.5px solid #2F4A2E;
   color: #2F4A2E;
   font-weight: 500;
   text-decoration: none
}

.ck-body .woocommerce-mini-cart__buttons a.checkout {
   background: #B8863B;
   border-color: #B8863B;
   color: #fff
}

.ck-body .woocommerce-mini-cart__buttons a.checkout:hover {
   background: #233823;
   border-color: #233823
}

.ck-body .woocommerce-mini-cart__empty-message {
   text-align: center;
   color: #6B7566;
   padding: 60px 10px
}

.ck-body .blockUI.blockOverlay {
   background: rgba(251, 245, 238, .7) !important
}

@media(min-width:700px) {
   .ck .sec {
      padding: 80px 0
   }

   .ck .grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
   }

   .ck .trust .wrap {
      grid-template-columns: repeat(4, 1fr)
   }

   .ck .card-b {
      padding: 16px
   }

   .ck .quotes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      overflow: visible;
      padding: 0;
      margin: 0
   }

   .ck .q {
      flex: none
   }

   .ck .cats {
      overflow: visible;
      justify-content: center;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
      gap: 26px
   }

   .ck .cat {
      flex: 0 0 170px
   }

   .ck .fg {
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr
   }

   .ck .fb {
      flex-direction: row;
      justify-content: space-between
   }
}

@media(min-width:1000px) {
   .ck .bar {
      grid-template-columns: auto 1fr auto
   }

   .ck .bar .custom-logo-link,
   .ck .logo-t {
      justify-self: start
   }

   .ck .nav {
      display: flex
   }

   .ck .burger,
   .ck.mopen .mm {
      display: none
   }

   .ck .hero {
      padding: 80px 0 90px
   }

   .ck .hero .wrap {
      grid-template-columns: 1.15fr .85fr
   }

   .ck .arch {
      width: min(380px, 100%)
   }

   .ck .grid {
      grid-template-columns: repeat(4, 1fr)
   }

   .ck .contact .wrap {
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start
   }
}

@media(max-width:782px) {
   body.admin-bar .ck .top {
      top: 46px
   }
}

@media(prefers-reduced-motion:reduce) {

   .ck *,
   .ck-drawer,
   .ck-ov {
      animation: none !important;
      transition: none !important
   }
}