.elementor-9238 .elementor-element.elementor-element-1146f97{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-9238 .elementor-element.elementor-element-311f0f1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9238 .elementor-element.elementor-element-af81335{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-9238 .elementor-element.elementor-element-2db76f6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9238 .elementor-element.elementor-element-ae82c30 .elementor-heading-title{font-family:"Cairo", Sans-serif;font-weight:600;}.woocommerce .elementor-widget-woocommerce-product-price .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-9238 .elementor-element.elementor-element-f3bd02d{color:#FFFFFF;}.elementor-widget-woocommerce-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-9238 .elementor-element.elementor-element-9658561 .cart button, .elementor-9238 .elementor-element.elementor-element-9658561 .cart .button{transition:all 0.2s;}.elementor-9238 .elementor-element.elementor-element-9658561 .quantity .qty{transition:all 0.2s;}@media(min-width:768px){.elementor-9238 .elementor-element.elementor-element-af81335{--width:50%;}.elementor-9238 .elementor-element.elementor-element-2db76f6{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-1146f97 *//* ═══════════════════════════════════════════════════════════════
   COBA COFFEE — SINGLE PRODUCT · PURE CSS
   Appearance → Customize → Additional CSS
   ═══════════════════════════════════════════════════════════════ */

:root {
  --gold:   #c8922a;
  --gold2:  #e8b84b;
  --gold3:  #f5d080;
  --cream:  #f4ede0;
  --cream2: #c8b99a;
  --bg:     #080502;
  --ash:    #7a6e62;
  --ash2:   #4a4038;
  --border: rgba(255,255,255,0.07);
  --spring: cubic-bezier(0.19, 1, 0.22, 1);
  --snap:   cubic-bezier(0.16, 1, 0.3,  1);
}

/* ── STAGE ──────────────────────────────────────────────────── */
.sp-main-wrapper {
  background:
    radial-gradient(ellipse at 22% 52%, rgba(200,146,42,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 78% 14%, rgba(200,146,42,0.04) 0%, transparent 42%),
    #080502 !important;
  padding: 110px 8% 100px !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(48px, 7vw, 120px) !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Vertical gold rule */
.sp-main-wrapper::after {
  content: '' !important;
  position: absolute !important;
  left: 8% !important; top: 8% !important; bottom: 8% !important; width: 1px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(200,146,42,0.10) 22%,
    rgba(200,146,42,0.28) 50%,
    rgba(200,146,42,0.10) 78%,
    transparent 100%) !important;
  pointer-events: none !important;
}

.sp-main-wrapper > * { position: relative !important; z-index: 1 !important; }

/* ── IMAGE COLUMN ───────────────────────────────────────────── */
.sp-image-col {
  flex: 1.2 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  animation: cobaColIn 1.1s var(--snap) 0.05s forwards !important;
}

@keyframes cobaColIn {
  from { opacity: 0; transform: translateX(-28px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)     scale(1);    }
}

/* Orbit rings */
.sp-image-col::before {
  content: '' !important;
  position: absolute !important;
  width: 88% !important; aspect-ratio: 1 !important; border-radius: 50% !important;
  border: 1px dashed rgba(200,146,42,0.09) !important;
  animation: cobaCW 52s linear infinite !important;
  pointer-events: none !important;
}
.sp-image-col::after {
  content: '' !important;
  position: absolute !important;
  width: 56% !important; aspect-ratio: 1 !important; border-radius: 50% !important;
  border: 1px solid rgba(200,146,42,0.05) !important;
  animation: cobaCCW 28s linear infinite !important;
  pointer-events: none !important;
}
@keyframes cobaCW  { to { transform: rotate(360deg);  } }
@keyframes cobaCCW { to { transform: rotate(-360deg); } }
.sp-image-col:hover::before { animation-duration: 11s !important; }
.sp-image-col:hover::after  { animation-duration: 7s  !important; }

/* ── PRODUCT IMAGE ──────────────────────────────────────────── */
.sp-product-image {
  width: 82% !important;
  max-width: 430px !important;
  display: block !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  transform-origin: center 82% !important;
  will-change: transform, filter !important;
  filter: drop-shadow(0 48px 96px rgba(0,0,0,0.93)) !important;
  animation: cobaBagFloat 7.5s cubic-bezier(0.45,0.05,0.55,0.95) infinite !important;
  transition: filter 1.6s var(--spring) !important;
}

@keyframes cobaBagFloat {
  0%   { transform: translateY(0px)   rotate(0deg)    scale(1);     }
  25%  { transform: translateY(-16px) rotate(0.7deg)  scale(1.01);  }
  50%  { transform: translateY(-28px) rotate(-0.5deg) scale(1.016); }
  75%  { transform: translateY(-14px) rotate(1.1deg)  scale(1.008); }
  100% { transform: translateY(0px)   rotate(0deg)    scale(1);     }
}

.sp-image-col:hover .sp-product-image {
  animation-play-state: paused !important;
  filter:
    drop-shadow(0 70px 120px rgba(0,0,0,0.97))
    drop-shadow(0 0 65px rgba(185,145,58,0.34)) !important;
}

/* ── BAG GLOW ───────────────────────────────────────────────── */
.sp-bag-glow {
  position: absolute !important;
  bottom: 3% !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 58% !important; height: 40% !important;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(200,146,42,0.22) 0%,
    rgba(200,146,42,0.06) 42%,
    transparent 70%) !important;
  pointer-events: none !important; z-index: 1 !important;
  animation: cobaGlow 7.5s ease-in-out infinite !important;
}
@keyframes cobaGlow {
  0%,100% { opacity: .45; transform: translateX(-50%) scale(1);    }
  50%     { opacity: .90; transform: translateX(-50%) scale(1.2);  }
}
.sp-image-col:hover .sp-bag-glow {
  animation-play-state: paused !important;
  opacity: 1 !important;
  transform: translateX(-50%) scale(1.28) !important;
  transition: transform 1.4s var(--spring), opacity .8s ease !important;
}

/* ── CONTENT COLUMN ─────────────────────────────────────────── */
.sp-product-title {
  flex: 1 !important;
  opacity: 0;
  animation: cobaContentIn 1s var(--snap) 0.3s forwards !important;
}
.sp-add-to-cart {
  opacity: 0;
  animation: cobaContentIn 1s var(--snap) 0.5s forwards !important;
}
@keyframes cobaContentIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.woocommerce-breadcrumb {
  font-family: 'Cairo', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--ash2) !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.woocommerce-breadcrumb a       { color: var(--ash) !important; text-decoration: none !important; transition: color .3s !important; }
.woocommerce-breadcrumb a:hover { color: var(--cream2) !important; }
.woocommerce-breadcrumb .sep    { opacity: .2 !important; }

/* ── H1 ─────────────────────────────────────────────────────── */
.sp-product-title h1,
.sp-product-title .product_title {
  font-family: 'Cairo', sans-serif !important;
  font-size: clamp(68px, 9.5vw, 120px) !important;
  font-weight: 900 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.01em !important;
  color: var(--cream) !important;
  margin-bottom: 20px !important;
}

/* Gold word — wrap second word in <span> via Elementor or WC title */
.sp-product-title h1 span,
.sp-product-title .product_title span {
  display: block !important;
  background: linear-gradient(135deg, var(--gold3) 0%, var(--gold2) 40%, var(--gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 32px rgba(200,146,42,0.22)) !important;
}

/* ── SHORT DESCRIPTION ──────────────────────────────────────── */
.woocommerce-product-details__short-description {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(244,237,224,0.60) !important;
  border-left: 2px solid rgba(200,146,42,0.20) !important;
  padding-left: 18px !important;
  margin-bottom: 28px !important;
}

/* ── PRICE ──────────────────────────────────────────────────── */
.sp-product-price,
.woocommerce-variation-price {
  margin-bottom: 30px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}

.sp-product-price .price,
.woocommerce-variation-price .price,
.price > .woocommerce-Price-amount,
.woocommerce-Price-amount.amount {
  font-family: 'Cairo', sans-serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, var(--gold2) 0%, var(--gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── FLAVOR TAGS (sp-flavor-tags) ───────────────────────────── */
.sp-flavor-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 26px !important;
}

.sp-flavor-tag {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  color: var(--ash2) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  padding: 5px 13px !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,0.015) !important;
  transition: border-color .35s var(--snap), color .35s var(--snap) !important;
}
.sp-flavor-tag:hover {
  border-color: rgba(200,146,42,0.28) !important;
  color: var(--ash) !important;
}

/* ── VARIATIONS ─────────────────────────────────────────────── */
.sp-add-to-cart .variations {
  width: 100% !important;
  border: none !important;
  margin-bottom: 28px !important;
}
.sp-add-to-cart .variations td,
.sp-add-to-cart .variations th {
  border: none !important;
  padding: 0 0 18px 0 !important;
  display: block !important;
  width: 100% !important;
}
.sp-add-to-cart .variations td.label label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ash2) !important;
  padding-bottom: 12px !important;
  display: block !important;
}

/* ── SWATCH BUTTONS ─────────────────────────────────────────── */
.variable-items-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.variable-item {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  padding: 11px 24px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--ash) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition:
    border-color .4s var(--snap),
    color        .4s var(--snap),
    transform    .5s var(--spring),
    box-shadow   .5s var(--spring) !important;
}

/* Gold fill */
.variable-item::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: rgba(200,146,42,0.07) !important;
  opacity: 0 !important;
  transition: opacity .35s !important;
}
/* Shimmer */
.variable-item::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.13) 50%, transparent 70%) !important;
  transform: translateX(-130%) !important;
  transition: transform .6s var(--snap) !important;
}

