/*
 Theme Name:   ShoppersStop
 Theme URI:    https://sqexpertise.com
 Description:  Theme for ShoppersStop.pk
 Author:       Salman Qadeer
 Author URI:   https://sqexpertise.com
 Template:     generatepress
 Version:      0.1
*/

/* -----------------------------------------------------------------------------
RG FAQs / Accordion (V1.2 — SAME DESIGN, fixes gap visibility + notes on open)
- Keeps your original container look (border/background/radius)
- Visible 2–4px gap between items (without changing colors)
- More left/right padding on answers
- Slightly smaller question text + slightly larger answer text
IMPORTANT: If items are opened by default, remove the "open" attribute from <details> in HTML.
----------------------------------------------------------------------------- */
.rg-faqs-margin{
     margin-bottom: 10px;
}
.rg-faqs{
  border: 1px solid var(--base-2);
  background: var(--base);
  border-radius: 16px;
  padding: 4px; /* same as gap */
  overflow: hidden;

  /* makes gaps visible inside the container */
  padding: 4px; /* gap space */
}

/* Each item sits on same background; gap is the container padding showing through */
.rg-faqs details{
  /* restore original divider feel */
  border-top: 1px solid var(--base-2);

  /* keep same look */
  background: var(--base);

  /* visible gap between items */
  margin-bottom: 4px;
}
.rg-faqs details:last-child{
  margin-bottom: 10;
}

/* first item should not have top divider (same as your original) */
.rg-faqs details:first-child{
  border-top: 0;
}

/* Question row (slightly smaller ONLY) */
.rg-faqs summary{
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: clamp(12px, 1.6vw, 16px);
  color: var(--contrast);

  /* slightly smaller than your original */
  font-size: clamp(1.00rem, 0.95rem + 0.22vw, 1.12rem);

  line-height: 1.25;
  user-select: none;

  transition: background 160ms ease, color 160ms ease;
}

.rg-faqs summary::-webkit-details-marker{ display:none; }

/* Left chevron pill (UNCHANGED design) */
.rg-faqs summary::before{
  content: "›";
  display: inline-grid;
  place-items: center;

  width: 28px;
  height: 28px;
  border-radius: 10px;

  background: var(--base-1);
  border: 1px solid var(--base-2);
  color: var(--contrast);

  font-size: 18px;
  line-height: 1;

  transform: rotate(0deg);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Hover (UNCHANGED) */
.rg-faqs summary:hover{
  background: var(--base-1);
}

/* Open state (UNCHANGED colors) */
.rg-faqs details[open] > summary{
  background: var(--contrast-2);
  color: var(--base);
}
.rg-faqs details[open] > summary::before{
  transform: rotate(90deg);
  background: var(--contrast-1);
  border-color: var(--contrast-1);
  color: var(--base);
}

/* Focus (keyboard) (UNCHANGED) */
.rg-faqs summary:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* Answer: add side padding + slightly bigger text */
.rg-faqs details > div{
  padding: 0 clamp(16px, 2.2vw, 22px) clamp(12px, 1.6vw, 16px);
  color: var(--contrast-1);
  line-height: 1.7;

  /* slightly larger than your original */
  /*font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.10rem);*/
  font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.10rem);
}

.rg-faqs details > div p{ margin: 10px 0 0; }
.rg-faqs details > div a{
  color: var(--accent);
  text-decoration: none;
}
.rg-faqs details > div a:hover{ text-decoration: underline; }

/* Small screens */
@media (max-width: 420px){
  .rg-faqs{ padding: 3px; }
  .rg-faqs details{ margin-bottom: 3px; }
  .rg-faqs summary::before{
    width: 26px;
    height: 26px;
    border-radius: 9px;
  }
}

/*----------------------------------------------------------------------------*/
                            /*ActionBar-SCB*/
/*----------------------------------------------------------------------------*/
.ActionBar-SCB{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;

	display: flex;
	align-items: stretch;
	justify-content: space-around;
	gap: 0;

	width: 100%;
	min-height: 64px;
	background: var(--base);
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}


/*----------------------------------------------------------------------------*/
                /* Fluid Typography Scale */
                /* typography classes variables from customizing typgraphy */
/*----------------------------------------------------------------------------*/

.ff.body {
	font-family: var(--gp-font--body);
}
.ff-heading {
	font-family: var(--gp-font-heading);
}

/* .fs-h1 is a class, we can use the same size for any text using this class */

h1, .fs-h1 {
	font-size: clamp(3rem, 2.9086rem + 0.3655vw, 3.201rem);
		font-family: var(--gp-font-heading);
}

h2, .fs-h2 {
	font-size: clamp(2.25rem, 2.1815rem + 0.2741vw, 2.4008rem);
		font-family: var(--gp-font-heading);
}

h3, .fs-h3 {
	font-size: clamp(1.875rem, 1.8179rem + 0.2284vw, 2.0006rem);
		font-family: var(--gp-font-heading);
}

h4, .fs-h4 {
	font-size: clamp(1.5rem, 1.4543rem + 0.1827vw, 1.6005rem);
		font-family: var(--gp-font-heading);
}

h5, .fs-h5 {
	font-size: clamp(1.25rem, 1.2119rem + 0.1523vw, 1.3338rem);
		font-family: var(--gp-font-heading);
}

h6, .fs-h6 {
	font-size: clamp(1.125rem, 1.0907rem + 0.137vw, 1.2004rem);
		font-family: var(--gp-font-heading);
}

p, .fs-p {
	font-size: clamp(0.9372rem, 0.9087rem + 0.1142vw, 1rem);
		font-family: var(--gp-font--body); 
}