/*! raniwear custom.css — hand-written overrides.
    Loaded after the generated bundles, and never regenerated by tools/split-css.js. */

/* --- Size swatches -------------------------------------------------------
   The template fixes .size-box li at width:35px with a 50% radius, which suits
   "S" / "M" but clips real catalogue values such as "Free Size". Releasing the
   width lets short labels stay round and longer ones grow into a pill. */
.product-detail-box .product-option .size-box ul li {
  border-radius: 50px;
  flex: 0 0 auto;
  min-width: 35px;
  padding: 0 14px;
  width: auto;
}

.product-detail-box .product-option .size-box ul li a {
  white-space: nowrap;
}

/* --- Sold out ------------------------------------------------------------
   product-sold-out.html marks swatches .disabled; make that state readable
   rather than merely decorative. */
.product-detail-box .product-option .size-box ul li.disabled,
.product-detail-box .product-option .color-box .color-variant li.disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}

.product-detail-box .product-option .size-box ul li.disabled::after {
  background: currentColor;
  content: "";
  height: 1px;
  left: 12%;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  width: 76%;
}

.product-detail-box .product-option .quantity-box .stock-out {
  color: rgba(var(--danger-color, 220, 53, 69), 1);
  font-weight: 500;
  margin: 0;
}

/* --- Colour swatches -----------------------------------------------------
   Swatch colours come from the attribute term name as an inline background, so
   pale shades need an edge to stay visible against the page. */
.product-detail-box .product-option .color-box .color-variant li {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* --- Cart drawer ---------------------------------------------------------
   The template animates the quantity by sliding three absolutely-positioned
   divs through a 40x25 window. The quantity here comes from the server as a
   single value, so the window has to centre plain text instead. */
.shopping-details .offcanvas-body > ul li .btn-containter .btn-control__quantity {
  align-items: center;
  display: flex;
  justify-content: center;
  line-height: 1;
}

/* --- Cart page product name ----------------------------------------------
   The template's own rule ends with `white-space: normal; white-space: nowrap;`
   — nowrap wins, so a long product name stays on one line, grows past its cell
   and runs over the Price column. The 2-line clamp sitting in the same rule can
   never fire, because the text never wraps in the first place. */
.cart-table .cart-box a h5 {
  display: -webkit-box !important;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* A flex child will not shrink below its content width without this. */
.cart-table .cart-box > div {
  min-width: 0;
}

/* "× 2" next to the unit price, only shown when the line holds more than one. */
.shopping-details .offcanvas-body > ul li .rw-times {
  color: rgba(var(--content-color), 1);
  font-weight: 400;
}

/* The template pins the bin icon to the row's top-right corner
   (li .iconsax { position:absolute; right:0 }), so the text column has to keep
   clear of it — real product names are long enough to run underneath. */
.shopping-details .offcanvas-body > ul li > div {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 26px;
}

.shopping-details .offcanvas-body > ul li .delete-icon {
  line-height: 0;
}

.shopping-details .offcanvas-body > ul li.cart-empty {
  display: block;
  text-align: center;
}

/* --- Cart & checkout totals ----------------------------------------------
   The template floats the value span right. WooCommerce nests its own spans
   inside a price (currency symbol, amount), and the rule reaches those too —
   floating the ₹ to the right of the number. Only the outer one should float. */
.cart-bottom h6 span span,
.summery-content li span span,
.summery-content h5 span,
.total h6 span,
.cart-body ul li span span {
  float: none;
}

/* --- Checkout form -------------------------------------------------------
   WooCommerce's field markup has no styling of its own in this theme. */
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
  margin-bottom: 16px;
}

.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.left-sidebar-checkout .form-control,
.left-sidebar-checkout .form-select,
.left-sidebar-checkout .select2-container .select2-selection--single {
  background-color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--light-border), 1);
  border-radius: 6px;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  width: 100%;
}

.left-sidebar-checkout textarea.form-control {
  min-height: 90px;
}