.variable-item:hover {
  border-color: rgba(200,146,42,0.40) !important;
  color: var(--cream2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32) !important;
}
.variable-item:hover::before { opacity: 1 !important; }
.variable-item:hover::after  { transform: translateX(130%) !important; }
.variable-item:active        { transform: translateY(-1px) scale(0.96) !important; }

.variable-item.selected {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(200,146,42,0.09) !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 10px 32px rgba(200,146,42,0.22),
    0 4px  12px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.variable-item.selected::before { opacity: 1 !important; }

/* ── QUANTITY ────────────────────────────────────────────────── */
.sp-add-to-cart form.cart {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-bottom: 16px !important;
}

.sp-add-to-cart .quantity {
  display: flex !important;
  align-items: center !important;
  border: 1px solid rgba(200,146,42,0.22) !important;
  border-radius: 8px !important;
  transition: border-color .35s var(--snap) !important;
}
.sp-add-to-cart .quantity:focus-within {
  border-color: rgba(200,146,42,0.48) !important;
  box-shadow: 0 0 0 3px rgba(200,146,42,0.07) !important;
}

.sp-add-to-cart .quantity input.qty {
  width: 52px !important; height: 64px !important;
  background: transparent !important;
  border: none !important;
  color: var(--cream) !important;
  font-family: 'Bebas Neue', cursive !important;
  font-size: 22px !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
}
.sp-add-to-cart .quantity input.qty::-webkit-inner-spin-button,
.sp-add-to-cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none !important; }
.sp-add-to-cart .quantity input.qty:focus { outline: none !important; }

