@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap");

/* ============================================================
   KIDS THEME v3 - brief-faithful skin (module: themes/kidstheme3)
   ------------------------------------------------------------
   Built line-by-line from the Bengali design brief for
   Kids.mehzin.net. Same layout, sections, products and copy -
   only colour and UI change.

   Differences from the two earlier takes (both left untouched):
   v1 added deep-rose (#C2177E) small text and warm cream photo
   beds; v2 flipped the hero CTA to white and used mint labels.
   v3 follows the brief literally: exact #E91E8C pink text where
   the brief says "pink text", solid pink hero CTA, lavender
   category labels, and a soft cloud + star + heart in the hero.

   Loaded AFTER assets/css/style.css - equal specificity wins by
   source order. No !important is used anywhere.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens - the brief's palette, nothing else
   ------------------------------------------------------------ */
:root {
  --brand: #E91E8C;
  --brand-500: #E91E8C;
  --brand-600: #D4177E;
  --brand-700: #8B5CF6;      /* brief: hover goes purple */
  --brand-300: #F7A8D0;
  --brand-100: #FFE4F1;
  --brand-50: #FFF8FC;

  --gray: #F6F1F7;
  --gray-dark: #E7DEEA;
  --white: #FFFFFF;          /* cards only, never a section */

  --ink: #3D3344;            /* darkest value in the theme */
  --muted: #7A6C86;
  --line: #F3E2EE;

  --sale: #E91E8C;           /* badge pink, never dark red */
  --sale-bg: #FFF0F7;
  --success: #2E9E6D;
  --secondary: #8B5CF6;

  --accent-yellow: #FFD166;
  --accent-mint: #A7E8BD;
  --accent-blue: #BDE0FE;
  --gold: #FFD166;

  --shadow-card: 0 12px 26px -18px rgba(233, 30, 140, 0.28);
  --shadow-lift: 0 22px 38px -20px rgba(233, 30, 140, 0.5);
  --shadow-soft: 0 4px 12px rgba(233, 30, 140, 0.08);

  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;
}

/* ------------------------------------------------------------
   2. Canvas + typography
   Brief: clean rounded Bengali - Hind Siliguri / Noto Sans
   Bengali. Hind Siliguri ships with the site; Noto Sans Bengali
   is imported at the top of THIS file (no core file touched).
   Headings bold + friendly, never cartoonish.
   ------------------------------------------------------------ */
body {
  background: #FFF8FC;
  color: #3D3344;
  font-family: "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif;
}

h1, h2, h3, h4 {
  font-family: "Hind Siliguri", "Noto Sans Bengali", "Baloo Da 2", sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #3D3344;
}