.left-sidebar-checkout .form-control:focus,
.left-sidebar-checkout .form-select:focus {
  border-color: rgba(var(--theme-default), 1);
  box-shadow: none;
  outline: none;
}

.left-sidebar-checkout .required {
  color: #dc3545;
  text-decoration: none;
}

/* Payment methods sit in the narrow summary column. */
.right-sidebar-checkout .payment-box {
  align-items: center;
  border: 1px solid rgba(var(--light-border), 1);
  border-radius: 6px;
  display: flex;
  padding: 10px 14px;
}

.right-sidebar-checkout .payment-box label {
  cursor: pointer;
  margin: 0;
}

.right-sidebar-checkout .payment_box {
  font-size: 13px;
  opacity: 0.75;
  padding: 8px 4px 0;
}

.right-sidebar-checkout .place-order {
  margin-top: 16px;
}

/* --- Contact form --------------------------------------------------------
   The template's form is inert markup with no notice or honeypot styling. */
.rw-hp {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* The contact form uses the same notice design as WooCommerce; it is defined
   once, further down this file. */

.contact-form .form-control {
  border: 1px solid rgba(var(--light-border), 1);
  border-radius: 6px;
  min-height: 46px;
  padding: 10px 14px;
  width: 100%;
}

.contact-form textarea.form-control {
  min-height: 120px;
}

.contact-form .form-control:focus {
  border-color: rgba(var(--theme-default), 1);
  box-shadow: none;
  outline: none;
}

/* --- Compare table -------------------------------------------------------
   The template's rows carry no header column, so each cell labels itself. */
.table-compare .compare-label {
  color: rgba(var(--content-color), 1);
  display: block;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  opacity: 0.7;
  text-transform: uppercase;
}

/* --- My Account forms ----------------------------------------------------
   Account details and the address forms are built from WooCommerce fields,
   which carry no styling of their own in this theme. */
.rw-account-form .form-label,
.rw-account-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.rw-account-form .form-control,
.rw-account-form .form-select,
.rw-account-form input[type="text"],
.rw-account-form input[type="email"],
.rw-account-form input[type="tel"],
.rw-account-form input[type="password"],
.rw-account-form select,
.rw-account-form textarea {
  background-color: rgba(var(--white), 1);
  border: 1px solid rgba(var(--light-border), 1);
  border-radius: 6px;
  min-height: 46px;
  padding: 10px 14px;
  width: 100%;
}

.rw-account-form .form-control:focus,
.rw-account-form select:focus,
.rw-account-form textarea:focus {
  border-color: rgba(var(--theme-default), 1);
  box-shadow: none;
  outline: none;
}

.rw-account-form .form-row,
.rw-account-form .from-group {
  margin-bottom: 0;
}

.rw-account-form small em {
  color: rgba(var(--content-color), 1);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.rw-account-form .btn + .btn {
  margin-left: 10px;
}

.rw-account-form .sidebar-title {
  margin-top: 10px;
}

/* Orders list: status pill tint and spacing between the cards' parts. */
.order-box .order-container {
  align-items: center;
  display: flex;
  gap: 14px;
}

.order-box .order-icon.rw-status-done .couplet {
  background-color: #2e7d32;
}

.order-box .order-icon.rw-status-stopped .couplet {
  background-color: #c62828;
}

.order-box .order-icon.rw-status-waiting .couplet {
  background-color: #ef8c00;
}

/* The template's .review-box holds a rating and one link, so it is
   space-between. Here it holds a row of buttons, which that would fling to
   opposite ends — and the date belongs beside them, not underneath. */
.dashboard-right-box .order .order-box .return-box {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
}

.dashboard-right-box .order .order-box .return-box .review-box {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.rw-account-pagination {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* Address cards: the template's markup assumes a saved-address radio that
   WooCommerce has no use for, and puts the buttons outside the bordered box.
   With only two addresses of very different lengths the cards need to be one
   box each, matched in height, with the buttons pinned to the bottom. */
.address-tab .row > [class*="col-"] {
  display: flex;
}

.address-tab .address-option {
  border: 1px solid rgba(var(--light-border), 1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  width: 100%;
}

.address-tab .address-option .delivery-address-box {
  border: none;
  display: block;
  flex: 1 1 auto;
  padding: 0;
}

.address-tab .address-option .address-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.address-tab .address-option .address {
  display: block;
  margin-bottom: 6px;
}

.address-tab .address-option .address-tag {
  font-weight: 500;
  margin-right: 6px;
}

.address-tab .address-option .buttons {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* --- Login / register ----------------------------------------------------
   .form-floating needs the input before the label and a placeholder to float
   against; the spacing between the two stacked forms comes from here. */
.log-in-box .login-box {
  margin-bottom: 6px;
}

.log-in-box .form-floating > label {
  padding: 12px 16px;
}

.log-in-box .form-floating > .form-control {
  height: 58px;
  line-height: 1.25;
  padding: 22px 16px 6px;
}

.log-in-box .forgot-box {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.log-in-box .forgot-box label {
  margin: 0;
}

.log-in-box .other-log-in {
  align-items: center;
  display: flex;
  gap: 14px;
  margin: 26px 0 18px;
}

.log-in-box .other-log-in::before,
.log-in-box .other-log-in::after {
  background: rgba(var(--light-border), 1);
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.log-in-box .other-log-in h6 {
  margin: 0;
}

.log-in-box .log-in-title {
  margin-bottom: 22px;
}

.log-in-box .log-in-title h4 {
  margin-bottom: 4px;
}

.log-in-box .log-in-title h6 {
  color: rgba(var(--content-color), 1);
  margin-bottom: 0;
}

/* The "Don't have an account? Sign Up" row under the form. */
.log-in-box .sign-up-box {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.log-in-box .sign-up-box p {
  margin: 0;
}

.log-in-box .sign-up-box a {
  color: rgba(var(--theme-default), 1);
  font-weight: 500;
}

/* An empty .other-log-in is the template's plain divider above that row. */
.log-in-box .other-log-in:empty {
  background: rgba(var(--light-border), 1);
  display: block;
  height: 1px;
  margin: 22px 0 16px;
}

.log-in-box .woocommerce-error,
.log-in-box .woocommerce-message,
.log-in-box .woocommerce-info {
  margin-bottom: 18px;
}

/* --- Review rating input -------------------------------------------------
   Radio buttons laid out right-to-left so :checked ~ label fills the stars
   before it, giving a normal left-to-right star picker. */
.rw-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
}

.rw-stars input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.rw-stars label {
  color: rgba(var(--light-border, 222, 222, 222), 1);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  margin: 0;
  transition: color 0.15s ease-in-out;
}

.rw-stars label:hover,
.rw-stars label:hover ~ label,
.rw-stars input:checked ~ label {
  color: #f0a500;
}

.rw-stars input:focus-visible + label {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --- Add to cart form ----------------------------------------------------
   The theme's button markup sits inside a <form>, which Bootstrap's reset
   leaves with a bottom margin the design does not allow for. */
.product-detail-box .product-option form.cart {
  margin: 0;
}

/* --- WooCommerce notices -------------------------------------------------
   The template ships no alert design, so these are built here. The markup
   comes from woocommerce/notices/*.php: an icon chip beside the message, one
   card whether it carries one message or several. They also surface outside
   .woocommerce-notices-wrapper — the account pages print them straight into
   the panel — so the classes are matched directly. */
.rw-notice,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  align-items: flex-start;
  background: rgba(var(--box-background), 1);
  border: 1px solid rgba(var(--light-border), 1);
  border-left: 3px solid rgba(var(--theme-default), 1);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  gap: 12px;
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 18px;
}

/* The error notice is a <ul>; each <li> is one message inside the same card. */
.woocommerce-error {
  flex-direction: column;
  gap: 8px;
}

.woocommerce-error li {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
}

.rw-notice__icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  height: 22px;
  justify-content: center;
  margin-top: 1px;
  width: 22px;
}

.rw-notice__text {
  flex: 1 1 auto;
  min-width: 0;
}

.rw-notice__text a:not(.button) {
  font-weight: 500;
  text-decoration: underline;
}

/* A notice carrying several lines (the contact form lists its validation
   errors) keeps them as a list inside the same card. */
.rw-notice__text ul {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
}

.rw-notice__text ul li {
  list-style: inherit;
}

.rw-notice--success {
  border-left-color: #2e7d32;
}

.rw-notice--success .rw-notice__icon {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
}

.rw-notice--error {
  border-left-color: #c62828;
}

.rw-notice--error .rw-notice__icon {
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
}

.rw-notice--info {
  border-left-color: rgba(var(--theme-default), 1);
}

.rw-notice--info .rw-notice__icon {
  background: rgba(var(--theme-default), 0.14);
  color: rgba(var(--theme-default), 1);
}

/* WooCommerce drops a "View cart" / "Undo" button into some notices. */
/* WooCommerce puts the button inside the message text, so it lays out inline
   rather than as a flex item of the card. */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  background: rgba(var(--theme-default), 1);
  border-radius: 6px;
  color: rgba(var(--white), 1);
  display: inline-block;
  font-size: 14px;
  margin-left: 8px;
  padding: 6px 16px;
  text-decoration: none;
  white-space: nowrap;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
  color: rgba(var(--white), 1);
  opacity: 0.9;
}

.woocommerce-notices-wrapper:empty {
  display: none;
}

/* --- Screen-reader-only text ---------------------------------------------
   WordPress and WooCommerce label several controls with .screen-reader-text.
   The template has no rule for it and the theme dequeues WooCommerce's own
   stylesheets, so those labels were rendering at full size — on checkout one
   pushed the page 75px wider than the viewport. This is WordPress's standard
   clip pattern. */
.screen-reader-text {
  /* !important because the template sizes labels by their container, which is
     more specific than this utility class. */
  border: 0 !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap;
  width: 1px !important;
}

.screen-reader-text:focus {
  background: rgba(var(--white), 1);
  clip-path: none;
  color: rgba(var(--black), 1);
  height: auto;
  left: 8px;
  padding: 12px 22px;
  top: 8px;
  width: auto;
  z-index: 100000;
}

/* --- Checkout order summary ----------------------------------------------
   The template's row is a flex line of image / name / price with nothing
   telling the middle column to take the slack, so a long product name gets
   squeezed to its shrink width — in the sidebar that was 69px, one word per
   line. Give the name the free space and keep the price on one line. */
.cart-listing > ul li img {
  border-radius: 4px;
  flex: 0 0 auto;
  height: 70px;
  object-fit: cover;
  width: 70px;
}

.cart-listing > ul li > div {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-listing > ul li > div h6 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: break-word;
}

.cart-listing > ul li > p {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- Shipping line in the totals panels ----------------------------------
   woocommerce/cart/cart-shipping.php renders the same "<p>label</p>
   <span>amount</span>" row the rest of the panel uses, so it only needs the
   radio variant (two or more rates) and the free-shipping hint dressed. */
.woocommerce-shipping-totals p {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 0;
}

.woocommerce-shipping-totals input[type="radio"] {
  accent-color: rgba(var(--theme-default), 1);
  flex: 0 0 auto;
  margin: 0;
}

.woocommerce-shipping-totals label {
  cursor: pointer;
  margin: 0;
}

.rw-shipping-hint {
  color: rgba(var(--light-color), 1);
  display: block !important;
  font-size: 13px;
  padding-top: 0 !important;
}

.rw-shipping-hint p {
  margin: 0;
}

/* --- Notice focus ring ---------------------------------------------------
   WooCommerce gives the first notice tabindex="-1" and focuses it half a
   second after it appears, so a screen reader announces it. The browser then
   paints its default focus ring — a black box round the card that clears the
   moment you click elsewhere. Drop it for that programmatic focus, and keep a
   proper ring for anyone who actually tabs to the notice: :focus-visible only
   matches when the focus came from the keyboard. */
.rw-notice:focus,
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus {
  outline: none;
}

.rw-notice:focus-visible,
.woocommerce-message:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible {
  outline: 2px solid rgba(var(--theme-default), 1);
  outline-offset: 2px;
}

/* --- Checkout address form -----------------------------------------------
   WooCommerce tags its rows form-row-first / form-row-last / form-row-wide and
   lays them out in woocommerce.css, which this theme dequeues — so every field
   was stacking full width and the billing panel ran to ten tall rows. A grid
   reads the same classes, and inc/checkout.php pairs up the short fields. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid;
  gap: 0 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row {
  grid-column: 1 / -1;
  min-width: 0;
}

.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-shipping-fields__field-wrapper > .form-row-first {
  grid-column: 1;
}

.woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-shipping-fields__field-wrapper > .form-row-last {
  grid-column: 2;
}

/* WooCommerce marks only first/last name as a pair and makes the rest full
   width, leaving a single tall column. These are short enough to share a line.
   Matched by id because wc-address-i18n.js rewrites the form-row-* classes to
   the selected country's locale on every change, so a class set in PHP does
   not survive. "span 1" rather than a fixed column so that a field the locale
   hides (some countries have no postcode) closes the gap instead of leaving
   one. */
#billing_state_field,
#billing_postcode_field,
#billing_phone_field,
#billing_email_field,
#shipping_state_field,
#shipping_postcode_field {
  grid-column: span 1;
}

/* One column once there is no room for two. */
@media (max-width: 575px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-shipping-fields__field-wrapper > .form-row {
    grid-column: 1;
  }
}

/* --- Product card images -------------------------------------------------
   The card no longer goes through .bg-img / .bg-size, so the ratio box and the
   fit are set here instead. 3/4 is the shape of the product photography and of
   woocommerce_thumbnail (inc/woo.php), so object-fit has nothing left to crop —
   the whole frame shows. aspect-ratio also reserves the row height before the
   image arrives, so lazy-loaded cards do not shift the grid as they land. */
.product-box-3 .product-image {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.product-box-3 .product-image .pro-first,
.product-box-3 .product-image .pro-sec {
  aspect-ratio: 3 / 4;
  display: block;
  width: 100%;
}

.product-box-3 .product-image .rw-card-img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

/* --- Product gallery -----------------------------------------------------
   The main slide keeps the whole photograph. "contain" rather than "cover":
   on the product page a shopper is looking at the garment, so nothing is
   trimmed to make the box tidy — a taller shot simply sits inside the 3:4
   frame instead of losing its hem. */
.product-slider-thumb .rw-gallery .swiper-slide {
  aspect-ratio: 3 / 4;
  background-color: rgba(var(--box-background), 1);
  border-radius: 6px;
  overflow: hidden;
}

.product-slider-thumb .rw-gallery-img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* The thumbnail strip beside it. */
.product-slider-img .swiper-slide img {
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  display: block;
  object-fit: cover;
  width: 100%;
}

/* The search modal's suggestions use the same card image treatment. */
.product-box-6 .product-image {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
}

.product-box-6 .product-image a {
  display: block;
  height: 100%;
  width: 100%;
}

.product-box-6 .product-image .rw-card-img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* --- Sticky header -------------------------------------------------------
   The cart drawer and the menu both live up here, so having to scroll back to
   the top to reach them was a real cost on a long collection page.

   position: sticky rather than fixed: the header keeps its place in the flow,
   so nothing below it jumps up by the header's height when it engages. */
header {
  /* The template header inherits the page background, which is fine while it
     sits in the flow but means the content scrolls straight through it once it
     is sticky. It needs an opaque background of its own. */
  background-color: rgba(var(--light-white), 1);
  position: sticky;
  top: 0;
  z-index: 9;
}

/* Bootstrap's offcanvas (1045) and modal (1055) must still cover the header,
   and .tap-top sits above the page too — so 9 is deliberately low. */

/* Once the page has moved, the announcement bar folds away and the row tightens
   up. It is a marketing line, not navigation; the logo, search and cart are
   what need to stay reachable. */
header.is-stuck {
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.07);
}

header.is-stuck .top_header {
  display: none;
}

header.is-stuck .header-1 {
  padding-bottom: 4px;
  padding-top: 4px;
}

header,
header .header-1 {
  transition: padding 0.2s ease, box-shadow 0.2s ease;
}

/* The admin bar is fixed over the top of the page for logged-in users. */
body.admin-bar header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
}

/* Phones already hide the announcement bar, so the header has nothing to fold
   away and is compact to begin with — tightening it further only made it
   taller than the row it replaced. */
@media (max-width: 1200px) {
  header.is-stuck .header-1 {
    padding-bottom: 0;
    padding-top: 0;
  }
}

/* --- Page title ----------------------------------------------------------
   The title in the breadcrumb banner is an <h1> now: every page except the
   homepage had no H1 at all, which leaves a crawler guessing what the page is
   about. It has to keep looking exactly like the <h4> it replaced, so these
   mirror .heading-banner h4 from the template. */
.heading-banner h1 {
  font-size: calc(16.4px + 0.5vw);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0;
  text-transform: capitalize;
}

@media (max-width: 767px) {
  .heading-banner h1 {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
  }
}

/* --- Logo size -----------------------------------------------------------
   The template sizes both logos at 130px, which suited its own short
   "Katie" mark. RaniWear is a longer wordmark with a second line under it,
   so at 130px the "ETHNIC WEAR" row was too small to read. */
/* Matches the template's own "header .header-1 .main-menu .brand-logo", which
   carries a type selector and so outranks a three-class selector. */
.brand-logo,
header .header-1 .main-menu .brand-logo {
  width: 168px;
}

.footer-logo a {
  width: 180px;
}

/* The header is tighter on phones, so the logo gives a little back — but
   still more than the 130px it had. */
@media (max-width: 575px) {
  .brand-logo,
  header .header-1 .main-menu .brand-logo {
    width: 146px;
  }
}

/* --- Currency symbol spacing ---------------------------------------------
   The template styles every <span> inside a price line as the discount badge
   (gold pill, margin 0 4px, padding 2px 8px). WooCommerce nests its currency
   symbol in a span of its own inside the amount, so the symbol picked the
   badge spacing up too and sat 12px away from its own digits — "₹    3,299".
   The pill stays on the amount; only the nested symbol is reset. */
.product-box-3 .product-detail p span.woocommerce-Price-currencySymbol,
.product-box-6 .product-detail p span.woocommerce-Price-currencySymbol {
  background: none;
  margin: 0;
  padding: 0;
}

/* The struck-through original price is a <del>, and the template colours it
   muted grey — but WooCommerce puts the amount in a span inside it, which
   picked up the gold discount-badge background. Three gold blocks in a row
   read as three prices; the old price should recede, not compete. */
.product-box-3 .product-detail p del .woocommerce-Price-amount,
.product-box-6 .product-detail p del .woocommerce-Price-amount {
  background: none;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* --- Rich text (product description, page body) --------------------------
   The template resets lists and paragraphs hard for its own navigation
   markup — li becomes inline-block, ul loses its indent, p loses its bottom
   margin. Anything written in the editor then renders as one run-on block:
   a bulleted spec list came out as a single wrapped line.

   .rw-rte puts normal document styling back, scoped so the template's own
   lists are untouched. */
.rw-rte p {
  line-height: 1.7;
  margin-bottom: 16px;
}

.rw-rte p:last-child {
  margin-bottom: 0;
}

.rw-rte ul,
.rw-rte ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.rw-rte ul {
  list-style: disc;
}

.rw-rte ol {
  list-style: decimal;
}

.rw-rte li {
  display: list-item;
  line-height: 1.7;
  margin-bottom: 7px;
}

.rw-rte li::marker {
  color: rgba(var(--theme-default), 1);
}

.rw-rte h2,
.rw-rte h3,
.rw-rte h4 {
  font-weight: 500;
  line-height: 1.3;
  margin: 26px 0 12px;
}

.rw-rte h2 {
  font-size: calc(16.4px + 0.5vw);
}

.rw-rte h3 {
  font-size: calc(15.2px + 0.3vw);
}

.rw-rte h4 {
  font-size: calc(14.6px + 0.2vw);
}

.rw-rte > :first-child {
  margin-top: 0;
}

.rw-rte strong,
.rw-rte b {
  font-weight: 600;
}

.rw-rte a {
  color: rgba(var(--theme-default), 1);
  text-decoration: underline;
}

/* --- Product video -------------------------------------------------------
   The clip is the last slide in the gallery, so it has to sit in the same
   3:4 frame as the photographs or the swiper height jumps when you reach it.
   The video itself is 9:16, so it letterboxes inside that frame rather than
   being cropped. */
.product-slider-thumb .rw-gallery .swiper-slide .rw-gallery-video {
  background: #000;
  border-radius: 6px;
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* The thumbnail that opens it, with a play badge so it reads as a video. */
.product-slider-img .rw-video-thumb {
  aspect-ratio: 3 / 4;
  background: rgba(var(--box-background), 1);
  border-radius: 4px;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.product-slider-img .rw-video-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-slider-img .rw-video-thumb i {
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 11px;
  height: 28px;
  justify-content: center;
  left: 50%;
  padding-left: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
}

/* --- Variable product: WooCommerce's variation form ----------------------
   The theme dequeues WooCommerce's own stylesheets, so the dropdown it prints
   for a product with options arrived unstyled. These bring it in line with
   the rest of the product summary. */
.woocommerce-variation-form-wrapper .variations {
  border: 0;
  margin: 0 0 18px;
  width: 100%;
}

.woocommerce-variation-form-wrapper .variations th,
.woocommerce-variation-form-wrapper .variations td {
  display: block;
  padding: 0;
  text-align: left;
  width: 100%;
}

.woocommerce-variation-form-wrapper .variations th.label label {
  color: rgba(var(--theme-font-color), 1);
  display: block;
  font-size: calc(14.6px + 0.125vw);
  font-weight: 500;
  margin-bottom: 8px;
}

.woocommerce-variation-form-wrapper .variations select {
  appearance: none;
  background-color: rgba(var(--light-white), 1);
  /* the same chevron the theme's own selects use */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23767676'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 14px;
  border: 1px solid rgba(var(--light-border), 1);
  border-radius: 7px;
  color: rgba(var(--theme-font-color), 1);
  font-size: 14px;
  padding: 11px 40px 11px 14px;
  width: 100%;
}

.woocommerce-variation-form-wrapper .variations select:focus {
  border-color: rgba(var(--theme-default), 1);
  box-shadow: 0 0 0 3px rgba(var(--theme-default), 0.14);
  outline: none;
}

.woocommerce-variation-form-wrapper .reset_variations {
  color: rgba(var(--light-color), 1);
  display: inline-block;
  font-size: 13px;
  margin-top: 8px;
  text-decoration: underline;
}

/* Price and stock for the chosen option. */
.woocommerce-variation-form-wrapper .woocommerce-variation-price {
  font-size: calc(16px + 0.25vw);
  font-weight: 600;
  margin-bottom: 12px;
}

.woocommerce-variation-form-wrapper .woocommerce-variation-availability p {
  margin: 0 0 12px;
}

.woocommerce-variation-form-wrapper .woocommerce-variation-add-to-cart {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.woocommerce-variation-form-wrapper .woocommerce-variation-add-to-cart .quantity {
  flex: 0 0 auto;
}

.woocommerce-variation-form-wrapper .single_add_to_cart_button {
  background-color: rgba(var(--dark-color), 1);
  border-radius: 4px;
  color: rgba(var(--white), 1);
  flex: 1 1 auto;
  padding: 11px 24px;
}

.woocommerce-variation-form-wrapper .single_add_to_cart_button.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}