.qty-btn {
  width: 40px !important; height: 64px !important;
  background: transparent !important;
  border: none !important;
  color: var(--gold) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background .2s, color .2s !important;
}
.qty-btn:hover {
  background: rgba(200,146,42,0.09) !important;
  color: var(--gold2) !important;
}

/* ── ADD TO CART BUTTON ──────────────────────────────────────── */
.sp-add-to-cart .single_add_to_cart_button {
  flex-grow: 1 !important;
  height: 64px !important;
  background: linear-gradient(135deg, var(--gold2) 0%, var(--gold) 100%) !important;
  color: #080400 !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  will-change: transform !important;
  transition:
    transform      .65s var(--spring),
    box-shadow     .65s var(--spring),
    letter-spacing .5s  var(--snap) !important;
}

/* Shimmer sweep */
.sp-add-to-cart .single_add_to_cart_button::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(108deg, transparent 22%, rgba(255,255,255,0.30) 50%, transparent 78%) !important;
  transform: translateX(-145%) !important;
  transition: transform .85s var(--snap) !important;
  pointer-events: none !important;
}

/* Glow bloom */
.sp-add-to-cart .single_add_to_cart_button::after {
  content: '' !important;
  position: absolute !important; inset: -3px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, var(--gold3), var(--gold)) !important;
  opacity: 0 !important; z-index: -1 !important;
  filter: blur(16px) !important;
  transition: opacity .5s var(--snap) !important;
}