p { color: #3D3344; }

::selection {
  background: rgba(233, 30, 140, 0.22);
  color: #3D3344;
}

/* Warm light bed behind product photography (brief #FFF7ED) */
.product-card__media,
.gallery__main { background: #FFF7ED; }

/* ------------------------------------------------------------
   3. Header + announcement bar
   Brief: white header, very light pink shadow underneath;
   "নতুন কালেকশন" bar in a pink -> purple soft gradient.
   ------------------------------------------------------------ */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid #FFE7F2;
  box-shadow: 0 8px 20px -16px rgba(233, 30, 140, 0.45);
}

.cart-pill {
  border-color: #FFD3E6;
  background: #FFF0F7;
  color: #E91E8C;
}

.eyebrow {
  border-color: #FFD3E6;
  background: #FFFFFF;
  color: #E91E8C;
  box-shadow: var(--shadow-soft);
}

.announce-bar {
  background: linear-gradient(90deg, #E91E8C 0%, #C051B8 55%, #8B5CF6 100%);
  color: #FFFFFF;
  letter-spacing: 0.3px;
}

.section-divider {
  background: linear-gradient(90deg, #E91E8C, #8B5CF6);
}

/* ------------------------------------------------------------
   4. Buttons - brief: CTA #E91E8C, hover #8B5CF6, white text,
   always border-radius: 999px.
   ------------------------------------------------------------ */
.btn { border-radius: 999px; }

.btn-primary {
  background: #E91E8C;
  color: #FFFFFF;
  box-shadow: 0 12px 22px -12px rgba(233, 30, 140, 0.7);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: #8B5CF6;
  box-shadow: 0 14px 24px -12px rgba(139, 92, 246, 0.7);
}

/* "এখনই কালেকশন দেখুন": solid pink pill */
.btn-gold {
  background: #E91E8C;
  color: #FFFFFF;
  box-shadow: 0 12px 24px -12px rgba(233, 30, 140, 0.7);
}
.btn-gold:hover,
.btn-gold:focus-visible {
  background: #8B5CF6;
  color: #FFFFFF;
  filter: none;
  box-shadow: 0 14px 26px -12px rgba(139, 92, 246, 0.72);
}

/* Second button: white background + pink border */
.btn-outline {
  background: #FFFFFF;
  border-color: #E91E8C;
  color: #E91E8C;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: #FFF0F7;
  border-color: #8B5CF6;
  color: #8B5CF6;
}

/* ------------------------------------------------------------
   5. Hero - brief: not white; a very light
   pink-lavender-baby-blue gradient, with subtle decoration
   (cloud, tiny star, heart, pastel dots) that never steals the
   focus from product or text.
   ------------------------------------------------------------ */
.hero-modern {
  position: relative;
  background:
    radial-gradient(70% 90% at 3% 8%, rgba(233, 30, 140, 0.08), transparent 58%),
    radial-gradient(60% 80% at 97% 16%, rgba(189, 224, 254, 0.7), transparent 62%),
    linear-gradient(155deg, #FFF8FC 0%, #F7F3FF 55%, #F4FBFF 100%);
}

/* One soft cloud, one tiny star, one small heart, two pastel
   dots - faint (0.5), always BEHIND the copy. */
.hero-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'><path fill='%23FFFFFF' d='M18 36h30a8 8 0 0 0 2-15.7A13 13 0 0 0 24.6 15 10.5 10.5 0 0 0 18 36z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23E91E8C' d='M12 21.2s-7.3-4.6-9.3-8.9C1 8.4 3.1 4.7 6.6 4.7c2 0 3.4 1.1 4.4 2.4 1-1.3 2.4-2.4 4.4-2.4 3.5 0 5.6 3.7 3.9 7.6-2 4.3-9.3 8.9-9.3 8.9z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFD166' d='M12 2l2.2 6.3L20.5 10l-6.3 2.2L12 18.5l-2.2-6.3L3.5 10l6.3-1.7z'/></svg>"),
    radial-gradient(circle at 50% 50%, rgba(167, 232, 189, 0.9) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 50%, rgba(189, 224, 254, 1) 0 6px, transparent 7px);
  background-repeat: no-repeat;
  background-position: 10% 68%, 20% 78%, 74% 22%, 46% 88%, 62% 64%;
  background-size: 90px 56px, 22px 22px, 18px 18px, 14px 14px, 12px 12px;
}

.hero-modern__inner {
  position: relative;
  z-index: 1;
}

.hero-modern__content h1 { color: #3D3344; }
.hero-modern__content h1 em { color: #E91E8C; }
.hero-modern__content p { color: #3D3344; }

.hero-stats strong { color: #E91E8C; }
.hero-collage__badge { color: #E91E8C; }

/* ------------------------------------------------------------
   6. Feature bar - brief order: soft pink, mint, yellow, blue.
   44px rounded tiles on a lavender strip.
   ------------------------------------------------------------ */
.trust-strip {
  background: #F7F3FF;
  border-bottom: none;
  padding: 24px var(--edge-pad);
}

.trust-item { color: #3D3344; }

.trust-item .ico {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  font-size: 1.15rem;
  color: #3D3344;
  box-shadow: 0 8px 16px -12px rgba(61, 51, 68, 0.45);
}
.trust-item:nth-child(1) .ico { background: #FFE1EE; } /* soft pink */
.trust-item:nth-child(2) .ico { background: #A7E8BD; } /* mint */
.trust-item:nth-child(3) .ico { background: #FFD166; } /* yellow */
.trust-item:nth-child(4) .ico { background: #BDE0FE; } /* baby blue */

/* ------------------------------------------------------------
   7. Section rhythm - brief's three tints, alternated
   ------------------------------------------------------------ */
.catalog { background: #F7F3FF; }
.product-page { background: #FFF8FC; }
.checkout { background: #F4FBFF; }

/* ------------------------------------------------------------
   8. Category chips - brief: pill; active = pink bg + white
   text; inactive = #FFF0F7 bg + pink (#E91E8C) text.
   ------------------------------------------------------------ */
.category-chip {
  background: #FFF0F7;
  border-color: #FFD3E6;
  color: #E91E8C;
  border-radius: 999px;
  text-decoration: none;
}
.category-chip.active,
.category-chip:hover {
  background: #E91E8C;
  border-color: #E91E8C;
  color: #FFFFFF;
}

.catalog__head h2 { color: #3D3344; }
.catalog__count {
  background: #FFF0F7;
  color: #E91E8C;
}

/* ------------------------------------------------------------
   9. Product card - brief: white; light pink/lilac border;
   very soft shadow; hover lifts with a pink shadow. Badge
   pink, never dark red. Label lavender OR mint - v3 uses
   lavender with a mint second row, see comment. Price pink,
   was-price light grey + strike-through.
   ------------------------------------------------------------ */
.product-card {
  background: #FFFFFF;
  border: 1px solid #F6DCEB;
  border-radius: 20px;
  box-shadow: 0 12px 26px -20px rgba(233, 30, 140, 0.28);
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: #FFC9E1;
  box-shadow: 0 22px 36px -20px rgba(233, 30, 140, 0.5);
}

.badge-sale {
  background: #E91E8C;
  color: #FFFFFF;
  box-shadow: 0 8px 16px -8px rgba(233, 30, 140, 0.7);
}

/* Brief allows lavender OR mint: odd cards get lavender, even
   cards mint - both soft, both listed in the brief. */
.product-card__cat {
  display: inline-block;
  width: fit-content;
  background: #EFE9FF;
  color: #8B5CF6;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 1px;
}
.product-card:nth-child(even) .product-card__cat {
  background: #DFF7E8;
  color: #1F7A4D;
}

.product-card__title { color: #3D3344; }

.price-now { color: #E91E8C; }
.price-was {
  color: #9C93A8;
  text-decoration: line-through;
}

.discount-tag {
  background: #FFF0F7;
  color: #E91E8C;
}

.product-card__cta .btn { border-radius: 999px; }

/* ------------------------------------------------------------
   10. Product page - product.php's literal-purple inline block
   (size chips / gift box / combo options) plus the size
   chart's near-black leftovers. Brief hover logic kept:
   resting pink, active pink, soft-purple only where the brief
   puts it. "body"-prefixed, no !important.
   ------------------------------------------------------------ */
body .kids-size-option span {
  border-color: #F0DFEA;
  background: #FFFFFF;
  color: #3D3344;
}
body .kids-size-option input:checked + span {
  border-color: #E91E8C;
  background: #E91E8C;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}
body .kids-size-option input:focus-visible + span {
  outline: 3px solid rgba(139, 92, 246, 0.35);
}
body .kids-size-option--out-of-stock span {
  border-color: #F0E6EE;
  background: #F7F2F6;
  color: #9C93A8;
}
body .kids-size-option--out-of-stock span::after { color: #E91E8C; }

body .gift-box-option {
  border-color: #F6DCEB;
  background: #FFF8FC;
}
body .gift-box-option:hover {
  border-color: #8B5CF6;
  box-shadow: 0 5px 16px rgba(139, 92, 246, 0.2);
}
body .gift-box-option__image {
  border-color: #F3E3EE;
  background: #FFFFFF;
}
body .gift-box-option__title { color: #3D3344; }
body .gift-box-option__old-price { color: #9C93A8; }
body .gift-box-option__offer-price { color: #E91E8C; }
body .gift-box-option__check { border-color: #B79AE8; }
body .gift-box-option input:checked + .gift-box-option__content {
  background: #FFF0F7;
}
body .gift-box-option input:checked + .gift-box-option__content .gift-box-option__check {
  border-color: #E91E8C;
  background: #E91E8C;
}
body .gift-box-option input:focus-visible + .gift-box-option__content {
  outline: 3px solid rgba(139, 92, 246, 0.35);
}

body .combo-option {
  border-color: #F0DFEA;
  background: #FFFFFF;
}
body .combo-option:hover {
  border-color: #8B5CF6;
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);
}
body .combo-option__image { background: #FFF7ED; }
body .combo-option__label { color: #3D3344; }
body .combo-option input:checked + .combo-option__content {
  background: #FFF0F7;
  outline: 3px solid #E91E8C;
}
body .combo-option input:checked + .combo-option__content .combo-option__label {
  color: #E91E8C;
}
body .combo-option input:checked + .combo-option__content::after {
  background: #E91E8C;
  box-shadow: 0 3px 10px rgba(233, 30, 140, 0.3);
}
body .combo-option input:focus-visible + .combo-option__content {
  outline: 3px solid rgba(139, 92, 246, 0.35);
}

body .kids-size-chart,
body .kids-size-chart-image {
  border-color: #F3E3EE;
  background: #FFFFFF;
}
body .kids-size-chart__heading h3,
body .kids-size-chart-image__heading h3 { color: #3D3344; }
body .kids-size-chart__heading p,
body .kids-size-chart-image__heading p { color: #7A6C86; }
body .kids-size-chart__table { color: #3D3344; }
body .kids-size-chart__table th,
body .kids-size-chart__table td { border-color: #F3E3EE; }
body .kids-size-chart__table th {
  background: #FFE4F1;
  color: #E91E8C;
}
body .kids-size-chart__table tbody tr:nth-child(even) { background: #FFF8FC; }
body .kids-size-chart-image__image { border-color: #F3E3EE; }

/* Remaining literal colours, same treatment as v1's 11b */
.price-breakdown {
  background: #FFF0F7;
  border-color: #FBD8E7;
  color: #E91E8C;
}
.price-breakdown .pb-plus,
.price-breakdown .pb-eq,
.price-breakdown .pb-minus { color: #E91E8C; }
.price-breakdown .pb-final { color: #E91E8C; }

.style-choices input:checked + .style-card {
  box-shadow: 0 8px 20px -10px rgba(233, 30, 140, 0.45);
}

.select-field {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E91E8C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   11. Forms, checkout and thank-you
   ------------------------------------------------------------ */
.panel {
  background: #FFFFFF;
  border-color: #F6E4EF;
  border-radius: 26px;
}

.field label { color: #3D3344; }
.field input,
.field select,
.field textarea {
  background: #FFF8FC;
  border-color: #F3E2EE;
  border-radius: 14px;
  color: #3D3344;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #E91E8C;
  background: #FFFFFF;
}
.field .error { color: #E91E8C; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #E91E8C; }

.payment-option { border-color: #F3E2EE; }
.payment-option input { accent-color: #E91E8C; }
.payment-option.selected {
  border-color: #E91E8C;
  background: #FFF0F7;
}

.summary-row.total { color: #E91E8C; }
.summary-row--discount span:last-child { color: #2E9E6D; }

.thankyou__badge {
  background: linear-gradient(135deg, #E91E8C, #8B5CF6);
  box-shadow: 0 16px 30px -12px rgba(233, 30, 140, 0.55);
}

.note-box {
  background: #FFF0F7;
  border-color: #FBD8E7;
}
.note-box strong { color: #E91E8C; }

.empty-state h2 { color: #3D3344; }

/* ------------------------------------------------------------
   12. Footer - brief: muted plum #5B2A86 (never deep purple);
   headings pink/cream, body text off-white.
   ------------------------------------------------------------ */
.site-footer {
  /*background: #5B2A86;*/
  background: #E91E8C;
  color: rgba(255, 255, 255, 0.9);
}

.site-footer__brand strong { color: #FFF8FC; }   /* cream heading */
.site-footer__brand strong span { color: #FFD166; }
.site-footer__brand p { color: rgba(255, 255, 255, 0.88); }

.site-footer__col h4 { color: #FFC9E1; }         /* pink heading */
.site-footer__col a,
.site-footer__col span { color: rgba(255, 255, 255, 0.88); }
.site-footer__col a:hover { color: #FFD166; }

.site-footer__social a {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
.site-footer__social a:hover {
  background: #E91E8C;
  transform: translateY(-2px);
}

.site-footer__bottom { border-top-color: rgba(255, 255, 255, 0.18); }
.site-footer__bottom small { color: rgba(255, 255, 255, 0.78); }

/* ------------------------------------------------------------
   13. Floating buttons - pink-tinted cast only (brand
   green / blue untouched - brief says nothing about them).
   ------------------------------------------------------------ */
body .sticky-contact__btn {
  box-shadow: 0 10px 24px -10px rgba(233, 30, 140, 0.55);
}
body .sticky-contact__btn:hover,
body .sticky-contact__btn:focus-visible {
  box-shadow: 0 12px 26px -10px rgba(139, 92, 246, 0.55);
}

/* ------------------------------------------------------------
   14. Small screens + calm motion
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .hero-modern::before { opacity: 0.38; }
  .trust-item .ico {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
  }
}


/* ------------------------------------------------------------
   15. Tiny World cart + cart checkout
   Theme-only visual overrides. Keep base cart CSS and all JS/PHP logic.
   body-prefixed selectors override later base cart/checkout style blocks.
   No positioning, dimensions, visibility, z-index or animations changed.
   ------------------------------------------------------------ */
body .tw-cart-toggle,
body .tw-cart-add {
  background: #E91E8C;
  color: #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 12px 24px -12px rgba(233, 30, 140, 0.55);
}

body .tw-cart-toggle:not(:disabled):hover,
body .tw-cart-toggle:not(:disabled):focus-visible,
body .tw-cart-add:not(:disabled):hover,
body .tw-cart-add:not(:disabled):focus-visible {
  background: #8B5CF6;
  color: #FFFFFF;
  box-shadow: 0 14px 26px -12px rgba(139, 92, 246, 0.55);
}

body .tw-cart-badge {
  background: #FFFFFF;
  color: #E91E8C;
}

body .tw-cart-toast {
  background: #FFF0F7;
  color: #3D3344;
  border: 1px solid #F6DCEB;
  border-radius: 14px;
  box-shadow: 0 8px 24px -12px rgba(233, 30, 140, 0.35);
}

body .tw-cart-dialog {
  background: #FFFFFF;
  color: #3D3344;
  border: 1px solid #F6DCEB;
  border-radius: 26px;
  box-shadow: 0 22px 60px -20px rgba(139, 92, 246, 0.4);
  font-family: "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif;
}

body .tw-cart-dialog::backdrop {
  background: rgba(61, 51, 68, 0.45);
}

body .tw-cart-heading {
  background: #FFF8FC;
  border-bottom-color: #F3E2EE;
}

body .tw-cart-heading h2,
body .tw-cart-item-name {
  color: #3D3344;
}

body .tw-cart-close {
  background: #FFF0F7;
  color: #E91E8C;
  border-radius: 14px;
}

body .tw-cart-close:not(:disabled):hover {
  background: #EFE9FF;
  color: #6C4BC0;
}

body .tw-cart-item {
  border-bottom-color: #F3E2EE;
}

body .tw-cart-item-image {
  background: #FFF7ED;
  border-radius: 14px;
}

body .tw-cart-item-meta,
body .tw-cart-note,
body .tw-cart-empty {
  color: #7A6C86;
}

body .tw-cart-item-price,
body .tw-cart-total {
  color: #E91E8C;
}

body .tw-cart-control {
  background: #FFFFFF;
  border-color: #F6DCEB;
  color: #B31668;
  border-radius: 999px;
}

body .tw-cart-control:not(:disabled):hover {
  background: #FFF0F7;
  border-color: #8B5CF6;
  color: #6C4BC0;
}

/* Keep removal/unavailable-item feedback distinct from decoration. */
body .tw-cart-remove,
body .tw-cart-status,
body .tw-cart-item-error {
  color: #B42318;
}

body .tw-cart-gift {
  background: #F7F3FF;
  color: #3D3344;
  border-radius: 14px;
}

body .tw-cart-bottom {
  background: #FFF8FC;
}

body .tw-cart-bottom .btn-primary,
body .tw-cart-bottom .btn-gold {
  background: #E91E8C;
  color: #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 12px 24px -12px rgba(233, 30, 140, 0.55);
}

body .tw-cart-bottom .btn-primary:not(:disabled):hover,
body .tw-cart-bottom .btn-primary:not(:disabled):focus-visible,
body .tw-cart-bottom .btn-gold:not(:disabled):hover,
body .tw-cart-bottom .btn-gold:not(:disabled):focus-visible {
  background: #8B5CF6;
  color: #FFFFFF;
}

body .tw-cart-bottom .btn-outline {
  background: #FFFFFF;
  border-color: #E91E8C;
  color: #E91E8C;
  border-radius: 999px;
}

body .tw-cart-bottom .btn-outline:hover,
body .tw-cart-bottom .btn-outline:focus-visible {
  background: #FFF0F7;
  border-color: #8B5CF6;
  color: #6C4BC0;
}

body .tw-cart-toggle:focus-visible,
body .tw-cart-dialog button:focus-visible,
body .tw-cart-add:focus-visible {
  outline-color: #B79AE8;
}

/* Cart checkout only: do not restyle the original Buy Now summary. */
body .checkout .tw-checkout-stage-note {
  background: #FFF0F7;
  border-color: #F6DCEB;
  color: #3D3344;
  border-radius: 14px;
}

body #twCheckoutItems .tw-checkout-item {
  border-bottom-color: #F3E2EE;
}

body #twCheckoutItems img {
  background: #FFF7ED;
  border-radius: 14px;
}

body #twCheckoutItems h3,
body #twCheckoutItems p {
  color: #3D3344;
}

body #twCheckoutItems .tw-checkout-controls button,
body #twCheckoutItems .tw-checkout-gift button {
  background: #FFFFFF;
  border-color: #F6DCEB;
  color: #B31668;
  border-radius: 999px;
}

body #twCheckoutItems .tw-checkout-controls button:not(:disabled):hover,
body #twCheckoutItems .tw-checkout-gift button:not(:disabled):hover {
  background: #FFF0F7;
  border-color: #8B5CF6;
  color: #6C4BC0;
}

body #twCheckoutItems .tw-checkout-controls button:focus-visible,
body #twCheckoutItems .tw-checkout-gift button:focus-visible {
  outline: 3px solid #B79AE8;
  outline-offset: 3px;
}

body #twCheckoutItems .tw-checkout-gift {
  background: #F7F3FF;
  border-radius: 14px;
}

body #twCheckoutStatus {
  color: #B42318;
}