.sp-add-to-cart .single_add_to_cart_button:hover {
  transform: translateY(-7px) scale(1.016) !important;
  letter-spacing: 0.35em !important;
  box-shadow:
    0 28px 64px rgba(200,146,42,0.48),
    0 10px 24px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
.sp-add-to-cart .single_add_to_cart_button:hover::before { transform: translateX(145%) !important; }
.sp-add-to-cart .single_add_to_cart_button:hover::after  { opacity: 1 !important; }
.sp-add-to-cart .single_add_to_cart_button:active        { transform: translateY(-2px) scale(0.97) !important; transition-duration: .14s !important; }

/* Added state */
.sp-add-to-cart .single_add_to_cart_button.added {
  background: linear-gradient(135deg, #34a85a, #1e6b38) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 50px rgba(42,160,88,0.35) !important;
}

/* ── SHIPPING NOTE ───────────────────────────────────────────── */
.sp-shipping-note {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 9.5px !important;
  letter-spacing: 0.3em !important;
  color: rgba(74,64,56,0.7) !important;
  margin-top: 16px !important;
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  padding-top: 14px !important;
}

/* ── META ────────────────────────────────────────────────────── */
.product_meta {
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 20px !important;
  margin-top: 24px !important;
  color: var(--ash) !important;
}
.product_meta a       { color: var(--gold) !important; text-decoration: none !important; transition: opacity .3s !important; }
.product_meta a:hover { opacity: .7 !important; }

/* ── RESPONSIVE TABLET ───────────────────────────────────────── */
@media (max-width: 991px) {
  .sp-main-wrapper {
    flex-direction: column !important;
    padding: 80px 22px 80px !important;
    gap: 48px !important;
    min-height: auto !important;
    text-align: center !important;
  }
  .sp-main-wrapper::after       { display: none !important; }
  .sp-image-col                 { order: -1 !important; width: 100% !important; max-width: 320px !important; margin: 0 auto !important; }
  .sp-product-image             { width: 76% !important; max-width: 280px !important; }
  .sp-product-title h1          { font-size: clamp(56px, 14vw, 80px) !important; }
  .sp-add-to-cart               { width: 100% !important; }
  .woocommerce-product-details__short-description {
    text-align: center !important;
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(200,146,42,0.16) !important;
    padding-top: 16px !important;
  }
  .variable-items-wrapper { justify-content: center !important; }
  .sp-flavor-tags         { justify-content: center !important; }
  .sp-product-price       { justify-content: center !important; }
  .woocommerce-breadcrumb { justify-content: center !important; }
  .sp-shipping-note       { justify-content: center !important; }
}

/* ── RESPONSIVE MOBILE ───────────────────────────────────────── */
@media (max-width: 480px) {
  .sp-main-wrapper                            { padding: 60px 18px 60px !important; }
  .sp-product-title h1                        { font-size: clamp(50px, 15vw, 68px) !important; }
  .sp-add-to-cart .quantity input.qty         { width: 48px !important; height: 56px !important; }
  .qty-btn                                    { height: 56px !important; }
  .sp-add-to-cart .single_add_to_cart_button  { height: 56px !important; font-size: 11px !important; letter-spacing: 0.2em !important; }
  .variable-items-wrapper                     { gap: 8px !important; }
  .variable-item                              { padding: 9px 16px !important; font-size: 13px !important; }
}/* End custom CSS */